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

N°2847 Add bottom menu part :

Browse Source 
* Notifications icon
* User icon
* Extended user data
Still todo:
* Initialize Newsroom and feed infos to template
* Initialize User popover menu
This commit is contained in:
Stephen Abello
2020-08-03 17:07:21 +02:00
parent e2e62eca5e
commit ed1f3aa950
7 changed files with 135 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/backoffice/components/_popover-menu.scss
View File

@@ -23,16 +23,16 @@ $ibo-popover-menu--padding: 0 !default;
.ibo-popover-menu{
display: none;
flex-direction: column;
padding: $ibo-popover-menu--padding;
background-color: $ibo-popover-menu--background-color;
@extend %ibo-elevation-300;
border-radius: $ibo-popover-menu--border-radius;
flex-wrap: wrap;
position: absolute;
&.ibo-is-opened{
display: flex;
flex-direction: column;
}
}

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

@@ -110,7 +110,20 @@ $ibo-navigation-menu--menu-node--hyperlink-color: inherit !default;
$ibo-navigation-menu--menu-node--background-color: $ibo-color-grey-200 !default;
$ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--bottom-part--padding-y: 24px 0px !default;
$ibo-navigation-menu--notifications-toggler--font-size: 28px !default;
$ibo-navigation-menu--user--text-color: $ibo-color-white-100 !default;
$ibo-navigation-menu--user-picture--image-collapsed--size: 36px !default;
$ibo-navigation-menu--user-picture--image-collapsed--border-radius: 18px !default;
$ibo-navigation-menu--user-notifications--toggler--padding-left: 8px !default;
$ibo-navigation-menu--user-info-expanded--height: 100%;
$ibo-navigation-menu--user-picture--image-expanded--margin: -60px auto 0 auto !default;
$ibo-navigation-menu--user-picture--image-expanded--border: solid 3px $ibo-color-blue-grey-900 !default;
$ibo-navigation-menu--user-picture--image-expanded--border-radius: 36px !default;
$ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
/* CSS variables (can be changed directly from the browser) */
:root {
/* TODO: Introduce variables once SCSS variables are set */
@@ -154,6 +167,25 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
}
}
}
.ibo-navigation-menu--bottom-part{
.ibo-navigation-menu--notifications{
display: none;
}
.ibo-navigation-menu--user-info{
height: $ibo-navigation-menu--user-info-expanded--height;
.ibo-navigation-menu--user-welcome-message, .ibo-navigation-menu--user-notifications, .ibo-navigation-menu--user-organization{
display: block;
}
.ibo-navigation-menu--user-picture{
.ibo-navigation-menu--user-picture--image{
margin:$ibo-navigation-menu--user-picture--image-expanded--margin;
border: $ibo-navigation-menu--user-picture--image-expanded--border;
border-radius: $ibo-navigation-menu--user-picture--image-expanded--border-radius;
width: $ibo-navigation-menu--user-picture--image-expanded--size;
}
}
}
}
}
}
&.ibo-is-active{
@@ -221,6 +253,12 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
.ibo-navigation-menu--bottom-part{
height: 150px;
background-color: $ibo-navigation-menu--bottom-part--background-color;
padding: $ibo-navigation-menu--bottom-part--padding-y;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.ibo-navigation-menu--toggler,
@@ -439,7 +477,49 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
@extend %ibo-font-ral-nor-350;
@extend %ibo-text-truncated-with-ellipsis;
}
.ibo-navigation-menu--user-menu-container{
position: absolute;
bottom: 10px;
.ibo-navigation-menu--notifications{
display: flex;
flex-direction: column;
align-content: center;
.ibo-navigation-menu--notifications-toggler{
font-size: $ibo-navigation-menu--notifications-toggler--font-size;
color: $ibo-color-grey-300;
}
}
.ibo-navigation-menu--user-info{
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-between;
.ibo-navigation-menu--user-picture{
display: flex;
.ibo-navigation-menu--user-picture--image{
width: $ibo-navigation-menu--user-picture--image-collapsed--size;
border-radius: $ibo-navigation-menu--user-picture--image-collapsed--border-radius;
}
}
.ibo-navigation-menu--user-welcome-message, .ibo-navigation-menu--user-organization, .ibo-navigation-menu--user-notifications{
display: none;
text-align: center;
color: $ibo-navigation-menu--user--text-color;
}
.ibo-navigation-menu--user-welcome-message{
@extend %ibo-font-ral-med-250;
}
.ibo-navigation-menu--user-notifications{
@extend %ibo-font-ral-med-150;
.ibo-navigation-menu--user-notifications--toggler{
padding-left: $ibo-navigation-menu--user-notifications--toggler--padding-left;
}
}
.ibo-navigation-menu--user-organization{
@extend %ibo-font-ral-med-100;
}
.ibo-navigation-menu--user-menu-container{
position: absolute;
bottom: 10px;
}
}