N°2847 - Rework iTopWebPage layout (WIP Part IX)

- Refactor some CSS classes to something more semantic and cross app (.ibo-<COMPONENT>--is-<STATE> => .ibo-<STATE>)
- AjaxWebPage: Deprecated AddToMenu method
This commit is contained in:
Molkobain
2020-08-03 11:26:30 +02:00
parent a85c7e9f8f
commit e2e62eca5e
9 changed files with 19 additions and 17 deletions

View File

@@ -130,6 +130,7 @@ class ajax_page extends WebPage implements iTabbedPage
/**
* @param string $sHtml
* @deprecated Will be removed in 2.8.0
*/
public function AddToMenu($sHtml)
{

View File

@@ -688,6 +688,7 @@ JS
/**
* @param string $sHtml
* @deprecated Will be removed in 2.8.0
*/
public function AddToMenu($sHtml)
{

View File

@@ -74,7 +74,7 @@ $ibo-global-search--compartment--placeholder-hint--text-color: $ibo-color-grey-7
position: relative;
@extend %ibo-vertically-centered-content;
&.ibo-global-search--is-opened{
&.ibo-is-opened{
.ibo-global-search--input{
padding: $ibo-global-search--input--padding-y--is-opened $ibo-global-search--input--padding-x--is-opened;
width: $ibo-global-search--input--width--is-opened;

View File

@@ -78,7 +78,7 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70
position: relative;
@extend %ibo-vertically-centered-content;
&.ibo-quick-create--is-opened{
&.ibo-is-opened{
.ibo-quick-create--input{
width: $ibo-quick-create--input--width--is-opened;
}

View File

@@ -123,7 +123,7 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
position: relative;
height: $ibo-navigation-menu-height;
&.ibo-navigation-menu--is-expanded{
&.ibo-is-expanded{
.ibo-navigation-menu--body{
width: $ibo-navigation-menu--body--width-expanded;
@@ -148,7 +148,7 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
}
}
.ibo-navigation-menu--menu-group{
&:not(.ibo-navigation-menu--menu-group--is-active){
&:not(.ibo-is-active){
&:active{
border-radius: $ibo-navigation-menu--action--border-radius--on-active-expanded;
}
@@ -156,12 +156,12 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
}
}
}
&.ibo-navigation-menu--is-active{
&.ibo-is-active{
.ibo-navigation-menu--drawer{
right: calc(-1 * #{$ibo-navigation-menu--drawer--width});
}
}
&.ibo-navigation-menu--is-filtered{
&.ibo-is-filtered{
.ibo-navigation-menu--menu-nodes{
margin-bottom: $ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered;
@@ -304,7 +304,7 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
margin-bottom: $ibo-navigation-menu--middle-part--elements-spacing;
}
&:not(.ibo-navigation-menu--menu-group--is-active)
&:not(.ibo-is-active)
{
&:hover,
&:active{
@@ -315,7 +315,7 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
border-radius: $ibo-navigation-menu--action--border-radius--on-active;
}
}
&.ibo-navigation-menu--menu-group--is-active{
&.ibo-is-active{
margin-right: calc(-2 * #{$ibo-navigation-menu--action--padding-x});
padding-right: calc(2 - #{$ibo-navigation-menu--action--padding-x});
color: $ibo-navigation-menu--menu-group-title--text-color--is-active;
@@ -429,7 +429,7 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
}
}
&.ibo-navigation-menu--menu-nodes--is-active{
&.ibo-is-active{
display: block;
}
}

View File

@@ -30,7 +30,7 @@ $(function()
},
css_classes:
{
opened: 'ibo-global-search--is-opened',
opened: 'ibo-is-opened',
},
js_selectors:
{

View File

@@ -30,7 +30,7 @@ $(function()
},
css_classes:
{
opened: 'ibo-quick-create--is-opened',
opened: 'ibo-is-opened',
},
js_selectors:
{

View File

@@ -29,11 +29,11 @@ $(function()
},
css_classes:
{
menu_expanded: 'ibo-navigation-menu--is-expanded',
menu_active: 'ibo-navigation-menu--is-active',
menu_filtered: 'ibo-navigation-menu--is-filtered',
menu_group_active: 'ibo-navigation-menu--menu-group--is-active',
menu_nodes_active: 'ibo-navigation-menu--menu-nodes--is-active'
menu_expanded: 'ibo-is-expanded',
menu_active: 'ibo-is-active',
menu_filtered: 'ibo-is-filtered',
menu_group_active: 'ibo-is-active',
menu_nodes_active: 'ibo-is-active'
},
js_selectors:
{

View File

@@ -1,4 +1,4 @@
<nav id="{{ oNavigationMenu.Id }}" class="ibo-navigation-menu {% if NavigationMenu.IsExpanded == true %}ibo-navigation-menu--is-expanded{% endif %}">
<nav id="{{ oNavigationMenu.Id }}" class="ibo-navigation-menu {% if NavigationMenu.IsExpanded == true %}ibo-is-expanded{% endif %}">
<div class="ibo-navigation-menu--body">
<div class="ibo-navigation-menu--top-part">
<a class="ibo-navigation-menu--square-company-logo" title="{{ oNavigationMenu.AppRevisionNumber }}" href="{{ oNavigationMenu.AppIconLink }}">