From a1ba71cb289f51dfc271408ff3577e14fb74338d Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Fri, 23 Jan 2015 13:12:49 +0100 Subject: [PATCH] SONAR-6041 update nav --- .../src/main/hbs/nav/nav-context-navbar.hbs | 71 ++-- .../src/main/hbs/nav/nav-global-navbar.hbs | 87 +++-- .../src/main/hbs/nav/nav-search-item.hbs | 14 +- .../src/main/hbs/nav/nav-settings-navbar.hbs | 75 ++++ .../main/js/common/handlebars-extensions.js | 9 + .../js/common/selectable-collection-view.js | 4 + server/sonar-web/src/main/js/nav/app.js | 26 +- .../src/main/js/nav/context-navbar-view.js | 6 +- .../src/main/js/nav/global-navbar-view.js | 14 +- .../sonar-web/src/main/js/nav/search-view.js | 12 +- .../src/main/js/nav/settings-navbar-view.js | 9 + .../src/main/less/components/dropdowns.less | 11 +- .../src/main/less/components/page.less | 2 +- server/sonar-web/src/main/less/navbar.less | 54 ++- server/sonar-web/src/main/less/style.less | 8 + server/sonar-web/src/main/less/ui.less | 41 ++- server/sonar-web/src/main/less/variables.less | 1 + .../app/views/components/index.html.erb | 2 - .../app/views/dashboard/_header.html.erb | 36 +- .../app/views/dashboard/no_dashboard.html.erb | 2 +- .../app/views/layouts/_layout.html.erb | 2 +- .../app/views/layouts/_navbar_conf.html.erb | 26 +- .../layouts/_navbar_conf_context.html.erb | 332 ++++++++---------- .../layouts/_navbar_conf_global.html.erb | 87 ++--- .../layouts/_navbar_conf_settings.html.erb | 121 +------ .../resources/org/sonar/l10n/core.properties | 1 + 26 files changed, 552 insertions(+), 501 deletions(-) create mode 100644 server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs create mode 100644 server/sonar-web/src/main/js/nav/settings-navbar-view.js diff --git a/server/sonar-web/src/main/hbs/nav/nav-context-navbar.hbs b/server/sonar-web/src/main/hbs/nav/nav-context-navbar.hbs index 8c3053130e5..769f70fefc7 100644 --- a/server/sonar-web/src/main/hbs/nav/nav-context-navbar.hbs +++ b/server/sonar-web/src/main/hbs/nav/nav-context-navbar.hbs @@ -1,6 +1,6 @@
-
diff --git a/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs b/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs index 5b000361c48..9556ef5bed5 100644 --- a/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs +++ b/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs @@ -1,29 +1,64 @@
+
+ {{> '_nav-logo'}} +
+
diff --git a/server/sonar-web/src/main/hbs/nav/nav-search-item.hbs b/server/sonar-web/src/main/hbs/nav/nav-search-item.hbs index 1de73f23eab..7aa6c557080 100644 --- a/server/sonar-web/src/main/hbs/nav/nav-search-item.hbs +++ b/server/sonar-web/src/main/hbs/nav/nav-search-item.hbs @@ -1,14 +1,14 @@ +{{#if extra}} + {{#gt index 0}} +
+ {{/gt}} +
{{extra}}
+{{/if}} + - {{#if extra}} - {{extra}} - {{/if}} {{#if q}}{{qualifierIcon q}}{{/if}} {{#if subtitle}} {{title}} -
- {{#if extra}} -   - {{/if}} {{subtitle}} {{else}} {{name}} diff --git a/server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs b/server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs new file mode 100644 index 00000000000..a3a80218b5c --- /dev/null +++ b/server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs @@ -0,0 +1,75 @@ +
+ +
diff --git a/server/sonar-web/src/main/js/common/handlebars-extensions.js b/server/sonar-web/src/main/js/common/handlebars-extensions.js index ddbf0671877..eb3af1e038d 100644 --- a/server/sonar-web/src/main/js/common/handlebars-extensions.js +++ b/server/sonar-web/src/main/js/common/handlebars-extensions.js @@ -11,6 +11,15 @@ return baseUrl + url; }); + Handlebars.registerHelper('isActiveLink', function() { + var args = Array.prototype.slice.call(arguments, 0, -1), + options = arguments[arguments.length - 1], + prefix = args.join(''), + path = window.location.pathname, + match = path.indexOf(baseUrl + prefix) === 0; + return match ? options.fn(this) : options.inverse(this); + }); + Handlebars.registerHelper('capitalize', function(string) { return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); }); diff --git a/server/sonar-web/src/main/js/common/selectable-collection-view.js b/server/sonar-web/src/main/js/common/selectable-collection-view.js index 6ddce02f574..41fca0eb326 100644 --- a/server/sonar-web/src/main/js/common/selectable-collection-view.js +++ b/server/sonar-web/src/main/js/common/selectable-collection-view.js @@ -7,6 +7,10 @@ define(function () { this.listenTo(this.collection, 'reset', this.resetSelectedIndex); }, + itemViewOptions: function (model, index) { + return { index: index }; + }, + resetSelectedIndex: function () { this.selectedIndex = 0; }, diff --git a/server/sonar-web/src/main/js/nav/app.js b/server/sonar-web/src/main/js/nav/app.js index 2eee602aab1..ffacb9dab4a 100644 --- a/server/sonar-web/src/main/js/nav/app.js +++ b/server/sonar-web/src/main/js/nav/app.js @@ -1,32 +1,44 @@ define([ 'nav/global-navbar-view', - 'nav/context-navbar-view' -], function (GlobalNavbarView, ContextNavbarView) { + 'nav/context-navbar-view', + 'nav/settings-navbar-view' +], function (GlobalNavbarView, ContextNavbarView, SettingsNavbarView) { var $ = jQuery, - App = new Marionette.Application(); + App = new Marionette.Application(), + model = window.navbarOptions; App.addInitializer(function () { this.navbarView = new GlobalNavbarView({ app: App, el: $('.navbar-global'), - collection: new Backbone.Collection(window.navbarGlobalMenu) + model: model }); this.navbarView.render(); }); - if (window.navbarBreadcrumbs != null) { + if (model.has('contextBreadcrumbs')) { App.addInitializer(function () { this.contextNavbarView = new ContextNavbarView({ app: App, el: $('.navbar-context'), - collection: new Backbone.Collection(window.navbarContextMenu), - breadcrumbs: new Backbone.Collection(window.navbarBreadcrumbs) + model: model }); this.contextNavbarView.render(); }); } + if (model.get('space') === 'settings') { + App.addInitializer(function () { + this.settingsNavbarView = new SettingsNavbarView({ + app: App, + el: $('.navbar-context'), + model: model + }); + this.settingsNavbarView.render(); + }); + } + window.requestMessages().done(function () { App.start(); }); diff --git a/server/sonar-web/src/main/js/nav/context-navbar-view.js b/server/sonar-web/src/main/js/nav/context-navbar-view.js index 534f08c7734..730fa5bac17 100644 --- a/server/sonar-web/src/main/js/nav/context-navbar-view.js +++ b/server/sonar-web/src/main/js/nav/context-navbar-view.js @@ -5,9 +5,9 @@ define([ return Marionette.ItemView.extend({ template: Templates['nav-context-navbar'], - serializeData: function () { - return _.extend(Marionette.ItemView.prototype.serializeData.apply(this, arguments), { - breadcrumbs: this.options.breadcrumbs.toJSON() + onRender: function () { + this.$('[data-toggle="tooltip"]').tooltip({ + container: 'body' }); } }); diff --git a/server/sonar-web/src/main/js/nav/global-navbar-view.js b/server/sonar-web/src/main/js/nav/global-navbar-view.js index e87ecc6d3f7..7acb3ab2a9a 100644 --- a/server/sonar-web/src/main/js/nav/global-navbar-view.js +++ b/server/sonar-web/src/main/js/nav/global-navbar-view.js @@ -19,12 +19,6 @@ define([ 'hidden.bs.dropdown .js-search-dropdown': 'onSearchDropdownHidden' }, - initialize: function () { - this.projectName = window.navbarProject; - this.projectKey = window.navbarProjectKey; - this.isProjectFavorite = window.navbarProjectFavorite; - }, - onRender: function () { var that = this; this.$el.addClass('navbar-' + window.navbarSpace); @@ -56,6 +50,7 @@ define([ onSearchDropdownShow: function () { var that = this; this.searchRegion.show(new SearchView({ + model: this.model, hide: function () { that.$('.js-search-dropdown-toggle').dropdown('toggle'); } @@ -72,10 +67,9 @@ define([ userName: window.SS.userName, isUserAdmin: window.SS.isUserAdmin, - projectName: this.projectName, - projectKey: this.projectKey, - projectFavorite: this.isProjectFavorite, - navbarCanFavoriteProject: window.navbarCanFavoriteProject + canManageGlobalDashboards: window.SS.user != null, + canManageIssueFilters: window.SS.user != null, + canManageMeasureFilters: window.SS.user != null }); } }); diff --git a/server/sonar-web/src/main/js/nav/search-view.js b/server/sonar-web/src/main/js/nav/search-view.js index 6efd0ca8f92..2ccc6b62df1 100644 --- a/server/sonar-web/src/main/js/nav/search-view.js +++ b/server/sonar-web/src/main/js/nav/search-view.js @@ -19,6 +19,12 @@ define([ submit: function () { this.$('a')[0].click(); + }, + + serializeData: function () { + return _.extend(Marionette.ItemView.prototype.serializeData.apply(this, arguments), { + index: this.options.index + }); } }), @@ -106,7 +112,7 @@ define([ q: historyItem.icon }; }), - qualifiers = window.navbarQualifiers.map(function (q) { + qualifiers = this.model.get('qualifiers').map(function (q) { return { url: baseUrl + '/all_projects?qualifier=' + encodeURIComponent(q), name: t('qualifiers.all', q) @@ -131,14 +137,14 @@ define([ var title = item.name, subtitle = null; if (domain.q === 'FIL' || domain.q === 'UTS') { - subtitle = title.substr(0, title.lastIndexOf('/') - 1); + subtitle = title.substr(0, title.lastIndexOf('/')); title = title.substr(title.lastIndexOf('/') + 1); } collection.push(_.extend(item, { q: domain.q, title: title, subtitle: subtitle, - extra: index === 0 ? domain.name : ' ', + extra: index === 0 ? domain.name : null, url: baseUrl + '/dashboard/index?id=' + encodeURIComponent(item.key) + dashboardParameters(true) })); }); diff --git a/server/sonar-web/src/main/js/nav/settings-navbar-view.js b/server/sonar-web/src/main/js/nav/settings-navbar-view.js new file mode 100644 index 00000000000..27ca7608a6f --- /dev/null +++ b/server/sonar-web/src/main/js/nav/settings-navbar-view.js @@ -0,0 +1,9 @@ +define([ + 'templates/nav' +], function () { + + return Marionette.ItemView.extend({ + template: Templates['nav-settings-navbar'] + }); + +}); diff --git a/server/sonar-web/src/main/less/components/dropdowns.less b/server/sonar-web/src/main/less/components/dropdowns.less index 756622d3a53..174693013cb 100644 --- a/server/sonar-web/src/main/less/components/dropdowns.less +++ b/server/sonar-web/src/main/less/components/dropdowns.less @@ -102,12 +102,19 @@ // Dropdown section headers .dropdown-header { display: block; - padding: 3px 20px; + padding: 3px 8px 5px; font-size: @smallFontSize; - color: @baseFontColor; + color: @secondFontColor; white-space: nowrap; // as with > li > a } +.dropdown-menu .divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} + // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop { position: fixed; diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less index 292875a12ab..66b2f43a2f9 100644 --- a/server/sonar-web/src/main/less/components/page.less +++ b/server/sonar-web/src/main/less/components/page.less @@ -15,7 +15,7 @@ .page-title { float: left; - font-size: @bigFontSize; + font-size: @mediumFontSize !important; line-height: @formControlHeight; } diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/navbar.less index 22d691c1b3a..b2b3f8220be 100644 --- a/server/sonar-web/src/main/less/navbar.less +++ b/server/sonar-web/src/main/less/navbar.less @@ -3,7 +3,7 @@ @import (reference) "ui"; @navbarGlobalBackground: #262626; -@navbarContextBackground: @lightBlue; +@navbarContextBackground: @barBackgroundColor; @navbarHeight: 30px; @navbarLineHeight: 20px; @@ -42,12 +42,18 @@ .navbar a { .link-no-underline; + .trans(none); } .navbar-header { float: left; } +.navbar-brand { + display: block; + padding: 2px 10px 0; +} + .navbar-nav { float: left; } @@ -61,6 +67,19 @@ line-height: @navbarLineHeight; } +.navbar-nav > li.navbar-more > a { + padding-right: 17px; +} + +.navbar-nav > li.navbar-more + li { + margin-left: -17px; +} + +.navbar-nav > li.navbar-more + li > a { + padding-left: 5px; + padding-right: 5px; +} + .navbar-icon:before { font-size: @iconFontSize; } @@ -76,7 +95,7 @@ .navbar-search { position: relative; - width: 400px; + width: 480px; .box-sizing(border-box); .trans(width); } @@ -125,29 +144,36 @@ color: #fff; } + .navbar-brand:hover, + .navbar-brand:focus { + background-color: darken(@navbarGlobalBackground, 20%); + } + .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .navbar-nav > .active > a, .navbar-nav > .dropdown.open > a { - background-color: darken(@navbarGlobalBackground, 10%); + background-color: @darkBlue; + } + + .navbar-search-dropdown { + background-color: @blue !important; } } .navbar-context { + height: auto; background-color: @navbarContextBackground; - border-bottom: 1px solid @blue; - .navbar-nav > li > a { - padding-bottom: 1px !important; - border-bottom: 3px solid transparent; - color: @baseFontColor; + .nav-tabs { + width: 100%; } +} - .navbar-nav > li > a:hover, - .navbar-nav > li > a:focus, - .navbar-nav > .active > a, - .navbar-nav > .dropdown.open > a { - border-bottom-color: @blue; - } +.navbar-context-meta { + line-height: @navbarHeight; + padding: 0 10px; + color: @secondFontColor; + font-size: @smallFontSize; } diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less index e1c29a01c47..7c195519f5a 100644 --- a/server/sonar-web/src/main/less/style.less +++ b/server/sonar-web/src/main/less/style.less @@ -2703,3 +2703,11 @@ text.max-results-reached-message { } } + +.sq-logo .sq-logo-letter { + fill: #fff; +} + +.sq-logo .sq-logo-arc { + fill: @blue; +} diff --git a/server/sonar-web/src/main/less/ui.less b/server/sonar-web/src/main/less/ui.less index a89e840e2f6..03a876936af 100644 --- a/server/sonar-web/src/main/less/ui.less +++ b/server/sonar-web/src/main/less/ui.less @@ -422,12 +422,43 @@ input[type=button] { .nav-crumbs { + padding: 5px 0; + a { + color: @baseFontColor; + } + + > li + li:before { + content: "/"; + float: left; + padding: 7px 0; + color: fade(@baseFontColor, 30%); + } + + > li:first-child { + font-size: 21px; + font-weight: 300; + } } -.nav-crumbs > li + li:before { - content: " /"; - display: inline-block; - vertical-align: middle; - color: fade(@baseFontColor, 30%); +.nav-tabs { + border-bottom: 1px solid @barBorderColor; + + > li { + float: left; + margin-bottom: -1px; + } + + > li > a { + margin-right: 2px; + border-bottom: 3px solid transparent; + + &:hover { + border-color: @lightBlue; + } + } + + > li.active > a { + border-color: @lightBlue; + } } diff --git a/server/sonar-web/src/main/less/variables.less b/server/sonar-web/src/main/less/variables.less index bcb64f77280..7602afb1a66 100644 --- a/server/sonar-web/src/main/less/variables.less +++ b/server/sonar-web/src/main/less/variables.less @@ -4,6 +4,7 @@ @smallFontSize: 12px; @baseFontSize: 13px; +@mediumFontSize: 14px; @bigFontSize: 16px; @baseFontColor: #444; @secondFontColor: #777; diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/components/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/components/index.html.erb index f6446547adf..9370ea03670 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/components/index.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/components/index.html.erb @@ -1,7 +1,5 @@
-

<%= h message('components.page') -%>

- <% if is_admin? %>
<%= message('customize') -%> diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/_header.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/_header.html.erb index f96fb618b2c..dc67eee948e 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/_header.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/_header.html.erb @@ -1,24 +1,9 @@

<%= h @dashboard.name -%>

- <% if logged_in? %> -
-
- <% if back %> - <%= link_to message('dashboard.back_to_dashboard'), dashboard_action(:index), :class => 'button' -%> - <% else %> - <% if @dashboard.editable_by?(current_user) %> - <%= link_to message('dashboard.configure_widgets'), dashboard_action(:configure), :class => 'button' -%> - <% end %> - <% end %> - <%= link_to message('dashboard.manage_dashboards'), {:controller => :dashboards, :action => :index, :resource => (@resource.id if @resource)}, :class => 'button' -%> -
-
- <% end %> - <% if @snapshot %> -
- <%= "Version #{@snapshot.version} - " if @snapshot.version.present? -%><%= l @snapshot.created_at -%> +
+ <% if @snapshot %> <% if @snapshot.project_snapshot.periods? %> <% period_options = period_select_option_tags(@snapshot, 'small') %> <% if period_options %> @@ -28,6 +13,19 @@ <% end %> <% end %> -
- <% end %> + <% end %> + + <% if logged_in? %> +
+ <% if back %> + <%= link_to message('dashboard.back_to_dashboard'), dashboard_action(:index), :class => 'button' -%> + <% else %> + <% if @dashboard.editable_by?(current_user) %> + <%= link_to message('dashboard.configure_widgets'), dashboard_action(:configure), :class => 'button' -%> + <% end %> + <% end %> + <%= link_to message('dashboard.manage_dashboards'), {:controller => :dashboards, :action => :index, :resource => (@resource.id if @resource)}, :class => 'button' -%> +
+ <% end %> +
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb index 605a8e1ed96..cc4f431d7bd 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb @@ -11,6 +11,6 @@ uuid: '<%= @resource.uuid -%>', key: '<%= @resource.key -%>' }; - document.getElementById('crumbs').remove(); + document.querySelector('.navbar-context').remove(); diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb index 421e99d7e03..d66d2197002 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb @@ -9,7 +9,7 @@
- <% if selected_section==Navigation::SECTION_RESOURCE %> + <% if selected_section==Navigation::SECTION_RESOURCE || selected_section==Navigation::SECTION_CONFIGURATION %> <% end %> diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb index 98319a4caf5..4df94dfcd71 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb @@ -1,3 +1,19 @@ + + + + <% selected_section = controller.class::SECTION if defined?(controller.class::SECTION) if selected_section==Navigation::SECTION_RESOURCE && !@project && !@resource @@ -17,13 +33,3 @@ <% elsif selected_section==Navigation::SECTION_CONFIGURATION %> <%= render :partial => 'layouts/navbar_conf_settings' %> <% end %> - - - diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_context.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_context.html.erb index 58d7c40b3d5..5b75a79d790 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_context.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_context.html.erb @@ -8,201 +8,147 @@ diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_global.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_global.html.erb index 9222f665efd..2225b7fa726 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_global.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_global.html.erb @@ -6,70 +6,25 @@ %> diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_settings.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_settings.html.erb index 86362f0cc58..772c56bafed 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_settings.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_settings.html.erb @@ -6,109 +6,20 @@ %> diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 92e7d89d03d..f46f1678ff1 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -505,6 +505,7 @@ provisioning.page.description=Use this page to initialize projects if you would #------------------------------------------------------------------------------ clouds.page=Clouds +overview.page=Overview components.page=Components coverage.page=Coverage default_dashboards.page=Default Dashboards -- 2.39.5