From 56d4914bbb1f20d4ff70d100a07b619aba19f506 Mon Sep 17 00:00:00 2001
From: Nathan Heskew <nathan.heskew@microsoft.com>
Date: Tue, 22 Mar 2011 13:14:29 -0700
Subject: [PATCH] Adding a bit of JS-only UI for layer visibility.

A little rough and might consider showing layers w/o widgets in some way...

--HG--
branch : dev
---
 .../Orchard.Widgets/Orchard.Widgets.csproj    |   1 +
 .../Orchard.Widgets/Styles/images/eye.png     | Bin 0 -> 442 bytes
 .../Styles/orchard-widgets-admin.css          |  26 +++++++--
 .../Views/WidgetLayerVisibility.cshtml        |  54 +++++++++++++++++-
 .../Views/WidgetPlacement.cshtml              |   2 +-
 5 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 src/Orchard.Web/Modules/Orchard.Widgets/Styles/images/eye.png

diff --git a/src/Orchard.Web/Modules/Orchard.Widgets/Orchard.Widgets.csproj b/src/Orchard.Web/Modules/Orchard.Widgets/Orchard.Widgets.csproj
index 86065ed05..c9068600b 100644
--- a/src/Orchard.Web/Modules/Orchard.Widgets/Orchard.Widgets.csproj
+++ b/src/Orchard.Web/Modules/Orchard.Widgets/Orchard.Widgets.csproj
@@ -80,6 +80,7 @@
     <Content Include="Content\Admin\images\movedown.gif" />
     <Content Include="Module.txt" />
     <Content Include="Styles\images\arrows.png" />
+    <Content Include="Styles\images\eye.png" />
     <Content Include="Styles\images\menu.widgets.png" />
     <Content Include="Styles\menu.widgets-admin.css" />
     <Content Include="Styles\orchard-widgets-admin.css" />
