imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs sidebar nav

Browse Source
pull/509/head
Armağan Ünlü 7 years ago
parent 8ccf85e2f3
commit a777207e1b
8 changed files with 177 additions and 103 deletions
Show Stats Download Patch File Download Diff File

76
modules/docs/src/Volo.Docs.Web/Areas/Documents/Helpers/TagHelpers/TreeTagHelper.cs
Unescape View File

@ -9,12 +9,15 @@ namespace Volo.Docs.Areas.Documents.Helpers.TagHelpers
[HtmlTargetElement("ul", Attributes = "root-node")] [HtmlTargetElement("ul", Attributes = "root-node")]
public class TreeTagHelper : TagHelper public class TreeTagHelper : TagHelper
{ {
private const string LiItemTemplate = @"<li class='{6}'> private const string LiItemTemplateWithLink = @"<li class='{0}'>
<a href='{0}' class='{5} {3}'> <span class='plus-icon'><i class='fa fa-{1}'></i></span>
<span class='plus-icon'><i class='fa fa-{4}'></i></span>{1} {2}
</a> {3}
{2}
</li>"; </li>";
private const string ListItemAnchor = @"<a href='{0}' class='{1}'>{2}</a>";
private const string ListItemSpan = @"<span class='{0}'>{1}</span>";
private const string UlItemTemplate = @"<ul class='nav nav-list tree' style='{1}'> private const string UlItemTemplate = @"<ul class='nav nav-list tree' style='{1}'>
{0} {0}
@ -95,23 +98,60 @@ namespace Volo.Docs.Areas.Documents.Helpers.TagHelpers
var anchorCss = node.Path.IsNullOrEmpty() ? "tree-toggle" : ""; var anchorCss = node.Path.IsNullOrEmpty() ? "tree-toggle" : "";
var isNodeSelected = node.IsSelected(SelectedDocumentName); var isNodeSelected = node.IsSelected(SelectedDocumentName);
//if (isNodeSelected)
//{
// anchorCss += " opened";
//}
var normalizedPath = node.Path != null && node.Path.EndsWith("." + ProjectFormat) var normalizedPath = node.Path != null && node.Path.EndsWith("." + ProjectFormat)
? node.Path.Left(node.Path.Length - ProjectFormat.Length - 1) ? node.Path.Left(node.Path.Length - ProjectFormat.Length - 1)
: node.Path; : node.Path;
return string.Format(LiItemTemplate, if (node.Path.IsNullOrEmpty() && !node.HasChildItems)
node.Path.IsNullOrEmpty() ? "javascript:;" : "/documents/" + ProjectName + "/" + Version + "/" + normalizedPath, {
node.Text.IsNullOrEmpty() ? "?" : node.Text, //span
content, var span = string.Format(ListItemSpan, anchorCss, node.Text.IsNullOrEmpty() ? "?" : node.Text);
node.HasChildItems ? "nav-header" : "last-link", var listItemCss = node.HasChildItems ? "nav-header" : "last-link";
node.HasChildItems ? "chevron-right" : "long-arrow-right", if (isNodeSelected)
anchorCss, {
isNodeSelected ? "selected-tree" : ""); listItemCss += " selected-tree";
}
return string.Format(LiItemTemplateWithLink,
listItemCss,
node.HasChildItems ? "chevron-right" : "long-arrow-right",
span,
content);
}
else if (node.Path.IsNullOrEmpty() && node.HasChildItems)
{
//anchor
var path = "javascript:;";
var anchor = string.Format(ListItemAnchor, path, anchorCss, node.Text.IsNullOrEmpty() ? "?" : node.Text);
var listItemCss = node.HasChildItems ? "nav-header" : "last-link";
if (isNodeSelected)
{
listItemCss += " selected-tree";
}
return string.Format(LiItemTemplateWithLink,
listItemCss,
node.HasChildItems ? "chevron-right" : "long-arrow-right",
anchor,
content);
}
else
{
//anchor
var path = "/documents/" + ProjectName + "/" + Version + "/" + normalizedPath;
var anchor = string.Format(ListItemAnchor, path, anchorCss, node.Text.IsNullOrEmpty() ? "?" : node.Text);
var listItemCss = node.HasChildItems ? "nav-header" : "last-link";
if (isNodeSelected)
{
listItemCss += " selected-tree";
}
return string.Format(LiItemTemplateWithLink,
listItemCss,
node.HasChildItems ? "chevron-right" : "long-arrow-right",
anchor,
content);
}
} }
} }

2
modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
Unescape View File

@ -153,7 +153,7 @@
{ {
<div class="col-md-9 p-5 bg-white"> <div class="col-md-9 p-5 bg-white">
<p>@L["DocumentNotFound"]</p> <p>@L["DocumentNotFound"]</p>
<a href="#">Go to home</a> /*Localize*/ <a href="#">Go to home</a>
</div> </div>
} }

55
modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css
Unescape View File

