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

N°2847 - Rework iTopWebPage layout (WIP Part III)

Browse Source 
- iTopWebPage: Extract processing in dedicated functions
- iTopWebPage: Add tooltips base feature
- iTopWebPage: Fix JS dictionaries
- iTopWebPage: Extract inline JS to dedicated file
- Top bar: Visual improvements
- Nav. menu: Visual improvements
- Nav. menu: Tooltip improvement
- Nav. menu: Toggle state preference saved
- Nav. menu: Add menus filter feature
- Breadcrumbs: Handle elements overflow
This commit is contained in:
Molkobain
2020-07-18 12:43:41 +02:00
parent fa153d8504
commit 87d7693be5
12 changed files with 368 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/backoffice/components/_breadcrumbs.scss
View File

@@ -22,6 +22,8 @@ $ibo-breadcrumbs--item-icon--margin-x: 8px !default;
$ibo-breadcrumbs--item-icon--max-width: 16px !default;
$ibo-breadcrumbs--item-icon--text-color: $ibo-color-grey-600 !default;
$ibo-breadcrumbs--item-label--max-width: 100px !default;
$ibo-breadcrumbs--item-separator--margin-x: 12px !default;
$ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
@@ -72,3 +74,8 @@ $ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
filter: grayscale(100%);
}
}
.ibo-breadcrumbs--item-label{
display: inline; /* Otherwise the "truncate" doesn't work with th default display: flex */
max-width: $ibo-breadcrumbs--item-label--max-width;
@extend %ibo-text-truncated-with-ellipsis;
}

31
css/backoffice/layout/_navigation-menu.scss
View File

@@ -72,12 +72,14 @@ $ibo-navigation-menu--menu-group-icon--text-color--is-active: $ibo-color-primary
$ibo-navigation-menu--menu-group-title--margin-left: $ibo-navigation-menu--middle-part--padding-x !default;
$ibo-navigation-menu--menu-group-title--text-color--is-active: $ibo-color-blue-grey-800 !default;
$ibo-navigation-menu--drawer--background-color: $ibo-color-grey-100 !default;
$ibo-navigation-menu--drawer--width: 312px !default;
$ibo-navigation-menu--drawer--padding-x: 20px !default;
$ibo-navigation-menu--drawer--padding-y: 32px !default;
$ibo-navigation-menu--drawer--background-color: $ibo-color-grey-100 !default;
$ibo-navigation-menu--drawer--border-right: 1px solid $ibo-color-grey-300 !default;
$ibo-navigation-menu--menu-filter--margin-bottom: 55px !default;
$ibo-navigation-menu--menu-filter--width: $ibo-navigation-menu--drawer--width - $ibo-navigation-menu--drawer--padding-x * 2 !default;
$ibo-navigation-menu--menu-filter--margin-bottom: 50px !default;
$ibo-navigation-menu--menu-filter-input--padding-right: 64px !default;
$ibo-navigation-menu--menu-filter-hotkey--border: 1px solid $ibo-color-grey-400 !default;
@@ -91,14 +93,18 @@ $ibo-navigation-menu--menu-filter-input--background-color: $ibo-color-white-100
$ibo-navigation-menu--menu-filter-input--border: 1px solid $ibo-color-grey-300 !default;
$ibo-navigation-menu--menu-filter-input--border-radius: $ibo-border-radius-300 !default;
$ibo-navigation-menu--menu-groups--margin-top: $ibo-navigation-menu--drawer--padding-y + $ibo-navigation-menu--menu-filter--margin-bottom !default;
$ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered: 48px !default;
$ibo-navigation-menu--menu-nodes-title--margin-top: 0 !default;
$ibo-navigation-menu--menu-nodes-title--margin-bottom: 32px !default;
$ibo-navigation-menu--menu-nodes-title--margin-bottom--on-filtered: 8px !default;
$ibo-navigation-menu--menu-node--padding-x: 10px !default;
$ibo-navigation-menu--menu-node--padding-y: 6px !default;
$ibo-navigation-menu--menu-node--margin-x: -1 * $ibo-navigation-menu--menu-node--padding-x !default;
$ibo-navigation-menu--menu-node--margin-y: 0 !default;
$ibo-navigation-menu--menu-node--margin-top: 8px !default;
$ibo-navigation-menu--menu-node--text-color: $ibo-color-grey-700 !default;
$ibo-navigation-menu--menu-node--hyperlink-color: inherit !default;
$ibo-navigation-menu--menu-node--background-color: $ibo-color-grey-200 !default;
@@ -155,6 +161,15 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
right: calc(-1 * #{$ibo-navigation-menu--drawer--width});
}
}
&.ibo-navigation-menu--is-filtered{
.ibo-navigation-menu--menu-nodes{
margin-bottom: $ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered;
.ibo-navigation-menu--menu-nodes-title{
margin-bottom: $ibo-navigation-menu--menu-nodes-title--margin-bottom--on-filtered;
}
}
}
}
.ibo-navigation-menu--body,
@@ -340,12 +355,13 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
overflow-y: auto;
background-color: $ibo-navigation-menu--drawer--background-color;
border-right: $ibo-navigation-menu--drawer--border-right;
transition: right 0.2s ease-in-out;
}
/* - Menu filter */
.ibo-navigation-menu--menu-filter{
position: relative;
margin-bottom: $ibo-navigation-menu--menu-filter--margin-bottom;
position: fixed;
width: $ibo-navigation-menu--menu-filter--width;
}
.ibo-navigation-menu--menu-filter-input{
/* TODO: Refactor this into the standard field input */
@@ -380,6 +396,10 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
padding: 2px 4px;
@extend %ibo-font-ral-nor-50;
}
/* - Menu groups */
.ibo-navigation-menu--menu-groups{
margin-top: $ibo-navigation-menu--menu-groups--margin-top;
}
/* - Menu nodes */
.ibo-navigation-menu--menu-nodes{
display: none;
@@ -405,7 +425,6 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
}
}
ul{
margin-top: $ibo-navigation-menu--menu-node--margin-top;
padding-left: $ibo-navigation-menu--drawer--padding-x;
}
}

