Refactoring shape tracing window and adding a resizable handle

--HG--
branch : dev

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>

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);

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;
+}

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(