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

N°1957 - Fix clear icon that was not longer shown

Browse Source
This commit is contained in:
Molkobain
2021-01-15 11:54:47 +01:00
parent 2f10f24317
commit b8d6918f71
3 changed files with 35 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}

1
dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php
View File

@@ -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'

6
templates/base/layouts/navigation-menu/layout.html.twig
View File

@@ -86,8 +86,12 @@
<div class="ibo-navigation-menu--menu-filter" data-role="ibo-nav-menu--menu-filter">
{# TODO: Retrieve input style from a component? #}
<input class="ibo-navigation-menu--menu-filter-input" data-role="ibo-navigation-menu--menu-filter-input" type="text" placeholder="{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Placeholder'|dict_s }}" data-tooltip-content="{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Tooltip'|dict_s }}" data-tooltip-trigger="mouseenter">
<a class="ibo-navigation-menu--menu-filter-clear" data-role="ibo-navigation-menu--menu-filter-clear" href="#"></a>
<a class="ibo-navigation-menu--menu-filter-clear" data-role="ibo-navigation-menu--menu-filter-clear" href="#"><span class="fas fa-times"></span></a>
<span class="ibo-navigation-menu--menu-filter-hotkey">{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey'|dict_s }}</span>
<div class="ibo-navigation-menu---menu-filter-hint" data-role="ibo-navigation-menu--menu-filter-hint">
{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hint'|dict_s }}
<a class="ibo-navigation-menu--menu-filter-hint-close" data-role="ibo-navigation-menu--menu-filter-hint-close" href="#"><span class="fas fa-times"></span></a>
</div>
</div>
<div class="ibo-navigation-menu--menu--placeholder" data-role="ibo-navigation-menu--menu--placeholder">
<div class="ibo-navigation-menu--menu--placeholder-image ibo-svg-illustration--container">