画面編集ウィンドウに縮小、拡大ボタン付加。

diff --git a/include/manager/pageManager.php b/include/manager/pageManager.php
index d99c77c..5d7c304 100644 (file)
--- a/include/manager/pageManager.php
+++ b/include/manager/pageManager.php
@@ -177,7 +177,7 @@ class PageManager extends Core
        const M3_NO_BOOTSTRAP_CSS_FILE                  = 'm3/nobootstrap.css';         // 管理画面でBootstrapの読み込みなしの場合のCSS
        
        // 読み込み制御
-       const USE_BOOTSTRAP_ADMIN       = true;                 // 管理画面でBootstrapを使用するかどうか(デフォルト値)
+       const USE_BOOTSTRAP_ADMIN       = false;                        // 管理画面でBootstrapを使用するかどうか(デフォルト値)
        const BOOTSTRAP_BUTTON_CLASS = 'btn btn-default';
        
        /**

diff --git a/scripts/m3/admin.css b/scripts/m3/admin.css
index 60ead4b..dcb0a1d 100644 (file)
--- a/scripts/m3/admin.css
+++ b/scripts/m3/admin.css
@@ -126,7 +126,9 @@
 .m3panel_right,
 .m3panel_bottom,
 .m3panelopener,
-.m3panelopener a {
+.m3panelopener a,
+.m3resizer,
+.m3resizer a {
        margin: 0;
        padding: 0;
        border: 0;
@@ -150,7 +152,8 @@
 .m3panel_left,
 .m3panel_right,
 .m3panel_bottom,
-.m3panelopener {
+.m3panelopener,
+.m3resizer {
        z-index:1000;
 }
 .m3panelopener.m3topleft {
@@ -159,25 +162,37 @@
        left: 0px;
        z-index:1001;
 }
-.m3panelopener.m3topleft a {
+.m3resizer.m3topright {
+       position: fixed;
+       top: 0px;
+       right: 0px;
+       z-index:1001;
+}
+.m3panelopener.m3topleft a,
+.m3resizer.m3topright a {
        display: block;
        background: #2C3E50;
        color: #fff;
        padding: 5px 10px;
        outline:none;
 }
-.m3panelopener a:visited {
+.m3panelopener.m3topleft a:visited,
+.m3resizer.m3topright a:visited
+{
        color: #fff;
 }
-.m3panelopener a:hover {
+.m3panelopener.m3topleft a:hover,
+.m3resizer.m3topright a:hover {
        text-decoration: none;
 }
-.m3panelopener .glyphicon {
+.m3panelopener.m3topleft .glyphicon,
+.m3resizer.m3topright .glyphicon {
        color: #fff;
        font-size: 24px;
        margin:0;
        height:30px;
 }
+
 /*** 左パネル ***/
 .m3panel_left {
        background: #2C3E50;

diff --git a/scripts/m3/nobootstrap.css b/scripts/m3/nobootstrap.css
index 3d1f3b8..1473c60 100644 (file)
--- a/scripts/m3/nobootstrap.css
+++ b/scripts/m3/nobootstrap.css
@@ -58,6 +58,12 @@
 .glyphicon-info-sign:before {
   content: "\e086";
 }
+.glyphicon-resize-full:before {
+  content: "\e096";
+}
+.glyphicon-resize-small:before {
+  content: "\e097";
+}
 .glyphicon-chevron-up:before {
   content: "\e113";
 }

diff --git a/scripts/m3/widget.css b/scripts/m3/widget.css
index 260f37b..8019adc 100644 (file)
--- a/scripts/m3/widget.css
+++ b/scripts/m3/widget.css
@@ -66,7 +66,7 @@
 }
 
 /* widget list window */
-#m3_widget_window {
+/*#m3_widget_window {
        text-align:left;
        font:11px/1.5 Arial, sans-serif;
        position:fixed;
@@ -74,7 +74,7 @@
        top:105px;
        left:0;
        z-index:1000;
-}
+}*/
 
 /* widget listing */
 .m3_widgetlist_box {
@@ -89,10 +89,10 @@
        text-align:left;
        font:11px/1.5 Arial, sans-serif;
 }
