Commit b4d09980 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Switching between Users and Topics. 

Created HeaderMenu class that provides the UI for switching.
Allow only user or topic to be selected (not both together).
parent b96520a4

template/app/view/comments/HeaderMenu.js

0 → 100644
+34 −0
Original line number Diff line number Diff line 
/**

 * Container for recent comments and top users.

 */

Ext.define('Docs.view.comments.HeaderMenu', {

    extend: 'Ext.container.Container',

    alias: 'widget.commentsHeaderMenu',

    componentCls: "comments-header-menu",

    html: '<h1><a href="#" class="users selected">Users</a> <a href="#" class="targets">Topics</a></h1>',



    /**

     * @event select

     * Fired when item in header menu selected.

     * @param {String} name Either "users" or "targets".

     */



    afterRender: function() {

        this.callParent(arguments);



        var users = this.getEl().down("a.users");

        var targets = this.getEl().down("a.targets");



        users.on("click", function(event, target) {

            users.addCls("selected");

            targets.removeCls("selected");

            this.fireEvent("select", "users");

        }, this, {preventDefault: true});



        targets.on("click", function(event, target) {

            targets.addCls("selected");

            users.removeCls("selected");

            this.fireEvent("select", "targets");

        }, this, {preventDefault: true});

    }

});

template/app/view/comments/Index.js

+38 −2
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ Ext.define('Docs.view.comments.Index', { 
    mixins: ['Docs.view.Scrolling'],

    requires: [

        'Docs.view.comments.List',

        'Docs.view.comments.HeaderMenu',

        'Docs.view.comments.Users',

        'Docs.view.comments.Targets'

    ],
@@ -22,11 +23,46 @@ Ext.define('Docs.view.comments.Index', { 
        },

        {

            region: "east",

            xtype: "commentstargets",

            itemId: "cardPanel",

            layout: "border",

            width: 300,

            margin: '0 0 0 20'

            margin: '0 0 0 20',

            layout: "card",

            dockedItems: [

                {

                    xtype: 'commentsHeaderMenu',

                    dock: "top",

                    height: 35

                }

            ],

            items: [

                {

                    xtype: "commentsusers"

                },

                {

                    xtype: "commentstargets"

                }

            ]

        }

    ],



    initComponent: function() {

        this.callParent(arguments);



        var cardPanel = this.down("#cardPanel");

        var users = this.down("commentsusers");

        var targets = this.down("commentstargets");

        this.down("commentsHeaderMenu").on("select", function(item) {

            if (item === "users") {

                targets.deselectAll();

                cardPanel.getLayout().setActiveItem(users);

            }

            else {

                users.deselectAll();

                cardPanel.getLayout().setActiveItem(targets);

            }

        }, this);

    },



    /**

     * Returns tab config for comments page.

template/app/view/comments/Targets.js

+7 −9
Original line number Diff line number Diff line
@@ -7,15 +7,6 @@ Ext.define('Docs.view.comments.Targets', { 
    componentCls: "comments-targets",

    requires: ["Docs.Comments"],



    dockedItems: [

        {

            xtype: 'container',

            dock: 'top',

            height: 35,

            html: '<h1>Topics</h1>'

        }

    ],



    layout: "border",



    /**
@@ -82,6 +73,13 @@ Ext.define('Docs.view.comments.Targets', { 
        this.fetchTargets();

    },



    /**

     * Clears the selection.

     */

    deselectAll: function() {

        this.list.getSelectionModel().deselectAll();

    },



    onSelect: function(view, target) {

        this.selectedTarget = target;

        this.fireEvent("select", target);

template/app/view/comments/Users.js

+7 −9
Original line number Diff line number Diff line
@@ -8,15 +8,6 @@ Ext.define('Docs.view.comments.Users', { 
    componentCls: "comments-users",

    requires: ["Docs.Comments"],



    dockedItems: [

        {

            xtype: 'container',

            dock: 'top',

            height: 35,

            html: '<h1>Users</h1>'

        }

    ],



    layout: "border",



    /**
@@ -91,6 +82,13 @@ Ext.define('Docs.view.comments.Users', { 
        }

    },



    /**

     * Clears the selection.

     */

    deselectAll: function() {

        this.usersList.getSelectionModel().deselectAll();

    },



    onSelect: function(view, user) {

        this.selectedUser = user;

        this.fireEvent("select", user.get("username"));

template/resources/sass/_comments.scss

+12 −0
Original line number Diff line number Diff line
@@ -298,6 +298,18 @@ $moderator-color-light: #94b773; 
  background: #fff url(../images/ajax-loader.gif) no-repeat center; }





// Menu for switching between Users and Topics



.comments-header-menu {

  h1 a {

    margin-right: 1em;

    color: gray; }

  h1 a:hover {

    @include opacity(0.7); }

  h1 a.selected {

    color: #66ab16; } }





// Table with top-voted users



.comments-users .x-panel-body .users-list {