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
This commit is contained in:
Nathan Heskew
2011-02-21 12:16:31 -08:00
parent 90d81f69c1
commit 79b1a288b3
19 changed files with 97 additions and 48 deletions

View File

@@ -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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 224 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

View File

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

View File

@@ -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\images\dashboard.menu.png" />
<Content Include="Dashboard\styles\menu.dashboard.css" />
<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" />

View File

@@ -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");
}
}
}

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 B

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 212 B

After

Width:  |  Height:  |  Size: 219 B

View File

@@ -342,12 +342,16 @@ form.link button:hover {
font-size:14px;
padding:0 0 0 10px;
}
#menu .menu-admin li h3 a {
background:url(images/menu-all.png) no-repeat 0 4px;
#menu .menu-admin a {
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 {
background-position:0 -17px;
#menu .menu-admin a:hover {
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;

View File

@@ -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 imageId = HasText(firstLevelMenuItem.ImageId)
? "navicon-" + firstLevelMenuItem.ImageId
var itemClassName = HasText(sectionHeaderTextHint)
? "navicon-" + sectionHeaderTextHint.HtmlClassify()
: "navicon";
var itemId = HasText(firstLevelMenuItem.IdHint)
? "navicon-" + firstLevelMenuItem.IdHint
: null;
IHtmlString sectionHeaderMarkup;
if (firstLevelMenuItem.RouteValues != null || HasText(firstLevelMenuItem.Url)) {
sectionHeaderMarkup = HasText(imageId)
? Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = imageClassName, id = imageId })
: Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = imageClassName });
sectionHeaderMarkup = HasText(itemId)
? Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = itemClassName, id = itemId })
: Html.Link(sectionHeaderText, (string)firstLevelMenuItem.Href, new { @class = itemClassName });
}
else if (firstOfTheSecond != null && firstLevelMenuItem.LinkToFirstChild && (firstOfTheSecond.RouteValues != null || HasText(firstOfTheSecond.Url))) {
sectionHeaderMarkup = HasText(imageId)
? Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = imageClassName, id = imageId })
: Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = imageClassName });
sectionHeaderMarkup = HasText(itemId)
? Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = itemClassName, id = itemId })
: Html.Link(sectionHeaderText, (string)firstOfTheSecond.Href, new { @class = itemClassName });
}
else {
sectionHeaderMarkup = HasText(imageId)
? 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}"">{0}</span>", Html.Encode(sectionHeaderText), Html.Encode(imageClassName)));
sectionHeaderMarkup = HasText(itemId)
? 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(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>