-#m3_widgetlist_inner {
+/*#m3_widgetlist_inner {
        overflow-y: scroll;
        height: 500px;
-}
+}*/
 
 /* widget placed in posion block */
 dl.m3_widget_sortable {

diff --git a/scripts/m3admin_widget2.0.1.js b/scripts/m3admin_widget2.0.1.js
index a54811f..fcc2e22 100644 (file)
--- a/scripts/m3admin_widget2.0.1.js
+++ b/scripts/m3admin_widget2.0.1.js
@@ -158,16 +158,9 @@
 \r
                                // ドラッグ中のイメージの幅を固定\r
                                ui.helper.css("width", DRAG_ITEM_WIDTH);\r
-                               \r
-                               $('#m3_widgetlist_inner').data('scroll', $('#m3_widgetlist_inner').scrollTop());\r
-                               $('#m3_widget_window').hide(1000);\r
-                       },\r
-                       stop: function(e,ui) {\r
-                               $('#m3_widget_window').show(500, function(){\r
-                                       $('#m3_widgetlist_inner').scrollTop($('#m3_widgetlist_inner').data('scroll'));\r
-                               });\r
                        },\r
-//                     change: changeSortable,\r
+//                     stop: function(e,ui) {\r
+//                     },\r
                        update: updateSortable\r
                });\r
                \r
@@ -226,15 +219,6 @@
                        }\r
                });\r
        };\r
