From 19c2f0e1c1c0a01cf76d05531c6e68769279d5ec Mon Sep 17 00:00:00 2001
From: Nathan Heskew <nathan.heskew@microsoft.com>
Date: Fri, 28 May 2010 15:17:33 -0700
Subject: [PATCH] Added a switchable view interface for the features UI* and
 cleaned up a little more

* can be pulled back into the base eventually

--HG--
branch : dev
---
 .../Controllers/AdminController.cs            |   4 ++
 .../Orchard.Modules/Orchard.Modules.csproj    |   8 +++
 .../Orchard.Modules/Views/Admin/Add.ascx      |   2 +
 .../Orchard.Modules/Views/Admin/Features.ascx |   9 ++-
 .../Orchard.Modules/Views/Admin/Index.ascx    |   2 +-
 .../scripts/jquery.switchable.js              |  24 ++++++++
 .../Modules/Orchard.Modules/styles/admin.css  |  58 +++++++++++++++---
 .../styles/images/detail-view-on.gif          | Bin 0 -> 123 bytes
 .../styles/images/detail-view.gif             | Bin 0 -> 123 bytes
 .../styles/images/summary-view-on.gif         | Bin 0 -> 156 bytes
 .../styles/images/summary-view.gif            | Bin 0 -> 156 bytes
 .../styles/jquery.switchable.css              |  44 +++++++++++++
 12 files changed, 138 insertions(+), 13 deletions(-)
 create mode 100644 src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Add.ascx
 create mode 100644 src/Orchard.Web/Modules/Orchard.Modules/scripts/jquery.switchable.js
 create mode 100644 src/Orchard.Web/Modules/Orchard.Modules/styles/images/detail-view-on.gif
 create mode 100644 src/Orchard.Web/Modules/Orchard.Modules/styles/images/detail-view.gif
 create mode 100644 src/Orchard.Web/Modules/Orchard.Modules/styles/images/summary-view-on.gif
 create mode 100644 src/Orchard.Web/Modules/Orchard.Modules/styles/images/summary-view.gif
 create mode 100644 src/Orchard.Web/Modules/Orchard.Modules/styles/jquery.switchable.css

diff --git a/src/Orchard.Web/Modules/Orchard.Modules/Controllers/AdminController.cs b/src/Orchard.Web/Modules/Orchard.Modules/Controllers/AdminController.cs
index a45979b33..385dec318 100644
--- a/src/Orchard.Web/Modules/Orchard.Modules/Controllers/AdminController.cs
+++ b/src/Orchard.Web/Modules/Orchard.Modules/Controllers/AdminController.cs
@@ -25,6 +25,10 @@ namespace Orchard.Modules.Controllers {
             return View(new ModulesIndexViewModel {Modules = modules});
         }
 
