From 1d4d4c41e12cea44c2938535cf7caf975c239043 Mon Sep 17 00:00:00 2001
From: Sebastien Ros <none@none>
Date: Thu, 10 Mar 2011 13:50:46 -0800
Subject: [PATCH] Refactoring shape tracing window and adding a resizable
 handle

--HG--
branch : dev
---
 .../Orchard.DesignerTools.csproj              |   3 +
 .../orchard-designertools-shapetracing.js     |  56 +++++++++++++++++-
 .../Styles/Images/close.png                   | Bin 0 -> 1110 bytes
 .../Styles/Images/collapse.png                | Bin 0 -> 576 bytes
 .../Styles/Images/expand.png                  | Bin 0 -> 1076 bytes
 .../Styles/Images/toolbar-bg.png              | Bin 0 -> 960 bytes
 .../orchard-designertools-shapetracing.css    |  38 +++++++++---
 .../Views/ShapeTracingWrapper.cshtml          |   9 +--
 8 files changed, 91 insertions(+), 15 deletions(-)
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/close.png
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/collapse.png
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/expand.png
 create mode 100644 src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/toolbar-bg.png

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj b/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
index 3d05e64c9..c7f910fc7 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj
@@ -72,8 +72,11 @@
     <Content Include="Styles\CodeMirror\css.css" />
     <Content Include="Styles\CodeMirror\javascript.css" />
     <Content Include="Styles\foo_orchard-designertools-shapetracing.css" />
+    <Content Include="Styles\Images\collapse.png" />
+    <Content Include="Styles\Images\expand.png" />
     <Content Include="Styles\Images\menu-glyph.png" />
     <Content Include="Scripts\orchard-designertools-shapetracing.js" />
