Merge pull request #18725 from MoonE/gis-overlay-dynamic-size

Resize GIS editor overlay and its textarea on page resize

js/src/gis_data_editor.js

@@ -162,30 +162,15 @@ function loadGISEditor (value, field, type, inputName) {
  */
 // eslint-disable-next-line no-unused-vars
 function openGISEditor () {
-    // Center the popup
-    var windowWidth = document.documentElement.clientWidth;
-    var windowHeight = document.documentElement.clientHeight;
-    var popupWidth = windowWidth * 0.9;
-    var popupHeight = windowHeight * 0.9;
-    var popupOffsetTop = windowHeight / 2 - popupHeight / 2;
-    var popupOffsetLeft = windowWidth / 2 - popupWidth / 2;
-
-    var $gisEditor = $('#gis_editor');
-    var $background = $('#popup_background');
-
-    $gisEditor.css({ 'top': popupOffsetTop, 'left': popupOffsetLeft, 'width': popupWidth, 'height': popupHeight });
-    $background.css({ 'opacity' : '0.7' });
-
-    $gisEditor.append(
-        '<div id="gis_data_editor">' +
-        '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
-        themeImagePath + 'ajax_clock_small.gif" alt="">' +
-        '</div>'
-    );
-
-    // Make it appear
-    $background.fadeIn('fast');
-    $gisEditor.fadeIn('fast');
+    $('#popup_background').fadeIn('fast');
+    $('#gis_editor')
+        .append(
+            '<div id="gis_data_editor">' +
+            '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
+            themeImagePath + 'ajax_clock_small.gif" alt="">' +
+            '</div>'
+        )
+        .fadeIn('fast');
 }
 
 /**

templates/gis_data_editor_form.twig

@@ -240,7 +240,7 @@
             <p>
                 {% trans 'Choose "GeomFromText" from the "Function" column and paste the string below into the "Value" field.' %}
             </p>
-            <textarea id="gis_data_textarea" cols="95" rows="5">{{ result }}</textarea>
+            <textarea id="gis_data_textarea" rows="5">{{ result }}</textarea>
         </div>
     </div>
 </form>

themes/bootstrap/scss/_common.scss

@@ -1004,6 +1004,7 @@ select.invalid_value,
   top: 0;
   left: 0;
   background: $black;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }

themes/bootstrap/scss/_gis.scss

@@ -8,6 +8,11 @@ a.close_gis_editor {
 #gis_editor {
   display: none;
   position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 40px;
   z-index: 1001;
   overflow-y: auto;
   overflow-x: hidden;
@@ -19,6 +24,8 @@ a.close_gis_editor {
 
 #gis_data_textarea {
   height: 6em;
+  resize: vertical;
+  width: 100%;
 }
 
 #gis_data_editor {

themes/metro/scss/_common.scss

@@ -1223,6 +1223,7 @@ input {
   top: 0;
   left: 0;
   background: #000;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }

themes/metro/scss/_gis.scss

@@ -1,34 +0,0 @@
-// GIS data editor styles for the Metro theme
-a.close_gis_editor {
-  float: right;
-}
-
-#gis_editor {
-  display: none;
-  position: fixed;
-  z-index: 1001;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-#gis_data {
-  min-height: 230px;
-}
-
-#gis_data_textarea {
-  height: 6em;
-}
-
-#gis_data_editor {
-  background: #d0dce0;
-  padding: 15px;
-  min-height: 500px;
-
-  .choice {
-    display: none;
-  }
-
-  input[type="text"] {
-    width: 75px;
-  }
-}

themes/metro/scss/theme.scss

@@ -3,7 +3,7 @@
 @import "../../bootstrap/scss/bootstrap";
 @import "common";
 @import "enum-editor";
-@import "gis";
+@import "../../bootstrap/scss/gis";
 @import "navigation";
 @import "designer";
 @import "codemirror";

themes/original/scss/_common.scss

@@ -1000,6 +1000,7 @@ select.invalid_value,
   top: 0;
   left: 0;
   background: #000;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }

themes/original/scss/theme.scss

@@ -2,7 +2,7 @@
 @import "../../bootstrap/scss/bootstrap";
 @import "common";
 @import "../../pmahomme/scss/enum-editor";
-@import "../../pmahomme/scss/gis";
+@import "../../bootstrap/scss/gis";
 @import "navigation";
 @import "../../pmahomme/scss/designer";
 @import "../../pmahomme/scss/codemirror";

themes/pmahomme/scss/_common.scss

@@ -1190,6 +1190,7 @@ input#import_merge {
   top: 0;
   left: 0;
   background: #000;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }

themes/pmahomme/scss/_gis.scss

@@ -1,36 +0,0 @@
-/**
- * GIS data editor styles
- */
-a.close_gis_editor {
-  float: right;
-}
-
-#gis_editor {
-  display: none;
-  position: fixed;
-  z-index: 1001;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-#gis_data {
-  min-height: 230px;
-}
-
-#gis_data_textarea {
-  height: 6em;
-}
-
-#gis_data_editor {
-  background: #d0dce0;
-  padding: 15px;
-  min-height: 500px;
-
-  .choice {
-    display: none;
-  }
-
-  input[type="text"] {
-    width: 75px;
-  }
-}

themes/pmahomme/scss/theme.scss

@@ -2,7 +2,7 @@
 @import "../../bootstrap/scss/bootstrap";
 @import "common";
 @import "enum-editor";
-@import "gis";
+@import "../../bootstrap/scss/gis";
 @import "navigation";
 @import "designer";
 @import "codemirror";