From: Stas Vilchik Date: Tue, 8 Apr 2014 11:00:47 +0000 (+0600) Subject: Air design for navigator pages X-Git-Tag: 4.3~103 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=e41b66fb97b873c0a7f799fd9edbd7f7ce1ba73e;p=sonarqube.git Air design for navigator pages --- diff --git a/sonar-server/src/main/coffee/coding-rules/app.coffee b/sonar-server/src/main/coffee/coding-rules/app.coffee index d32e5d91208..e9bc853cd8a 100644 --- a/sonar-server/src/main/coffee/coding-rules/app.coffee +++ b/sonar-server/src/main/coffee/coding-rules/app.coffee @@ -171,7 +171,8 @@ requirejs [ # Construct layout App.addInitializer -> @layout = new CodingRulesLayout app: @ - jQuery('body').append @layout.render().el + jQuery('#content').append @layout.render().el + @layout.onResize() # Construct header diff --git a/sonar-server/src/main/coffee/coding-rules/layout.coffee b/sonar-server/src/main/coffee/coding-rules/layout.coffee index 3f6e6221d72..48b4e68444c 100644 --- a/sonar-server/src/main/coffee/coding-rules/layout.coffee +++ b/sonar-server/src/main/coffee/coding-rules/layout.coffee @@ -21,9 +21,25 @@ define [ facetsRegion: '.navigator-facets' - onRender: -> - # Adjust details region height - @$(@detailsRegion.el).css 'bottom', jQuery('#footer').outerHeight() + initialize: -> + jQuery(window).on 'resize', => @onResize() + + + onResize: -> + footerEl = jQuery('#footer') + footerHeight = footerEl.outerHeight true + + resultsEl = jQuery('.navigator-results') + resultsHeight = jQuery(window).height() - resultsEl.offset().top - + parseInt(resultsEl.css('margin-bottom'), 10) - footerHeight + resultsEl.height resultsHeight + + detailsEl = jQuery('.navigator-details') + detailsWidth = jQuery(window).width() - detailsEl.offset().left - + parseInt(detailsEl.css('margin-right'), 10) + detailsHeight = jQuery(window).height() - detailsEl.offset().top - + parseInt(detailsEl.css('margin-bottom'), 10) - footerHeight + detailsEl.width(detailsWidth).height detailsHeight showSpinner: (region) -> diff --git a/sonar-server/src/main/coffee/quality-gate/app.coffee b/sonar-server/src/main/coffee/quality-gate/app.coffee index db18db98711..1e2e4b52c83 100644 --- a/sonar-server/src/main/coffee/quality-gate/app.coffee +++ b/sonar-server/src/main/coffee/quality-gate/app.coffee @@ -86,7 +86,8 @@ requirejs [ # Construct layout App.addInitializer -> @layout = new QualityGateLayout app: @ - jQuery('body').append @layout.render().el + jQuery('#content').append @layout.render().el + @layout.onResize() # Construct actions bar diff --git a/sonar-server/src/main/coffee/quality-gate/layout.coffee b/sonar-server/src/main/coffee/quality-gate/layout.coffee index ff7f6f54bbd..0b5941655d5 100644 --- a/sonar-server/src/main/coffee/quality-gate/layout.coffee +++ b/sonar-server/src/main/coffee/quality-gate/layout.coffee @@ -20,6 +20,7 @@ define [ initialize: (options) -> @listenTo options.app.qualityGates, 'all', @updateLayout + jQuery(window).on 'resize', => @onResize() updateLayout: -> @@ -28,8 +29,22 @@ define [ @$(@detailsRegion.el).toggle !empty - onRender: -> - @updateLayout() + onResize: -> + footerEl = jQuery('#footer') + footerHeight = footerEl.outerHeight true + + resultsEl = jQuery('.navigator-results') + resultsHeight = jQuery(window).height() - resultsEl.offset().top - + parseInt(resultsEl.css('margin-bottom'), 10) - footerHeight + resultsEl.height resultsHeight + + detailsEl = jQuery('.navigator-details') + detailsWidth = jQuery(window).width() - detailsEl.offset().left - + parseInt(detailsEl.css('margin-right'), 10) + detailsHeight = jQuery(window).height() - detailsEl.offset().top - + parseInt(detailsEl.css('margin-bottom'), 10) - footerHeight + detailsEl.width(detailsWidth).height detailsHeight - # Adjust details region height - @$(@detailsRegion.el).css 'bottom', jQuery('#footer').outerHeight() + + onRender: -> + @updateLayout() \ No newline at end of file diff --git a/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs b/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs index 9019436610a..4f23b5d2820 100644 --- a/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs +++ b/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs @@ -1,6 +1,13 @@
-
-
-
\ No newline at end of file + +
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/sonar-server/src/main/hbs/quality-gates/quality-gates-layout.hbs b/sonar-server/src/main/hbs/quality-gates/quality-gates-layout.hbs index 32f6d7e2694..22f6fba05e7 100644 --- a/sonar-server/src/main/hbs/quality-gates/quality-gates-layout.hbs +++ b/sonar-server/src/main/hbs/quality-gates/quality-gates-layout.hbs @@ -1,4 +1,10 @@ -
-
-
-
\ No newline at end of file +
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/sonar-server/src/main/js/issues/app.js b/sonar-server/src/main/js/issues/app.js index 57de03ff16a..c23c65b6980 100644 --- a/sonar-server/src/main/js/issues/app.js +++ b/sonar-server/src/main/js/issues/app.js @@ -61,10 +61,6 @@ requirejs( }); - // Adjust details region height - jQuery('.navigator-details').css('bottom', jQuery('#footer').outerHeight()); - - NavigatorApp.addInitializer(function () { jQuery('html').addClass('navigator-page issues-page'); @@ -300,6 +296,28 @@ requirejs( }); + NavigatorApp.addInitializer(function () { + var onResize = function() { + var footerEl = jQuery('#footer'), + footerHeight = footerEl.outerHeight(true); + + var resultsEl = jQuery('.navigator-results'), + resultsHeight = jQuery(window).height() - resultsEl.offset().top - + parseInt(resultsEl.css('margin-bottom'), 10) - footerHeight; + resultsEl.height(resultsHeight); + + var detailsEl = jQuery('.navigator-details'), + detailsWidth = jQuery(window).width() - detailsEl.offset().left - + parseInt(detailsEl.css('margin-right'), 10), + detailsHeight = jQuery(window).height() - detailsEl.offset().top - + parseInt(detailsEl.css('margin-bottom'), 10) - footerHeight; + detailsEl.width(detailsWidth).height(detailsHeight); + }; + jQuery(window).on('resize', onResize); + onResize(); + }); + + NavigatorApp.getQuery = function (withoutId) { var query = this.filterBarView.getQuery(); if (!withoutId && this.favoriteFilter.id) { diff --git a/sonar-server/src/main/js/issues/extra.js b/sonar-server/src/main/js/issues/extra.js index 51dae17c33b..0d83417e8c6 100644 --- a/sonar-server/src/main/js/issues/extra.js +++ b/sonar-server/src/main/js/issues/extra.js @@ -941,7 +941,6 @@ define( onDomRefresh: function () { var sourceTitleHeight = this.$('.source_title').outerHeight(); - jQuery('.navigator-details').css('padding-top', (sourceTitleHeight + 10) + 'px'); }, diff --git a/sonar-server/src/main/less/coding-rules.less b/sonar-server/src/main/less/coding-rules.less index e04a966cf4b..359c2737498 100644 --- a/sonar-server/src/main/less/coding-rules.less +++ b/sonar-server/src/main/less/coding-rules.less @@ -11,18 +11,7 @@ margin: @navigatorPadding; } - .navigator-actions { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorFacetsHeight; - } - - .navigator-results { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight + - @navigatorFacetsHeight; - } - .navigator-details { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorFacetsHeight; - } } diff --git a/sonar-server/src/main/less/navigator/base.less b/sonar-server/src/main/less/navigator/base.less index 35c2b4212ff..1c020231c5f 100644 --- a/sonar-server/src/main/less/navigator/base.less +++ b/sonar-server/src/main/less/navigator/base.less @@ -14,92 +14,76 @@ } .navigator-header { - .navigator-element; - top: @navigatorTopOffset; - left: 0; - .size(100%, @navigatorHeaderHeight); + height: @navigatorHeaderHeight; + margin: @navigatorPadding; + border: 1px solid @navigatorBorderLightColor; + .box-sizing(border-box); } .navigator-filters { - .navigator-element; - top: @navigatorTopOffset + @navigatorHeaderHeight; - left: 0; - .size(100%, @navigatorFiltersHeight); + position: relative; + margin: @navigatorPadding; + border: 1px solid @navigatorBorderLightColor; + .box-sizing(border-box); } -.navigator-facets { - .navigator-element; - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; - left: 0; - .size(100%, @navigatorFacetsHeight); +.navigator-content { + display: table; + width: 100%; } -.navigator-results { - .navigator-element; - .box-sizing(content-box); - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight; - bottom: 0; - left: 0; - width: @navigatorResultsWidth - 1px; +.navigator-side { + display: table-cell; + vertical-align: top; + width: @navigatorResultsWidth + 2 * @navigatorPadding; } -.navigator-details { - .navigator-element; - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; - bottom: @navigatorBottomOffset; - left: @navigatorResultsWidth; - right: 0; +.navigator-main { + display: table-cell; + vertical-align: top; } -.navigator-actions { - .navigator-element; - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; - left: 0; - .size(@navigatorResultsWidth, @navigatorStatusHeight); +.navigator-facets { + height: @navigatorFacetsHeight; + margin: @navigatorPadding; + border: 1px solid @navigatorBorderLightColor; + .box-sizing(border-box); } -.navigator-notes { - .navigator-element; - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; - left: 0; - .size(100%, @navigatorNotesHeight); - display: none; +.navigator-results { + width: @navigatorResultsWidth; + margin: @navigatorPadding; + .box-sizing(border-box); } +.navigator-actions { + .clearfix; + width: @navigatorResultsWidth; + margin: 0 @navigatorPadding @navigatorPadding; + border: 1px solid @navigatorBorderLightColor; + .box-sizing(border-box); +} -.measures-page { - .navigator-results { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; - left: 0; - bottom: 36px; - width: 100%; - } +.navigator-details { + position: relative; + margin: 0 @navigatorPadding @navigatorPadding 0; } +.navigator-notes { + display: none; +} .navigator-with-notes { - .navigator-actions, - .navigator-details { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorNotesHeight; - } - - .navigator-results { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorNotesHeight + @navigatorStatusHeight; - } - .navigator-notes { display: block; } +} - .navigator-details .source_title { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorNotesHeight; - } - - .navigator-fetching.navigator-results-list:before { - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight + @navigatorNotesHeight; - } +.measures-page { + .navigator-details { overflow: visible; } + .page { padding: 0 0 0 @navigatorPadding; } } @@ -141,20 +125,20 @@ // Header .navigator-header { padding: 0 @navigatorPadding; - border-bottom: 1px solid @navigatorBorderColor; background-color: @navigatorBarBackground; font-size: 0; } .navigator-header-favorite { - padding-left: 46px; + padding-left: 58px; } .navigator-header-title { display: inline-block; vertical-align: middle; + color: @navigatorHeaderColor; font-size: 20px; - line-height: @navigatorHeaderHeight; + line-height: @navigatorHeaderLineHeight; } .navigator-header-title-note { @@ -211,17 +195,14 @@ // Notes .navigator-notes { + margin: 0 @navigatorPadding @navigatorPadding 0; padding: 0 @navigatorPadding; - border-bottom: 1px solid @navigatorBorderColor; + border: 1px solid @navigatorBorderColor; background-color: @navigatorBarBackground; color: #777; font-size: @smallFontSize; line-height: @navigatorNotesHeight; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } @@ -293,7 +274,6 @@ // Results .navigator-results { - border-right: 1px solid @navigatorBorderLightColor; background-color: @white; overflow-x: hidden; overflow-y: auto; @@ -302,8 +282,11 @@ .navigator-results-list { & > li { + position: relative; + z-index: 1; padding: @navigatorPadding / 2 0; - border-top: 1px solid transparent; + border: 1px solid; + border-color: @navigatorBorderLightColor transparent; cursor: pointer; .trans; @@ -332,30 +315,13 @@ } &.active { + z-index: 2; background-color: #CAE3F2; border-color: #4B9FD5; } - - &.with-context { - border-right: 6px solid @navigatorBorderLightColor; - } - - &:last-child { - border-bottom: 1px solid transparent; - - &.active { - border-bottom-color: #4B9FD5; - } - } } - & > li + li { - border-top-color: @navigatorBorderLightColor; - } - - & > li.active + li { - border-top-color: #4B9FD5; - } + & > li + li { margin-top: -1px; } &.navigator-fetching { @@ -386,15 +352,9 @@ // Details .navigator-details { - padding: @navigatorPadding; background-color: @white; overflow: auto; - .issues-page & { - padding-top: 62px; - padding-right: 0; - } - &.loading { background: @white url("../images/loading.gif") no-repeat 4px 2px; } @@ -408,19 +368,15 @@ } .source_title { - position: fixed; z-index: 3; top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight; left: @navigatorResultsWidth; right: 0; - padding: @navigatorPadding; - border-bottom: 1px solid @navigatorBorderLightColor; + padding: 0 0 @navigatorPadding 0; background-color: #fff; } .source { - padding-right: 10px; - & > table { border: 1px solid #DDD; } @@ -492,7 +448,7 @@ .navigator-actions-total { float: right; - line-height: @navigatorStatusHeight - 4px; + line-height: @navigatorStatusHeight; } .navigator-actions-bulk { @@ -507,18 +463,5 @@ // Footer .navigator-page #footer { - .navigator-element; - bottom: 0; - left: @navigatorResultsWidth; - right: 0; - margin: 0; border-top: 1px solid @navigatorBorderLightColor; -} - -.navigator-page #ftlinks { - margin-top: 0; -} - -.measures-page #footer { - left: 0; -} +} \ No newline at end of file diff --git a/sonar-server/src/main/less/navigator/config.less b/sonar-server/src/main/less/navigator/config.less index 2d920ff7e4c..4ad5424b817 100644 --- a/sonar-server/src/main/less/navigator/config.less +++ b/sonar-server/src/main/less/navigator/config.less @@ -1,11 +1,13 @@ @import "../variables"; // Layout -@navigatorTopOffset: 30px; +@navigatorTopOffset: 80px; @navigatorBottomOffset: 35px; -@navigatorHeaderHeight: 37px; -@navigatorFiltersHeight: 37px; +@navigatorHeaderHeight: 40px; +@navigatorHeaderLineHeight: @navigatorHeaderHeight - 3px; +@navigatorFiltersHeight: 40px; +@navigatorFiltersLineHeight: @navigatorFiltersHeight - 3px; @navigatorFacetsHeight: 90px; @navigatorStatusHeight: 30px; @navigatorNotesHeight: 20px; @@ -16,10 +18,12 @@ // Colors -@navigatorBarBackground: @grey; -@navigatorBorderColor: @darkGrey; -@navigatorBorderLightColor: lighten(@darkGrey, 8%); +@navigatorBarBackground: #f3f3f3; +@navigatorBorderColor: darken(@navigatorBarBackground, 5%); +@navigatorBorderLightColor: @navigatorBorderColor; +@navigatorHeaderColor: darken(@blue, 10%); -@navigatorHover: darken(@grey, 5%); + +@navigatorHover: darken(@navigatorBarBackground, 5%); @navigatorFilterPadding: @navigatorPadding; diff --git a/sonar-server/src/main/less/navigator/filters.less b/sonar-server/src/main/less/navigator/filters.less index e953c248763..6c02ed9d50e 100644 --- a/sonar-server/src/main/less/navigator/filters.less +++ b/sonar-server/src/main/less/navigator/filters.less @@ -5,7 +5,7 @@ .navigator-filters { - border-bottom: 1px solid @darkGrey; + padding-right: 85px; background-color: @navigatorBarBackground; font-size: 0; } @@ -13,8 +13,8 @@ .navigator-filters-list { display: inline-block; vertical-align: middle; - margin-bottom: -1px; font-size: 0; + margin-bottom: -1px; } .navigator-filter-submit, @@ -24,6 +24,25 @@ font-size: @baseFontSize; } +.navigator-filter-submit { + position: absolute; + top: 0; right: 0; + .size(85px, 100%); + margin: -1px -1px -1px 0; + padding: 0; + border: 1px solid darken(@blue, 10%); + .box-sizing(content-box); + background: @blue; + color: #fff; + font-weight: normal; + .trans; + + &:hover, &:focus { + border-color: @blue; + background-color: lighten(@blue, 10%); + } +} + .navigator-filter-list-favorite { position: relative; padding-left: 36px; @@ -42,15 +61,15 @@ z-index: 1; display: inline-block; vertical-align: top; - height: @navigatorFiltersHeight - 1px; - line-height: @navigatorFiltersHeight - 1px; - margin: -1px 0 0; - padding: 0 @navigatorFilterPadding; - border: 1px solid; - border-color: transparent @navigatorBorderLightColor; + height: @navigatorFiltersHeight; + line-height: @navigatorFiltersLineHeight; + margin: -1px 0 0 -1px; + padding: 0 1.5 * @navigatorFilterPadding; + border: 1px solid @navigatorBorderLightColor; + .box-sizing(border-box); white-space: nowrap; cursor: pointer; - transition: background 0.3s ease; + .trans; &:hover { z-index: 2; @@ -63,13 +82,6 @@ background: #fff; } - &:first-child { - border-left: none; - } -} - -.navigator-filter + .navigator-filter { - margin-left: -1px; } .navigator-filter-disabled { @@ -101,6 +113,7 @@ } .navigator-filter-context { + z-index: 3; background-color: @contextBackground; border-color: @contextBorder; } @@ -286,8 +299,8 @@ .navigator-filter-favorite { position: absolute; - top: -100%; left: 0; - border-top: none; + top: -@navigatorPadding - @navigatorFiltersHeight; + left: 0; } .navigator-filter-favorite-toggle { diff --git a/sonar-server/src/main/less/quality-gates.less b/sonar-server/src/main/less/quality-gates.less index 4d07ee8f986..5901f29c35c 100644 --- a/sonar-server/src/main/less/quality-gates.less +++ b/sonar-server/src/main/less/quality-gates.less @@ -6,22 +6,25 @@ .quality-gates-navigator { - .navigator-header { - left: @qualityGateSidebarWidth; - border-color: @navigatorBorderColor; + .navigator-side { + display: table-cell; + vertical-align: top; + width: @qualityGateSidebarWidth + 2 * @navigatorPadding; + } + .navigator-header { + margin-left: 0; .spinner { margin-top: 9px; } } .navigator-actions { - top: @navigatorTopOffset; height: @navigatorHeaderHeight; width: @qualityGateSidebarWidth; + margin: @navigatorPadding; padding: 0 @navigatorPadding; - border-color: @navigatorBorderColor; - border-bottom-color: @navigatorBarBackground; .navigator-header-title { + color: @baseFontColor; font-size: 13px; font-weight: bold; text-transform: uppercase; @@ -29,26 +32,13 @@ } .navigator-results { - top: @navigatorTopOffset + @navigatorHeaderHeight; - width: @qualityGateSidebarWidth - 1px; - border-color: @navigatorBorderColor; - } - - .navigator-details { - top: @navigatorTopOffset + @navigatorHeaderHeight; - left: @qualityGateSidebarWidth; - padding: @navigatorPadding; + width: @qualityGateSidebarWidth; } } -.quality-gates-page #footer { - left: @qualityGateSidebarWidth; -} - .quality-gates-nav { - background-color: @navigatorBarBackground; .navigator-results-list { @@ -56,7 +46,7 @@ border-color: transparent; &:hover:not(.active):not(.empty) { - background-color: @navigatorBorderLightColor; + background-color: @navigatorBarBackground; } &.active { diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb index e3a8629e89e..db0fd733ff3 100644 --- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb +++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb @@ -4,13 +4,18 @@
-
- <%= message('issue_filter.max_results_reached', :params => 10000) -%> -
-
-
-
+ +
+
+
+
+
+
+
<%= message('issue_filter.max_results_reached', :params => 10000) -%>
+
+
+
<%= render :partial => '/navigator/filter_templates' -%> diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb index 00c9287ce9e..f2794919597 100644 --- a/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb +++ b/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb @@ -7,9 +7,15 @@
<%= render :partial => 'search_header' -%>
+
-
- <%= render :partial => 'search_body' -%> + +
+
+
+ <%= render :partial => 'search_body' -%> +
+