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

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" />

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;

src/Orchard.Web/Modules/Orchard.Widgets/Views/WidgetLayerVisibility.cshtml

@@ -1 +1,53 @@
-<p>[[layer visibility]]</p>
+@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>
+}

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