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

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

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. 

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>

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>

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

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

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 {

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