composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-21 17:48:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 Add placeholder to menu filter

Browse Source
This commit is contained in:
Stephen Abello
2020-11-13 10:05:48 +01:00
parent 64134ff428
commit 18ed151e50
4 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -122,6 +122,12 @@ $ibo-navigation-menu--menu-filter-input--border-radius: $ibo-border-radius-300 !
$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;
$ibo-navigation-menu--menu--placeholder--margin-top: $ibo-navigation-menu--menu-groups--margin-top !default;
$ibo-navigation-menu--menu--placeholder-image--svg--width: 90% !default;
$ibo-navigation-menu--menu--placeholder-image--svg--height: auto !default;
$ibo-navigation-menu--menu--placeholder-image--svg--margin: auto !default;
$ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered: 48px !default;
$ibo-navigation-menu--menu-nodes-title--margin-top: 0 !default;
@@ -550,6 +556,22 @@ $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--placeholder{
width: $ibo-navigation-menu--menu--placeholder--width;
margin-top: $ibo-navigation-menu--menu--placeholder--margin-top;
}
.ibo-navigation-menu--menu--placeholder-image > svg{
display: block;
width: $ibo-navigation-menu--menu--placeholder-image--svg--width;
height: $ibo-navigation-menu--menu--placeholder-image--svg--height;
margin: $ibo-navigation-menu--menu--placeholder-image--svg--margin;
}
.ibo-navigation-menu--menu--placeholder-hint{
text-align: center;
}
/* - Menu groups */
.ibo-navigation-menu--menu-groups{
margin-top: $ibo-navigation-menu--menu-groups--margin-top;

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

9
js/layouts/navigation-menu.js
View File

@@ -41,6 +41,7 @@ $(function()
menu_toggler: '[data-role="ibo-navigation-menu--toggler"]',
menu_group: '[data-role="ibo-navigation-menu--menu-group"]',
menu_drawer: '[data-role="ibo-navigation-menu--drawer"]',
menu_filter_placeholder: '[data-role="ibo-navigation-menu--menu--placeholder"]',
menu_filter_input: '[data-role="ibo-navigation-menu--menu-filter-input"]',
menu_filter_clear: '[data-role="ibo-navigation-menu--menu-filter-clear"]',
user_menu_toggler: '[data-role="ibo-navigation-menu--user-menu--toggler"]',
@@ -272,6 +273,8 @@ $(function()
// Note: We work on the 'display' property directly as there is a CSS rule managing the visibility of the active menu group
this.element.find('[data-role="ibo-navigation-menu--menu-nodes"]').css('display', '');
this.element.find('[data-role="ibo-navigation-menu--menu-node"]').css('display', '');
this.element.find(this.js_selectors.menu_filter_placeholder).css('display', 'none');
// Mark menu as unfiltered
this.element.removeClass(this.css_classes.menu_filtered);
@@ -285,6 +288,7 @@ $(function()
{
const me = this;
const aFilterValueParts = this._formatValueForFilterComparison(sRawFilterValue).split(' ');
let bHasAnyMatch = false;
// Mark menu as filtered
this.element.addClass(this.css_classes.menu_filtered);
@@ -307,11 +311,16 @@ $(function()
}
if (bMatches) {
bHasAnyMatch = true;
// Note: Selector must be recursive
$(this).parents('[data-role="ibo-navigation-menu--menu-nodes"], [data-role="ibo-navigation-menu--menu-node"]').show();
$(this).show();
}
});
if(!bHasAnyMatch)
{
this.element.find(this.js_selectors.menu_filter_placeholder).css('display', '');
}
},
/**
* Format sOriginalValue for an easier comparison (change accents, capitalized letters, ...)

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

@@ -89,6 +89,13 @@
<a class="ibo-navigation-menu--menu-filter-clear" data-role="ibo-navigation-menu--menu-filter-clear" href="#"></a>
<span class="ibo-navigation-menu--menu-filter-hotkey">{{ 'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey'|dict_s }}</span>
</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">
{{ source("illustrations/undraw_empty.svg") }}
</div>
<div class="ibo-navigation-menu--menu--placeholder-hint">{{ 'UI:Layout:NavigationMenu:MenuFilter:Placeholder:Hint'|dict_s }}</div>
</div>
<div class="ibo-navigation-menu--menu-groups">
{% for aMenuGroup in oUIBlock.GetMenuGroups() %}
{{ include('layouts/navigation-menu/menu-nodes.html.twig', { aMenuGroup: aMenuGroup }) }}