mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-22 01:58:47 +02:00
N°3628 - Navigation menu: Add visual hint on toggler when silo applied
This commit is contained in:
Molkobain
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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'] = '<form data-role="ibo-navigation-menu--silo-selection--form" action="'.utils::GetAbsoluteUrlAppRoot().'pages/UI.php">'; //<select class="org_combo" name="c[org_id]" title="Pick an organization" onChange="this.form.submit();">';
|
||||
|
||||
$oPage = new \CaptureWebPage();
|
||||
|
||||
@@ -7,12 +7,19 @@
|
||||
<a class="ibo-navigation-menu--full-company-logo" title="{{ oUIBlock.AppRevisionNumber }}" href="{{ oUIBlock.AppIconLink }}">
|
||||
<img src="{{ oUIBlock.AppFullIconUrl }}" alt="{{ 'UI:Layout:NavigationMenu:CompanyLogo:AltText'|dict_s }}">
|
||||
</a>
|
||||
<a class="ibo-navigation-menu--toggler" data-role="ibo-navigation-menu--toggler" data-tooltip-content="{{ 'UI:Layout:NavigationMenu:Toggler:Tooltip'|dict_s }}" data-tooltip-placement="right" data-tooltip-distance-offset="20" href="#">
|
||||
<a class="ibo-navigation-menu--toggler" data-role="ibo-navigation-menu--toggler"
|
||||
data-tooltip-content="{% if oUIBlock.HasSiloSelected() %}{{ 'UI:Layout:NavigationMenu:Toggler:TooltipWithSiloLabel'|dict_format(oUIBlock.GetSiloLabel()) }}{% else %}{{ 'UI:Layout:NavigationMenu:Toggler:Tooltip'|dict_s }}{% endif %}"
|
||||
data-tooltip-placement="right"
|
||||
data-tooltip-distance-offset="20"
|
||||
href="#">
|
||||
<span class="ibo-navigation-menu--toggler-icon">
|
||||
<span class="ibo-navigation-menu--toggler-bar"></span>
|
||||
<span class="ibo-navigation-menu--toggler-bar"></span>
|
||||
<span class="ibo-navigation-menu--toggler-bar"></span>
|
||||
</span>
|
||||
{% if oUIBlock.HasSiloSelected() %}
|
||||
<span class="ibo-navigation-menu--silo-visual-hint"></span>
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="ibo-navigation-menu--silo-selection">
|
||||
{{ oUIBlock.GetSiloSelection().html|raw }}
|
||||
|
||||
Reference in New Issue
Block a user