Commit b1682af4 authored by Nick Poulden's avatar Nick Poulden
Browse files

'Highlight' relevant overview tabs

parent e11e2eda

template/app/controller/Tabs.js

+7 −5
Original line number Diff line number Diff line
@@ -119,11 +119,13 @@ Ext.define('Docs.controller.Tabs', { 
                cmp.justClosed = false;

                return;

            }

            Ext.Array.each(Ext.get(el).up('.doctabs').query('.doctab'), function(t) {

                Ext.get(t).removeCls('active');

            });

            Ext.get(el).addCls('active');

            window.location = Ext.get(el).down('.tabUrl').getAttribute('href');

            var url = Ext.get(el).down('.tabUrl').getAttribute('href');

            Ext.getCmp('doctabs').activateTab(url);

            // Ext.Array.each(Ext.get(el).up('.doctabs').query('.doctab'), function(t) {

            //     Ext.get(t).removeCls('active');

            // });

            // Ext.get(el).addCls('active');

            // window.location = Ext.get(el).down('.tabUrl').getAttribute('href');

        }, this, {

            delegate: '.doctab'

        });

template/app/view/Tabs.js

+14 −6
Original line number Diff line number Diff line
@@ -14,7 +14,7 @@ Ext.define('Docs.view.Tabs', { 
    initComponent: function() {

        var tpl = new Ext.XTemplate(

            '<tpl for=".">',

                '<div class="doctab {cls}{active}">',

                '<div class="doctab overview {cls}{active}">',

                    '<div class="l"></div>',

                    '<div class="m"><a class="tabUrl" href="{href}">&nbsp;</a></div>',

                    '<div class="r"></div>',
@@ -24,11 +24,11 @@ Ext.define('Docs.view.Tabs', { 
        );



        this.html = tpl.applyTemplate([

            { cls: 'home',   href: '#' },

            { cls: 'api',    href: '#/api' },

            { cls: 'index',   href: '#' },

            { cls: 'classes',    href: '#/api' },

            { cls: 'guides', href: '#/guide' },

            { cls: 'videos', href: '#/videos' },

            { cls: 'themes', href: '#/examples' }

            { cls: 'examples', href: '#/examples' }

        ]);



        this.callParent();
@@ -85,12 +85,20 @@ Ext.define('Docs.view.Tabs', { 
    activateTab: function(url) {

        this.activeTab = Ext.Array.indexOf(this.openTabs, url);

        Ext.Array.each(Ext.query('.doctab a[class=tabUrl]'), function(d) {

            Ext.get(d).up('.doctab').removeCls('active');

            Ext.get(d).up('.doctab').removeCls(['active', 'highlight']);

        });

        var activeTab = Ext.query('.doctab a[href="' + url + '"]')[0];

        if (activeTab) {

            Ext.get(activeTab).up('.doctab').addCls('active');

            var docTab = Ext.get(activeTab).up('.doctab');

            docTab.addCls('active');

            if (!docTab.hasCls('overview')) {

                var overviewTab = Ext.query('.doctab.' + this.getControllerName(url).toLowerCase());

                if (overviewTab && overviewTab[0]) {

                    Ext.get(overviewTab[0]).addCls('highlight');

                }

            }

        }

        window.location = url;

    },



    /**

template/resources/images/tab-c.png

0 → 100644
+1.22 KiB
Loading image diff...

template/resources/sass/viewport.scss

+8 −8
Original line number Diff line number Diff line
@@ -885,25 +885,25 @@ a { 
      z-index: 5;

    }

  }

  .doctab.home .m a {

  .doctab.index .m a {

    background: url(../images/tab-icons.png) no-repeat 7px 1px;

    padding-left: 16px; padding-right: 6px; padding-bottom: 20px;

    padding-left: 16px; padding-right: 12px; padding-bottom: 20px;

  }

  .doctab.api .m a {

  .doctab.classes .m a {

    background: url(../images/tab-icons.png) no-repeat 8px -20px;

    padding-left: 16px; padding-right: 6px;

    padding-left: 16px; padding-right: 12px;

  }

  .doctab.videos .m a {

    background: url(../images/tab-icons.png) no-repeat 8px -38px;

    padding-left: 16px; padding-right: 6px;

    padding-left: 16px; padding-right: 12px;

  }

  .doctab.guides .m a {

    background: url(../images/tab-icons.png) no-repeat 9px -55px;

    padding-left: 16px; padding-right: 6px;

    padding-left: 16px; padding-right: 12px;

  }

  .doctab.themes .m a {

  .doctab.examples .m a {

    background: url(../images/tab-icons.png) no-repeat 7px -93px;

    padding-left: 16px; padding-right: 6px;

    padding-left: 16px; padding-right: 12px;

  }

}