From 89802cff662a028c977ea993a2408593fa863e89 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Thu, 10 Apr 2014 17:45:29 +0600 Subject: [PATCH] SONAR-5168 Left column on search pages should be resizeable --- .../src/main/coffee/coding-rules/app.coffee | 2 + .../main/coffee/coding-rules/layout.coffee | 47 ++++++++++++++++- .../hbs/coding-rules/coding-rules-layout.hbs | 1 + sonar-server/src/main/js/issues/app.js | 48 ++++++++++++++++-- sonar-server/src/main/less/icons.less | 5 ++ .../src/main/less/navigator/base.less | 40 ++++++++++----- .../src/main/less/navigator/filters.less | 2 +- sonar-server/src/main/less/ui.less | 2 +- sonar-server/src/main/less/variables.less | 8 +++ .../WEB-INF/app/views/issues/search.html.erb | 1 + sonar-server/src/main/webapp/fonts/sonar.eot | Bin 15172 -> 15356 bytes sonar-server/src/main/webapp/fonts/sonar.svg | 1 + sonar-server/src/main/webapp/fonts/sonar.ttf | Bin 15016 -> 15200 bytes sonar-server/src/main/webapp/fonts/sonar.woff | Bin 14936 -> 15176 bytes 14 files changed, 136 insertions(+), 21 deletions(-) diff --git a/sonar-server/src/main/coffee/coding-rules/app.coffee b/sonar-server/src/main/coffee/coding-rules/app.coffee index e9bc853cd8a..9d1393c46b2 100644 --- a/sonar-server/src/main/coffee/coding-rules/app.coffee +++ b/sonar-server/src/main/coffee/coding-rules/app.coffee @@ -150,6 +150,8 @@ requirejs [ collection: new Backbone.Collection r.facets @layout.facetsRegion.show @codingRulesFacetsView + @layout.onResize() + App.fetchFirstPage = (fromFacets = false) -> diff --git a/sonar-server/src/main/coffee/coding-rules/layout.coffee b/sonar-server/src/main/coffee/coding-rules/layout.coffee index 48b4e68444c..4f243a478e8 100644 --- a/sonar-server/src/main/coffee/coding-rules/layout.coffee +++ b/sonar-server/src/main/coffee/coding-rules/layout.coffee @@ -10,6 +10,7 @@ define [ className: 'navigator coding-rules-navigator' template: Templates['coding-rules-layout'] spinner: '' + storageKey: 'codingRulesResultsWidth' regions: @@ -21,20 +22,40 @@ define [ facetsRegion: '.navigator-facets' + ui: + side: '.navigator-side' + results: '.navigator-results' + details: '.navigator-details' + resizer: '.navigator-resizer' + + initialize: -> jQuery(window).on 'resize', => @onResize() + @isResize = false + jQuery('body').on 'mousemove', (e) => @processResize(e) + jQuery('body').on 'mouseup', => @stopResize() + + + onRender: -> + @ui.resizer.on 'mousedown', (e) => @startResize(e) + + resultsWidth = localStorage.getItem @storageKey + if resultsWidth + @$(@resultsRegion.el).width +resultsWidth + @ui.side.width +resultsWidth + 20 + onResize: -> footerEl = jQuery('#footer') footerHeight = footerEl.outerHeight true - resultsEl = jQuery('.navigator-results') + resultsEl = @ui.results resultsHeight = jQuery(window).height() - resultsEl.offset().top - parseInt(resultsEl.css('margin-bottom'), 10) - footerHeight resultsEl.height resultsHeight - detailsEl = jQuery('.navigator-details') + detailsEl = @ui.details detailsWidth = jQuery(window).width() - detailsEl.offset().left - parseInt(detailsEl.css('margin-right'), 10) detailsHeight = jQuery(window).height() - detailsEl.offset().top - @@ -44,3 +65,25 @@ define [ showSpinner: (region) -> @$(@[region].el).html @spinner + + + startResize: (e) -> + @isResize = true + @originalWidth = @ui.results.width() + @x = e.clientX + jQuery('html').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false) + + + processResize: (e) -> + if @isResize + delta = e.clientX - @x + @$(@resultsRegion.el).width @originalWidth + delta + @ui.side.width @originalWidth + 20 + delta + localStorage.setItem @storageKey, @ui.results.width() + @onResize() + + + stopResize: -> + if @isResize + jQuery('html').attr('unselectable', 'off').css('user-select', 'all').off('selectstart') + @isResize = false 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 4f23b5d2820..9180c4090ac 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 @@ -6,6 +6,7 @@
+
diff --git a/sonar-server/src/main/js/issues/app.js b/sonar-server/src/main/js/issues/app.js index c23c65b6980..26543828640 100644 --- a/sonar-server/src/main/js/issues/app.js +++ b/sonar-server/src/main/js/issues/app.js @@ -297,7 +297,7 @@ requirejs( NavigatorApp.addInitializer(function () { - var onResize = function() { + this.onResize = function() { var footerEl = jQuery('#footer'), footerHeight = footerEl.outerHeight(true); @@ -313,11 +313,53 @@ requirejs( parseInt(detailsEl.css('margin-bottom'), 10) - footerHeight; detailsEl.width(detailsWidth).height(detailsHeight); }; - jQuery(window).on('resize', onResize); - onResize(); + jQuery(window).on('resize', this.onResize); + this.onResize(); }); + NavigatorApp.addInitializer(function () { + var that = this; + jQuery('body') + .on('mousemove', function (e) { that.processResize(e); }) + .on('mouseup', function (e) { that.stopResize(); }); + jQuery('.navigator-resizer').on('mousedown', function (e) { that.startResize(e); }); + + var resultsWidth = localStorage.getItem('issuesResultsWidth'); + if (resultsWidth) { + jQuery('.navigator-results').width(+resultsWidth); + jQuery('.navigator-side').width(+resultsWidth + 20); + } + }); + + + NavigatorApp.startResize = function (e) { + this.isResize = true; + this.originalWidth = jQuery('.navigator-results').width(); + this.x = e.clientX; + jQuery('html').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false); + }; + + + NavigatorApp.processResize = function (e) { + if (this.isResize) { + var delta = e.clientX - this.x; + jQuery('.navigator-results').width(this.originalWidth + delta); + jQuery('.navigator-side').width(this.originalWidth + 20 + delta); + localStorage.setItem('issuesResultsWidth', jQuery('.navigator-results').width()); + this.onResize(); + } + }; + + + NavigatorApp.stopResize = function() { + if (this.isResize) { + jQuery('html').attr('unselectable', 'off').css('user-select', 'all').off('selectstart'); + } + this.isResize = false; + }; + + NavigatorApp.getQuery = function (withoutId) { var query = this.filterBarView.getQuery(); if (!withoutId && this.favoriteFilter.id) { diff --git a/sonar-server/src/main/less/icons.less b/sonar-server/src/main/less/icons.less index 489f8c2fb61..0042c5b31fe 100644 --- a/sonar-server/src/main/less/icons.less +++ b/sonar-server/src/main/less/icons.less @@ -406,6 +406,11 @@ a[class^="icon-"], a[class*=" icon-"] { content: "\f016"; font-size: @iconSmallFontSize; } +.icon-resizer:before { + content: "\f142"; + color: @darkGrey; + font-size: @iconFontSize; +} /* diff --git a/sonar-server/src/main/less/navigator/base.less b/sonar-server/src/main/less/navigator/base.less index 1c020231c5f..ca6ded4c1e9 100644 --- a/sonar-server/src/main/less/navigator/base.less +++ b/sonar-server/src/main/less/navigator/base.less @@ -33,9 +33,12 @@ } .navigator-side { + position: relative; display: table-cell; vertical-align: top; width: @navigatorResultsWidth + 2 * @navigatorPadding; + min-width: 275px + 2 * @navigatorPadding; + max-width: 600px + 2 * @navigatorPadding; } .navigator-main { @@ -51,22 +54,33 @@ } .navigator-results { + position: relative; + z-index: 2; width: @navigatorResultsWidth; + min-width: 275px; + max-width: 600px; margin: @navigatorPadding; .box-sizing(border-box); } .navigator-actions { - .clearfix; - width: @navigatorResultsWidth; + position: relative; + z-index: 4; margin: 0 @navigatorPadding @navigatorPadding; border: 1px solid @navigatorBorderLightColor; .box-sizing(border-box); + .clearfix; } .navigator-details { position: relative; - margin: 0 @navigatorPadding @navigatorPadding 0; + margin: 0 @navigatorPadding @navigatorPadding @navigatorPadding; +} + +.navigator-resizer { + position: absolute; + top: 50%; right: -1px; + cursor: col-resize; } .navigator-notes { @@ -330,12 +344,9 @@ } &:before { - position: fixed; + position: absolute; z-index: 3; - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight; - bottom: 0; - left: 0; - width: @navigatorResultsWidth - 1px; + top: 0; bottom: 0; left: 0; right: 0; } } } @@ -414,18 +425,18 @@ .trans; &:hover { - background-color: @navigatorBarBackground; + background-color: @navigatorHover; } } .navigator-actions-order-choices { - .navigator-element; - top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight; - left: 0; + position: absolute; + top: 100%; + left: -1px; min-width: @navigatorResultsWidth / 2; background-color: #fff; - border-bottom: 1px solid @navigatorBorderLightColor; - border-right: 1px solid @navigatorBorderLightColor; + border: 1px solid @navigatorBorderLightColor; + box-shadow: @defaultShadow; overflow: hidden; display: none; @@ -448,6 +459,7 @@ .navigator-actions-total { float: right; + height: @navigatorStatusHeight; line-height: @navigatorStatusHeight; } diff --git a/sonar-server/src/main/less/navigator/filters.less b/sonar-server/src/main/less/navigator/filters.less index d996b299bf5..47912285bc1 100644 --- a/sonar-server/src/main/less/navigator/filters.less +++ b/sonar-server/src/main/less/navigator/filters.less @@ -171,7 +171,7 @@ min-width: 100px; border: 1px solid @darkGrey; background: #fff; - box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); + box-shadow: @defaultShadow; font-size: @baseFontSize; transition: opacity 0.3s ease; diff --git a/sonar-server/src/main/less/ui.less b/sonar-server/src/main/less/ui.less index 6627c09b25b..47468a8a12a 100644 --- a/sonar-server/src/main/less/ui.less +++ b/sonar-server/src/main/less/ui.less @@ -126,4 +126,4 @@ input[type=button] { margin: 0 8px; font-size: @smallFontSize; } -} +} \ No newline at end of file diff --git a/sonar-server/src/main/less/variables.less b/sonar-server/src/main/less/variables.less index f9e3671e84c..b1effcb9415 100644 --- a/sonar-server/src/main/less/variables.less +++ b/sonar-server/src/main/less/variables.less @@ -60,6 +60,14 @@ +/* + * Shadows + */ + +@defaultShadow: 10px 10px 20px rgba(0, 0, 0, 0.5); + + + /* * Transitions */ 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 db0fd733ff3..7e10afb799b 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 @@ -10,6 +10,7 @@
+
<%= message('issue_filter.max_results_reached', :params => 10000) -%>
diff --git a/sonar-server/src/main/webapp/fonts/sonar.eot b/sonar-server/src/main/webapp/fonts/sonar.eot index de3c07b67e43591e3648dbeaa43f9e36cf36062c..c1f7f3604c07da2932998b35c42eb8d41f902c47 100755 GIT binary patch delta 481 zcmX?7_NScfk2M2Bg7ri;GnQ`-7q(4wsHrdPRQtfdz$nAO!0;zMvA6(83otM+NdRe% z^qk7Hm;ZOk0{IFI3}!qTsfj5}4k`W&3>G>-d9w_l00%dVJCL6OM#~>=+o#MMc=zv>BDu)od9}%+0JBjl{)71&J2CEg&G4 zCoTX4;(1~q3ODaNP@OhdAw)f+N-l%}r5IIV20?^3-#4>ml#y8?zbT&I<|_j?3&`IL z=X3a9!sy8s7Uqn$lM5`~FfrVo9A#NAoFmP~zzCGKWprlX0x4r)0{UNg^M6ZMMgV)6 BX2k#i delta 282 zcmexUex!`e#hQU(h1EnhGnS*po9!k#)YM0$`?WDJFv>76Fnmc*EG_`j0t^gHK+M3A zo>Q4N@#(`*AYX!k!89QwH8F+BSVonB!Mp+}ZIM15 zB@E0!DF&;K$svr@+z)_E69xqa76y^Yw;1&&b2FJuc4jhR-3(O4IJuF@Wb+m#QkxNb|Fc=ePOFz|8_Of#G~=HpmrVdh#0!b4HuVDwc01i&)iif?Uf8#5S8}StT(7 E01XC5`v3p{ diff --git a/sonar-server/src/main/webapp/fonts/sonar.svg b/sonar-server/src/main/webapp/fonts/sonar.svg index e78f7de92ad..a42e8c96720 100755 --- a/sonar-server/src/main/webapp/fonts/sonar.svg +++ b/sonar-server/src/main/webapp/fonts/sonar.svg @@ -61,5 +61,6 @@ + \ No newline at end of file diff --git a/sonar-server/src/main/webapp/fonts/sonar.ttf b/sonar-server/src/main/webapp/fonts/sonar.ttf index 32a776f885fa99d53b1ee4dd72a0d59c04e45f9d..d53c071c5f3537fae1ff7f34de0ac2ef905afda1 100755 GIT binary patch delta 464 zcmZ2c`k-urLVaPU+6M*(Mi~YMhCk_v#RWiGfPsNY0!VYD=TxS>{J%>U$X8%sFyqNc zO-x~ONbzT2u+Ra@n`Hn6IJjBdf&3I8UnL{Aq~h`)wge!*1IYi9lb@W}a&XE41_sL- zAipLzv7&&%gV7bp{{iGHbP=djX zL4kpVL2R-eqdue4H~)7NAnb$qyL~CVyaL-z>;vVp0#%8^my%xtu|S zL6gCbfx%opFRu)@+BA;OcOFv z6H}OsWmFj$%qxKMW*I;M4sI4VAb$gpuac2lQgK<4Edj{C0_1b(F8Bmf jgB$>+CkI%VGulkCpVglP1ND4H}hj)F!OT?kJa%H);D5c zFn0keNC08JNqn1i>DfMS7+)Wj5^*a{%u41}2+ zQv5T3f8A18CqBXRWWt~eQZ1VGgB3Ft?}W_dCUt8lm71fp8vgDwEH&`Yj;gsT|+}- zV_j=aH^*Y3*=$^&V{T--c)`S_;rcIkVW8$oCj_*Jfv$|)rPHmjl zFrluy2B=~O&>TkA?&`LBpg9e7ZD4aIZ&Xzbhp24>8rBF@TMbmZlQcW0&6t3&6J!q9 z&dofgA&ip~&C0l60R3;qpuoVwAU64tnLeY_WC3$?An9gq%KnpY3j;GarcEYqG8dBB zcERCWJipCX25wOJGccUb;eQFECqDpcvz;tq@rIA#HUk6mb_O8^h5!Zz+s%BIUW@=s Ce7N5L delta 388 zcmX?6cB4eB+~3X3KP1GTfx#+*fr|kMtOOVsCl^|XP1ND4H_c>VFwK-Gc=63YSl@_& z!7Kr&0F3!2@oh@ZO)LP49RP}b0pW;rzqa(mVxXA$79gJkiUl%K6H|awc3R6v-6o5d|7x1@rB!9oJa{{X_5jTPAvauX|n23mp)V*_KG0EWE8+*F{L z00RS~ItU+*)O%5oUt9uoyv4*9?xH{VWr4zf1%V_3Cy+2r5Mr>M?7~>P`7on8Be#VG z0|OIdCxaD(&E#K9RgBL!moqOg-2B-zh;g!uc{%q3pf(c*1qK!dk;%u*^(TKfH=C?) zVZyqZff*b$29p~sShX1$82|rg;Adb2ss>`a&BaIK`E9;3aI*jf7#Pl{W?zBPlh0U~ bGuljMv3$eDyq!Uafgyl_!DjP6OD{$M!DL*e -- 2.39.5