From b8d6918f71b4bd8ba2aa09e5bc50ddbef6754eba Mon Sep 17 00:00:00 2001 From: Molkobain Date: Fri, 15 Jan 2021 11:54:47 +0100 Subject: [PATCH] =?UTF-8?q?N=C2=B01957=20-=20Fix=20clear=20icon=20that=20w?= =?UTF-8?q?as=20not=20longer=20shown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/backoffice/layout/_navigation-menu.scss | 35 +++++++++++++++---- .../en.dictionary.itop.navigation-menu.php | 1 + .../layouts/navigation-menu/layout.html.twig | 6 +++- 3 files changed, 35 insertions(+), 7 deletions(-) diff --git a/css/backoffice/layout/_navigation-menu.scss b/css/backoffice/layout/_navigation-menu.scss index 087ac96b6..ff9ed8582 100644 --- a/css/backoffice/layout/_navigation-menu.scss +++ b/css/backoffice/layout/_navigation-menu.scss @@ -104,11 +104,6 @@ $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--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; - /* TODO: Refactor this into the standard field input */ $ibo-navigation-menu--menu-filter-input--padding-x: 10px !default; $ibo-navigation-menu--menu-filter-input--padding-y: 8px !default; @@ -119,6 +114,14 @@ $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-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: 76px !default; +$ibo-navigation-menu--menu-filter-clear--top: $ibo-navigation-menu--menu-filter-input--padding-y !default; +$ibo-navigation-menu--menu-filter-clear--right: $ibo-navigation-menu--menu-filter-input--padding-right - 16px !default; +$ibo-navigation-menu--menu-filter-clear--padding: 3px 3px !default; +$ibo-navigation-menu--menu-filter-hotkey--border: 1px solid $ibo-color-grey-400 !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--placeholder--width: 100% !default; @@ -263,6 +266,9 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg } } &.ibo-is-filtered{ + .ibo-navigation-menu--menu-filter-clear{ + display: block; + } .ibo-navigation-menu--menu-nodes{ margin-bottom: $ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered; @@ -418,7 +424,7 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg .ibo-input-select--action-button--hierarchy{ margin-left: $ibo-navigation-menu--silo-selection--input--action-button--hierarchy--padding-right; } - + .ibo-input-select-autocomplete{ padding-right: $ibo-navigation-menu--silo-selection--input-select-autocomplete--padding-left; ~ .ibo-input-select--action-button--search{ @@ -540,6 +546,12 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg } .ibo-navigation-menu--menu-filter-clear{ display: none; + position: absolute; + top: $ibo-navigation-menu--menu-filter-clear--top; + right: $ibo-navigation-menu--menu-filter-clear--right; + padding: $ibo-navigation-menu--menu-filter-clear--padding; /* Used to help the user click on it as the icon itself is small */ + @extend %ibo-font-ral-bol-50; + @extend %ibo-hyperlink-inherited-colors; } .ibo-navigation-menu--menu-filter-hotkey{ position: absolute; @@ -551,6 +563,16 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg padding: 2px 4px; @extend %ibo-font-ral-nor-50; } +.ibo-navigation-menu---menu-filter-hint{ + display: none; /* TODO 3.0.0: Wait for MVC TWIG feature to be complete, then move this to an alert block */ + margin-top: 8px; + @extend %ibo-font-ral-ita-50; +} +.ibo-navigation-menu--menu-filter-hint-close{ + position: absolute; + right: 2px; + @extend %ibo-hyperlink-inherited-colors; +} .ibo-navigation-menu--menu--placeholder{ width: $ibo-navigation-menu--menu--placeholder--width; @@ -564,6 +586,7 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg margin: $ibo-navigation-menu--menu--placeholder-image--svg--margin; } .ibo-navigation-menu--menu--placeholder-hint{ + margin-top: $ibo-navigation-menu--menu--placeholder-hint--margin-top; text-align: center; } diff --git a/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php b/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php index 50879eb6e..f2259e827 100644 --- a/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php +++ b/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php @@ -24,6 +24,7 @@ Dict::Add('EN US', 'English', 'English', array( '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', + 'UI:Layout:NavigationMenu:MenuFilter:Input:Hint' => 'Match from all menu groups will be displayed not only those from this one', 'UI:Layout:NavigationMenu:MenuFilter:Placeholder:Hint' => 'No result for this menu filter', 'UI:Layout:NavigationMenu:UserInfo:WelcomeMessage:Text' => 'Hi %1$s!', 'UI:Layout:NavigationMenu:UserInfo:Picture:AltText' => '%1$s\'s contact picture' diff --git a/templates/base/layouts/navigation-menu/layout.html.twig b/templates/base/layouts/navigation-menu/layout.html.twig index fb1fd913f..9f91f5e63 100644 --- a/templates/base/layouts/navigation-menu/layout.html.twig +++ b/templates/base/layouts/navigation-menu/layout.html.twig @@ -86,8 +86,12 @@
{# TODO: Retrieve input style from a component? #} - + {{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey'|dict_s }} +
+ {{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hint'|dict_s }} + +