Progress made on the menu icons.

- Styles being inherited correctly down to the "New" section's sub items.
- Menu using the TextHint for generating class names instead of the menu text for predictability across localized sites.

--HG--
branch : dev

src/Orchard.Web/Core/Dashboard/AdminMenu.cs

@@ -8,7 +8,7 @@ namespace Orchard.Core.Dashboard {
         public string MenuName { get { return "admin"; } }
 
         public void GetNavigation(NavigationBuilder builder) {
-            builder.AddImageSet("dashboard.menu")
+            builder.AddImageSet("dashboard")
                 .Add(T("Dashboard"), "-5",
                     menu => menu.Add(T("Orchard"), "-5",
                         item => item

src/Orchard.Web/Core/Dashboard/styles/dashboard.menu.css

@@ -1,7 +0,0 @@
-.navicon-dashboard {
-background-image:url(images/dashboard.menu.png) !important;
-background-position:0 2px !important;
-}
-.navicon-dashboard:hover {
-background-position:0 -30px !important;
-}

src/Orchard.Web/Core/Dashboard/styles/menu.dashboard.css

@@ -0,0 +1,6 @@
+.navicon-dashboard {
+background-image:url(images/menu.dashboard.png) !important;
+}
+.navicon-dashboard:hover {
+background-position:0 -30px !important;
+}

src/Orchard.Web/Core/Orchard.Core.csproj

@@ -239,8 +239,8 @@
     <Content Include="Contents\Views\Admin\Create.cshtml" />
     <Content Include="Contents\Views\Admin\Edit.cshtml" />
     <Content Include="Contents\Views\Admin\List.cshtml" />
-    <Content Include="Dashboard\styles\dashboard.menu.css" />
+    <Content Include="Dashboard\styles\menu.dashboard.css" />
-    <Content Include="Dashboard\styles\images\dashboard.menu.png" />
+    <Content Include="Dashboard\styles\images\menu.dashboard.png" />
     <Content Include="Feeds\Views\Feed.cshtml" />
     <Content Include="Contents\Views\Parts.Contents.Publish.cshtml" />
     <Content Include="Contents\Views\Parts.Contents.Publish.SummaryAdmin.cshtml" />

src/Orchard.Web/Modules/Orchard.Pages/AdminMenu.cs

@@ -7,7 +7,7 @@ namespace Orchard.Core.Dashboard {
         public string MenuName { get { return "admin"; } }
 
         public void GetNavigation(NavigationBuilder builder) {
-            builder.AddImageSet("page.menu");
+            builder.AddImageSet("page");
         }
     }
 }

src/Orchard.Web/Modules/Orchard.Pages/Orchard.Pages.csproj

@@ -55,8 +55,8 @@
     </ProjectReference>
   </ItemGroup>
   <ItemGroup>
-    <Content Include="Styles\page.menu.css" />
+    <Content Include="Styles\menu.page.css" />
-    <Content Include="Styles\images\page.menu.png" />
+    <Content Include="Styles\images\menu.page.png" />
     <Content Include="web.config" />
   </ItemGroup>
   <ItemGroup>

src/Orchard.Web/Modules/Orchard.Pages/Styles/menu.page.css

@@ -0,0 +1,14 @@
+.navicon-page {
+background-image:url(images/menu.page.png) !important;
+}
+.navicon-page:hover {
+background-position:0 -30px !important;
+}
+/* subnav */
+ul ul .navicon-page { 
+background-position:0 6px !important;
+padding-left:16px !important;
+}
+ul ul .navicon-page:hover {
+background-position:0 -26px !important;
+}

src/Orchard.Web/Modules/Orchard.Pages/Styles/page.menu.css

@@ -1,7 +0,0 @@
-.navicon-dashboard {
-background-image:url(images/dashboard.menu.png) !important;
-background-position:0 2px !important;
-}
-.navicon-dashboard:hover {
-background-position:0 -30px !important;
-}

src/Orchard.Web/Themes/TheAdmin/Styles/site.css

@@ -342,12 +342,16 @@ form.link button:hover {
     font-size:14px;
     padding:0 0 0 10px;
 }
-#menu .menu-admin li h3 a {
+#menu .menu-admin a {
-    background:url(images/menu-all.png) no-repeat 0 4px;
+    background-position:0 2px;
+    background-repeat:no-repeat;
+}
+#menu .menu-admin li h3 a { /* only the h3 gets an icon by default */
+    background-image:url(images/menu-default.png);
     padding:0 0 0 16px;
 }
-#menu .menu-admin li h3 a:hover {
+#menu .menu-admin a:hover {
-    background-position:0 -17px;
+    background-position:0 -30px;
     color:#fff;
 }
 /* todo: (heskew) pull out into the appropriate modules somehow when this is baked * /
@@ -388,7 +392,7 @@ form.link button:hover {
     text-decoration:none;
 }
 #menu .menu-admin ul a:hover, #menu .menu-admin ul a:active, #menu .menu-admin ul a:focus {
-    background:#656b55;
+    background-color:#656b55;
     color: #fff;
     /*CSS3 properties*/
      border-radius: 3px;
