diff options
author | Thomas Steur <thomas.steur@gmail.com> | 2015-09-09 17:53:39 +0300 |
---|---|---|
committer | Thomas Steur <thomas.steur@gmail.com> | 2015-10-07 14:42:28 +0300 |
commit | 10d482f1d3deb4c717fbb87f523428196634a326 (patch) | |
tree | fe4ba19fe7a69afed399812fdeed70e123e79579 /plugins/SegmentEditor | |
parent | 8d2e4b1d1ae867b8a1fedcc0d937ef2ad00431b0 (diff) |
Left menu design
Diffstat (limited to 'plugins/SegmentEditor')
4 files changed, 57 insertions, 62 deletions
diff --git a/plugins/SegmentEditor/SegmentSelectorControl.php b/plugins/SegmentEditor/SegmentSelectorControl.php index 4e88d2191f..e37354e1cd 100644 --- a/plugins/SegmentEditor/SegmentSelectorControl.php +++ b/plugins/SegmentEditor/SegmentSelectorControl.php @@ -31,7 +31,7 @@ class SegmentSelectorControl extends UIControl $this->jsClass = "SegmentSelectorControl"; $this->cssIdentifier = "segmentEditorPanel"; - $this->cssClass = "piwikTopControl"; + $this->cssClass = "piwikTopControl borderedControl piwikSelector"; $this->idSite = $idSite ?: Common::getRequestVar('idSite', false, 'int'); diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js index f8def3655c..ee1c4b532a 100644 --- a/plugins/SegmentEditor/javascripts/Segmentation.js +++ b/plugins/SegmentEditor/javascripts/Segmentation.js @@ -210,7 +210,7 @@ Segmentation = (function($) { if(!$.browser.mozilla) { checkSelected = encodeURIComponent(checkSelected); } - + if( checkSelected == self.currentSegmentStr){ injClass = 'class="segmentSelected"'; } @@ -258,7 +258,7 @@ Segmentation = (function($) { var closeAllOpenLists = function() { $(".segmentationContainer", self.target).each(function() { - if($(this).closest('.segmentEditorPanel').hasClass("visible")) + if($(this).closest('.segmentEditorPanel').hasClass("expanded")) $(this).trigger("click"); }); }; @@ -370,7 +370,7 @@ Segmentation = (function($) { var bindEvents = function () { self.target.on('click', '.segmentationContainer', function (e) { // hide all other modals connected with this widget - if (self.content.closest('.segmentEditorPanel').hasClass("visible")) { + if (self.content.closest('.segmentEditorPanel').hasClass("expanded")) { if ($(e.target).hasClass("jspDrag") === true || $(e.target).hasClass("segmentFilterContainer") === true || $(e.target).parents().hasClass("segmentFilterContainer") === true @@ -378,12 +378,12 @@ Segmentation = (function($) { e.stopPropagation(); } else { self.jscroll.destroy(); - self.target.closest('.segmentEditorPanel').removeClass('visible'); + self.target.closest('.segmentEditorPanel').removeClass('expanded'); } } else { // for each visible segmentationContainer -> trigger click event to close and kill scrollpane - very important ! closeAllOpenLists(); - self.target.closest('.segmentEditorPanel').addClass('visible'); + self.target.closest('.segmentEditorPanel').addClass('expanded'); self.target.find('.segmentFilter').val(self.translations['General_Search']).trigger('keyup'); self.jscroll = self.target.find(".segmentList").jScrollPane({ autoReinitialise: true, @@ -1250,7 +1250,7 @@ $(document).ready(function() { } if ($(e.target).closest('.segmentListContainer').length === 0 - && self.$element.hasClass("visible") + && self.$element.hasClass("expanded") ) { $(".segmentationContainer", self.$element).trigger("click"); } @@ -1258,8 +1258,6 @@ $(document).ready(function() { $('body').on('mouseup', this.onMouseUp); - // re-initialize top controls since the size of the control is not the same after it's - // initialized. initTopControls(); }; diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less index 0109d11836..125a0c9f56 100644 --- a/plugins/SegmentEditor/stylesheets/segmentation.less +++ b/plugins/SegmentEditor/stylesheets/segmentation.less @@ -131,11 +131,6 @@ div.scrollable { padding: 0 0 8px 0; } -.segment-element .segment-nav h4.visits { - padding-left: 28px; - background: url(plugins/SegmentEditor/images/icon-users.png) 0 0 no-repeat; -} - .segment-element .segment-nav h4 a { color: #255792; text-decoration: none; @@ -403,7 +398,7 @@ div.scrollable { .segment-element .segment-footer { background: #eae8e3; - border-top: 1px solid #a9a399; + border-top: 1px solid @theme-color-background-tinyContrast; text-align: right; padding: 7px 10px; margin: 0 -4px -6px -4px; @@ -430,11 +425,14 @@ div.scrollable { z-index: 121; /* Should be bigger than 'Dashboard widget selector' (z-index: 120) */ background: #f7f7f7; border: 1px solid #e4e5e4; - padding: 5px 10px 6px 10px; margin-right: 10px; border-radius: 4px; color: @theme-color-text-light; font-size: 14px; + + .segmentListContainer { + line-height: 14px; + } } .top_controls .segmentEditorPanel { @@ -486,7 +484,6 @@ div.scrollable { .segmentationContainer ul.submenu { padding-top: 5px; display: none; - float: left; margin-bottom: 5px; } @@ -501,54 +498,53 @@ div.scrollable { height: 16px; } -.segmentEditorPanel.visible .segmentationContainer { - width: 200px; +.segmentEditorPanel.expanded .segmentationContainer { + width: 240px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.segmentEditorPanel.visible ul.submenu { - display: block; +.segmentEditorPanel.expanded ul.submenu { + display: inline-block; list-style: none; } .segmentFilterContainer { - margin-left: -10px; - margin-right: -10px; margin-bottom: 10px; + display: inline-block; } -.segmentEditorPanel.visible .segmentFilterContainer > input[type="text"] { - font-size: 13px; - width: 100%; +.segmentEditorPanel.expanded .segmentFilterContainer > input[type="text"] { + font-size: 11px; + width: 200px; padding: 0; - border: 1px solid #ccc; - border-width: 1px 0; + border: 1px solid #d0d0d0; + border-width: 1px; color: #999; - padding: 11px 32px 11px 12px; + padding: 7px 10px 7px 10px; } -.segmentEditorPanel.visible .segmentFilterContainer > span { +.segmentEditorPanel.expanded .segmentFilterContainer > span { position: absolute; width: 13px; height: 13px; - right: 12px; - top: 16px; + right: 23px; + top: 48px; cursor: pointer; } -.segmentEditorPanel.visible .segmentFilterContainer:hover > span { +.segmentEditorPanel.expanded .segmentFilterContainer:hover > span { background: url(plugins/SegmentEditor/images/reset_search.png); } -.segmentEditorPanel.visible .filterNoResults { +.segmentEditorPanel.expanded .filterNoResults { font-style: italic; } -.segmentEditorPanel.visible .add_new_segment { +.segmentEditorPanel.expanded .add_new_segment { clear: both; float: right; - margin: 12px 0 10px; + margin: 12px 9px 10px 0; } .segmentationContainer > ul.submenu > li { @@ -557,14 +553,6 @@ div.scrollable { cursor: pointer; } -span.segmentationTitle { - background: url(plugins/Morpheus/images/sort_subtable_desc.png) no-repeat right 0; - padding-right: 20px; - min-width: 180px; - display: block; - cursor: pointer; -} - .segmentList { max-height: 300px; margin-top: 5px; @@ -668,28 +656,26 @@ a.metric_category { z-index: 1000 !important; } +.ui-autocomplete.ui-menu.ui-widget { + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); +} + @media all and (max-width: 749px) { span.segmentationTitle, - .segmentEditorPanel.visible .segmentationContainer { + .segmentEditorPanel.expanded .segmentationContainer { width: auto; } } .dropdown-body { - position: absolute; - top: 100%; - left: -1px; background-color: #f7f7f7; - padding: 0px 10px; - border: 1px solid #e4e5e4; border-top-width: 0px; display: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } -.segmentEditorPanel.visible .dropdown-body { - display: block; +.segmentEditorPanel.expanded .dropdown-body { border-top-left-radius: 0; border-top-right-radius: 0; } @@ -699,7 +685,7 @@ a.metric_category { background: #f1f0eb } -.segmentEditorPanel.visible { +.segmentEditorPanel.expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -711,7 +697,8 @@ a.metric_category { .available_segments { display: inline-block; - width: 160px; + width: 150px; + padding-left: 5px; } .segmentationTitle, @@ -722,7 +709,6 @@ a.metric_category { white-space: nowrap; } -.segmentationTitle, .segment-element .segment-nav a.dropdown { max-width: 180px; } @@ -731,8 +717,18 @@ a.metric_category { max-width: 145px; } -.segmentEditorPanel.visible .segmentationTitle { - max-width: 200px; +.segmentEditorPanel .segmentationTitle { + text-overflow: ellipsis; + display: inline-block; + max-width: 170px; +} + +.segmentEditorPanel a.title { + padding-bottom: 8px; +} + +.segmentEditorPanel.expanded .segmentationTitle { + max-width: 180px; overflow: visible; /* restore default */ white-space: normal; /* restore default */ } diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig index d9d9f3fb9d..7a8019d37e 100644 --- a/plugins/SegmentEditor/templates/_segmentSelector.twig +++ b/plugins/SegmentEditor/templates/_segmentSelector.twig @@ -1,7 +1,7 @@ <div class="SegmentEditor" style="display:none;"> - <div class="segmentationContainer listHtml"> - <span class="segmentationTitle"></span> - <div class="dropdown-body"> + <div class="segmentationContainer listHtml" title="{{ 'SegmentEditor_ChooseASegment'|translate|e('html_attr') }}"> + <a class="title"><span class="icon icon-segment"></span><span class="segmentationTitle"></span></a> + <div class="dropdown dropdown-body"> <div class="segmentFilterContainer"> <input class="segmentFilter" type="text" value="{{ 'General_Search'|translate }}"/> <span/> @@ -86,9 +86,10 @@ <a href="#">+ {{ 'SegmentEditor_AddANDorORCondition'|translate(andCondition)|raw }}</a> </div> </div> - <div class="segment-element"> + <div class="segment-element borderedControl expanded"> <div class="segment-nav"> - <h4 class="visits"><span class="available_segments"><strong> + <h4 class="visits"> + <span class="icon-segment"></span><span class="available_segments"><strong> <select class="available_segments_select"></select> </strong></span></h4> <div class="scrollable"> |