Revert "update mobile view and remove the js test related"m-17890-remove-segment-selector

This reverts commit d3cd035079522dce09215b0c46c99e84d65c6dfc.

6 files changed, 36 insertions, 36 deletions

diff --git a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
index 9c4a424b48..782db0a88e 100644
--- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
+++ b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
@@ -1,10 +1,6 @@
 .segment-generator {
   width: 900px;
 
-  @media screen and (max-width: 749px) {
-    width: 100%;
-  }
-
   .segment-row-inputs {
     .form-group {
       margin-top: 0;
@@ -114,11 +110,6 @@
     padding: 12px 1%;
     background: #efefeb;
     padding: 0 5px 0 5px;
-
-    @media screen and (max-width: 749px) {
-      width: 100%;
-    }
-
   }
 
   .segment-row .segment-close {
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index 620965d6c1..a3d4c042cb 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -288,6 +288,20 @@ Segmentation = (function($) {
 
         var getFormHtml = function() {
             var html = self.editorTemplate.find("> .segment-element").clone();
+            // set left margin to center form
+            var segmentsDropdown = $(html).find(".available_segments_select");
+            var segment, newOption;
+            newOption = '<option data-idsegment="" data-definition="" title="'
+                + self.translations['SegmentEditor_AddNewSegment']
+                + '">' + self.translations['SegmentEditor_AddNewSegment']
+                + '</option>';
+            segmentsDropdown.append(newOption);
+            for(var i = 0; i < self.availableSegments.length; i++)
+            {
+                segment = self.availableSegments[i];
+                newOption = '<option data-idsegment="'+segment.idsegment+'" data-definition="'+(segment.definition).replace(/"/g, '&quot;')+'" title="'+getSegmentTooltipEnrichedWithUsername(segment)+'">'+getSegmentName(segment)+'</option>';
+                segmentsDropdown.append(newOption);
+            }
             $(html).find(".segment-content > h3").after('<div piwik-segment-generator add-initial-condition="true"></div>').show();
             return html;
         };
@@ -306,7 +320,7 @@ Segmentation = (function($) {
                 .html( getSegmentName(segment) )
                 .prop('title', getSegmentTooltipEnrichedWithUsername(segment));
 
-            $(self.form).find('.available_segments_select').val(segment.idsegment);
+            $(self.form).find('.available_segments_select > option[data-idsegment="'+segment.idsegment+'"]').prop("selected",true);
 
             $(self.form).find('.available_segments a.dropList')
                 .html( getSegmentName(segment) )
@@ -511,10 +525,14 @@ Segmentation = (function($) {
                 e.preventDefault();
             });
 
+            self.target.on('change', '.available_segments_select', function (e) {
+                var option = $(e.currentTarget).find('option:selected');
+                openEditFormGivenSegment(option);
+            });
 
             self.target.on('click', ".delete", function() {
                 var segmentName = $(self.form).find(".segment-content > h3 > span").text();
-                var segmentId = $(self.form).find(".available_segments_select").val();
+                var segmentId = $(self.form).find(".available_segments_select option:selected").attr("data-idsegment");
                 var params = {
                     "idsegment" : segmentId
                 };
@@ -629,6 +647,7 @@ Segmentation = (function($) {
             makeDropList(".enable_all_users" , ".enable_all_users_select");
             makeDropList(".visible_to_website" , ".visible_to_website_select");
             makeDropList(".auto_archive" , ".auto_archive_select");
+            makeDropList(".available_segments" , ".available_segments_select");
             $(self.form).find(".saveAndApply").bind("click", function (e) {
                 e.preventDefault();
                 parseFormAndSave();
@@ -662,7 +681,7 @@ Segmentation = (function($) {
         var parseFormAndSave = function(){
             var segmentName = $(self.form).find(".segment-content > h3 >span").text();
             var segmentStr = getSegmentGeneratorController().getSegmentString();
-            var segmentId = $(self.form).find(".available_segments_select").val() || "";
+            var segmentId = $(self.form).find('.available_segments_select > option:selected').attr("data-idsegment");
             var user = $(self.form).find(".enable_all_users_select option:selected").val();
             var autoArchive = $(self.form).find(".auto_archive_select option:selected").val() || 0;
             var params = {
diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
index 95819434db..489e6dda1b 100644
--- a/plugins/SegmentEditor/stylesheets/segmentation.less
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -19,11 +19,6 @@
 
 .segment-row-inputs {
     margin-bottom: 5px;
-
-    @media screen and (max-width: 749px) {
-        width: 100%;
-        display: block;
-    }
 }
 
 .hovered {
@@ -131,23 +126,14 @@ div.scrollable {
     text-align: right;
     padding: 3px 7px 0 0;
     display: grid;
-    display: -ms-grid;
-    -ms-grid-columns: 28% 28% 44%;
     grid-template-columns: 28% 28% 44%;
-
     > * {
         vertical-align: top;
     }
-
-    @media screen and (max-width: 749px) {
-        display: block;
-    }
 }
 
 .segment-element .segment-top .segment-top-item {
     display: flex;
-    display: -ms-flexbox;
-    display: -webkit-flex;
 }
 
 .segment-element .segment-top a {
@@ -221,6 +207,7 @@ div.scrollable {
 }
 
 
+
 .segmentationContainer .submenu ul li {
     padding: 2px 0 1px 0;
     margin: 3px 0 0 0;
@@ -291,7 +278,6 @@ html.comparisonsDisabled .segmentationContainer ul.submenu {
 .segmentEditorPanel.expanded .segmentationContainer {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-
     .dropdown-body {
         width: 240px;
     }
@@ -432,11 +418,6 @@ a.metric_category {
 .segment-element {
     z-index: 999;
     width: 908px;
-
-    @media screen and (max-width: 749px) {
-        width: 100%;
-        padding: 1em;
-    }
 }
 
 .segmentationSelectorContainer {
@@ -458,7 +439,7 @@ a.metric_category {
 }
 
 .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);
+    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);
     padding: 6px !important;
 }
 
diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig
index 0062aa46fe..68177cff66 100644
--- a/plugins/SegmentEditor/templates/_segmentSelector.twig
+++ b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -36,7 +36,11 @@
 
         <div class="segment-content">
             <div class="segment-top" {% if not isSuperUser %}style="display:none"{% endif %}>
-                <input type="hidden" class="available_segments_select"/>
+                <div style="display: none">
+                <span class="icon-segment"></span><span class="available_segments"><strong>
+                <select type="hidden" class="available_segments_select browser-default"></select>
+            </strong></span>
+                </div>
                <div class="segment-top-item">
                 {{ 'SegmentEditor_ThisSegmentIsVisibleTo'|translate }} <div class="enable_all_users"><strong>
                         <select class="enable_all_users_select">
diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
index 14dfa9ccff..ad988111e2 100644
--- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
+++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
@@ -1,6 +1,6 @@
 /*!
  * Matomo - free/libre analytics platform
- *
+ * 
  * SegmentEditor screenshot tests.
  *
  * @link https://matomo.org
@@ -9,7 +9,7 @@
 
 describe("SegmentSelectorEditorTest", function () {
     var selectorsToCapture = ".segmentEditorPanel,.segmentEditorPanel .dropdown-body,.segment-element";
-
+    
     this.timeout(0);
 
     var generalParams = 'idSite=1&period=year&date=2012-08-09';
@@ -64,6 +64,11 @@ describe("SegmentSelectorEditorTest", function () {
         expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('6_segment_editor_droplist');
     });
 
+    it("should change segment when another available segment clicked in segment editor's available segments dropdown", async function() {
+        await (await page.jQuery('.ui-menu-item div:contains(Add new segment)')).click();
+        await page.waitForNetworkIdle();
+        expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('6_segment_editor_different');
+    });
 
     it("should close the segment editor when the close link is clicked", async function() {
         await page.evaluate(function () {
diff --git a/plugins/TagManager b/plugins/TagManager
-Subproject 940dc7167f75df09199798ce14cf317891467c4
+Subproject d8362b20ed098ba5228a0dcbeac33bc970adfe8