@ -34,7 +34,6 @@
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0 1rem; } margin: .5rem 0 1rem; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
padding: 1px;
border-radius: 8px; } border-radius: 8px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
border: 0; } border: 0; }
@ -87,24 +86,29 @@
border-bottom: 1px solid #eeeff3; } border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
color: #000; } color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px; top: 11px;
color: #aaa; color: #aaa; }
cursor: pointer; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link { color: #999;
top: 11px; padding: 7px 0;
color: #aaa; } display: block;
border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px;
color: #aaa;
cursor: pointer; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul {
padding: 0; } padding: 0; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a {
@ -116,11 +120,11 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #000; color: #000;
transition: .4s; } transition: .4s; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
color: #000; } transform: rotate(90deg);
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa { color: #007bff; }
transform: rotate(90deg); .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
color: #000; } transform: rotate(0deg); }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
font-size: 1.5rem; font-size: 1.5rem;
color: #000; color: #000;
@ -280,6 +284,11 @@
cursor: pointer; } cursor: pointer; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
top: 11px; } top: 11px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #555;
padding: 7px 0;
display: block;
border-bottom: 1px solid #333; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #fff; color: #fff;
transition: .4s; } transition: .4s; }

2
modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

72
modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss
Unescape View File

@ -48,7 +48,6 @@ body {
margin: .5rem 0 1rem; margin: .5rem 0 1rem;
.version-select { .version-select {
padding: 1px;
border-radius: 8px; border-radius: 8px;
.input-group-text { .input-group-text {
@ -129,29 +128,35 @@ body {
color: #000; color: #000;
} }
.plus-icon { &.last-link {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px; top: 11px;
color: #aaa; color: #aaa;
cursor: pointer;
&.last-link {
top: 11px;
color: #aaa;
}
} }
} }
span.tree-toggle {
color: #999;
padding: 7px 0;
display: block;
border-bottom: 1px solid #eeeff3;
}
.plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px;
color: #aaa;
cursor: pointer;
}
ul { ul {
padding: 0; padding: 0;
@ -178,15 +183,19 @@ body {
> a { > a {
color: #000; color: #000;
transition: .4s; transition: .4s;
}
span { > span {
.fa { .fa {
color: #000; transform: rotate(90deg);
} color: #007bff;
}
}
&:not(.last-link) .fa { &.last-link {
transform: rotate(90deg); > span {
color: #000; .fa {
transform: rotate(0deg);
} }
} }
} }
@ -473,6 +482,13 @@ body {
} }
span.tree-toggle {
color: #555;
padding: 7px 0;
display: block;
border-bottom: 1px solid #333;
}
&.selected-tree { &.selected-tree {
> a { > a {
@ -644,7 +660,6 @@ body {
} }
.for-mobile { .for-mobile {
display: none; display: none;
} }
@ -653,9 +668,6 @@ body {
display: inline-block; display: inline-block;
} }
pre[class*="language-"] { pre[class*="language-"] {
padding: 1.4em 2em !important; padding: 1.4em 2em !important;
margin: 15px 0 25px !important; margin: 15px 0 25px !important;

55
modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css
Unescape View File

@ -34,7 +34,6 @@
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0 1rem; } margin: .5rem 0 1rem; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
padding: 1px;
border-radius: 8px; } border-radius: 8px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
border: 0; } border: 0; }
@ -87,24 +86,29 @@
border-bottom: 1px solid #eeeff3; } border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
color: #000; } color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px; top: 11px;
color: #aaa; color: #aaa; }
cursor: pointer; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link { color: #999;
top: 11px; padding: 7px 0;
color: #aaa; } display: block;
border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px;
color: #aaa;
cursor: pointer; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul {
padding: 0; } padding: 0; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a {
@ -116,11 +120,11 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #000; color: #000;
transition: .4s; } transition: .4s; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
color: #000; } transform: rotate(90deg);
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa { color: #007bff; }
transform: rotate(90deg); .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
color: #000; } transform: rotate(0deg); }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
font-size: 1.5rem; font-size: 1.5rem;
color: #000; color: #000;
@ -280,6 +284,11 @@
cursor: pointer; } cursor: pointer; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
top: 11px; } top: 11px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #555;
padding: 7px 0;
display: block;
border-bottom: 1px solid #333; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #fff; color: #fff;
transition: .4s; } transition: .4s; }

6
modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js
Unescape View File

@ -1,4 +1,8 @@
$('.tree-toggle:not(.last-link)').click(function () { $('li:not(.last-link) a.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(100);
$(this).closest("li").toggleClass("selected-tree");
});
$('li:not(.last-link) span.plus-icon').click(function () {
$(this).parent().children('ul.tree').toggle(100); $(this).parent().children('ul.tree').toggle(100);
$(this).closest("li").toggleClass("selected-tree"); $(this).closest("li").toggleClass("selected-tree");
}); });

2
modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save