@@ -445,6 +449,11 @@ form.link button:hover {
      -webkit-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0); 
      -moz-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);
 }
+.section-dashboard h3, .section-new h3,
+.section-dashboard ul, .section-new ul {
+    margin-left:-1px;
+    margin-right:-1px;
+}
 /* todo: make generic so all toggles can use this and clean up jQuery */
 .expando-glyph-container {
     display:inline !important;

src/Orchard.Web/Themes/TheAdmin/Views/Menu.cshtml

@@ -6,7 +6,7 @@
     IEnumerable<dynamic> firstLevelMenuItems = Model;
 
     foreach (var imageSet in Model.ImageSets) {
-        RegisterImageSet(imageSet, Model.MenuName /* style */, 16 /* bounding box */);
+        RegisterImageSet("menu." + imageSet, Model.MenuName /* style */, 16 /* bounding box */);
     }
 
     Model.Attributes.Add("role", "navigation");
@@ -17,28 +17,31 @@
         IEnumerable<dynamic> secondLevelMenuItems = firstLevelMenuItem;
 
         string sectionHeaderText = firstLevelMenuItem.Text;
+        string sectionHeaderTextHint = firstLevelMenuItem.TextHint;
         var firstOfTheSecond = secondLevelMenuItems.FirstOrDefault();
 
-        var imageClassName = "navicon-" + sectionHeaderText.TextHint.HtmlClassify();
+        var itemClassName = HasText(sectionHeaderTextHint)
-        var imageId = HasText(firstLevelMenuItem.ImageId)
+            ? "navicon-" + sectionHeaderTextHint.HtmlClassify()
-            ? "navicon-" + firstLevelMenuItem.ImageId
+            : "navicon";
+        var itemId = HasText(firstLevelMenuItem.IdHint)
+            ? "navicon-" + firstLevelMenuItem.IdHint
             : null;
 
         IHtmlString sectionHeaderMarkup;
         if (firstLevelMenuItem.RouteValues != null || HasText(firstLevelMenuItem.Url)) {
-            sectionHeaderMarkup = HasText(imageId)
+            sectionHeaderMarkup = HasText(itemId)
-                ? Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = imageClassName, id = imageId })
+                ? Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = itemClassName, id = itemId })
-                : Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = imageClassName });
+                : Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = itemClassName });
         }
         else if (firstOfTheSecond != null && firstLevelMenuItem.LinkToFirstChild && (firstOfTheSecond.RouteValues != null || HasText(firstOfTheSecond.Url))) {
-            sectionHeaderMarkup = HasText(imageId)
+            sectionHeaderMarkup = HasText(itemId)
-                ? Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = imageClassName, id = imageId })
+                ? Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = itemClassName, id = itemId })
-                : Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = imageClassName });
+                : Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = itemClassName });
         }
         else {
-            sectionHeaderMarkup = HasText(imageId)
+            sectionHeaderMarkup = HasText(itemId)
-                ? new HtmlString(string.Format(@"<span class=""{1}"" id=""{2}"">{0}</span>", Html.Encode(sectionHeaderText), Html.Encode(imageClassName), Html.Encode(imageId)))
+                ? new HtmlString(string.Format(@"<span class=""{1}"" id=""{2}"">{0}</span>", Html.Encode(sectionHeaderText), Html.Encode(itemClassName), Html.Encode(itemId)))
-                : new HtmlString(string.Format(@"<span class=""{1}"">{0}</span>", Html.Encode(sectionHeaderText), Html.Encode(imageClassName)));
+                : new HtmlString(string.Format(@"<span class=""{1}"">{0}</span>", Html.Encode(sectionHeaderText), Html.Encode(itemClassName)));
         }
 
         if (firstLevelMenuItem == firstLevelMenuItems.First()) {
@@ -51,19 +54,36 @@
             firstLevelMenuItem.Classes.Add("selected");
         }
 