+    <Content Include="Styles\Images\toolbar-bg.png" />
     <Content Include="Styles\orchard-designertools-shapetracing.css" />
     <Content Include="Web.config">
       <SubType>Designer</SubType>
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
index 4c19ec4b1..33f7ac31d 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
@@ -1,17 +1,67 @@
 (function ($) {
     $(function () {
         // append the shape tracing window container at the end of the document
-        $('<div id="shape-tracing-container"><div id="shape-tracing-toolbar">toolbar</div><div id="shape-tracing-window">window</div></div><div id="shape-tracing-container-ghost"/>').appendTo('body');
+        $(  '<div id="shape-tracing-container"> ' +
+                '<div id="shape-tracing-resize-handle" />' +
+                '<div id="shape-tracing-toolbar">' +
+                    '<div id="shape-tracing-toolbar-switch" />' +
+                '</div>' +
+                '<div id="shape-tracing-window">window</div>' +
+            '</div>' +
+            '<div id="shape-tracing-container-ghost"/>'
+        ).appendTo('body');
 
         // preload main objects
         var shapeTracingContainer = $('#shape-tracing-container');
         var shapeTracingToolbar = $('#shape-tracing-toolbar');
+        var shapeTracingToolbarSwitch = $('#shape-tracing-toolbar-switch');
         var shapeTracingWindow = $('#shape-tracing-window');
         var shapeTracingGhost = $('#shape-tracing-container-ghost');
 
+        // store the size of the container when it is closed (default in css)
+        var initialContainerSize = shapeTracingContainer.height();
+        var previousSize = 0;
+
         // ensure the ghost has always the same size as the container
-        shapeTracingContainer.resize(function () { shapeTracingGhost.height(shapeTracingContainer.height()); });
-        shapeTracingContainer.trigger('resize');
+        // and the container is always positionned correctly
+        var syncResize = function () {
+            var _window = $(window);
+            var containerHeight = shapeTracingContainer.height();
+            var windowHeight = _window.height();
+            var scrollTop = _window.scrollTop();
+
+            shapeTracingGhost.height(containerHeight);
+            shapeTracingContainer.offset({ top: windowHeight - containerHeight + scrollTop, left: 0 });
+            shapeTracingContainer.width('100%');
+        };
+
+        // ensure the size/position is correct whenver the container or the browser is resized
+        shapeTracingContainer.resize(syncResize);
+        $(window).resize(syncResize);
+        $(window).resize();
+
+        // removes the position flickering by hiding it first, then showing when ready
+        shapeTracingContainer.show();
+
+        // expand/collapse behavior
+        // ensure the container has always a valid size when expanded
+        shapeTracingToolbarSwitch.click(function () {
+            var _this = $(this);
+            _this.toggleClass('expanded');
+            if (_this.hasClass('expanded')) {
+                shapeTracingContainer.height(Math.max(previousSize, 100));
+            }
+            else {
+                // save previous height
+                previousSize = shapeTracingContainer.height();
+                shapeTracingContainer.height(initialContainerSize);
+            }
+            syncResize();
+        });
+
+        // add a resizable handle to the container
+        $('#shape-tracing-resize-handle').addClass('ui-resizable-handle ui-resizable-n');
+        shapeTracingContainer.resizable({ handles: { n: '#shape-tracing-resize-handle'} });
 
     });
 })(jQuery);
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/close.png b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccb13672ac2954c1e8992788febaa96f08845947
GIT binary patch
literal 1110
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh3?wzC-F*zC7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$jZRL%n;xc;;N~oZE9g-ZfR$2>*C_!<KgA+;TIegpAwUhURm2*QQJ~g-&Whu
zR@>B3-_qUK+TGgO-`P8*yKidG#OV{J&Y3cE!L->67cN_~bk&BXt2QoOy=l$H?W;EJ
zUB7kj#_jvpZ9TAd>%sNg53SpNc+-wU8+IPsvitDnJtsErIk{!;scrku>^XF5-_f(X
z4qx1J<l>%Vm-ijNa^Tpx!>2AEJazTZ>1#($Upsd8+R-!DkDt4K`1Fk<XKx-od+XS_
zTc<AGI&tCl=}UJ`U%Gqt@}09+?w-4H@7$I97q8zxd-cJE>kls9e0b&NqpP<cU%&I@
z+MTCBzmI~^5WpG&kCICZffAer9+Abs%ySro8IR|$NC65;mbgZg1m~xflqVLYG6W=M
z=9TFAxrQi|8S9zqS(sZl!~zxV@^o<wkqDPP{!*;bL89T|dA;mS+XQr-G<SCe8f)r)
zueX2p<xj==%7^Ob#BKCBZ1&ISwigIv{~Th(ugy5^x%sgf0<*qXa{jVC^2A$E=3Z&Q
z{FcVJS>GBI{Y9@FS5IDjIC1J(yZ)lZbFxi#*l2xk^Ek9MdU4Bw*<7==x!BI$+;Wfq
zLMihn*3#_BI?~}*FO&}7`nXt$vuR03O*-$Ti(mJMKdpQh$ds9XbK6@BlWTEJ5f`@|
f>oeLmOXxr2hDOD`&vmZ;0tJkxtDnm{r-UW|L=+mx

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/collapse.png b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/collapse.png
new file mode 100644
index 0000000000000000000000000000000000000000..609b4f62fd8ec3d53c2bf7be5fb7a9ffa01cde88
GIT binary patch
literal 576
zcmV-G0>Ax<P)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D02y>eSaefwW^{L9
za%BKeVQFr3E>1;MAa*k@H7+<eJAhpP00FQ`L_t(IPi>LCQo>LWh3{KAI^*ArZ((I;
zWohLD*jQOxSV)0C5EStT1QG}s2n3Um1VPamU&G^`8&WW1akw{o&bQeO%1^#<WmIsU
zyTV1jh}@+iry*xaE4{N;)EQ>Us0%TTN*z_x!Asjk!yf!Addx6OMit66SdI^8G=Uq;
zFrdO2hT(@6@2t^dhFLP|?%9Ivj^X-K9bkAAeJ;t1rHOdGx2evOQMZpKI)g|$3Ls{X
ze9I1^_zOWMc@E-lI0AOO2xK&9yAgWwMut-$4Qfz61kbm4E~8G-_2LvP$xpj4pmaMv
zImO!AHda<QM4Jn3=o-BgoPdln9!#`)V=2Dl?EDhzTRYg@+sDD-krwZ)(Q7%;FF`V@
zP%&W&*!AAw#j>M}IFzxo{WyBK7&jZ0jJhc|&~!o#4yBu)?e@=}8AwK5mz$_}0<_(U
z{2iZ*k1>}w&h!LcG{<=Qqdl(E>BS(U@}(N8tr09KwA@4*B(MjQC9y`28D`07@V?&1
zlQlxs_EB5tMW&##XL`&qt3fxM<ECPv_-Ny{+7-RxuI4O>HG0f2OXd$BUVgzv>X&K&
O0000<MNUMnLSTYW$@4k@

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/expand.png b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..aba71902827f92a4cfbbd0a65b5de71c168925a4
GIT binary patch
literal 1076
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh3?wzC-F*zC7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$jZRL%n;xc;%aVbADx)7aM_xrt2QiMwQ=d{O=~u8U$trP`mK96Zr{Id>w&df
z53b*SXx;Y1n|2)9u=CiK-G?{tIk9=q$t`<NZQFll&!JQMj-K6h_~M=;7xx^yyzlsx
z1INxCK6UxvsjG)hUpsR8+Of0Oj-I)G{M_~9r*9m;aQ(!E8z(Q^I)CBT*(-O?U%hwk
z%KZyB?p(NW_tK4fS8m)rd-cJE>kls7cyRf~!^<}wUAgh#%8iFtZalhn=PA(rqhK@y
zs2&1cx1CgghH@5oL>2=x&tVW|Jf6QI1t=(4;u=vBoS#-wo>-L15RjOeSEA?V8lq5U
ztY@lcVQ$?J3sf}2)5S4FBHZ=tNueeO9@mTNCZBuGEPBMibV(`W@&Erbc~c)oE-Bi~
z=@u!#IZ?&Q#ZgW%GjU6_%R)8Bv#WQlo88v075-2xLR9aKv6=mjTO0fr9PSC4;$2p=
z^iNyYbHTeM^6iZqEzdIN>6`iXq-Q$aU!3~h{rjIS8l@69|6e@XFv(}NOQX<{%vouY
m@`Vc)Y?nEIzi8j{h`-{(#zI@Y4A>@tg3Qy^&t;ucLK6UA{_X+*

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/toolbar-bg.png b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/Images/toolbar-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..a88fcbc2d1f027fd89f1b3e29c7c9f24463487d4
GIT binary patch
literal 960
zcmeAS@N?(olHy`uVBq!ia0vp^j6f{P!3-of^pu!^1d4;)ofy`glX(f`u%tWsIx;Y9
z?C1WI$jZRL%n;xc;yP>g+yx63T)6$_;+?mb@4dTv|J}6*?{7Z(aQn%}J5N8}d-mzU
zi_ec=eR=Zw%d<CMfrgBN(GVC;Au#VzXD-k`oCO|{#S9F5he4R}c>anMprB-lYeY$K
zep*R+Vo@qXKw@TIiJqTph(ejMo~fRNxphM<P?3tKi(`mHIPal$UIqo80~-uZ|N9@K
oH2cWqryI7KNVe>fn!1QbUVw{XZdcKy1wi!-p00i_>zopr0H7IMtpET3

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
index f8eec7cf1..efe1446df 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
@@ -7,24 +7,39 @@
     display:block;
     font-size:10pt;
     font-family:Segoe;
-    margin-top:5px;
     left: 0px;
     bottom: 0px;
     position:fixed;
     z-index:999;
     width:100%;
-    height:100px;
+    display:none;
+    max-height:66%;
+    height:24px; /* handle + toolbar */
+    min-height:24px;
 }
 
 #shape-tracing-toolbar  {
-    color:white;
-    background-color: #1D1A1A;
-    height:16px;
-    padding: 2px 0px 2px 0px;
+    color:black;
+    background: url(images/toolbar-bg.png) repeat-x;
+    height:17px;
+    padding-top:4px; /* total size 21px = height + padding */
+    padding-left:5px;
+    padding-right:5px;
+}
+
+#shape-tracing-toolbar-switch  {
+    display:block;
+    float:right;
+    width:14px;
+    height:100%;
+    background: url(images/expand.png) no-repeat;
+}
+
+#shape-tracing-toolbar-switch.expanded {
+    background: url(images/collapse.png) no-repeat;
 }
 
 #shape-tracing-window  {
-    color:white;
     background-color: #343131;
     height:100%;
 }
@@ -37,4 +52,11 @@
     width:100%;
     display:block;
 }
-    
+
+#shape-tracing-resize-handle  {
+    width:100%;
+    display:block;
+    height:5px;
+    background-color:transparent;
+    cursor:n-resize;
+}
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
index c42a0ca8d..521c57166 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml
@@ -4,9 +4,10 @@
 @using System.Xml;
 
 @{
-    Script.Require("jQueryUI_Tabs");
-    Script.Include("orchard-designertools-shapetracing.js");
-    Style.Include("orchard-designertools-shapetracing.css");
+    Script.Require("jQueryUI_Tabs").AtHead();
+    Script.Require("jQueryUI_Resizable").AtHead();
+    Script.Include("orchard-designertools-shapetracing.js").AtHead();
+    Style.Include("orchard-designertools-shapetracing.css").AtHead();
     
     // Code Mirror
     Script.Include("CodeMirror/codemirror.js");
@@ -20,7 +21,7 @@
     Script.Include("CodeMirror/htmlmixed.js");
 }
 
-<div class="shape-tracing wrapper shapeType-@Model.Metadata.Type shapeId-@Model.GetHashCode() " title="@Model.Metadata.Type">
+<div class="shape-tracing wrapper shapeType-@Model.Metadata.Type shapeId-@Model.GetHashCode()" title="@Model.Metadata.Type">
     @Display(Model.Metadata.ChildContent)
     @{
         Layout.Zones["Tail"].Add(