Nicer class tree tabs (ab907b42) · Commits · extjs / jsduck

template/app/controller/Classes.js

+21 −0

Original line number	Diff line number	Diff line
		@@ -80,6 +80,27 @@ Ext.define('Docs.controller.Classes', {
		'classtree': {
		urlclick: function(url, event) {
		this.handleUrlClick(url, event, this.getTree());
		},
		afterrender: function(cmp) {
		cmp.el.addListener('click', function(e, el) {
		var clicked = Ext.get(el),
		selected = Ext.query('.cls-group.selected');

		if (selected === clicked) {
		return false;
		}

		Ext.select('.cls-group').removeCls('selected');
		clicked.addCls('selected');

		if (clicked.hasCls('packages')) {
		this.getTree().setLogic(Docs.view.cls.PackageLogic);
		} else {
		this.getTree().setLogic(Docs.view.cls.InheritanceLogic);
		}
		}, this, {
		delegate: '.cls-group'
		});
		}
		},

+10 −23

Original line number	Diff line number	Diff line
		@@ -17,29 +17,16 @@ Ext.define('Docs.view.cls.Tree', {
		initComponent: function() {
		this.setLogic(Docs.view.cls.PackageLogic);

		this.buttons = [
		{
		xtype: 'button',
		text: 'By package',
		toggleGroup: 'logic',
		pressed: true,
		allowDepress: false,
		handler: function() {
		this.setLogic(Docs.view.cls.PackageLogic);
		},
		scope: this
		},
		{
		xtype: 'button',
		text: 'By inheritance',
		toggleGroup: 'logic',
		allowDepress: false,
		handler: function() {
		this.setLogic(Docs.view.cls.InheritanceLogic);
		},
		scope: this
		}
		];
		this.dockedItems = [{
		xtype: 'container',
		dock: 'bottom',
		cls: 'cls-grouping',
		html: [
		'<div class="cls-group packages selected">By Package</div>',
		// '<div class="cls-group categories">Categories</div>',
		'<div class="cls-group hierarchy">By Inheritance</div>',
		].join('')
		}];

		this.callParent();
		},

+25 −0

Original line number	Diff line number	Diff line
		@@ -1182,3 +1182,28 @@ a {
		.members .member { padding: 5px; }
		.members h3.members-title { padding: 5px; }
		}

		.cls-grouping {
		padding: 5px 0 2px 0;
		text-align: center;
		div {
		display: inline-block;
		color: #4d4d4d;
		font-size: 11px;
		font-weight: bold;
		float: left;
		margin: 0 3px;
		padding: 1px 13px 2px 13px;
		border: 1px solid transparent;
		cursor: pointer;
		&.selected {
		color: #fff;
		border: 1px solid #727a81;
		background-color: #646b72;
		@include vertical-gradient(#646b72, #8d949b);
		box-shadow: inset #5b6167 0 0 1px;
		@include border-radius(10px);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
		}
		}
		}