diff --git a/src/Orchard.Web/Modules/Orchard.Widgets/Styles/images/eye.png b/src/Orchard.Web/Modules/Orchard.Widgets/Styles/images/eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc46166972a0165786d7f575d521db105ec8fdf4
GIT binary patch
literal 442
zcmeAS@N?(olHy`uVBq!ia0vp^d_b(i!3-q(7XIE0q?n7HJVQ7*IBq}me*om>1o(uw
z{{R0!tJ*0zIM~zEQ&Uq@Mn(px04NC*1d2F0IY9)4g@uvDfr9e#@<7GN;y^9<k#acm
zKA_PmB|(0{41y4#1O>)W;1Zfv-Z694?lX7a{ZD1_)di~OEbxddW?<kJ0%68WckBKD
z1!YQHBT9nv(@M${i&7aJQ}UBi72Gn5Qp@v;vWpd*gH6~rU0wiG*X!xx7@{%pZSPsB
zCI=4J_bE%4S*F=%WIaCcdw=qYD~rnB?v}QwVP|M~q&I6ND^J8D8}^BT?0JHntzoI}
z4!&ZwQCe2Y-2G67=jM_dYB#4<iSa3R@wDD8W6nOt^8e42x1BF)Dh@8&CA&9&-Q9DV
zSH)Ld&-A?V^n=S4h3_}AAMd~TMCWAaI@8}4TkW*&_s_Gq!)JXhLZlk#Fa}RoKbLh*
G2~7Z>SeB>&

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.Widgets/Styles/orchard-widgets-admin.css b/src/Orchard.Web/Modules/Orchard.Widgets/Styles/orchard-widgets-admin.css
index 97407ee58..dd6306512 100644
--- a/src/Orchard.Web/Modules/Orchard.Widgets/Styles/orchard-widgets-admin.css
+++ b/src/Orchard.Web/Modules/Orchard.Widgets/Styles/orchard-widgets-admin.css
@@ -41,7 +41,7 @@ margin:5px 0;
 padding:0 10px;
 position:relative;
 }
-#widgets-zones li:hover {
+#widgets-zones li:hover, #widgets-zones li.on {
 border-color:#bfd3a7;
 }
 #widgets-zones h2 {
@@ -50,20 +50,23 @@ font-size:1.077em;
 #widgets-available h2 {
 font-size:1.231em;
 }
-#widgets-zones h2, #widgets-zones li li {
+#widgets-zones h2, #widgets-zones li li, #widgets-layer-visibility li {
 color:#333;
 }
-#widgets-zones li li {
+#widgets-zones li li, #widgets-layer-visibility li {
 background:#F3F4F5;
 border:0;
 border-left:3px solid #EAEAEA;
 margin:10px 0;
 padding:5px 100px 5px 25px;
 }
-#widgets-zones li li.widgets-this-layer {
+#widgets-layer-visibility li {
+margin:1px 0 0;
+}
+#widgets-zones li li.widgets-this-layer, #widgets-layer-visibility li.widgets-this-layer, #widgets-layer-visibility li.widgets-this-layer:hover {
 border-color:#898989;
 }
-#widgets-zones li li.widgets-this-layer:hover {
+#widgets-zones li li.widgets-this-layer:hover, #widgets-layer-visibility li:hover {
 border-color:#bfd3a7;
 }
 #widgets-zones .widgets-mover {
@@ -139,6 +142,19 @@ color:#333;
 margin-top:5px;
 }
 
+#widgets-layer-visibility {
+margin-top:20px;
+}
+#widgets-layer-visibility .widgets-other-layer {
+background-image:url(images/eye.png);
+background-position:5px 11px;
+background-repeat:no-repeat;
+cursor:pointer;
+}
+#widgets-layer-visibility .widgets-other-layer.off, #widgets-layer-visibility .widgets-other-layer.off:hover {
+background-position:5px -17px;
+}
+
 /* begin: switchable tweaks for admin/widgets */
 #widgets-placement .switch-for-switchable {
 margin:-32px 10px -2px 0;
diff --git a/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetLayerVisibility.cshtml b/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetLayerVisibility.cshtml
index 66235c40f..bb59f84d1 100644
--- a/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetLayerVisibility.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetLayerVisibility.cshtml
@@ -1 +1,53 @@
-<p>[[layer visibility]]</p>
\ No newline at end of file
+@using Orchard.Widgets.Models;
+@{
+    Style.Require("WidgetsAdmin");
+    Script.Require("jQuery");
+    IEnumerable<LayerPart> layers = Model.Layers;
+}
+<script type="text/javascript">
+//<![CDATA[
+    document.write("<div id=\"widgets-layer-visibility\"><h5>Hide widgets in other layers:</h5></div>");
+//]]>
+</script>
+@using(Script.Foot()) {
+<script type="text/javascript">
+//<![CDATA[
+    (function ($) {
+        var currentLayerId = @Model.CurrentLayer.Id;
+        var layers = [
+        @foreach (var layer in layers) {
+            <text>{"name":"@layer.Name","id":@layer.Id}@(layer != layers.Last() ? "," : "")</text>
+        }
+        ];
+        var visWrapper = $("#widgets-layer-visibility");
+        var visContainer = $("<ul></ul>");
+    
+        var widgetPlacement = $("#widgets-zones");
+        for (var i = 0; i < layers.length; i++) {
+            var layersWidgets = widgetPlacement.find(".widgets-layer-" + layers[i].id);
+            if (layersWidgets.length > 0) {
+                var layer = $("<li class=\"widgets-" + ((layers[i].id == currentLayerId && "this") || "other") + "-layer\">" + layers[i].name + "</li>");
+                layer.data("widgets", layersWidgets);
+                visContainer.append(layer);
+            }
+        }
+
+        $("#widgets-layer-visibility .widgets-other-layer").live("click", function() {
+            var _this = $(this);
+            _this.toggleClass("off");
+            if (_this.hasClass("off")) {
+                _this.data("widgets").hide();
+            }
+            else {
+                _this.data("widgets").show();
+            }
+        });
+        $("#widgets-layer-visibility .widgets-other-layer").live("hover", function() {
+            $(this).data("widgets").toggleClass("on");
+        });
+
+        visWrapper.append(visContainer);
+    })(jQuery);
+//]]>
+</script>
+}
diff --git a/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetPlacement.cshtml b/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetPlacement.cshtml
index 509efd1ac..984a8f818 100644
--- a/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetPlacement.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetPlacement.cshtml
@@ -24,7 +24,7 @@
                             @if (count > 0) {
                                 int i = 0;
                                 foreach (WidgetPart widget in widgets.Where(w => w.Zone == zone).OrderBy(w => w.Position, new Orchard.UI.FlatPositionComparer())) {
-                                    <li class="widgets-@(widget.LayerId == Model.CurrentLayer.Id ? "this" : "other")-layer">
+                                    <li class="widgets-@(widget.LayerId == Model.CurrentLayer.Id ? "this" : "other")-layer widgets-layer-@widget.LayerId">
                                         <h3>@Html.ActionLink(HasText(widget.Title) ? widget.Title : widget.TypeDefinition.DisplayName, "EditWidget", new { @widget.Id, returnUrl })</h3>
                                         <div class="widgets-actions">
                                             @if (widget.LayerId != Model.CurrentLayer.Id) {