From: Stas Vilchik Date: Wed, 7 Jan 2015 12:46:47 +0000 (+0100) Subject: resolve SONAR-6041 New global layout X-Git-Tag: latest-silver-master-#65~219 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=d79cc0b5eae85a5d3e59fe149b4ba538db8f35e7;p=sonarqube.git resolve SONAR-6041 New global layout --- diff --git a/server/sonar-web/.jshintrc b/server/sonar-web/.jshintrc index 2d6820a4d4c..5b2eb1b387b 100644 --- a/server/sonar-web/.jshintrc +++ b/server/sonar-web/.jshintrc @@ -82,7 +82,9 @@ "baseUrl": true, "key": true, "Backbone": true, + "Marionette": true, "Handlebars": true, + "Templates": true, "t": true, "tp": true, "moment": true, diff --git a/server/sonar-web/Gruntfile.coffee b/server/sonar-web/Gruntfile.coffee index 60b9b6b3e87..809f748df89 100644 --- a/server/sonar-web/Gruntfile.coffee +++ b/server/sonar-web/Gruntfile.coffee @@ -14,6 +14,7 @@ module.exports = (grunt) -> '<%= pkg.sources %>less/select2.less' '<%= pkg.sources %>less/select2-sonar.less' '<%= pkg.sources %>less/layout.less' + '<%= pkg.sources %>less/layout-new.less' '<%= pkg.sources %>less/style.less' '<%= pkg.sources %>less/icons.less' '<%= pkg.sources %>less/ui.less' @@ -33,6 +34,7 @@ module.exports = (grunt) -> '<%= pkg.sources %>less/select2.less' '<%= pkg.sources %>less/select2-sonar.less' '<%= pkg.sources %>less/layout.less' + '<%= pkg.sources %>less/layout-new.less' '<%= pkg.sources %>less/style.less' '<%= pkg.sources %>less/icons.less' '<%= pkg.sources %>less/ui.less' @@ -91,6 +93,7 @@ module.exports = (grunt) -> '<%= pkg.assets %>js/third-party/numeral.js' '<%= pkg.assets %>js/third-party/numeral-languages.js' '<%= pkg.assets %>js/third-party/bootstrap/tooltip.js' + '<%= pkg.assets %>js/third-party/bootstrap/dropdown.js' '<%= pkg.assets %>js/select2-jquery-ui-fix.js' '<%= pkg.assets %>js/widgets/base.js' '<%= pkg.assets %>js/widgets/widget.js' @@ -134,6 +137,7 @@ module.exports = (grunt) -> '<%= pkg.assets %>js/third-party/numeral.js' '<%= pkg.assets %>js/third-party/numeral-languages.js' '<%= pkg.assets %>js/third-party/bootstrap/tooltip.js' + '<%= pkg.assets %>js/third-party/bootstrap/dropdown.js' '<%= pkg.assets %>js/select2-jquery-ui-fix.js' '<%= pkg.assets %>js/widgets/base.js' '<%= pkg.assets %>js/widgets/widget.js' @@ -235,6 +239,10 @@ module.exports = (grunt) -> name: 'analysis-reports/app' out: '<%= pkg.assets %>build/js/analysis-reports/app.js' + nav: options: + name: 'nav/app' + out: '<%= pkg.assets %>build/js/nav/app.js' + handlebars: options: @@ -285,6 +293,9 @@ module.exports = (grunt) -> '<%= pkg.assets %>js/templates/analysis-reports.js': [ '<%= pkg.sources %>hbs/analysis-reports/**/*.hbs' ] + '<%= pkg.assets %>js/templates/nav.js': [ + '<%= pkg.sources %>hbs/nav/**/*.hbs' + ] clean: diff --git a/server/sonar-web/src/main/coffee/issues/facets/severity-facet.coffee b/server/sonar-web/src/main/coffee/issues/facets/severity-facet.coffee index b0b605c6a09..17d1fabaa9e 100644 --- a/server/sonar-web/src/main/coffee/issues/facets/severity-facet.coffee +++ b/server/sonar-web/src/main/coffee/issues/facets/severity-facet.coffee @@ -11,6 +11,6 @@ define [ sortValues: (values) -> - order = ['BLOCKER', 'MINOR', 'CRITICAL', 'INFO', 'MAJOR'] + order = ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO'] _.sortBy values, (v) -> order.indexOf v.val diff --git a/server/sonar-web/src/main/coffee/issues/facets/status-facet.coffee b/server/sonar-web/src/main/coffee/issues/facets/status-facet.coffee index 8b35191eabf..e3f4d0015b4 100644 --- a/server/sonar-web/src/main/coffee/issues/facets/status-facet.coffee +++ b/server/sonar-web/src/main/coffee/issues/facets/status-facet.coffee @@ -11,5 +11,5 @@ define [ sortValues: (values) -> - order = ['OPEN', 'RESOLVED', 'REOPENED', 'CLOSED', 'CONFIRMED'] + order = ['OPEN', 'REOPENED', 'CONFIRMED', 'RESOLVED', 'CLOSED'] _.sortBy values, (v) -> order.indexOf v.val diff --git a/server/sonar-web/src/main/coffee/issues/layout.coffee b/server/sonar-web/src/main/coffee/issues/layout.coffee index 6d2a60fe82b..2b57dbf22b6 100644 --- a/server/sonar-web/src/main/coffee/issues/layout.coffee +++ b/server/sonar-web/src/main/coffee/issues/layout.coffee @@ -26,10 +26,6 @@ define [ $(window).off 'scroll.issues-layout' - onRender: -> - @$('.search-navigator-side').isolatedScroll() - - onScroll: -> scrollTop = $(window).scrollTop() $('.search-navigator').toggleClass 'sticky', scrollTop >= @topOffset diff --git a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-layout.hbs b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-layout.hbs index 8f46e4f8fb1..7a107af3688 100644 --- a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-layout.hbs +++ b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-layout.hbs @@ -1,10 +1,14 @@ -
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
diff --git a/server/sonar-web/src/main/hbs/issues/facets/issues-creation-date-facet.hbs b/server/sonar-web/src/main/hbs/issues/facets/issues-creation-date-facet.hbs index c5b3e5dd47e..b5a65ed7145 100644 --- a/server/sonar-web/src/main/hbs/issues/facets/issues-creation-date-facet.hbs +++ b/server/sonar-web/src/main/hbs/issues/facets/issues-creation-date-facet.hbs @@ -6,7 +6,7 @@ {{dt createdAt}} ({{fromNow createdAt}})
{{else}} -
+
to diff --git a/server/sonar-web/src/main/hbs/issues/issues-layout.hbs b/server/sonar-web/src/main/hbs/issues/issues-layout.hbs index f60fecfb03f..fb22d724577 100644 --- a/server/sonar-web/src/main/hbs/issues/issues-layout.hbs +++ b/server/sonar-web/src/main/hbs/issues/issues-layout.hbs @@ -1,10 +1,14 @@ -
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
diff --git a/server/sonar-web/src/main/hbs/nav/_nav-logo.hbs b/server/sonar-web/src/main/hbs/nav/_nav-logo.hbs new file mode 100644 index 00000000000..fcb273a09ae --- /dev/null +++ b/server/sonar-web/src/main/hbs/nav/_nav-logo.hbs @@ -0,0 +1,18 @@ + diff --git a/server/sonar-web/src/main/hbs/nav/_nav-navbar-label.hbs b/server/sonar-web/src/main/hbs/nav/_nav-navbar-label.hbs new file mode 100644 index 00000000000..df44ac06af2 --- /dev/null +++ b/server/sonar-web/src/main/hbs/nav/_nav-navbar-label.hbs @@ -0,0 +1 @@ +{{#if labelLocalized}}{{labelLocalized}}{{else}}{{t label}}{{/if}} diff --git a/server/sonar-web/src/main/hbs/nav/nav-navbar.hbs b/server/sonar-web/src/main/hbs/nav/nav-navbar.hbs new file mode 100644 index 00000000000..af4a71bb884 --- /dev/null +++ b/server/sonar-web/src/main/hbs/nav/nav-navbar.hbs @@ -0,0 +1,87 @@ +
+
+ + {{#eq space 'project'}} +
+ {{#if navbarCanFavoriteProject}} + + + {{/if}} + {{projectName}} +
+ {{/eq}} + {{#eq space 'settings'}} +
+ {{t 'layout.settings'}} +
+ {{/eq}} +
+ + + + + +
diff --git a/server/sonar-web/src/main/hbs/nav/nav-search-empty.hbs b/server/sonar-web/src/main/hbs/nav/nav-search-empty.hbs new file mode 100644 index 00000000000..ccac4831661 --- /dev/null +++ b/server/sonar-web/src/main/hbs/nav/nav-search-empty.hbs @@ -0,0 +1 @@ +{{t 'no_results'}} 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 new file mode 100644 index 00000000000..b9e1c60b016 --- /dev/null +++ b/server/sonar-web/src/main/hbs/nav/nav-search-item.hbs @@ -0,0 +1,6 @@ + + {{#if extra}} + {{extra}} + {{/if}} + {{#if q}}{{qualifierIcon q}} {{/if}}{{name}} + diff --git a/server/sonar-web/src/main/hbs/nav/nav-search.hbs b/server/sonar-web/src/main/hbs/nav/nav-search.hbs new file mode 100644 index 00000000000..a5059642f99 --- /dev/null +++ b/server/sonar-web/src/main/hbs/nav/nav-search.hbs @@ -0,0 +1,6 @@ + + + + +
diff --git a/server/sonar-web/src/main/js/application.js b/server/sonar-web/src/main/js/application.js index a1c209a82b6..ca0bf4dab29 100644 --- a/server/sonar-web/src/main/js/application.js +++ b/server/sonar-web/src/main/js/application.js @@ -21,13 +21,13 @@ function toggleFav(resourceId, elt) { }}); } -function dashboardParameters() { +function dashboardParameters (urlHasSomething) { var queryString = window.location.search; - var parameters = ''; + var parameters = []; var matchDashboard = queryString.match(/did=\d+/); if (matchDashboard && $j('#is-project-dashboard').length === 1) { - parameters += (matchDashboard[0] + '&'); + parameters.push(matchDashboard[0]); } var matchPeriod = queryString.match(/period=\d+/); @@ -35,14 +35,15 @@ function dashboardParameters() { // If we have a match for period, check that it is not project-specific var period = parseInt(/period=(\d+)/.exec(queryString)[1]); if (period <= 3) { - parameters += matchPeriod[0] + '&'; + parameters.push(matchPeriod[0]); } } - if (parameters !== '') { - parameters = '?' + parameters; + var query = parameters.join('&'); + if (query !== '') { + query = (urlHasSomething ? '&' : '?') + query; } - return parameters; + return query; } @@ -340,11 +341,7 @@ jQuery(function () { // Define global shortcuts key('s', function () { - jQuery('#searchInput').focus().on('keydown', function (e) { - if (e.keyCode === 27) { - jQuery('#searchInput').blur(); - } - }); + jQuery('.js-search-dropdown-toggle').dropdown('toggle'); return false; }); }); diff --git a/server/sonar-web/src/main/js/coding-rules/facets/severity-facet.js b/server/sonar-web/src/main/js/coding-rules/facets/severity-facet.js index 219a5e67c85..360d5677fa9 100644 --- a/server/sonar-web/src/main/js/coding-rules/facets/severity-facet.js +++ b/server/sonar-web/src/main/js/coding-rules/facets/severity-facet.js @@ -5,7 +5,7 @@ define([ return BaseFacet.extend({ template: Templates['coding-rules-severity-facet'], - severities: ['BLOCKER', 'MINOR', 'CRITICAL', 'INFO', 'MAJOR'], + severities: ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO'], sortValues: function (values) { var order = this.severities; diff --git a/server/sonar-web/src/main/js/coding-rules/layout.js b/server/sonar-web/src/main/js/coding-rules/layout.js index 412b832f9b9..c9fa76c5769 100644 --- a/server/sonar-web/src/main/js/coding-rules/layout.js +++ b/server/sonar-web/src/main/js/coding-rules/layout.js @@ -27,10 +27,6 @@ define([ $(window).off('scroll.search-navigator-layout'); }, - onRender: function () { - this.$('.search-navigator-side').isolatedScroll(); - }, - onScroll: function () { var scrollTop = $(window).scrollTop(); $('.search-navigator').toggleClass('sticky', scrollTop >= this.topOffset); 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 new file mode 100644 index 00000000000..6ddce02f574 --- /dev/null +++ b/server/sonar-web/src/main/js/common/selectable-collection-view.js @@ -0,0 +1,62 @@ +define(function () { + + return Marionette.CollectionView.extend({ + + initialize: function () { + this.resetSelectedIndex(); + this.listenTo(this.collection, 'reset', this.resetSelectedIndex); + }, + + resetSelectedIndex: function () { + this.selectedIndex = 0; + }, + + onRender: function () { + this.selectCurrent(); + }, + + submitCurrent: function () { + var view = this.children.findByIndex(this.selectedIndex); + if (view != null) { + view.submit(); + } + }, + + selectCurrent: function () { + this.selectItem(this.selectedIndex); + }, + + selectNext: function () { + if (this.selectedIndex < this.collection.length - 1) { + this.deselectItem(this.selectedIndex); + this.selectedIndex++; + this.selectItem(this.selectedIndex); + } + }, + + selectPrev: function () { + if (this.selectedIndex > 0) { + this.deselectItem(this.selectedIndex); + this.selectedIndex--; + this.selectItem(this.selectedIndex); + } + }, + + selectItem: function (index) { + if (index >= 0 && index < this.collection.length) { + var view = this.children.findByIndex(index); + if (view != null) { + view.select(); + } + } + }, + + deselectItem: function (index) { + var view = this.children.findByIndex(index); + if (view != null) { + view.deselect(); + } + } + }); + +}); diff --git a/server/sonar-web/src/main/js/nav/app.js b/server/sonar-web/src/main/js/nav/app.js new file mode 100644 index 00000000000..f6295eea637 --- /dev/null +++ b/server/sonar-web/src/main/js/nav/app.js @@ -0,0 +1,21 @@ +define([ + 'nav/navbar' +], function (NavbarView) { + + var $ = jQuery, + App = new Marionette.Application(); + + App.addInitializer(function () { + this.navbarView = new NavbarView({ + app: App, + el: $('.navbar'), + collection: new Backbone.Collection(window.navbarItems) + }); + this.navbarView.render(); + }); + + window.requestMessages().done(function () { + App.start(); + }); + +}); diff --git a/server/sonar-web/src/main/js/nav/navbar.js b/server/sonar-web/src/main/js/nav/navbar.js new file mode 100644 index 00000000000..7ab37245391 --- /dev/null +++ b/server/sonar-web/src/main/js/nav/navbar.js @@ -0,0 +1,95 @@ +define([ + 'nav/search-view', + 'templates/nav' +], function (SearchView) { + + var $ = jQuery; + + return Marionette.Layout.extend({ + tagName: 'nav', + template: Templates['nav-navbar'], + + regions: { + searchRegion: '.js-search-region' + }, + + events: { + 'click .js-login': 'onLoginClick', + 'click .js-favorite': 'onFavoriteClick', + 'show.bs.dropdown .js-search-dropdown': 'onSearchDropdownShow', + 'hidden.bs.dropdown .js-search-dropdown': 'onSearchDropdownHidden' + }, + + initialize: function () { + $(window).on('scroll.nav-layout', this.onScroll); + this.projectName = window.navbarProject; + this.isProjectFavorite = window.navbarProjectFavorite; + }, + + onClose: function () { + $(window).off('scroll.nav-layout'); + }, + + onScroll: function () { + var scrollTop = $(window).scrollTop(), + isInTheMiddle = scrollTop > 0; + $('.navbar-sticky').toggleClass('middle', isInTheMiddle); + }, + + onRender: function () { + var that = this; + this.$el.addClass('navbar-' + window.navbarSpace); + this.$el.addClass('navbar-fade'); + setTimeout(function () { + that.$el.addClass('in'); + }, 0); + }, + + onLoginClick: function () { + var returnTo = window.location.pathname + window.location.search; + window.location = baseUrl + '/sessions/new?return_to=' + encodeURIComponent(returnTo) + window.location.hash; + return false; + }, + + onFavoriteClick: function () { + var that = this, + p = window.process.addBackgroundProcess(), + url = baseUrl + '/favourites/toggle/' + window.navbarProjectId; + return $.post(url).done(function () { + that.isProjectFavorite = !that.isProjectFavorite; + that.render(); + window.process.finishBackgroundProcess(p); + }).fail(function () { + window.process.failBackgroundProcess(p); + }); + }, + + onSearchDropdownShow: function () { + var that = this; + this.searchRegion.show(new SearchView({ + hide: function () { + that.$('.js-search-dropdown-toggle').dropdown('toggle'); + } + })); + }, + + onSearchDropdownHidden: function () { + this.searchRegion.reset(); + }, + + serializeData: function () { + return _.extend(Marionette.Layout.prototype.serializeData.apply(this, arguments), { + user: window.SS.user, + userName: window.SS.userName, + isUserAdmin: window.SS.isUserAdmin, + + space: window.navbarSpace, + + projectName: this.projectName, + projectFavorite: this.isProjectFavorite, + navbarCanFavoriteProject: window.navbarCanFavoriteProject + }); + } + }); + +}); diff --git a/server/sonar-web/src/main/js/nav/search-view.js b/server/sonar-web/src/main/js/nav/search-view.js new file mode 100644 index 00000000000..fa092a71b8d --- /dev/null +++ b/server/sonar-web/src/main/js/nav/search-view.js @@ -0,0 +1,156 @@ +define([ + 'common/selectable-collection-view', + 'templates/nav' +], function (SelectableCollectionView) { + + var $ = jQuery, + + SearchItemView = Marionette.ItemView.extend({ + tagName: 'li', + template: Templates['nav-search-item'], + + select: function () { + this.$el.addClass('active'); + }, + + deselect: function () { + this.$el.removeClass('active'); + }, + + submit: function () { + this.$('a')[0].click(); + } + }), + + SearchEmptyView = Marionette.ItemView.extend({ + tagName: 'li', + template: Templates['nav-search-empty'] + }), + + SearchResultsView = SelectableCollectionView.extend({ + className: 'menu', + tagName: 'ul', + itemView: SearchItemView, + emptyView: SearchEmptyView + }); + + return Marionette.Layout.extend({ + className: 'navbar-search', + tagName: 'form', + template: Templates['nav-search'], + + regions: { + resultsRegion: '.js-search-results' + }, + + events: { + 'submit': 'onSubmit', + 'keydown .js-search-input': 'onKeyDown', + 'keyup .js-search-input': 'debouncedOnKeyUp' + }, + + initialize: function () { + this.results = new Backbone.Collection(); + this.resetResultsToDefault(); + this.resultsView = new SearchResultsView({ collection: this.results }); + this.debouncedOnKeyUp = _.debounce(this.onKeyUp, 400); + this._bufferedValue = ''; + }, + + onRender: function () { + var that = this; + this.resultsRegion.show(this.resultsView); + setTimeout(function () { + that.$('.js-search-input').focus(); + }, 0); + }, + + onKeyDown: function (e) { + if (e.keyCode === 38) { + this.resultsView.selectPrev(); + return false; + } + if (e.keyCode === 40) { + this.resultsView.selectNext(); + return false; + } + if (e.keyCode === 13) { + this.resultsView.submitCurrent(); + return false; + } + if (e.keyCode === 27) { + this.options.hide(); + return false; + } + }, + + onKeyUp: function () { + var value = this.$('.js-search-input').val(); + if (value === this._bufferedValue) { + return; + } + this._bufferedValue = this.$('.js-search-input').val(); + this.search(value); + }, + + onSubmit: function () { + return false; + }, + + resetResultsToDefault: function () { + var recentHistory = JSON.parse(localStorage.getItem('sonar_recent_history')), + history = recentHistory.map(function (historyItem) { + return { + url: baseUrl + '/dashboard/index?id=' + encodeURIComponent(historyItem.key) + dashboardParameters(true), + name: historyItem.name, + q: historyItem.icon + }; + }), + qualifiers = window.navbarQualifiers.map(function (q) { + return { + url: baseUrl + '/all_projects?qualifier=' + encodeURIComponent(q), + name: t('qualifiers.all', q) + }; + }); + this.results.reset(history.concat(qualifiers)); + }, + + open: function () { + this.$el.addClass('open'); + }, + + disableOpen: function () { + this.$el.removeClass('open'); + }, + + search: function (q) { + if (q.length < 2) { + this.resetResultsToDefault(); + this.disableOpen(); + return; + } + var that = this, + url = baseUrl + '/api/components/suggestions', + options = { s: q }, + p = window.process.addBackgroundProcess(); + this.open(); + return $.get(url, options).done(function (r) { + var collection = []; + r.results.forEach(function (domain) { + domain.items.forEach(function (item, index) { + collection.push(_.extend(item, { + q: domain.q, + extra: index === 0 ? domain.name : ' ', + url: baseUrl + '/dashboard/index?id=' + encodeURIComponent(item.key) + dashboardParameters(true) + })); + }); + }); + that.results.reset(collection); + window.process.finishBackgroundProcess(p); + }).fail(function() { + window.process.failBackgroundProcess(p); + }); + } + }); + +}); diff --git a/server/sonar-web/src/main/js/third-party/bootstrap/dropdown.js b/server/sonar-web/src/main/js/third-party/bootstrap/dropdown.js new file mode 100644 index 00000000000..980424d635e --- /dev/null +++ b/server/sonar-web/src/main/js/third-party/bootstrap/dropdown.js @@ -0,0 +1,161 @@ +/* ======================================================================== + * Bootstrap: dropdown.js v3.3.1 + * http://getbootstrap.com/javascript/#dropdowns + * ======================================================================== + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * ======================================================================== */ + + ++function ($) { + 'use strict'; + + // DROPDOWN CLASS DEFINITION + // ========================= + + var backdrop = '.dropdown-backdrop' + var toggle = '[data-toggle="dropdown"]' + var Dropdown = function (element) { + $(element).on('click.bs.dropdown', this.toggle) + } + + Dropdown.VERSION = '3.3.1' + + Dropdown.prototype.toggle = function (e) { + var $this = $(this) + + if ($this.is('.disabled, :disabled')) return + + var $parent = getParent($this) + var isActive = $parent.hasClass('open') + + clearMenus() + + if (!isActive) { + if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { + // if mobile we use a backdrop because click events don't delegate + $('
').insertAfter($(this)).on('click', clearMenus) + } + + var relatedTarget = { relatedTarget: this } + $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget)) + + if (e.isDefaultPrevented()) return + + $this + .trigger('focus') + .attr('aria-expanded', 'true') + + $parent + .toggleClass('open') + .trigger('shown.bs.dropdown', relatedTarget) + } + + return false + } + + Dropdown.prototype.keydown = function (e) { + if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return + + var $this = $(this) + + e.preventDefault() + e.stopPropagation() + + if ($this.is('.disabled, :disabled')) return + + var $parent = getParent($this) + var isActive = $parent.hasClass('open') + + if ((!isActive && e.which != 27) || (isActive && e.which == 27)) { + if (e.which == 27) $parent.find(toggle).trigger('focus') + return $this.trigger('click') + } + + var desc = ' li:not(.divider):visible a' + var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc) + + if (!$items.length) return + + var index = $items.index(e.target) + + if (e.which == 38 && index > 0) index-- // up + if (e.which == 40 && index < $items.length - 1) index++ // down + if (!~index) index = 0 + + $items.eq(index).trigger('focus') + } + + function clearMenus(e) { + if (e && e.which === 3) return + $(backdrop).remove() + $(toggle).each(function () { + var $this = $(this) + var $parent = getParent($this) + var relatedTarget = { relatedTarget: this } + + if (!$parent.hasClass('open')) return + + $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) + + if (e.isDefaultPrevented()) return + + $this.attr('aria-expanded', 'false') + $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget) + }) + } + + function getParent($this) { + var selector = $this.attr('data-target') + + if (!selector) { + selector = $this.attr('href') + selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 + } + + var $parent = selector && $(selector) + + return $parent && $parent.length ? $parent : $this.parent() + } + + + // DROPDOWN PLUGIN DEFINITION + // ========================== + + function Plugin(option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.dropdown') + + if (!data) $this.data('bs.dropdown', (data = new Dropdown(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + var old = $.fn.dropdown + + $.fn.dropdown = Plugin + $.fn.dropdown.Constructor = Dropdown + + + // DROPDOWN NO CONFLICT + // ==================== + + $.fn.dropdown.noConflict = function () { + $.fn.dropdown = old + return this + } + + + // APPLY TO STANDARD DROPDOWN ELEMENTS + // =================================== + + $(document) + .on('click.bs.dropdown.data-api', clearMenus) + .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) + .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) + .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown) + .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown) + .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown) + +}(jQuery); diff --git a/server/sonar-web/src/main/js/translate.js b/server/sonar-web/src/main/js/translate.js index 9daa77f8899..7123c876141 100644 --- a/server/sonar-web/src/main/js/translate.js +++ b/server/sonar-web/src/main/js/translate.js @@ -62,14 +62,14 @@ window.requestMessages = function() { - var currentLocale = (navigator.language || navigator.userLanguage).replace('-', '_'); - var cachedLocale = localStorage.getItem('l10n.locale'); + var currentLocale = window.pageLang, + cachedLocale = localStorage.getItem('l10n.locale'); if (cachedLocale !== currentLocale) { localStorage.removeItem('l10n.timestamp'); } - var bundleTimestamp = localStorage.getItem('l10n.timestamp'); - var params = {}; + var bundleTimestamp = localStorage.getItem('l10n.timestamp'), + params = { locale: currentLocale }; if (bundleTimestamp !== null) { params.ts = bundleTimestamp; } diff --git a/server/sonar-web/src/main/less/components.less b/server/sonar-web/src/main/less/components.less index 12c41821334..860b68b0540 100644 --- a/server/sonar-web/src/main/less/components.less +++ b/server/sonar-web/src/main/less/components.less @@ -8,3 +8,5 @@ @import "components/search-navigator"; @import "components/typography"; @import "components/tooltips"; +@import "components/dropdowns"; +@import "components/menu"; diff --git a/server/sonar-web/src/main/less/components/dropdowns.less b/server/sonar-web/src/main/less/components/dropdowns.less new file mode 100644 index 00000000000..756622d3a53 --- /dev/null +++ b/server/sonar-web/src/main/less/components/dropdowns.less @@ -0,0 +1,119 @@ +@import (reference) "../mixins"; +@import (reference) "../variables"; +@import (reference) "../ui"; + + +.dropdown { + position: relative; +} + +.dropdown-toggle:focus { + outline: 0; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 5px 0; + list-style: none; + font-size: @smallFontSize; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + background-color: #fff; + border: 1px solid @barBorderColor; + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + background-clip: padding-box; + + &.pull-right { + right: 0; + left: auto; + } + + // Links within the dropdown menu + > li > a { + display: block; + padding: 3px 20px; + line-height: 1.5; + clear: both; + font-weight: normal; + color: @baseFontColor; + white-space: nowrap; // prevent links from randomly breaking onto new lines + } +} + +// Hover/Focus state +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: @baseFontColor; + background-color: @lightBlue; + } +} + +// Active state +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: @baseFontColor; + text-decoration: none; + outline: 0; + background-color: @lightBlue; + } +} + +// Open state for the dropdown +.open { + // Show the menu + > .dropdown-menu { + display: block; + } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } +} + +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: @smallFontSize; + color: @baseFontColor; + white-space: nowrap; // as with > li > a +} + +// Backdrop to catch body clicks on mobile, etc. +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: (1000 - 10); +} diff --git a/server/sonar-web/src/main/less/components/menu.less b/server/sonar-web/src/main/less/components/menu.less new file mode 100644 index 00000000000..0b78b90f030 --- /dev/null +++ b/server/sonar-web/src/main/less/components/menu.less @@ -0,0 +1,53 @@ +@import (reference) "../mixins"; +@import (reference) "../variables"; +@import (reference) "../ui"; + +.menu { + min-width: 160px; + padding: 5px 0; + list-style: none; + font-size: @smallFontSize; + text-align: left; + background-color: #fff; + background-clip: padding-box; + + > li > a, + > li > span { + display: block; + padding: 3px 20px; + line-height: 1.5; + clear: both; + font-weight: normal; + .text-ellipsis; + } + + > li > a { + color: @baseFontColor; + } + + .divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: @barBorderColor; + } +} + + +.menu > li > a { + &:hover, &:focus { + text-decoration: none; + color: @baseFontColor; + background-color: @lightBlue; + } +} + + +.menu > .active > a { + &, &:hover, &:focus { + color: @baseFontColor; + text-decoration: none; + outline: 0; + background-color: @lightBlue; + } +} diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less index f73ff56db1e..389479102c4 100644 --- a/server/sonar-web/src/main/less/components/search-navigator.less +++ b/server/sonar-web/src/main/less/components/search-navigator.less @@ -2,41 +2,38 @@ @import (reference) "../mixins"; @import (reference) "../ui"; -@sideWidth: 300px; +@sideWidth: 180px; .search-navigator { + .clearfix; - &.sticky { - - .search-navigator-workspace-header { - position: fixed; - z-index: 4; - top: 0; - left: @sideWidth; - right: 0; - } - - .search-navigator-workspace-list, - .search-navigator-workspace-details { - padding-top: 22px + 5px + 5px + 1px + 10px; - } - - .search-navigator-side { - position: fixed; - z-index: 4; - top: 0; - bottom: 0; - overflow-y: auto; - } - - } +// &.sticky { +// +// .search-navigator-workspace-header { +// position: fixed; +// z-index: 4; +// top: 0; +// left: @sideWidth; +// right: 0; +// } +// +// .search-navigator-workspace-list, +// .search-navigator-workspace-details { +// padding-top: 22px + 5px + 5px + 1px + 10px; +// } +// +// .search-navigator-side { +// position: fixed; +// z-index: 4; +// top: 0; +// bottom: 0; +// overflow-y: auto; +// } +// +// } } .search-navigator-side { - position: fixed; - z-index: 100; - width: @sideWidth; - top: 30px; left: 0; bottom: 0; .box-sizing(border-box); background-color: @barBorderColor; overflow-x: hidden; @@ -117,11 +114,6 @@ } .search-navigator-facet-half { - width: 45%; - - &:nth-child(odd) { - margin-right: 10%; - } } .search-navigator-facet-header { @@ -181,7 +173,7 @@ } .search-navigator-facet-input { - width: @sideWidth * 0.4; + width: 100%; } .search-navigator-filters { @@ -258,7 +250,7 @@ } .search-navigator-workspace { - padding-left: @sideWidth; + } .search-navigator-workspace-header { @@ -266,8 +258,6 @@ margin-bottom: 10px; padding: 5px 0; line-height: 22px; - border-bottom: 1px solid @barBorderColor; - background-color: @barBackgroundColor; font-size: @smallFontSize; .button-group, @@ -287,7 +277,6 @@ top: 0; right: 0; padding: 5px 10px; - background-color: @barBackgroundColor; font-size: 0; white-space: nowrap; @@ -296,7 +285,7 @@ position: absolute; top: 0; bottom: 0; right: 100%; width: 10px; - background-image: linear-gradient(to right, fade(@barBackgroundColor, 0%), @barBackgroundColor 75%); + background-image: linear-gradient(to right, fade(#fff, 0%), #fff 75%); } } @@ -312,11 +301,7 @@ } .search-navigator-workspace-list { - padding: 0 5px; - .issue { - max-width: none; - } } .search-navigator-workspace-details { diff --git a/server/sonar-web/src/main/less/icons.less b/server/sonar-web/src/main/less/icons.less index 189dfd35795..c4489efa00c 100644 --- a/server/sonar-web/src/main/less/icons.less +++ b/server/sonar-web/src/main/less/icons.less @@ -541,6 +541,9 @@ a[class^="icon-"], a[class*=" icon-"] { content: "\f002"; font-size: @iconFontSize; } +.icon-user:before { + content: "\e60a"; +} /* diff --git a/server/sonar-web/src/main/less/issues.less b/server/sonar-web/src/main/less/issues.less index 1bb3b601012..e3a58587aad 100644 --- a/server/sonar-web/src/main/less/issues.less +++ b/server/sonar-web/src/main/less/issues.less @@ -7,14 +7,14 @@ .issues { - &.sticky { - - .issues-workspace-list, - .issues-workspace-component-viewer { - padding-top: 22px + 5px + 5px + 1px + 10px; - } - - } +// &.sticky { +// +// .issues-workspace-list, +// .issues-workspace-component-viewer { +// padding-top: 22px + 5px + 5px + 1px + 10px; +// } +// +// } } .issues-workspace-list-component { diff --git a/server/sonar-web/src/main/less/layout-new.less b/server/sonar-web/src/main/less/layout-new.less new file mode 100644 index 00000000000..a906046e4b3 --- /dev/null +++ b/server/sonar-web/src/main/less/layout-new.less @@ -0,0 +1,54 @@ +@import (reference) "mixins"; +@import (reference) "variables"; +@import (reference) "ui"; + +@pageWidth: 1020px; +@containerWidth: 980px; +@sideWidth: 200px; +@sideMargin: 10px; + +html { + overflow-y: scroll; +} + +body { + min-width: @pageWidth; +} + +.container { + width: @containerWidth; + margin: 0 auto; + .box-sizing(border-box); +} + +.container-one-third { + width: @containerWidth / 3; +} + +.container-two-thirds { + width: @containerWidth / 3 * 2; +} + +.container-one-half { + width: @containerWidth / 2; +} + +.container-side { + width: @sideWidth; + .box-sizing(border-box); +} + +.container-side-left { + float: left; + padding-right: @sideMargin; +} + +.container-side-right { + float: right; + padding-left: @sideMargin; +} + +.container-main { + float: left; + width: @containerWidth - @sideWidth; +} diff --git a/server/sonar-web/src/main/less/layout.less b/server/sonar-web/src/main/less/layout.less index 7ccf1d683c1..bb3b65bef9b 100644 --- a/server/sonar-web/src/main/less/layout.less +++ b/server/sonar-web/src/main/less/layout.less @@ -2,83 +2,17 @@ @import (reference) "variables"; @import (reference) "ui"; -@media print { - /* ------------------- PRINT ------------------- */ - html, body { - font-size: 8pt; - } - - a, a:link, a:visited { - text-decoration: none; - border-bottom: 0; - } - - .noprint { - display: none !important; - } - - .print { - display: inline; - position: static; - left: 0; - } - - #hd, #sidebar, #crumbs { - display: none; - } - - .with_sidebar, .wo_sidebar { - padding: 0 !important; - margin: 0; - } - - #content { - margin-left: 0 !important; - } - - .widget thead, .widget tfoot { - // Fix for phantomjs bug about wrapping tables - display: table-row-group; - } -} - -@media screen { - .print { - display: none; - } -} - -body, a { - color: #444; -} - -/* LAYOUT */ -#container { - height: auto !important; - min-width: 940px; - min-height: 500px; -} - #hd { - color: #FFF; - background: #262626; - padding: 0 10px; - height: 30px; - line-height: 30px; - font-size: 93%; - margin: 0; position: relative; -} - -#hd #nav-left > ul > li { - height: 30px; + background: @darkColor; + height: 40px; + line-height: 40px; + color: @lightColor; } #hd a { color: #fff; .link-no-underline; - - &.selected, &:hover, &:focus { color: @blue; } } #nav-left { @@ -97,12 +31,28 @@ body, a { #nav-left > ul > li { float: left; - padding: 0 20px 0 0; +} + +#nav-left > ul > li > a { + display: block; + height: 40px; + padding: 0 10px; + .box-sizing(border-box); +} + +#nav-left > ul > li > a:hover, +#nav-left > ul > li > a:focus, +#nav-left > ul > li > a.selected { + background-color: #000; +} + +#nav-left > ul > li > a.selected { + color: @blue !important; } #nav-left > ul > li > a, #nav > ul > li > a { - font-size: @smallFontSize; + font-size: @baseFontSize; font-weight: 300; letter-spacing: 0.05em; } @@ -187,6 +137,7 @@ body, a { #body { position: relative; + padding-top: 10px; } .with_sidebar { @@ -199,13 +150,7 @@ body, a { } #sidebar { - position: absolute; - top: 0; left: 10px; - width: 150px; - - &.sticky { - position: fixed; - } + margin-bottom: 10px; } ul.sidebar { @@ -215,6 +160,7 @@ ul.sidebar { } ul.sidebar li { + display: inline-block; list-style-type: none; padding: 3px 10px; } @@ -268,7 +214,7 @@ ul.sidebar select, ul.sidebar input { } .page { - padding: 10px; + padding: 10px 0; } .page-split-left { min-width: 200px; @@ -308,3 +254,49 @@ ul.sidebar select, ul.sidebar input { .nolayout { padding: 10px; } + +@media print { + /* ------------------- PRINT ------------------- */ + html, body { + font-size: 8pt; + } + + a, a:link, a:visited { + text-decoration: none; + border-bottom: 0; + } + + .noprint { + display: none !important; + } + + .print { + display: inline; + position: static; + left: 0; + } + + #hd, #sidebar, #crumbs { + display: none; + } + + .with_sidebar, .wo_sidebar { + padding: 0 !important; + margin: 0; + } + + #content { + margin-left: 0 !important; + } + + .widget thead, .widget tfoot { + // Fix for phantomjs bug about wrapping tables + display: table-row-group; + } +} + +@media screen { + .print { + display: none; + } +} diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/navbar.less new file mode 100644 index 00000000000..b7a3affa4dc --- /dev/null +++ b/server/sonar-web/src/main/less/navbar.less @@ -0,0 +1,218 @@ +@import (reference) "mixins"; +@import (reference) "variables"; +@import (reference) "ui"; + +@navbarBackground: #262626; +@navbarProjectBackground: #565656; +@navbarSettingsBackground: #78674d; + +@navbarHeight: 36px; +@navbarLineHeight: 20px; +@navbarTopPadding: (@navbarHeight - @navbarLineHeight) / 2; + +.navbar-sticky { + padding-top: @navbarHeight !important; + + .navbar { + position: fixed; + z-index: 10; + top: 0; + left: 0; + right: 0; + margin-bottom: 0; + .trans(background-color, 0.5s ease); + } +} + +.navbar, [class^="navbar-"], [class*=" navbar-"] { + .box-sizing(border-box); +} + +.navbar { + .clearfix; + border-bottom: 3px solid @blue; +} + +.navbar-fade { + .navbar-nav { + opacity: 0; + .trans(opacity); + } + + .navbar-favorite { + margin-right: -23px; + .trans(margin); + } + + &.in { + .navbar-nav { + opacity: 1; + } + + .navbar-favorite { + margin-right: 0; + } + } +} + +.navbar a { + .link-no-underline; +} + +.navbar-header { + float: left; +} + +.navbar-brand { + position: relative; + float: left; + height: @navbarHeight; + padding: @navbarTopPadding 10px; + font-size: @bigFontSize; + line-height: @navbarLineHeight; + color: @lightColor; + + max-width: 240px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap;; +} + +.navbar-logo { + @topPadding: (@navbarHeight - 25) / 2; + padding-top: @topPadding !important; + padding-bottom: @topPadding !important; +} + +.navbar-back-arrow { + position: absolute; + top: 13px; + left: 0; + + &:before { + font-size: 18px; + } +} + +.navbar-nav { + float: left; +} + +.navbar-nav > li { + float: left; +} + +.navbar-nav > li > a { + padding: @navbarTopPadding 10px; + line-height: @navbarLineHeight; + color: @lightColor; + font-size: 12px; + font-weight: 300; + letter-spacing: 0.05em; + + &:hover, &:focus { + color: @lightColor; + } +} + +.navbar-nav > .active > a, +.navbar-nav > .dropdown.open > a { + color: @lightColor; +} + + +.navbar-icon:before { + font-size: @iconFontSize; +} + +.navbar-favorite { + position: relative; + top: -2px; +} + +.navbar-right { + float: right; +} + +.navbar-search { + position: relative; + width: 240px; + .box-sizing(border-box); + .trans(width); + + &.open { + width: 40vw; + } +} + +.navbar-search-input { + width: 100%; + padding: 0 20px 0 40px !important; + border: none !important; +} + +.navbar-search-icon { + position: absolute; + top: 4px; + left: 20px; + color: @secondFontColor; + + &:before { + font-size: @iconSmallFontSize; + } +} + +.navbar-search-extra { + display: inline-block; + width: 90px; + margin-right: 10px; + text-align: right; +} + + +.navbar-global { + background-color: @navbarBackground; + + .navbar-sticky.middle & { + background-color: fade(@navbarBackground, 90%); + } + + .navbar-nav > li > a:hover, + .navbar-nav > li > a:focus, + .navbar-nav > .active > a, + .navbar-nav > .dropdown.open > a { + background-color: darken(@navbarBackground, 10%); + } +} + + +.navbar-project { + background-color: @navbarProjectBackground; + + .navbar-sticky.middle & { + background-color: fade(@navbarProjectBackground, 90%); + } + + .navbar-nav > li > a:hover, + .navbar-nav > li > a:focus, + .navbar-nav > .active > a, + .navbar-nav > .dropdown.open > a { + background-color: darken(@navbarProjectBackground, 10%); + } +} + + +.navbar-settings { + background-color: @navbarSettingsBackground; + + .navbar-sticky.middle & { + background-color: fade(@navbarSettingsBackground, 90%); + } + + .navbar-nav > li > a:hover, + .navbar-nav > li > a:focus, + .navbar-nav > .active > a, + .navbar-nav > .dropdown.open > a { + background-color: darken(@navbarSettingsBackground, 10%); + } +} diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less index 5db86117768..8d2a145e9b3 100644 --- a/server/sonar-web/src/main/less/style.less +++ b/server/sonar-web/src/main/less/style.less @@ -1971,54 +1971,6 @@ table.nowrap td.small, td.nowrap.small, th.nowrap.small { cursor: pointer; } -.dropdown { - cursor: pointer; - display: inline-block; - text-decoration: none !important; - /* zoom and *display = ie7 hack for display:inline-block */ - zoom: 1; - *display: inline; -} - -.dropdown-menu { - background-clip: padding-box; - background-color: #FFFFFF; - border: 1px solid #DDD; - box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); - float: left; - margin: 0; - max-width: 220px; - min-width: 160px; - padding: 0; - position: absolute; - z-index: 1000; -} - -.dropdown-menu h2 { - padding: 0 8px; - font-size: 100%; - font-weight: bold; -} - -.dropdown-menu li { - list-style-type: none !important; - line-height: 24px; - height: 24px; - padding: 0 8px; - cursor: pointer !important; - float: none !important; -} - -.dropdown-menu li:hover { - background-color: @lightBlue !important; -} - -.dropdown-menu a { - text-decoration: none !important; - border-bottom: none !important; - color: @baseFontColor !important; -} - .form-key-cell { padding: 2px 8px 4px 10px; text-align: right; @@ -2405,7 +2357,7 @@ div.rule-title { .sonar-d3 .plot .arc:hover, .sonar-d3 .plot .arc.hover { - opacity: 1; + fill: #4f9ed3; } .sonar-d3 .plot .line { @@ -2570,10 +2522,10 @@ text.max-results-reached-message { top: 5px; right: 5px; line-height: @iconSmallFontSize; color: #fff; - opacity: 0.5; + fill: #fff; .link-no-underline; - &:hover { opacity: 1; } + &:hover { fill: #4f9ed3; } } .sonar-d3 .treemap-link i, @@ -2759,3 +2711,69 @@ text.max-results-reached-message { } } + + +.sq-logo { + .sq-logo-arc { + fill: @blue; + } + + .sq-logo-letter { + fill: #fff; + } + + &:not(.sq-logo-small):hover { + .sq-logo-arc1 { + .animation(sq-logo-arc1-animation 0.75s infinite); + } + .sq-logo-arc2 { + .animation(sq-logo-arc2-animation 0.75s infinite); + } + .sq-logo-arc3 { + .animation(sq-logo-arc3-animation 0.75s infinite); + } + } +} + +.sq-logo-small { + .sq-logo-arc { + fill: #fff; + } +} + +@-webkit-keyframes sq-logo-arc1-animation { + 0% { fill: #4f9ed3; } + 33% { fill: #b5c8d3; } + 67% { fill: #4f9ed3; } + 100% { fill: #4f9ed3; } +} +@-webkit-keyframes sq-logo-arc2-animation { + 0% { fill: #4f9ed3; } + 33% { fill: #4f9ed3; } + 67% { fill: #b5c8d3; } + 100% { fill: #4f9ed3; } +} +@-webkit-keyframes sq-logo-arc3-animation { + 0% { fill: #4f9ed3; } + 33% { fill: #4f9ed3; } + 67% { fill: #4f9ed3; } + 100% { fill: #b5c8d3; } +} +@keyframes sq-logo-arc1-animation { + 0% { fill: #4f9ed3; } + 33% { fill: #b5c8d3; } + 67% { fill: #4f9ed3; } + 100% { fill: #4f9ed3; } +} +@keyframes sq-logo-arc2-animation { + 0% { fill: #4f9ed3; } + 33% { fill: #4f9ed3; } + 67% { fill: #b5c8d3; } + 100% { fill: #4f9ed3; } +} +@keyframes sq-logo-arc3-animation { + 0% { fill: #4f9ed3; } + 33% { fill: #4f9ed3; } + 67% { fill: #4f9ed3; } + 100% { fill: #b5c8d3; } +} diff --git a/server/sonar-web/src/main/less/ui.less b/server/sonar-web/src/main/less/ui.less index 5081ad535c1..3ac51687ff0 100644 --- a/server/sonar-web/src/main/less/ui.less +++ b/server/sonar-web/src/main/less/ui.less @@ -184,6 +184,7 @@ a { input[type=text], input[type=password], input[type=email], +input[type=search], textarea { border: 1px solid @darkGrey; .box-sizing(border-box); @@ -203,11 +204,16 @@ textarea { input[type=text], input[type=password], -input[type=email] { - height: 22px; +input[type=email], +input[type=search] { + height: @formControlHeight; padding: 0 3px; } +input[type=search] { + -webkit-appearance: none; +} + textarea { padding: 3px; } @@ -218,7 +224,7 @@ input[type=submit], input[type=button] { display: inline-block; vertical-align: baseline; - height: 22px; + height: @formControlHeight; margin: 0 1px; padding: 0 10px; @@ -264,7 +270,7 @@ input[type=button] { } } -.button { line-height: 22px; } +.button { line-height: @formControlHeight; } .button-red { &:hover, &:focus { @@ -419,7 +425,7 @@ input[type=button] { max-width: 900px; margin-left: -150px; padding: 0 10px; - line-height: 22px; + line-height: @formControlHeight; background-color: #f0e8ac; border-radius: 0 0 3px 3px; text-align: center; @@ -458,3 +464,21 @@ input[type=button] { font-weight: 500; text-align: center; } + + +.nav { + margin: 0; + padding: 0; + list-style: none; +} + +.nav > li { + position: relative; + display: block; +} + +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} diff --git a/server/sonar-web/src/main/less/variables.less b/server/sonar-web/src/main/less/variables.less index 37e5e29e364..bcb64f77280 100644 --- a/server/sonar-web/src/main/less/variables.less +++ b/server/sonar-web/src/main/less/variables.less @@ -35,6 +35,9 @@ @darkBlue: darken(@blue, 20%); +@darkColor: #262626; +@lightColor: #fff; + @highlighted: @blue; @highlightedBackground: @lightBlue; @contextBackground: lighten(@purple, 40%); @@ -47,6 +50,15 @@ @issueBorderColor: desaturate(darken(@issueBackgroundColor, 40%), 30%); + +/* + * Sizes + */ + +@formControlHeight: 22px; + + + /* * Icons */ diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/components_controller.rb b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/components_controller.rb index 410d59f601f..e4e8bd713d8 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/components_controller.rb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/components_controller.rb @@ -69,7 +69,7 @@ class Api::ComponentsController < Api::ApiController qualifier_results['items']=resource_indexes.map do |resource_index| resource=resources_by_id[resource_index.resource_id] { - 'id' => resource.id, + 'key' => resource.key, 'name' => resource.name(true) } end diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/comparison_controller.rb b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/comparison_controller.rb index 8966df0f57a..4b5a6d0e6c1 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/comparison_controller.rb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/comparison_controller.rb @@ -20,7 +20,7 @@ class ComparisonController < ApplicationController - SECTION=Navigation::SECTION_HOME + SECTION=Navigation::SECTION_TOOLS def index snapshots = [] diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/dependencies_controller.rb b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/dependencies_controller.rb index 16de4c40c8b..485592ea4ad 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/dependencies_controller.rb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/dependencies_controller.rb @@ -19,7 +19,7 @@ # class DependenciesController < ApplicationController - SECTION=Navigation::SECTION_HOME + SECTION=Navigation::SECTION_TOOLS SEARCH_MINIMUM_SIZE=3 QUALIFIERS=['TRK', 'BRC', 'LIB'] diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/models/navigation.rb b/server/sonar-web/src/main/webapp/WEB-INF/app/models/navigation.rb index 4b690d90178..ceb6678cb38 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/models/navigation.rb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/models/navigation.rb @@ -36,4 +36,5 @@ class Navigation SECTION_QUALITY_PROFILES = Navigation.new('quality_profiles', false) SECTION_QUALITY_GATES = Navigation.new('quality_gates', false) SECTION_CODING_RULES = Navigation.new('coding_rules', false) + SECTION_TOOLS = Navigation.new('tools', false) end diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_breadcrumb.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_breadcrumb.html.erb index 7b8d6f680e8..98e4d993b8f 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_breadcrumb.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_breadcrumb.html.erb @@ -6,105 +6,93 @@ <% if @breadcrumbs %>
-
    - <% if displayed_resource && !display_only_root %> -
  • - <%= link_to_favourite(displayed_resource) -%> -
    • - <% if has_role?(:admin, displayed_resource) && !displayed_resource.entity? %> - <%= render 'layouts/menu_resource_settings' -%> +
    +
      + <% + @breadcrumbs.each do |breadcrumb| + %> +
    • + <% if breadcrumb.is_a?(String) %> + <%= h breadcrumb -%> + <% + elsif breadcrumb.is_a?(Hash) + name = breadcrumb[:name] + url = breadcrumb[:url] + icon = breadcrumb[:icon] + %> + <% if icon %> + + <% end %> + <%= link_to_if url, h(name), url -%> + <% elsif breadcrumb.respond_to?(:html) %> + <%= breadcrumb.html -%> + <% end %> +
      • <% end %> - <% end %> -
    -
      - <% - @breadcrumbs.each do |breadcrumb| - %> -
    • - <% if breadcrumb.is_a?(String) %> - <%= h breadcrumb -%> - <% - elsif breadcrumb.is_a?(Hash) - name = breadcrumb[:name] - url = breadcrumb[:url] - icon = breadcrumb[:icon] - %> - <% if icon %><% end %> - <%= link_to_if url, h(name), url -%> - <% elsif breadcrumb.respond_to?(:html) %> - <%= breadcrumb.html -%> - <% end %> -
      • - <% end %> -
    +
+
<% elsif displayed_resource %> + <% + resource_link = {:controller => params[:controller], :action => params[:action]} + if display_only_root + resource_link = {:controller => 'dashboard', :action => 'index'} + end -
-
    - <% if displayed_resource && !display_only_root %> -
  • - <%= link_to_favourite(displayed_resource) -%> -
    • - <% if (has_role?(:admin, displayed_resource) || profiles_administrator?) && !displayed_resource.entity? %> - <%= render 'layouts/menu_resource_settings' -%> - <% end %> - <% end %> -
-
    - <% - resource_link = {:controller => params[:controller], :action => params[:action]} - if display_only_root - resource_link = {:controller => 'dashboard', :action => 'index'} - end + # ======== Path for resources ======== - # ======== Path for resources ======== + if displayed_resource + if displayed_resource.last_snapshot + resources=[] + s=displayed_resource.last_snapshot + while (s!=nil) do + resources.insert(0, s.project) + s=s.parent + end + else + resources = [displayed_resource] + end + %> - if displayed_resource - if displayed_resource.last_snapshot - resources=[] - s=displayed_resource.last_snapshot - while (s!=nil) do - resources.insert(0, s.project) - s=s.parent - end - else - resources = [displayed_resource] - end - %> - <% - resources.each do |resource| - %> -
  • - <%= qualifier_icon(resource) -%> -   - <%= - root = "#{ApplicationController.root_context}/#{u resource_link[:controller]}/#{u resource_link[:action]}?" - path = '' - query = request.query_parameters - query[:id] = resource.key - query.each do |key, value| - path += '&' unless path.empty? - path += "#{u key}=#{u value}" - end - "#{h(resource.name)}" - -%> -
    • - <% - end - end + <% if resources.length > 1 %> +
    +
    +
      + <% + resources.each do |resource| + %> +
    • + <%= qualifier_icon(resource) -%> +   + <%= + root = "#{ApplicationController.root_context}/#{u resource_link[:controller]}/#{u resource_link[:action]}?" + path = '' + query = request.query_parameters + query[:id] = resource.key + query.each do |key, value| + path += '&' unless path.empty? + path += "#{u key}=#{u value}" + end + "#{h(resource.name)}" + -%> +
      • + <% + end + end # ======== Path for issue ======== if @issue %> -
    • - <%= link_to message('issue') + ' #' + @issue.key.to_s -%> -
      • - <% - end - %> +
    • + <%= link_to message('issue') + ' #' + @issue.key.to_s -%> +
      • + <% + end + %>
    -
    +
    +
+ <% end %> <% end %> 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 fb83ec46c99..9b6c269c74c 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 @@ -6,198 +6,46 @@ @project=@resource unless @project || selected_section==Navigation::SECTION_HOME period_param = "period=#{u(params[:period])}" if params[:period] %> -
- <%= yield :header -%> -
- -
- -
- <%= render 'layouts/breadcrumb' if @breadcrumbs || selected_section==Navigation::SECTION_RESOURCE -%> -
- <% if selected_section && selected_section.show_sidebar && !@hide_sidebar %> - - <% end %> - <% - html_id_class = '' - html_id_class = "id='content' class='with_sidebar'" if selected_section && selected_section.show_sidebar - html_id_class = "id='content'" if @hide_sidebar || (selected_section && !selected_section.show_sidebar) - %> -
> - <% if @project %> -

<%= h @project.name() %>

- <% end %> - - - @@ -225,7 +73,8 @@

The embedded database will not scale, it will not support upgrading to newer versions of SonarQube, and there is no support for migrating your data out of it into a different database engine. <% end %>
- +
<% end %> diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_logo.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_logo.html.erb new file mode 100644 index 00000000000..51f0c126f18 --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_logo.html.erb @@ -0,0 +1,18 @@ + diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_menu_projects.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_menu_projects.html.erb deleted file mode 100644 index 4d18b7b330c..00000000000 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_menu_projects.html.erb +++ /dev/null @@ -1,46 +0,0 @@ - - -
  • - - <%= message('layout.projects') -%> - - - - - -
    • - - diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar.html.erb new file mode 100644 index 00000000000..fd8d74e7348 --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar.html.erb @@ -0,0 +1,5 @@ +<%= render 'layouts/navbar_conf' -%> +<%= render 'layouts/recent_history' -%> + 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 new file mode 100644 index 00000000000..d2a4eca1461 --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb @@ -0,0 +1,29 @@ +<% + selected_section = controller.class::SECTION if defined?(controller.class::SECTION) + if selected_section==Navigation::SECTION_RESOURCE && !@project && !@resource + selected_section = Navigation::SECTION_HOME + end + @project=@resource unless @project || selected_section==Navigation::SECTION_HOME + period_param = "period=#{u(params[:period])}" if params[:period] + displayed_resource = @resource || @project + display_only_root = @issue + resource_id=displayed_resource ? (displayed_resource.is_a?(Fixnum) ? displayed_resource : displayed_resource.permanent_id) : nil +%> + +<% if selected_section==Navigation::SECTION_RESOURCE %> + <%= render :partial => 'layouts/navbar_conf_project' %> +<% elsif selected_section==Navigation::SECTION_CONFIGURATION %> + <%= render :partial => 'layouts/navbar_conf_settings' %> +<% else %> + <%= render :partial => 'layouts/navbar_conf_global' %> +<% end %> + + + 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 new file mode 100644 index 00000000000..b3c48d945b6 --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_global.html.erb @@ -0,0 +1,76 @@ +<% + selected_section = controller.class::SECTION if defined?(controller.class::SECTION) + if selected_section==Navigation::SECTION_RESOURCE && !@project && !@resource + selected_section = Navigation::SECTION_HOME + end +%> + + diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_project.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_project.html.erb new file mode 100644 index 00000000000..5abfc35c7ca --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_project.html.erb @@ -0,0 +1,166 @@ +<% + @project=@resource unless @project || selected_section==Navigation::SECTION_HOME + period_param = "period=#{u(params[:period])}" if params[:period] + displayed_resource = @resource || @project + display_only_root = @issue + resource_id=displayed_resource ? (displayed_resource.is_a?(Fixnum) ? displayed_resource : displayed_resource.permanent_id) : nil +%> + + + 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 new file mode 100644 index 00000000000..084f8159718 --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf_settings.html.erb @@ -0,0 +1,109 @@ +<% + selected_section = controller.class::SECTION if defined?(controller.class::SECTION) + if selected_section==Navigation::SECTION_RESOURCE && !@project && !@resource + selected_section = Navigation::SECTION_HOME + end +%> + + diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_recent_history.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_recent_history.html.erb new file mode 100644 index 00000000000..51b81a44d3f --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_recent_history.html.erb @@ -0,0 +1,9 @@ + diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_small_logo.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_small_logo.html.erb new file mode 100644 index 00000000000..a7029b5ae50 --- /dev/null +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_small_logo.html.erb @@ -0,0 +1,9 @@ + diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb index 3c67adf30b2..52e8974dc14 100644 --- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb +++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb @@ -10,9 +10,10 @@ end %> <%= render :partial => 'layouts/head' unless params[:hd]=='false' %> +<%= render :partial => 'layouts/navbar' %> <% if params[:layout]=='false' %> <%= render :partial => 'layouts/nolayout' %> <% else %> <%= render :partial => 'layouts/layout' %> <% end %> -<%= render :partial => 'layouts/footer' unless params[:hd]=='false' %> \ No newline at end of file +<%= render :partial => 'layouts/footer' unless params[:hd]=='false' %> 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 ef44688c9c8..7db54b195d9 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -427,6 +427,7 @@ layout.sonar.slogan=Embrace Quality layout.dashboards=Dashboards layout.configuration=Project Configuration layout.projects=Projects +layout.tools=Tools layout.recent_projects=Recent Projects layout.user_panel.my_profile=My profile