update mobile view and remove the js test related

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 782db0a88e..9c4a424b48 100644
--- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
+++ b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
@@ -1,6 +1,10 @@
 .segment-generator {
   width: 900px;
 
+  @media screen and (max-width: 749px) {
+    width: 100%;
+  }
+
   .segment-row-inputs {
     .form-group {
       margin-top: 0;
@@ -110,6 +114,11 @@
     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 a3d4c042cb..620965d6c1 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -288,20 +288,6 @@ 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;
         };
@@ -320,7 +306,7 @@ Segmentation = (function($) {
                 .html( getSegmentName(segment) )
                 .prop('title', getSegmentTooltipEnrichedWithUsername(segment));
 
-            $(self.form).find('.available_segments_select > option[data-idsegment="'+segment.idsegment+'"]').prop("selected",true);
+            $(self.form).find('.available_segments_select').val(segment.idsegment);
 
             $(self.form).find('.available_segments a.dropList')
                 .html( getSegmentName(segment) )
@@ -525,14 +511,10 @@ 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 option:selected").attr("data-idsegment");
+                var segmentId = $(self.form).find(".available_segments_select").val();
                 var params = {
                     "idsegment" : segmentId
                 };
@@ -647,7 +629,6 @@ 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();
@@ -681,7 +662,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 > option:selected').attr("data-idsegment");
+            var segmentId = $(self.form).find(".available_segments_select").val() || "";
             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 489e6dda1b..95819434db 100644
--- a/plugins/SegmentEditor/stylesheets/segmentation.less
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -19,6 +19,11 @@
 
 .segment-row-inputs {
     margin-bottom: 5px;
+
+    @media screen and (max-width: 749px) {
+        width: 100%;
+        display: block;
+    }
 }
 
 .hovered {
@@ -126,14 +131,23 @@ 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 {
@@ -207,7 +221,6 @@ div.scrollable {
 }
 
 
-
 .segmentationContainer .submenu ul li {
     padding: 2px 0 1px 0;
     margin: 3px 0 0 0;
@@ -278,6 +291,7 @@ html.comparisonsDisabled .segmentationContainer ul.submenu {
 .segmentEditorPanel.expanded .segmentationContainer {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+
     .dropdown-body {
         width: 240px;
     }
@@ -418,6 +432,11 @@ a.metric_category {
 .segment-element {
     z-index: 999;
     width: 908px;
+
+    @media screen and (max-width: 749px) {
+        width: 100%;
+        padding: 1em;
+    }
 }
 
 .segmentationSelectorContainer {
@@ -439,7 +458,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 68177cff66..0062aa46fe 100644
--- a/plugins/SegmentEditor/templates/_segmentSelector.twig
+++ b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -36,11 +36,7 @@
 
         <div class="segment-content">
             <div class="segment-top" {% if not isSuperUser %}style="display:none"{% endif %}>
-                <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>
+                <input type="hidden" class="available_segments_select"/>
                <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 ad988111e2..14dfa9ccff 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,11 +64,6 @@ 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 d8362b20ed098ba5228a0dcbeac33bc970adfe8
+Subproject 940dc7167f75df09199798ce14cf317891467c4