commit/galaxy-central: guerler: UI: Improve masthead, simplify code
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/a62c54ddbe2a/ Changeset: a62c54ddbe2a User: guerler Date: 2013-12-03 07:42:58 Summary: UI: Improve masthead, simplify code Affected #: 4 files diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c static/scripts/galaxy.masthead.js --- a/static/scripts/galaxy.masthead.js +++ b/static/scripts/galaxy.masthead.js @@ -14,20 +14,11 @@ // options options : null, - // item list - list : {}, - - // keeps track of the last element - itemLast: null, - - // counter - itemCounter: 0, - // background $background: null, - // flag indicating visibility of background - backgroundVisible: false, + // list + list: [], // initialize initialize : function(options) @@ -47,9 +38,7 @@ // assign background this.$background = $(this.el).find('#masthead-background'); - // loop through item specific unload functions - // and collect all there warning messages, regarding - // the user's attempt to unload the page + // loop through unload functions if the user attempts to unload the page var self = this; window.onbeforeunload = function() { @@ -68,7 +57,7 @@ // configure events events: { - 'click' : '_eventRefresh', + 'click' : '_click', 'mousedown' : function(e) { e.preventDefault() } }, @@ -84,32 +73,36 @@ return this._add(item, false); }, + // activate + highlight: function(id) + { + var current = $(this.el).find('#' + id + '> li'); + if (current) { + current.addClass('active'); + } + }, + // adds a new item to the masthead _add : function(item, append) { - var $loc = $(this.el).find('#' + item.mastheadLocation); + var $loc = $(this.el).find('#' + item.location); if ($loc) { // create frame for new item - var itemId = 'masthead-item-' + this.itemCounter++; - var $itemNew = $(item.el); + var $current = $(item.el); - // configure id and class in order to mark new items - $itemNew.attr('id', itemId); - $itemNew.addClass('masthead-item'); + // configure class in order to mark new items + $current.addClass('masthead-item'); // append to masthead if (append) { - $loc.append($itemNew); + $loc.append($current); } else { - $loc.prepend($itemNew); + $loc.prepend($current); } // add to list - this.list[itemId] = item; - - // return item id - return itemId; + this.list.push(item); } // location not found @@ -117,63 +110,27 @@ }, // handle click event - _eventRefresh: function(e) + _click: function(e) { - // identify current item - var itemCurrent = $(e.target).closest('.masthead-item'); - - // get identifier - if (itemCurrent.length) - itemCurrent = itemCurrent.attr('id'); - - // check last item - if (this.itemLast && this.itemLast != itemCurrent) - { - var it = this.list[this.itemLast]; - if (it) { - if (it.mastheadReset) { - it.mastheadReset(); - } - } + // close all popups + var $all = $(this.el).find('.popup'); + if ($all) { + $all.hide(); } - // check if current item is in active state - var useBackground = false; - if (itemCurrent) - { - var it = this.list[itemCurrent]; - if (it) { - if (it.mastheadReset) { - if (this.itemLast == itemCurrent) { - useBackground = this.backgroundVisible ? false : true; - } else { - useBackground = true; - } - } - } - } - - // decide wether to show/hide background - if (useBackground) { + // open current item + var $current = $(e.target).closest('.masthead-item').find('.popup'); + if ($(e.target).hasClass('head')) { + $current.show(); this.$background.show(); } else { this.$background.hide(); } - - // backup - this.backgroundVisible = useBackground; - this.itemLast = itemCurrent; }, /* HTML TEMPLATES */ - - // template item - _templateItem: function(id) - { - return '<div id="' + id + '" class="masthead-item"></div>'; - }, // fill template _template: function(options) @@ -202,9 +159,9 @@ // icon options options: { - id : "galaxy-icon", - icon : "fa-cog", - tooltip : "galaxy-icon", + id : '', + icon : 'fa-cog', + tooltip : '', with_number : false, on_click : function() { alert ('clicked') }, on_unload : null, @@ -212,7 +169,7 @@ }, // location identifier for masthead class - mastheadLocation: 'iconbar', + location: 'iconbar', // initialize initialize: function (options) @@ -278,7 +235,7 @@ // fill template icon _template: function (options) { - var tmpl = '<div id=' + options.id + ' class="symbol">' + + var tmpl = '<div id="' + options.id + '" class="symbol">' + '<div class="icon fa fa-2x ' + options.icon + '"></div>'; if (options.with_number) tmpl+= '<div class="number"></div>'; @@ -296,7 +253,7 @@ options: { id : '', - title : 'Title', + title : '', target : '_parent', content : '', type : 'url', @@ -306,18 +263,15 @@ }, // location - mastheadLocation: 'navbar', + location: 'navbar', // optional sub menu $menu: null, - // flag if menu is visible - menuVisible: false, - // events events: { - 'click .head' : '_eventClickHead' + 'click .head' : '_head' }, // initialize @@ -352,7 +306,7 @@ }, // add menu item - addMenu: function (options) + add: function (options) { // menu option defaults var menuOptions = { @@ -382,7 +336,7 @@ $(this.el).find('.symbol').addClass('caret'); // update element link - this.$menu = $(this.el).find('.menu'); + this.$menu = $(this.el).find('.popup'); } // create @@ -397,9 +351,6 @@ { // prevent default e.preventDefault(); - - // check for menu options - self._hideMenu(); // no modifications if new tab is requested if (self.options.target === '_blank') @@ -414,42 +365,14 @@ this.$menu.append($(this._templateDivider())); }, - // add reset function called by masthead - mastheadReset: function() - { - this._hideMenu(); - }, - - // hide menu - _hideMenu: function() - { - if (this.$menu && this.menuVisible) - { - this.$menu.hide(); - this.menuVisible = false; - } - }, - // show menu on header click - _eventClickHead: function(e) + _head: function(e) { // prevent default e.preventDefault(); // check for menu options - if (this.$menu) - { - // show/hide menu - if (!this.menuVisible) - { - this.$menu.show(); - this.menuVisible = true; - } else { - this.$menu.hide(); - this.menuVisible = false; - } - } else { - // open new frame + if (!this.$menu) { Galaxy.frame.add(this.options); } }, @@ -463,7 +386,7 @@ // fill template header _templateMenu: function () { - return '<ul class="menu dropdown-menu"></ul>'; + return '<ul class="popup dropdown-menu"></ul>'; }, _templateDivider: function() @@ -475,7 +398,7 @@ _template: function (options) { // start template - var tmpl = '<ul class="nav navbar-nav" border="0" cellspacing="0">' + + var tmpl = '<ul id="' + options.id + '" class="nav navbar-nav" border="0" cellspacing="0">' + '<li class="root dropdown" style="">' + '<a class="head dropdown-toggle" data-toggle="dropdown" target="' + options.target + '" href="' + options.content + '">' + options.title + '<b class="symbol"></b>' + diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c static/scripts/galaxy.menu.js --- a/static/scripts/galaxy.menu.js +++ b/static/scripts/galaxy.menu.js @@ -29,6 +29,7 @@ // Analyze data tab. // var tab_analysis = new mod_masthead.GalaxyMastheadTab({ + id : "analysis", title : "Analyze Data", content : "root/index" }); @@ -38,6 +39,7 @@ // Workflow tab. // var tab_workflow = new mod_masthead.GalaxyMastheadTab({ + id : "workflow", title : "Workflow", content : "workflow" @@ -48,33 +50,34 @@ // 'Shared Items' or Libraries tab. // var tab_shared = new mod_masthead.GalaxyMastheadTab({ + id : "shared", title : "Shared Data", content : "library/index" }); - tab_shared.addMenu({ + tab_shared.add({ title : "Data Libraries", content : "library/index", divider : true }); - tab_shared.addMenu({ + tab_shared.add({ title : "Published Histories", content : "history/list_published" }); - tab_shared.addMenu({ + tab_shared.add({ title : "Published Workflows", content : "workflow/list_published" }); - tab_shared.addMenu({ + tab_shared.add({ title : "Published Visualizations", content : "visualization/list_published" }); - tab_shared.addMenu({ + tab_shared.add({ title : "Published Pages", content : "page/list_published" }); @@ -87,17 +90,18 @@ if (this.options.user.requests) { var tab_lab = new mod_masthead.GalaxyMastheadTab({ + id : "lab", title : "Lab" }); - tab_lab.addMenu({ + tab_lab.add({ title : "Sequencing Requests", content : "requests/index" }); - tab_lab.addMenu({ + tab_lab.add({ title : "Find Samples", content : "requests/find_samples_index" }); - tab_lab.addMenu({ + tab_lab.add({ title : "Help", content : this.options.lims_doc_url }); @@ -108,16 +112,16 @@ // Visualization tab. // var tab_visualization = new mod_masthead.GalaxyMastheadTab({ - + id : "visualization", title : "Visualization", content : "visualization/list" }); - tab_visualization.addMenu({ + tab_visualization.add({ title : "New Track Browser", content : "visualization/trackster", target : "_frame" }); - tab_visualization.addMenu({ + tab_visualization.add({ title : "Saved Visualizations", content : "visualization/list", target : "_frame" @@ -130,10 +134,11 @@ if (this.options.enable_cloud_launch) { var tab_cloud = new mod_masthead.GalaxyMastheadTab({ + id : "cloud", title : "Cloud", content : "cloudlaunch/index" }); - tab_cloud.addMenu({ + tab_cloud.add({ title : "New Cloud Cluster", content : "cloudlaunch/index" }); @@ -146,6 +151,7 @@ if (this.options.is_admin_user) { var tab_admin = new mod_masthead.GalaxyMastheadTab({ + id : "admin", title : "Admin", content : "admin/index", extra_class : "admin-only" @@ -157,54 +163,55 @@ // Help tab. // var tab_help = new mod_masthead.GalaxyMastheadTab({ + id : "help", title : "Help" }); if (this.options.biostar_url) { - tab_help.addMenu({ + tab_help.add({ title : "Galaxy Q&A Site", content : this.options.biostar_url_redirect, target : "_blank" }); - tab_help.addMenu({ + tab_help.add({ title : "Ask a question", content : "biostar/biostar_question_redirect", target : "_blank" }); } - tab_help.addMenu({ + tab_help.add({ title : "Support", content : this.options.support_url, target : "_blank" }); - tab_help.addMenu({ + tab_help.add({ title : "Search", content : this.options.search_url, target : "_blank" }); - tab_help.addMenu({ + tab_help.add({ title : "Mailing Lists", content : this.options.mailing_lists, target : "_blank" }); - tab_help.addMenu({ + tab_help.add({ title : "Videos", content : this.options.screencasts_url, target : "_blank" }); - tab_help.addMenu({ + tab_help.add({ title : "Wiki", content : this.options.wiki_url, target : "_blank" }); - tab_help.addMenu({ + tab_help.add({ title : "How to Cite Galaxy", content : this.options.citation_url, target : "_blank" }); if (!this.options.terms_url) { - tab_help.addMenu({ + tab_help.add({ title : "Terms and Conditions", content : this.options.terms_url, target : "_blank" @@ -218,12 +225,13 @@ if (!this.options.user.valid) { var tab_user = new mod_masthead.GalaxyMastheadTab({ + id : "user", title : "User", extra_class : "loggedout-only" }); // login - tab_user.addMenu({ + tab_user.add({ title : "Login", content : "user/login", target : "galaxy_main" @@ -232,7 +240,7 @@ // register if (this.options.allow_user_creation) { - tab_user.addMenu({ + tab_user.add({ title : "Register", content : "user/create", target : "galaxy_main" @@ -243,37 +251,38 @@ this.masthead.append(tab_user); } else { var tab_user = new mod_masthead.GalaxyMastheadTab({ + id : "user", title : "User", extra_class : "loggedin-only" }); // show user logged in info - tab_user.addMenu({ + tab_user.add({ title : "Logged in as " + this.options.user.email }); // remote user if (this.options.use_remote_user && this.options.remote_user_logout_href) { - tab_user.addMenu({ + tab_user.add({ title : "Logout", content : this.options.remote_user_logout_href, target : "_top" }); } else { - tab_user.addMenu({ + tab_user.add({ title : "Preferences", content : "user?cntrller=user", target : "galaxy_main" }); - tab_user.addMenu({ + tab_user.add({ title : "Custom Builds", content : "user/dbkeys", target : "galaxy_main" }); - tab_user.addMenu({ + tab_user.add({ title : "Logout", content : "user/logout", target : "_top", @@ -282,23 +291,23 @@ } // default tabs - tab_user.addMenu({ + tab_user.add({ title : "Saved Histories", content : "history/list", target : "galaxy_main" }); - tab_user.addMenu({ + tab_user.add({ title : "Saved Datasets", content : "dataset/list", target : "galaxy_main" }); - tab_user.addMenu({ + tab_user.add({ title : "Saved Pages", content : "page/list", target : "_top" }); - tab_user.addMenu({ + tab_user.add({ title : "API Keys", content : "user/api_keys?cntrller=user", target : "galaxy_main" @@ -306,7 +315,7 @@ if (this.options.use_remote_user) { - tab_user.addMenu({ + tab_user.add({ title : "Public Name", content : "user/edit_username?cntrller=user", target : "galaxy_main" @@ -316,6 +325,10 @@ // add to masthead this.masthead.append(tab_user); } + + // identify active tab + if (this.options.active_view) + this.masthead.highlight(this.options.active_view); } }); diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c templates/webapps/galaxy/base_panels.mako --- a/templates/webapps/galaxy/base_panels.mako +++ b/templates/webapps/galaxy/base_panels.mako @@ -14,5 +14,7 @@ ## Masthead <%def name="masthead()"> - <% mod_masthead.load(); %> + <% + mod_masthead.load(self.active_view); + %></%def> \ No newline at end of file diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c templates/webapps/galaxy/galaxy.masthead.mako --- a/templates/webapps/galaxy/galaxy.masthead.mako +++ b/templates/webapps/galaxy/galaxy.masthead.mako @@ -28,7 +28,7 @@ </%def> ## masthead head generator -<%def name="load()"> +<%def name="load(active_view = None)"><% ## get configuration masthead_config = { @@ -51,7 +51,8 @@ 'allow_user_creation' : app.config.allow_user_creation, 'logo_url' : h.url_for(app.config.get( 'logo_url', '/')), 'is_admin_user' : trans.user and app.config.is_admin_user(trans.user), - + 'active_view' : active_view, + ## user details 'user' : { 'requests' : bool(trans.user and (trans.user.requests or trans.app.security_agent.get_accessible_request_types(trans, trans.user))), Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.
participants (1)
-
commits-noreply＠bitbucket.org