+        public ActionResult Add() {
+            return View(new ModulesIndexViewModel());  
+        }
+
         public ActionResult Features() {
             if (!Services.Authorizer.Authorize(Permissions.ManageFeatures, T("Not allowed to manage features")))
                 return new HttpUnauthorizedResult();
diff --git a/src/Orchard.Web/Modules/Orchard.Modules/Orchard.Modules.csproj b/src/Orchard.Web/Modules/Orchard.Modules/Orchard.Modules.csproj
index 14d3e1a81..93d91910f 100644
--- a/src/Orchard.Web/Modules/Orchard.Modules/Orchard.Modules.csproj
+++ b/src/Orchard.Web/Modules/Orchard.Modules/Orchard.Modules.csproj
@@ -80,6 +80,13 @@
   </ItemGroup>
   <ItemGroup>
     <Content Include="Module.txt" />
+    <Content Include="scripts\jquery.switchable.js" />
+    <Content Include="styles\images\summary-view.gif" />
+    <Content Include="styles\images\summary-view-on.gif" />
+    <Content Include="styles\images\detail-view.gif" />
+    <Content Include="styles\images\detail-view-on.gif" />
+    <Content Include="styles\jquery.switchable.css" />
+    <Content Include="Views\Admin\Add.ascx" />
     <Content Include="Views\Admin\Index.ascx" />
     <Content Include="Web.config" />
   </ItemGroup>
@@ -96,6 +103,7 @@
     <Content Include="Views\Admin\Features.ascx" />
     <Content Include="Views\Web.config" />
   </ItemGroup>
+  <ItemGroup />
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
diff --git a/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Add.ascx b/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Add.ascx
new file mode 100644
index 000000000..239de7a6d
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Add.ascx
@@ -0,0 +1,2 @@
+<%@ Control Language="C#" Inherits="Orchard.Mvc.ViewUserControl<object>" %>
+<h1><%=Html.TitleForPage(T("Install a Module").ToString()) %></h1>
diff --git a/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Features.ascx b/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Features.ascx
index 47dda8aae..075b91ed4 100644
--- a/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Features.ascx
+++ b/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Features.ascx
@@ -3,10 +3,12 @@
 <%@ Import Namespace="Orchard.Mvc.Html"%>
 <%@ Import Namespace="Orchard.Modules.ViewModels"%>
 <%@ Import Namespace="Orchard.Utility.Extensions" %><%
- Html.RegisterStyle("admin.css"); %>
+ Html.RegisterStyle("admin.css");
+ Html.RegisterStyle("jquery.switchable.css");
+ Html.RegisterFootScript("jquery.switchable.js"); %>
 <h1><%=Html.TitleForPage(T("Manage Features").ToString()) %></h1>
 <% if (Model.Features.Count() > 0) { %>
-<ul class="features"><%
+<ul class="features summary-view switchable"><%
     var featureGroups = Model.Features.OrderBy(f => f.Descriptor.Category).GroupBy(f => f.Descriptor.Category);
     foreach (var featureGroup in featureGroups) {
         var categoryName = featureGroup.First().Descriptor.Category ?? T("Uncategorized");
@@ -34,7 +36,8 @@
             <li class="<%=featureClassName %>" id="<%=Html.AttributeEncode(featureId) %>" title="<%=T("{0} is {1}", Html.AttributeEncode(feature.Descriptor.Name), featureState) %>">
                 <div class="summary">
                     <div class="properties">
-                        <h3><%=Html.Encode(feature.Descriptor.Name) %></h3><%
+                        <h3><%:feature.Descriptor.Name %></h3>
+                        <p class="description"><%:feature.Descriptor.Description %></p><%
                         if (feature.Descriptor.Dependencies != null) { %>
                         <div class="dependencies">
                             <h4><%=_Encoded("Depends on:")%></h4>
diff --git a/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Index.ascx b/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Index.ascx
index 0bd7bf68e..4a47b8b77 100644
--- a/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Index.ascx
+++ b/src/Orchard.Web/Modules/Orchard.Modules/Views/Admin/Index.ascx
@@ -3,7 +3,7 @@
 <%@ Import Namespace="Orchard.Mvc.Html"%>
 <%@ Import Namespace="Orchard.Modules.ViewModels"%>
 <h1><%=Html.TitleForPage(T("Installed Modules").ToString()) %></h1>
-<div class="manage"><%=Html.ActionLink(T("Install a module").ToString(), "Features", new { }, new { @class = "button primaryAction" })%></div>
+<div class="manage"><%=Html.ActionLink(T("Install a module").ToString(), "Add", null, new { @class = "button primaryAction" })%></div>
 <% if (Model.Modules.Count() > 0) { %>
 <ul class="contentItems"><%
     foreach (var module in Model.Modules.OrderBy(m => m.DisplayName)) { %>
diff --git a/src/Orchard.Web/Modules/Orchard.Modules/scripts/jquery.switchable.js b/src/Orchard.Web/Modules/Orchard.Modules/scripts/jquery.switchable.js
new file mode 100644
index 000000000..cd7bb0209
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.Modules/scripts/jquery.switchable.js
@@ -0,0 +1,24 @@
+(function ($) {
+    $.fn.extend({
+        powerUpTheSwitch: function () {
+            var _this = $(this);
+            var theSwitch = $("<div class=\"switch-for-switchable\"><ul class=\"switch-button-group\"><li class=\"switch-button summary-view\">&nbsp;</li><li class=\"switch-button detail-view\"></li></ul></div>");
+
+            theSwitch.find(".summary-view").click(function () { $(this).switchToSummaryView(_this); });
+            theSwitch.find(".detail-view").click(function () { $(this).switchToDetailView(_this); });
+
+            theSwitch.addClass(_this.hasClass("summary-view") ? "summary-switched" : "detail-switched");
+
+            theSwitch.insertBefore(_this);
+        },
+        switchToDetailView: function (switched) {
+            $(this).closest(".switch-for-switchable").addClass("detail-switched").removeClass("summary-switched");
+            switched.addClass("detail-view").removeClass("summary-view");
+        },
+        switchToSummaryView: function (switched) {
+            $(this).closest(".switch-for-switchable").addClass("summary-switched").removeClass("detail-switched");
+            switched.addClass("summary-view").removeClass("detail-view");
+        }
+    });
+    $(".switchable").powerUpTheSwitch();
+})(jQuery);
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.Modules/styles/admin.css b/src/Orchard.Web/Modules/Orchard.Modules/styles/admin.css
index c03884f20..73333c038 100644
--- a/src/Orchard.Web/Modules/Orchard.Modules/styles/admin.css
+++ b/src/Orchard.Web/Modules/Orchard.Modules/styles/admin.css
@@ -1,7 +1,11 @@
-.features .category {
-    overflow:hidden;
+.features.detail-view .category > ul {
+    border:1px solid #EAEAEA;
 }
-.features .feature {
+.features.features  .category {
+    overflow:hidden;
+    padding-bottom:1.5em;
+}
+.features.features.summary-view  .feature {
     border:1px solid #EAEAEA;
     display:block;
     float:left;
@@ -10,34 +14,70 @@
     position:relative;
     width:32.1%;
 }
-.features .feature:nth-child(3n+1),
-.features .feature:nth-child(3n+2),
-.features .feature:nth-child(3n) {
+.features.features.summary-view  .feature:nth-child(3n+1),
+.features.features.summary-view  .feature:nth-child(3n+2),
+.features.features.summary-view  .feature:nth-child(3n) {
     width:32.55%;
 }
-.features .feature:nth-child(3n+1) {
+.features.features.summary-view  .feature:nth-child(3n+1) {
     margin-left:0;
 }
-.features .feature:nth-child(3n+2) {
+.features.features.summary-view  .feature:nth-child(3n+2) {
     margin-right:0;
 }
-.features .feature:nth-child(3n) {
+.features.features.summary-view  .feature:nth-child(3n) {
     float:right;
     margin-left:0;
     margin-right:0;
 }
 
+.features.summary-view .feature {
+    margin-bottom:.5em;
+}
+.features.detail-view .feature {
+    padding:.25em 0;
+}
+.features.summary-view .feature {
+    margin-bottom:inherit;
+}
 .features .enabled.feature {
     background:#FFF;
+}
+.features.summary-view .enabled.feature {
     border-color:#CFE493;
 }
 .features .disabled.feature {
     background:#EAEAEA;
+}
+.features.summary-view .disabled.feature {
     border-color:#CCC;
 }
+.features.detail-view .feature {
+    border-bottom:1px solid #CCC;
+}
+.features.detail-view .last.feature {
+    border:0;
+}
+
 .features .feature .summary {
     overflow:hidden;
     padding:.4em .5em;
+    position:relative;
+}
+#main .features.detail-view h3 {
+    display:inline;
+    font-size:1.4em;
+    font-weight:bold;
+}
+#main .features.summary-view .description {
+    display:none;
+}
+#main .features.detail-view .description {
+    display:inline;
+    margin:0 0 1em .5ex;
+}
+.features.detail-view .description::before {
+    content:" - ";
 }
 .features .dependencies li,
 .features .actions {
diff --git a/src/Orchard.Web/Modules/Orchard.Modules/styles/images/detail-view-on.gif b/src/Orchard.Web/Modules/Orchard.Modules/styles/images/detail-view-on.gif
new file mode 100644
index 0000000000000000000000000000000000000000..818e325ef22cd34efb104746bf52e3288ba058a2
GIT binary patch
literal 123
zcmZ?wbhEHblwgoxSj52aaiP`!ts(zjoch1U;n&;S3^1VhlLgGw0g)iJ49pH5yYBom
zI3?Mvs`PqqECaJ)PfBE!^3ruW*{l-k>2eygDsHh<z5c&8Jm=WT)*{OgjuSafEiN-Z
Qw%NR`I=ANAbOr`%0QF2Q4gdfE

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.Modules/styles/images/detail-view.gif b/src/Orchard.Web/Modules/Orchard.Modules/styles/images/detail-view.gif
new file mode 100644
index 0000000000000000000000000000000000000000..498aabfd6760a46f209d7b44c9e79997f87b378d
GIT binary patch
literal 123
zcmZ?wbhEHblwgoxSj51vbH|QVt5&^z{d(rinP0ztWq<+2pDbXe4u}M)Wngyj*mdWh
z!70gRRi)Q^V;PtYdr~5+l$Wm4$!3*MPnXk}RdI`@>h=G%;W@`vwia22aGc0-YH^wQ
RvCZaf)wwm_rZX^D0{|R>EpY$<

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.Modules/styles/images/summary-view-on.gif b/src/Orchard.Web/Modules/Orchard.Modules/styles/images/summary-view-on.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6cd699ed1724f8ea87f751a7fc27d46e37f10d34
GIT binary patch
literal 156
zcmZ?wbhEHblwgoxSj52a_iW$i4N?Dg#_#Ud{q^=X0}LqsWC1gEKqN>l19PIst~>t>
zPD!@!4NH8(_9NaPBf-LK-U2SAotxAruhTVLy_ILrSKe~#TPLSS^Dv!wVzBZ}j?uRC
z9;dZIOPn<~T+wFi(o2*um;ImPXf(mxXMSmp@r`3Hdas|p2wuGP*Z&3qP6lfL01`aT

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.Modules/styles/images/summary-view.gif b/src/Orchard.Web/Modules/Orchard.Modules/styles/images/summary-view.gif
new file mode 100644
index 0000000000000000000000000000000000000000..154aea32a4d73bf97f8b217f31137475b95c33f9
GIT binary patch
literal 156
zcmZ?wbhEHblwgoxSj52a=+UD)w{O3F{d(rinP0ztWq<+2pDbXe4u}M)WnfP9*mdWh
z!70i1y<v%O*nY$tWF%Oa&0D~wv~!dC<aN4+tGDv(`N~^vee2}(Xdb2$PYhPR$uZiN
z-s7}3Xo<7thAY~PU3!TU=Cc2D9E~QJ`^+!RF}`ukMep^~7r~3S{`%h_z{y|@01{O`
A(*OVf

literal 0
HcmV?d00001

diff --git a/src/Orchard.Web/Modules/Orchard.Modules/styles/jquery.switchable.css b/src/Orchard.Web/Modules/Orchard.Modules/styles/jquery.switchable.css
new file mode 100644
index 000000000..8a509d8ae
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.Modules/styles/jquery.switchable.css
@@ -0,0 +1,44 @@
+.switch-for-switchable {
+	border-bottom:1px solid #BDBCBC;
+	margin:0 0 10px;
+    overflow:auto;
+}
+.switch-for-switchable .switch-button-group {
+	float:right;
+	padding:4px 30px;
+}
+.switch-for-switchable .switch-button {
+	background: #F5F5F5;
+	border:1px solid #999999;
+	color:#2D2F25;
+	cursor:pointer;
+	display:block;
+	float:left;
+	text-align:center;
+	height:24px;
+	width:24px;
+}
+.switch-for-switchable .summary-view {
+	background:url("images/summary-view.gif") no-repeat left top;
+	border-right:1px solid #bcbcbc;
+	border-radius:3px 0 0 3px;
+	-moz-border-radius:3px 0 0 3px;
+	-webkit-border-radius:3px 0 0 3px;
+}
+.switch-for-switchable.summary-switched .summary-view {
+	background:url("images/summary-view-on.gif") no-repeat left top;
+	border-color:#bb8b2d;
+	cursor:default;
+}
+.switch-for-switchable .detail-view {
+	background:url("images/detail-view.gif") no-repeat left top;
+	border-right:1px solid #898989;
+	border-radius:0 3px 3px 0;
+	-moz-border-radius:0 3px 3px 0;
+	-webkit-border-radius:0 3px 3px 0;	
+}
+.switch-for-switchable.detail-switched .detail-view {
+	background:url("images/detail-view-on.gif") no-repeat left top;
+	border-color:#bb8b2d;
+	cursor:default;
+}
\ No newline at end of file