-       \r
-/*     var changeSortable = function(e, ui){\r
-               if (ui.sender){\r
-                       var w = ui.item.width();\r
-                       ui.placeholder.width(w);\r
-                       ui.helper.css("width", w);\r
-               }\r
-       };*/\r
-       \r
        var updateSortable = function(e, ui){\r
                var obj = $('#' + ui.item[0].id);\r
                var recvPosObj = obj.parents('.m3_widgetpos_box');      // 移動先ポジション\r
@@ -252,7 +236,8 @@
        // ウィジェット一覧取得後の更新処理\r
        var updateWidgetList = function(){\r
                // アコーディオンメニュー作成\r
-               $('.m3accordion').children('dd').slideUp(); $('.m3accordion').children('dt').click(function(){\r
+               $('.m3accordion').children('dd').slideUp();\r
+               $('.m3accordion').children('dt').click(function(){\r
                        if($(this).hasClass('active')){\r
                                $(this).removeClass('active');\r
                                $(this).next('dd').slideUp();\r
@@ -280,9 +265,6 @@
                                }\r
                        },\r
                        start: function(e, ui){\r
-                               $('#m3_widgetlist_inner').data('scroll', $('#m3_widgetlist_inner').scrollTop());\r
-                               $('#m3_widget_window').hide(1000);\r
-                               \r
                                // カーソルの位置を補正\r
 /*                             var bodyLeft = parseInt($('body').css('left'));\r
                                if (bodyLeft > 0){\r
@@ -295,10 +277,6 @@
                        },\r
                        stop: function(e, ui){\r
                                m3TaskWidget('add', $('.m3_spacer'), this.id, m3InsertIndex);\r
-                               \r
-                               $('#m3_widget_window').show(500, function(){\r
-                                       $('#m3_widgetlist_inner').scrollTop($('#m3_widgetlist_inner').data('scroll'));\r
-                               });\r
                        }\r
                });\r
        }\r
@@ -462,6 +440,12 @@
                widgetWindow += '<li id="m3_wdelete"><img src="' + M3_ROOT_URL + '/images/system/delete.png" />&nbsp;<span>このウィジェットを削除</span></li>';\r
                widgetWindow += '</ul>';\r
                widgetWindow += '</div>';\r
+               \r
+               // 画面リサイズボタン(右上)\r
+               if (!(window.parent && window.parent.frames.length == 0)){                      // 親ウィンドウありの場合\r
+                       widgetWindow += '<div class="m3resizer m3topright"><a href="#"><i class="glyphicon"></i></a></div>';\r
+       }\r
+               \r
                $("body").append(widgetWindow);\r
                \r
                // パネルスライド可能にする\r
@@ -478,12 +462,45 @@
 //             var slideMenuHeight = $(window).height() - pos.top * 2;\r
                var slideMenuHeight = $(window).height() - pos.top - 30;        // スクロールバー部分調整    \r
                $('#m3paneltab_widget_list').height(slideMenuHeight);\r
-\r
-/*             $('#m3_widget_window').draggable({\r
-                       cursor: 'move',\r
-                       cancel: '#m3_widget_window_inner'\r
-               });*/\r
        \r
+               // 画面リサイズボタン\r
+               $(".m3resizer.m3topright a").click(function(){\r
+                       var openerCss = {};\r
+                       var iframeObj = parent.$('#layout_preview');\r
+                       var iconObj = $('i', this);\r
+                       \r
+                       if (iframeObj.hasClass('layout_top_border')){           // デフォルト(縮小)状態のとき\r
+                               // 画面を拡大\r
+                               parent.$("#layout_preview_outer").css('z-index', '1100');\r
+                               openerCss['top'] = '0px';\r
+                               \r
+                               iframeObj.removeClass('layout_top_border');\r
+                               iconObj.removeClass('glyphicon-resize-full');\r
+                               iconObj.addClass('glyphicon-resize-small');\r
+                       } else {\r
+                               // 画面を縮小\r
+                               parent.$("#layout_preview_outer").css('z-index', '1');\r
+                               openerCss['top'] = '220px';\r
+                               \r
+                               iframeObj.addClass('layout_top_border');\r
+                               iconObj.removeClass('glyphicon-resize-small');\r
+                               iconObj.addClass('glyphicon-resize-full');\r
+                       }\r
+                       \r
+                       parent.$("#layout_preview_outer").animate(openerCss, 350);\r
+\r
+                       // リロード\r
+                       parent.$('#layout_preview').attr('src', function (i, val){ return val; });\r
+\r
+                       return false;           // クリックイベント終了\r
+               });\r
+               // 画面リサイズボタンアイコン初期化\r
+               if (parent.$('#layout_preview').hasClass('layout_top_border')){         // デフォルト(縮小)状態のとき\r
+                       $(".m3resizer.m3topright a i").addClass('glyphicon-resize-full');\r
+               } else {\r
+                       $(".m3resizer.m3topright a i").addClass('glyphicon-resize-small');\r
+               }\r
+               \r
                setupSortable();\r
                \r
                $.ajax({        url: createUrl() + '&task=list',\r

diff --git a/templates/_admin4/css/style.css b/templates/_admin4/css/style.css
index 6232a65..914416b 100644 (file)
--- a/templates/_admin4/css/style.css
+++ b/templates/_admin4/css/style.css
@@ -303,10 +303,13 @@ background-color: #0081c2;
 /****** page layout preview ******/
 #layout_preview
 {
-       border-top:2px solid #2C3E50;
+/*     border-top:2px solid #2C3E50;*/
 /*     height: 100%;
        width: 100%;*/
 }
+.layout_top_border {
+       border-top:2px solid #2C3E50;
+}
 .layout_side_border {
        border-left:2px solid #2C3E50;
        border-right:2px solid #2C3E50;
@@ -318,6 +321,8 @@ background-color: #0081c2;
        right: 0px;
        bottom: 0px;
        z-index:1;
+/*     z-index:1100;*/
+       background: #FFF;
 }
 #layout_switch_image
 {

diff --git a/widgets/admin_main/include/container/admin_mainPagedefWidgetContainer.php b/widgets/admin_main/include/container/admin_mainPagedefWidgetContainer.php
index 1442752..22bb9a1 100644 (file)
--- a/widgets/admin_main/include/container/admin_mainPagedefWidgetContainer.php
+++ b/widgets/admin_main/include/container/admin_mainPagedefWidgetContainer.php
@@ -182,7 +182,7 @@ class admin_mainPagedefWidgetContainer extends BaseAdminWidgetContainer
                                $deviceType = 1;                // デバイスタイプ(携帯)
                                $taskStr = 'pagedef_mobile';
                                $previewWidth = '600px';
-                               $this->tmpl->addVar("_widget", "preview_option_class", 'class="layout_side_border"');           // プレビューエリアにサイドのボーダーラインを付加
+                               $this->tmpl->addVar("_widget", "preview_option_class", 'class="layout_top_border layout_side_border"');         // プレビューエリアにトップとサイドのボーダーラインを付加
                                $this->tmpl->addVar("_widget", "template_normal_disabled", 'disabled');
                                break;
                        case 'pagedef_smartphone':              // スマートフォン用設定画面
@@ -190,7 +190,7 @@ class admin_mainPagedefWidgetContainer extends BaseAdminWidgetContainer
                                $deviceType = 2;                // デバイスタイプ(スマートフォン)
                                $taskStr = 'pagedef_smartphone';
                                $previewWidth = '600px';
-                               $this->tmpl->addVar("_widget", "preview_option_class", 'class="layout_side_border"');           // プレビューエリアにサイドのボーダーラインを付加
+                               $this->tmpl->addVar("_widget", "preview_option_class", 'class="layout_top_border layout_side_border"');         // プレビューエリアにトップとサイドのボーダーラインを付加
                                $this->tmpl->addVar("_widget", "template_normal_disabled", 'disabled');
                                break;
                        default:
@@ -198,6 +198,7 @@ class admin_mainPagedefWidgetContainer extends BaseAdminWidgetContainer
                                $deviceType = 0;                // デバイスタイプ(PC)
                                $taskStr = 'pagedef';
                                $previewWidth = '100%';
+                               $this->tmpl->addVar("_widget", "preview_option_class", 'class="layout_top_border"');            // プレビューエリアにトップのボーダーラインを付加
                                break;
                }