diff --git a/css/backoffice/layout/_navigation-menu.scss b/css/backoffice/layout/_navigation-menu.scss index eb39e5b7b..0c1fbdb50 100644 --- a/css/backoffice/layout/_navigation-menu.scss +++ b/css/backoffice/layout/_navigation-menu.scss @@ -31,15 +31,6 @@ $ibo-navigation-menu--top-part--padding-y: $ibo-navigation-menu--body--padding-y $ibo-navigation-menu--top-part--padding-x: $ibo-navigation-menu--body--padding-x !default; $ibo-navigation-menu--top-part--elements-spacing: 20px !default; -$ibo-navigation-menu--silo-selection--width: 70% !default; -$ibo-navigation-menu--silo-selection--margin-left: 15px !default; -$ibo-navigation-menu--silo-selection--input--action-button--hierarchy--padding-right: -42px !default; -$ibo-navigation-menu--silo-selection--input--padding-right: 38px !default; -$ibo-navigation-menu--silo-selection--input-select--action-button--hierarchy--margin-left: -42px !default; -$ibo-navigation-menu--silo-selection--input-select-autocomplete--padding-left: 60px !default; -$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--search--margin-left: -42px !default; -$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--hierarchy--margin-left: -60px !default; - $ibo-navigation-menu--middle-part--padding-top: 24px !default; $ibo-navigation-menu--middle-part--padding-bottom: 16px !default; $ibo-navigation-menu--middle-part--padding-x: $ibo-navigation-menu--body--padding-x !default; @@ -58,6 +49,26 @@ $ibo-navigation-menu--bottom-part--background-color: $ibo-color-grey-800 !defaul $ibo-navigation-menu--bottom-part--is-expanded--padding-top: 24px !default; $ibo-navigation-menu--bottom-part--is-expanded--padding-bottom: 12px !default; +$ibo-navigation-menu--visual-hint--size: 16px !default; +$ibo-navigation-menu--visual-hint--background-color: $ibo-color-red-600 !default; +$ibo-navigation-menu--visual-hint--border-radius: $ibo-border-radius-full !default; + +$ibo-navigation-menu--silo-selection--width: 70% !default; +$ibo-navigation-menu--silo-selection--margin-left: 15px !default; +$ibo-navigation-menu--silo-selection--input--action-button--hierarchy--padding-right: -42px !default; +$ibo-navigation-menu--silo-selection--input--padding-right: 38px !default; +$ibo-navigation-menu--silo-selection--input-select--action-button--hierarchy--margin-left: -42px !default; +$ibo-navigation-menu--silo-selection--input-select-autocomplete--padding-left: 60px !default; +$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--search--margin-left: -42px !default; +$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--hierarchy--margin-left: -60px !default; + +$ibo-navigation-menu--silo-visual-hint--top: 2px !default; +$ibo-navigation-menu--silo-visual-hint--right: 0 !default; +$ibo-navigation-menu--silo-visual-hint--size: $ibo-navigation-menu--visual-hint--size !default; +$ibo-navigation-menu--silo-visual-hint--background-color: $ibo-navigation-menu--visual-hint--background-color !default; +$ibo-navigation-menu--silo-visual-hint--border: 2px solid $ibo-navigation-menu--body--background-color !default; +$ibo-navigation-menu--silo-visual-hint--border-radius: $ibo-navigation-menu--visual-hint--border-radius !default; + $ibo-navigation-menu--action--padding-x: 8px !default; $ibo-navigation-menu--action--padding-y: 10px !default; $ibo-navigation-menu--action--border-radius: $ibo-border-radius-500 !default; @@ -163,13 +174,12 @@ $ibo-navigation-menu--notifications-toggler--color: $ibo-color-grey-600 !default $ibo-navigation-menu--notifications-toggler--color--is-loaded: $ibo-color-grey-300 !default; $ibo-navigation-menu--notifications-toggler--color--on-hover: $ibo-color-white-200 !default; -$ibo-navigation-menu--notifications-toggler--new-messages--width: 16px !default; -$ibo-navigation-menu--notifications-toggler--new-messages--height: 16px !default; $ibo-navigation-menu--notifications-toggler--new-messages--top: -2px !default; $ibo-navigation-menu--notifications-toggler--new-messages--right: -7px !default; -$ibo-navigation-menu--notifications-toggler--new-messages--background-color: $ibo-color-red-600 !default; -$ibo-navigation-menu--notifications-toggler--new-messages--border: solid 2px $ibo-navigation-menu--bottom-part--background-color !default; -$ibo-navigation-menu--notifications-toggler--new-messages--border-radius: $ibo-border-radius-full !default; +$ibo-navigation-menu--notifications-toggler--new-messages--size: $ibo-navigation-menu--visual-hint--size !default; +$ibo-navigation-menu--notifications-toggler--new-messages--background-color: $ibo-navigation-menu--visual-hint--background-color !default; +$ibo-navigation-menu--notifications-toggler--new-messages--border: 2px solid $ibo-navigation-menu--bottom-part--background-color !default; +$ibo-navigation-menu--notifications-toggler--new-messages--border-radius: $ibo-navigation-menu--visual-hint--border-radius !default; $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--width: 10px !default; $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--height: 10px !default; @@ -215,6 +225,9 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default; .ibo-navigation-menu--silo-selection{ display: inline-block; } + .ibo-navigation-menu--silo-visual-hint{ + display: none; + } .ibo-navigation-menu--body{ width: $ibo-navigation-menu--body--width-expanded; @@ -383,6 +396,7 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default; } /* - Toggler */ .ibo-navigation-menu--toggler{ + position: relative; /* For the silo visual hint to be placed relatively to it */ display: inline-flex; /* Width is define here in addition of the icon so we can fix its width whether the menu is collapsed or expanded */ width: $ibo-navigation-menu--toggler--width; @@ -447,6 +461,16 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default; } } } +.ibo-navigation-menu--silo-visual-hint{ + position: absolute; + top: $ibo-navigation-menu--silo-visual-hint--top; + right: $ibo-navigation-menu--silo-visual-hint--right; + width: $ibo-navigation-menu--silo-visual-hint--size; + height: $ibo-navigation-menu--silo-visual-hint--size; + background-color: $ibo-navigation-menu--silo-visual-hint--background-color; + border: $ibo-navigation-menu--silo-visual-hint--border; + border-radius: $ibo-navigation-menu--silo-visual-hint--border-radius; +} /* - Menu groups */ @@ -698,8 +722,8 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default; .ibo-navigation-menu--notifications-toggler--new-messages{ top: $ibo-navigation-menu--notifications-toggler--new-messages--top; right: $ibo-navigation-menu--notifications-toggler--new-messages--right; - width: $ibo-navigation-menu--notifications-toggler--new-messages--width; - height: $ibo-navigation-menu--notifications-toggler--new-messages--height; + width: $ibo-navigation-menu--notifications-toggler--new-messages--size; + height: $ibo-navigation-menu--notifications-toggler--new-messages--size; } } diff --git a/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php b/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php index 699474f8a..95363ef3c 100644 --- a/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php +++ b/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php @@ -21,6 +21,7 @@ Dict::Add('EN US', 'English', 'English', array( 'UI:Layout:NavigationMenu:CompanyLogo:AltText' => 'Company logo', 'UI:Layout:NavigationMenu:Toggler:Tooltip' => 'Expand / Collapse', + 'UI:Layout:NavigationMenu:Toggler:TooltipWithSiloLabel' => 'Expand / Collapse (Filtered on %1$s)', 'UI:Layout:NavigationMenu:MenuFilter:Input:Placeholder' => 'Filter...', 'UI:Layout:NavigationMenu:MenuFilter:Input:Tooltip' => 'Type your keywords to filter menus', 'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey' => 'Alt + M', diff --git a/sources/application/UI/Base/Layout/NavigationMenu/NavigationMenu.php b/sources/application/UI/Base/Layout/NavigationMenu/NavigationMenu.php index e4a7c57f2..fe04d3b5c 100644 --- a/sources/application/UI/Base/Layout/NavigationMenu/NavigationMenu.php +++ b/sources/application/UI/Base/Layout/NavigationMenu/NavigationMenu.php @@ -67,8 +67,12 @@ class NavigationMenu extends UIBlock protected $sAppFullIconUrl; /** @var string URL of the link on both $AppXXXIconUrl */ protected $sAppIconLink; - /** @var array $aSiloSelection */ + /** @var array Data to render the silo selection area */ protected $aSiloSelection; + /** @var bool Whether a silo is currently selected or not */ + protected $bHasSiloSelected; + /** @var string|null Current silo label */ + protected $sSiloLabel; /** @var array $aMenuGroups */ protected $aMenuGroups; /** @var array $aUserData */ @@ -159,6 +163,24 @@ class NavigationMenu extends UIBlock { return $this->aSiloSelection; } + + /** + * @uses $bHasSiloSelected + * @return bool + */ + public function HasSiloSelected(): bool + { + return $this->bHasSiloSelected; + } + + /** + * @uses $sSiloLabel + * @return string|null + */ + public function GetSiloLabel() + { + return $this->sSiloLabel; + } /** * @return array @@ -253,6 +275,9 @@ class NavigationMenu extends UIBlock */ public function ComputeSiloSelection() { + $this->bHasSiloSelected = false; + $this->sSiloLabel = null; + //TODO 3.0 Use components if we have the time to build select/autocomplete components before release // List of visible Organizations $iCount = 0; @@ -285,6 +310,13 @@ class NavigationMenu extends UIBlock default: $oAppContext = new ApplicationContext(); $iCurrentOrganization = $oAppContext->GetCurrentValue('org_id'); + + if(!empty($iCurrentOrganization)) { + $oCurrentOrganization = MetaModel::GetObject('Organization', $iCurrentOrganization, true, true); + $this->bHasSiloSelected = true; + $this->sSiloLabel = $oCurrentOrganization->GetRawName(); + } + $this->aSiloSelection['html'] = '
'; //