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

N°1957 - Navigation menu: Fix several bugs with menus filter

Browse Source 
- Placeholder font style
- Results do not scroll under the filter input anymore
This commit is contained in:
Molkobain
2021-01-17 21:55:41 +01:00
parent 7e3d414e9e
commit ad6646afaf
3 changed files with 46 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -115,14 +115,13 @@ $ibo-navigation-menu--menu-filter-input--border: 1px solid $ibo-color-grey-300 !
$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-groups--margin-top: 50px !default;
$ibo-navigation-menu--menu--placeholder--width: 100% !default;
$ibo-navigation-menu--menu--placeholder--margin-top: $ibo-navigation-menu--menu-groups--margin-top !default;
@@ -146,6 +145,12 @@ $ibo-navigation-menu--menu-node--hyperlink-color: inherit !default;
$ibo-navigation-menu--menu-node--background-color: $ibo-color-grey-200 !default;
$ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--menu-node-counter--margin-left: 8px !default;
$ibo-navigation-menu--menu-node-counter--padding-y: 2px !default;
$ibo-navigation-menu--menu-node-counter--padding-x: 6px !default;
$ibo-navigation-menu--menu-node-counter--width: 34px !default;
$ibo-navigation-menu--menu-node-counter--background-color: $ibo-navigation-menu--menu-node--background-color !default;
$ibo-navigation-menu--notifications-toggler--font-size: 24px !default;
$ibo-navigation-menu--notifications-toggler--color: $ibo-color-grey-600 !default;
$ibo-navigation-menu--notifications-toggler--color--is-loaded: $ibo-color-grey-300 !default;
@@ -180,8 +185,6 @@ $ibo-navigation-menu--user-menu--popover-menu--odd-section--background-color: $i
$ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
$ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--background-color !default;
/* CSS variables (can be changed directly from the browser) */
:root {
@@ -512,19 +515,19 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg
top: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: $ibo-navigation-menu--drawer--width;
padding: $ibo-navigation-menu--drawer--padding-y $ibo-navigation-menu--drawer--padding-x;
overflow-y: auto;
background-color: $ibo-navigation-menu--drawer--background-color;
border-right: $ibo-navigation-menu--drawer--border-right;
transition: right 0.2s ease-in-out;
}
/* - Menu filter */
.ibo-navigation-menu--menu-filter{
position: fixed;
z-index: 1; /* To be hover the menu groups and all their contents */
width: $ibo-navigation-menu--menu-filter--width;
.ibo-navigation-menu--menu-filter {
position: relative;
}
.ibo-navigation-menu--menu-filter-input{
/* TODO: Refactor this into the standard field input */
@@ -590,11 +593,17 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg
.ibo-navigation-menu--menu--placeholder-hint{
margin-top: $ibo-navigation-menu--menu--placeholder-hint--margin-top;
text-align: center;
@extend %ibo-font-ral-ita-100;
}
/* - Menu groups */
.ibo-navigation-menu--menu-groups{
margin-top: $ibo-navigation-menu--menu-groups--margin-top;
overflow-y: auto;
overflow-x: hidden;
margin: $ibo-navigation-menu--menu-groups--margin-top calc(-1 * #{$ibo-navigation-menu--drawer--padding-x}) 0 calc(-1 * #{$ibo-navigation-menu--drawer--padding-x});
padding-left: $ibo-navigation-menu--drawer--padding-x;
padding-right: $ibo-navigation-menu--drawer--padding-x;
width: inherit; /* Re-establishing it to fill the full width, still not understood yet */
}
/* - Menu nodes */
.ibo-navigation-menu--menu-nodes{
@@ -604,7 +613,6 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg
li{
> a,
> span{
display: block; /* Force to occupy parent's full width */
margin: $ibo-navigation-menu--menu-node--margin-y $ibo-navigation-menu--menu-node--margin-x;
padding: $ibo-navigation-menu--menu-node--padding-y $ibo-navigation-menu--menu-node--padding-x;
border-radius: 0;
@@ -635,6 +643,23 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg
@extend %ibo-font-ral-nor-350;
@extend %ibo-text-truncated-with-ellipsis;
}
/* - Menu node */
.ibo-navigation-menu--menu-node-title{
display: flex;
justify-content: space-between;
align-items: center;
}
.ibo-navigation-menu--menu-node-counter {
margin-left: $ibo-navigation-menu--menu-node-counter--margin-left;
padding: $ibo-navigation-menu--menu-node-counter--padding-y $ibo-navigation-menu--menu-node-counter--padding-x;
width: $ibo-navigation-menu--menu-node-counter--width;
min-width: $ibo-navigation-menu--menu-node-counter--width;
text-align: center;
@extend %ibo-font-ral-bol-100;
background: $ibo-navigation-menu--menu-node-counter--background-color;
border-radius: 5px;
}
/* - Notifications menu */
.ibo-navigation-menu--notifications{
@@ -762,15 +787,3 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg
}
}
.ibo-navigation-menu--menu-counter {
padding: 2px 6px;
position: absolute;
right: 10px;
width: 34px;
text-align: center;
@extend %ibo-font-ral-bol-100;
/* Grey 200 */
background: $ibo-navigation-menu--menu-counter-color;
border-radius: 5px;
}

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

@@ -299,6 +299,7 @@ $(function()
// Show matching menu node
this.element.find('[data-role="ibo-navigation-menu--menu-node"]').each(function () {
// Note: We don't filter on data-role="ibo-navigation-menu--menu-node-label" on purpose so we can also filter the counters
const sNodeValue = me._formatValueForFilterComparison($(this).children('[data-role="ibo-navigation-menu--menu-node-title"]:first').text());
let bMatches = true;

15
templates/base/layouts/navigation-menu/menu-node.html.twig
View File

@@ -1,13 +1,16 @@
<li class="ibo-navigation-menu--menu-node" data-role="ibo-navigation-menu--menu-node" data-menu-node-id="{{ aMenuNode.sId }}">
{% if aMenuNode.sUrl is not empty %}
{% set sTarget = (aMenuNode.bOpenInNewWindow == true) ? 'target="_blank"' : '' %}
{% if aMenuNode.bHasCount %}
<a class="ibo-navigation-menu--menu-node-title" data-role="ibo-navigation-menu--menu-node-title" href="{{ aMenuNode.sUrl }}" {{ sTarget|raw }}>{{ aMenuNode.sTitle }}<span class="ibo-navigation-menu--menu-counter" data-menu-id="{{ aMenuNode.sId }}" style="display: none;"></span></a>
{% else %}
<a class="ibo-navigation-menu--menu-node-title" data-role="ibo-navigation-menu--menu-node-title" href="{{ aMenuNode.sUrl }}" {{ sTarget|raw }}>{{ aMenuNode.sTitle }}</a>
{% endif %}
<a class="ibo-navigation-menu--menu-node-title" data-role="ibo-navigation-menu--menu-node-title" href="{{ aMenuNode.sUrl }}" {{ sTarget|raw }}>
<span class="ibo-navigation-menu--menu-node-label" data-role="ibo-navigation-menu--menu-node-label" title="{{ aMenuNode.sTitle }}">{{ aMenuNode.sTitle }}</span>
{% if aMenuNode.bHasCount %}
<span class="ibo-navigation-menu--menu-node-counter" data-menu-id="{{ aMenuNode.sId }}" style="display: none;"></span>
{% endif %}
</a>
{% else %}
<span class="ibo-navigation-menu--menu-node-title" data-role="ibo-navigation-menu--menu-node-title">{{ aMenuNode.sTitle }}</span>
<span class="ibo-navigation-menu--menu-node-title" data-role="ibo-navigation-menu--menu-node-title">
<span class="ibo-navigation-menu--menu-node-label" data-role="ibo-navigation-menu--menu-node-label" title="{{ aMenuNode.sTitle }}">{{ aMenuNode.sTitle }}</span>
</span>
{% endif %}
{% if aMenuNode.aSubMenuNodes is defined and aMenuNode.aSubMenuNodes|length > 0 %}
<ul>