-        firstLevelMenuItem.Classes.Add("section-" + sectionHeaderText.TextHint.HtmlClassify());
+        if (HasText(sectionHeaderTextHint)) {
+            firstLevelMenuItem.Classes.Add("section-" + sectionHeaderTextHint.HtmlClassify());
+        }
+
         var firstLevelTag = Tag(firstLevelMenuItem, "li");
         @firstLevelTag.StartElement
             <h3>@sectionHeaderMarkup</h3>
             if (secondLevelMenuItems.Where(menuItem => !menuItem.LocalNav).Count() > 1 || !firstLevelMenuItem.LinkToFirstChild) {
                 <ul class="menuItems">
                 @foreach (var secondLevelMenuItem in secondLevelMenuItems.Where(menuItem => !menuItem.LocalNav)) {
+                    string secondLevelTextHint = secondLevelMenuItem.TextHint;
+                    var secondLevelItemClassName = HasText(secondLevelTextHint)
+                        ? "navicon-" + secondLevelTextHint.HtmlClassify()
+                        : "navicon";
+                    var secondLevelItemId = HasText(secondLevelMenuItem.IdHint)
+                        ? "navicon-" + secondLevelMenuItem.IdHint
+                        : null;
+
                     if (secondLevelMenuItem.Selected) {
                         secondLevelMenuItem.Classes.Add("selected"); 
                     }
+
                     var secondLevelTag = Tag(secondLevelMenuItem, "li");
                     @secondLevelTag.StartElement
-                        <a href="@secondLevelMenuItem.Href">@secondLevelMenuItem.Text</a>
+                        if (HasText(secondLevelItemId)) {
+                            <a href="@secondLevelMenuItem.Href" class="@secondLevelItemClassName" id="@secondLevelItemId">@secondLevelMenuItem.Text</a>
+                        }
+                        else {
+                            <a href="@secondLevelMenuItem.Href" class="@secondLevelItemClassName">@secondLevelMenuItem.Text</a>
+                        }
                     @secondLevelTag.EndElement
                 }
                 </ul>

src/Orchard/UI/Navigation/INavigationManager.cs

@@ -4,6 +4,7 @@ using System.Web.Routing;
 namespace Orchard.UI.Navigation {
     public interface INavigationManager : IDependency {
         IEnumerable<MenuItem> BuildMenu(string menuName);
+        IEnumerable<string> BuildImageSets(string menuName);
         string GetUrl(string menuItemUrl, RouteValueDictionary routeValueDictionary);
     }
 }

src/Orchard/UI/Navigation/MenuFilter.cs

@@ -43,6 +43,12 @@ namespace Orchard.UI.Navigation {
             // Populate main nav
             dynamic menuShape = _shapeFactory.Menu().MenuName(menuName);
             PopulateMenu(_shapeFactory, menuShape, menuShape, menuItems);
+
+            // Add any know image sets to the main nav
+            IEnumerable<string> menuImageSets = _navigationManager.BuildImageSets(menuName);
+            if (menuImageSets != null && menuImageSets.Count() > 0)
+                menuShape.ImageSets(menuImageSets);
+            
             workContext.Layout.Navigation.Add(menuShape);
 
             // Populate local nav
@@ -181,8 +187,9 @@ namespace Orchard.UI.Navigation {
         protected dynamic BuildMenuItemShape(dynamic shapeFactory, dynamic parentShape, dynamic menu, MenuItem menuItem) {
             return shapeFactory.MenuItem()
                 .Text(menuItem.Text)
+                .TextHint(menuItem.TextHint)
+                .IdHint(menuItem.IdHint)
                 .Href(menuItem.Href)
-                .Id(menuItem.Id)
                 .LinkToFirstChild(menuItem.LinkToFirstChild)
                 .LocalNav(menuItem.LocalNav)
                 .Selected(menuItem.Selected)
@@ -203,8 +210,9 @@ namespace Orchard.UI.Navigation {
         protected dynamic BuildLocalMenuItemShape(dynamic shapeFactory, dynamic parentShape, dynamic menu, MenuItem menuItem) {
             return shapeFactory.LocalMenuItem()
                 .Text(menuItem.Text)
+                .TextHint(menuItem.TextHint)
+                .IdHint(menuItem.IdHint)
                 .Href(menuItem.Href)
-                .Id(menuItem.Id)
                 .LinkToFirstChild(menuItem.LinkToFirstChild)
                 .LocalNav(menuItem.LocalNav)
                 .Selected(menuItem.Selected)

src/Orchard/UI/Navigation/MenuItem.cs

@@ -11,13 +11,14 @@ namespace Orchard.UI.Navigation {
         }
 
         public string Text { get; set; }
+        public string TextHint { get; set; }
+        public string IdHint { get; set; }
         public string Url { get; set; }
         public string Href { get; set; }
         public string Position { get; set; }
         public bool LinkToFirstChild { get; set; }
         public bool LocalNav { get; set; }
         public bool Selected { get; set; }
-        public string Id { get; set; }
         public RouteValueDictionary RouteValues { get; set; }
         public IEnumerable<MenuItem> Items { get; set; }
         public IEnumerable<Permission> Permissions { get; set; }

src/Orchard/UI/Navigation/NavigationItemBuilder.cs

@@ -13,8 +13,10 @@ namespace Orchard.UI.Navigation {
         }
 
         public NavigationItemBuilder Caption(LocalizedString caption) {
-            if (caption != null)
+            if (caption != null) {
                 _item.Text = caption.Text;
+                _item.TextHint = caption.TextHint;
+            }
             return this;
         }
 
@@ -28,8 +30,8 @@ namespace Orchard.UI.Navigation {
             return this;
         }
 
-        public NavigationItemBuilder Id(string id) {
+        public NavigationItemBuilder IdHint(string idHint) {
-            _item.Id = id;
+            _item.IdHint = idHint;
             return this;
         }
 

src/Orchard/UI/Navigation/NavigationManager.cs

@@ -74,8 +74,9 @@ namespace Orchard.UI.Navigation {
                         RouteValues = item.RouteValues,
                         LocalNav = item.LocalNav,
                         Text = item.Text,
+                        TextHint = item.TextHint,
+                        IdHint = item.IdHint,
                         Url = item.Url,
-                        Id = item.Id,
                         LinkToFirstChild = item.LinkToFirstChild,
                         Href = item.Href
                     };
@@ -118,9 +119,10 @@ namespace Orchard.UI.Navigation {
 
             var joined = new MenuItem {
                 Text = items.First().Text,
+                TextHint = items.First().TextHint,
+                IdHint = items.First().IdHint,
                 Url = items.First().Url,
                 Href = items.First().Href,
-                Id = items.First().Id,
                 LinkToFirstChild = items.First().LinkToFirstChild,
                 RouteValues = items.First().RouteValues,
                 LocalNav = items.Any(x => x.LocalNav),