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

N°2847 - Rework of the global iTopWebPage layout (Part II)

Browse Source 
- Optimize TWIG templates includes (don't pass context to autonomous components)
- Preliminary work of the top bar and breadcrumbs features
- Removal of images dedicated to the breadcrumbs feature
This commit is contained in:
Molkobain
2020-07-17 17:01:29 +02:00
parent 6f9565d979
commit 8efd8008fc
34 changed files with 8309 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/backoffice/components/_all.scss
View File

@@ -16,3 +16,4 @@
* You should have received a copy of the GNU Affero General Public License
*/
@import "breadcrumbs";

74
css/backoffice/components/_breadcrumbs.scss Normal file
View File

@@ -0,0 +1,74 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
$ibo-breadcrumbs--item--text-color: $ibo-color-grey-800 !default;
$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-separator--margin-x: 12px !default;
$ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
.ibo-breadcrumbs{
display: flex;
align-items: center;
* {
display: flex;
align-items: center;
}
}
.ibo-breadcrumbs--item{
color: $ibo-breadcrumbs--item--text-color;
@extend %ibo-font-ral-nor-100;
&:not(:last-child){
&::after{
content: '\f054';
margin: 0 $ibo-breadcrumbs--item-separator--margin-x;
color: $ibo-breadcrumbs--item-separator--text-color;
@extend %fa-solid-base;
}
&:hover{
.ibo-breadcrumbs--item-icon{
> *{
opacity: 1;
filter: none;
}
}
}
}
}
.ibo-breadcrumbs--item-icon{
margin-right: $ibo-breadcrumbs--item-icon--margin-x;
@extend %ibo-font-ral-nor-150;
transition: all 0.1s linear;
> span{
color: $ibo-breadcrumbs--item-icon--text-color;
opacity: 0.6;
}
> img{
height: auto;
max-width: $ibo-breadcrumbs--item-icon--max-width;
opacity: 0.3;
filter: grayscale(100%);
}
}

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

@@ -17,13 +17,15 @@
*/
/* SCSS variables (can be overloaded) */
$ibo-top-bar-height: 54px !default;
$ibo-top-bar-padding-left: 16px !default; /* Should be align with the page content padding-left */
$ibo-top-bar-padding-right: 16px !default;
$ibo-top-bar-padding-y: 16px !default;
$ibo-top-bar-padding-y: 0px !default;
$ibo-top-bar-background-color: $ibo-color-white-100 !default;
/* CSS variables (can be changed directly from the browser) */
:root{
--ibo-top-bar-height: #{$ibo-top-bar-height};
--ibo-top-bar-padding-left: #{$ibo-top-bar-padding-left};
--ibo-top-bar-padding-right: #{$ibo-top-bar-padding-right};
--ibo-top-bar-padding-y: #{$ibo-top-bar-padding-y};
@@ -32,6 +34,11 @@ $ibo-top-bar-background-color: $ibo-color-white-100 !default;
.ibo-top-bar{
display: flex;
align-items: center;
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);
.ibo-breadcrumbs{
flex-grow: 1; /* Occupy as much width as possible */
}
}

8073
css/backoffice/main.css
View File

File diff suppressed because it is too large Load Diff

3
css/backoffice/utils/helpers/_all.scss
View File

@@ -18,4 +18,5 @@
@import "typography";
@import "elevation";
@import "misc";
@import "misc";
@import "font-icon";

56
css/backoffice/utils/helpers/_font-icon.scss Normal file
View File

@@ -0,0 +1,56 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/******************************************************************************************************************************/
/* NOTE: Those helpers allow to easily use an icon from libs. like FontAwesome or FontCombodo within a CSS rule (eg. ::after) */
/* To use it, simply "@extend %fa-regular-base" in a rule and put the desired icon "content: '\f054'" */
/******************************************************************************************************************************/
%fa-regular-base{
font-family: "Font Awesome 5 Free";
font-weight: 400;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fa-solid-base{
font-family: "Font Awesome 5 Free";
font-weight: 900;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fc-regular-base{
display: inline-block;
font-family: CombodoRegular;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}