Merge pull request #3591 from eccubevn/4.0-resize-editor-ace

コードエディタのサイズを調整可能に変更
EC-CUBE · Mar 22, 2019 · 0da26a9 · 0da26a9
2 parents 137622b + 0d6d5bd
commit 0da26a9
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 2 deletions.
diff --git a/src/Eccube/Resource/template/admin/Content/block_edit.twig b/src/Eccube/Resource/template/admin/Content/block_edit.twig
@@ -17,7 +17,18 @@ file that was distributed with this source code.
 
 {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
 
+{% block stylesheet %}
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <style>
+        .ui-resizable-se {
+            right: -3px;
+            bottom: -3px;
+        }
+    </style>
+{% endblock %}
+
 {% block javascript %}
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>
     <script>
@@ -33,6 +44,12 @@ file that was distributed with this source code.
             showInvisibles: true
         });
 
+        $("#editor").resizable({
+            resize: function (event, ui) {
+                editor.resize();
+            }
+        });
+
         $('#content_block_form').on('submit', function(elem) {
             $('#block_block_html').val(editor.getValue());
         });

diff --git a/src/Eccube/Resource/template/admin/Content/css.twig b/src/Eccube/Resource/template/admin/Content/css.twig
@@ -15,7 +15,18 @@
 {% block title %}{{ 'admin.content.css_management'|trans }}{% endblock %}
 {% block sub_title %}{{ 'admin.content.contents_management'|trans }}{% endblock %}
 
+{% block stylesheet %}
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <style>
+        .ui-resizable-se {
+            right: -3px;
+            bottom: -3px;
+        }
+    </style>
+{% endblock %}
+
 {% block javascript %}
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>
     <script>
@@ -30,6 +41,13 @@
             enableLiveAutocompletion: true,
             showInvisibles: true
         });
+
+        $("#editor").resizable({
+            resize: function (event, ui) {
+                editor.resize();
+            }
+        });
+
         var $save_button = $('#save-button');
         editor.getSession().on("changeAnnotation", function(){
             var annot = editor.getSession().getAnnotations();

diff --git a/src/Eccube/Resource/template/admin/Content/js.twig b/src/Eccube/Resource/template/admin/Content/js.twig
@@ -12,7 +12,18 @@
 {% block title %}{{ 'admin.content.js_management'|trans }}{% endblock %}
 {% block sub_title %}{{ 'admin.content.contents_management'|trans }}{% endblock %}
 
+{% block stylesheet %}
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <style>
+        .ui-resizable-se {
+            right: -3px;
+            bottom: -3px;
+        }
+    </style>
+{% endblock %}
+
 {% block javascript %}
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>
     <script>
@@ -27,6 +38,13 @@
             enableLiveAutocompletion: true,
             showInvisibles: true
         });
+
+        $("#editor").resizable({
+            resize: function (event, ui) {
+                editor.resize();
+            }
+        });
+
         var $save_button = $('#save-button');
         editor.getSession().on("changeAnnotation", function(){
             var annot = editor.getSession().getAnnotations();

diff --git a/src/Eccube/Resource/template/admin/Content/page_edit.twig b/src/Eccube/Resource/template/admin/Content/page_edit.twig
@@ -24,7 +24,18 @@ file that was distributed with this source code.
 
 {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
 
+{% block stylesheet %}
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <style>
+        .ui-resizable-se {
+            right: -3px;
+            bottom: -3px;
+        }
+    </style>
+{% endblock %}
+
 {% block javascript %}
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>
     <script>
@@ -40,6 +51,12 @@ file that was distributed with this source code.
             showInvisibles: true
         });
 
+        $("#editor").resizable({
+            resize: function (event, ui) {
+                editor.resize();
+            }
+        });
+
         $('#content_page_form').on('submit', function(elem) {
             $('#main_edit_tpl_data').val(editor.getValue());
         });

diff --git a/src/Eccube/Resource/template/admin/Setting/Shop/mail.twig b/src/Eccube/Resource/template/admin/Setting/Shop/mail.twig
@@ -17,7 +17,18 @@ file that was distributed with this source code.
 
 {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
 
+{% block stylesheet %}
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <style>
+        .ui-resizable-se {
+            right: -3px;
+            bottom: -3px;
+        }
+    </style>
+{% endblock %}
+
 {% block javascript %}
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>
     <script>
@@ -56,6 +67,18 @@ file that was distributed with this source code.
                 });
             {% endif %}
 
+            $("#editor").resizable({
+                resize: function (event, ui) {
+                    editor.resize();
+                }
+            });
+
+            $("#html_editor").resizable({
+                resize: function (event, ui) {
+                    editor.resize();
+                }
+            });
+
             $('#form1').on('submit', function() {
                 $('#mail_tpl_data').val(editor.getValue());
                 {% if form.html_tpl_data.vars.value %}
@@ -68,7 +91,7 @@ file that was distributed with this source code.
                 var html = $('#viewEmail');
                 html.children().remove();
 
-                // HTMLを読み込んでモーダルに表示    
+                // HTMLを読み込んでモーダルに表示
                 $.ajax({
                     type: 'POST',
                     dataType: 'html',
@@ -218,7 +241,7 @@ file that was distributed with this source code.
                 </div>
                 <div class="modal-body">
                     <div class="bg-light p-4 bg-ec-formGray" id="viewEmail" style="word-wrap: break-word; word-break:break-all">
-                        
+
                     </div>
                 </div>
                 <div class="modal-footer">