composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

#185 Navigation Breadcrumb - A beta version, based on the navigation history. Comments welcome!

Browse Source 
SVN:trunk[4000]
This commit is contained in:
Romain Quetiez
2016-04-18 14:48:43 +00:00
parent f436cece4a
commit e27d61a525
15 changed files with 457 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
css/light-grey.css
View File

@@ -1151,7 +1151,6 @@ div#logo div {
#top-bar {
height: 55px;
background: #f1f1f1;
text-align: right;
}
@@ -2201,3 +2200,71 @@ span.refresh-button {
}
#top-bar-table {
width: 100%;
}
#top-bar-table #top-bar-table-search {
width: 347px;
}
#itop-breadcrumb {
overflow: hidden;
float: left;
background: #f1f1f1;
margin-left: -20px;
}
#itop-breadcrumb li {
list-style: none;
float: left;
margin: 0 22px 6px 0;
}
#itop-breadcrumb li .icon img {
height: 15px;
width: auto;
margin-right: 5px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
opacity: 0.5;
}
#itop-breadcrumb li:hover .icon img {
-webkit-filter: none;
filter: none;
opacity: 1;
}
#itop-breadcrumb li a {
text-decoration: none;
color: #555555;
font-size: 9pt;
padding: 0;
background: none;
}
#itop-breadcrumb li a span.truncate {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
#itop-breadcrumb li a:hover {
text-decoration: none;
color: #e87c1e;
}
#itop-breadcrumb li a::after {
content: '';
position: absolute;
background-image: url(../images/breadcrumb-separator.png?v=v2.2.0);
background-repeat: no-repeat;
width: 8px;
height: 16px;
margin-left: 5px;
}
#itop-breadcrumb li:last-child a::after {
display: none;
}

83
css/light-grey.scss
View File

@@ -8,6 +8,10 @@ $popup-menu-highlight-color = $highlight-color;
$popup-menu-text-color: #000;
$popup-menu-background-color: #fff;
$popup-menu-text-higlight-color: #fff;
$breadcrumb-color: #555;
$breadcrumb-text-color: #fff;
$breadcrumb-highlight-color: $highlight-color;
$breadcrumb-text-highlight-color: #fff;
/* CSS Document */
body {
@@ -868,7 +872,6 @@ div#logo div {
overflow: hidden;
}
#top-bar {
height: 55px;
background: $frame-background-color;
text-align: right;
}
@@ -1615,4 +1618,80 @@ span.refresh-button {
}
.history_entry_truncated .history_truncated_toggler {
background-position: 0 -192px;
}
}
#top-bar-table {
width: 100%;
#top-bar-table-search{
width: 347px;
}
}
#itop-breadcrumb{
overflow: hidden;
float: left;
background: $frame-background-color;
margin-left: -20px;
li{
list-style: none;
float: left;
margin: 0 22px 6px 0;
.icon img{
height: 15px;
width: auto;
margin-right: 5px;
-webkit-filter: unquote("grayscale(100%)");
filter: unquote("grayscale(100%)");
filter: unquote("gray");
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
// IE has no filter option: at least, have some effect when hovering...
opacity: 0.5;
}
&:hover .icon img{
-webkit-filter: none;
filter: none;
opacity: 1;
}
a{
text-decoration: none;
color: #555;
font-size: 9pt;
padding: 0;
background: none;
span.truncate
{
// Ellipsis
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
&:hover{
text-decoration: none;
color: $highlight-color;
}
&::after{
content:'';
position: absolute;
background-image: url(../images/breadcrumb-separator.png?v=#{$version});
background-repeat: no-repeat;
width: 8px;
height: 16px;
margin-left: 5px;
}
}
&:last-child a::after{
display: none;
}
}
}