2
css/backoffice/layout/_top-bar.scss
View File

@@ -37,8 +37,10 @@ $ibo-top-bar-background-color: $ibo-color-white-100 !default;
height: var(--ibo-top-bar-height);
padding: var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-right) var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-left);
background-color: var(--ibo-top-bar-background-color);
@extend %ibo-elevation-100;
.ibo-breadcrumbs{
flex-grow: 1; /* Occupy as much width as possible */
overflow-x: hidden; /* Avoid glitches when too many items */
}
}

9
css/backoffice/main.css
View File

@@ -293,6 +293,9 @@
*
* You should have received a copy of the GNU Affero General Public License
*/
.ibo-top-bar {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12); }
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
@@ -8148,12 +8151,13 @@ a {
padding: 32px 20px;
overflow-y: auto;
background-color: #f8f9fa;
border-right: 1px solid #d5dde5;
transition: right 0.2s ease-in-out; }
/* - Menu filter */
.ibo-navigation-menu--menu-filter {
position: relative;
margin-bottom: 55px; }
margin-bottom: 50px; }
.ibo-navigation-menu--menu-filter-input {
/* TODO: Refactor this into the standard field input */
@@ -8297,10 +8301,11 @@ body {
background-color: var(--ibo-body-background-color); }
#ibo-navigation-menu {
z-index: 1; }
z-index: 20; }
#ibo-page-container {
position: relative;
z-index: 10;
height: 100%;
overflow: auto;
flex-grow: 1; }

3
css/backoffice/pages/_base.scss
View File

@@ -42,10 +42,11 @@ body{
@extend %ibo-font-ral-nor-100;
}
#ibo-navigation-menu{
z-index: 1;
z-index: 20;
}
#ibo-page-container{
position: relative;
z-index: 10;
height: 100%;
overflow: auto;
flex-grow: 1;