Skip to content

Commit

Permalink
IBX-7612: [Dark theme] Wrong UI in main menu (#1150)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GrabowskiM
GrabowskiM committed Feb 29, 2024
1 parent 7679ace commit 0345679
Show file tree
Hide file tree
Showing 11 changed files with 84 additions and 40 deletions.
4 changes: 4 additions & 0 deletions src/bundle/Resources/public/img/ibexa-icons.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/bundle/Resources/public/img/icons/expand-left.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/bundle/Resources/public/scss/_custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,17 @@ $ibexa-color-complementary-strong-300: #99b7be;
$ibexa-color-complementary-strong-200: #ccdbde;
$ibexa-color-complementary-strong-100: #e5edee;

$ibexa-color-complementary-primary: #306cbe;
$ibexa-color-complementary-primary-900: #10243f;
$ibexa-color-complementary-primary-800: #18365f;
$ibexa-color-complementary-primary-700: #20487f;
$ibexa-color-complementary-primary-600: #285a9e;
$ibexa-color-complementary-primary-500: #4a83d1;
$ibexa-color-complementary-primary-400: #6e9cda;
$ibexa-color-complementary-primary-300: #92b5e4;
$ibexa-color-complementary-primary-200: #b7cded;
$ibexa-color-complementary-primary-100: #dbe6f6;

// Ibexa fonts - part 1
$ibexa-font-family:
'Noto Sans',
Expand Down
14 changes: 7 additions & 7 deletions src/bundle/Resources/public/scss/_custom.tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,13 +109,13 @@
}
}

&--info-neon {
&--navigation {
.ibexa-tooltip {
&__inner {
color: $ibexa-color-dark;
background-color: $ibexa-color-info;
background-color: $ibexa-color-complementary-primary-400;
border-color: transparent;
box-shadow: 0 calculateRem(4px) calculateRem(6px) rgba($ibexa-color-info, 0.1);
box-shadow: 0 calculateRem(2px) calculateRem(8px) rgba($ibexa-color-dark, 0.15);
}
}

Expand All @@ -124,7 +124,7 @@
&[data-popper-placement='top'] {
.ibexa-tooltip__arrow {
&::before {
border-top-color: $ibexa-color-info;
border-top-color: $ibexa-color-complementary-primary-400;
}
}
}
Expand All @@ -133,7 +133,7 @@
&[data-popper-placement='right'] {
.ibexa-tooltip__arrow {
&::before {
border-right-color: $ibexa-color-info;
border-right-color: $ibexa-color-complementary-primary-400;
}
}
}
Expand All @@ -142,7 +142,7 @@
&[data-popper-placement='bottom'] {
.ibexa-tooltip__arrow {
&::before {
border-bottom-color: $ibexa-color-info;
border-bottom-color: $ibexa-color-complementary-primary-400;
}
}
}
Expand All @@ -151,7 +151,7 @@
&[data-popper-placement='left'] {
.ibexa-tooltip__arrow {
&::before {
border-left-color: $ibexa-color-info;
border-left-color: $ibexa-color-complementary-primary-400;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/scss/_main-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
justify-content: space-between;
padding: calculateRem(16px) calculateRem(20px) calculateRem(15px);
background: $ibexa-color-dark;
border-bottom: calculateRem(1px) solid rgba($ibexa-color-info, 0.4);
border-bottom: calculateRem(1px) solid $ibexa-color-dark-500;

&__brand-column {
flex: 1;
Expand Down
42 changes: 32 additions & 10 deletions src/bundle/Resources/public/scss/_main-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@

&__navbar {
font-size: $ibexa-text-font-size-medium;
background-color: $ibexa-color-black-600;
background-color: $ibexa-color-dark;
transition: width $ibexa-admin-transition-duration;
border: calculateRem(1px) solid $ibexa-color-info-800;
border: calculateRem(1px) solid $ibexa-color-dark-500;
border-top: none;
overflow-y: auto;
overflow-x: hidden;
Expand Down Expand Up @@ -63,6 +63,23 @@
padding-bottom: calculateRem(32px);
border-left: none;

.ibexa-main-menu__tooltip-trigger,
.ibexa-main-menu__toggler {
.ibexa-icon {
fill: $ibexa-color-complementary-primary-400;
}

&:focus {
box-shadow: none;
}

&:hover {
.ibexa-icon {
fill: $ibexa-color-complementary-primary-200;
}
}
}

.ibexa-main-menu {
&__items-list {
width: calculateRem(216px);
Expand Down Expand Up @@ -116,6 +133,10 @@

&__toggler {
margin-right: calculateRem(6px);

.ibexa-icon {
transform: rotate(180deg);
}
}
}

Expand Down Expand Up @@ -197,7 +218,7 @@
content: '';
width: calc(100% + #{calculateRem(22px)});
height: calculateRem(1px);
background: $ibexa-color-info-800;
background: $ibexa-color-dark-500;
position: absolute;
top: 0;
left: calculateRem(-6px);
Expand Down Expand Up @@ -227,11 +248,11 @@

.ibexa-main-menu {
&__item-icon {
fill: $ibexa-color-info;
fill: $ibexa-color-complementary-primary-400;
}

&__item-text-column {
color: $ibexa-color-info;
color: $ibexa-color-complementary-primary-400;

&--group {
color: $ibexa-color-light-700;
Expand All @@ -241,16 +262,16 @@
}

&.active {
color: $ibexa-color-info;
background-color: $ibexa-color-info-800;
color: $ibexa-color-complementary-primary-200;
background-color: $ibexa-color-complementary-primary-700;

.ibexa-main-menu {
&__item-icon {
fill: $ibexa-color-info;
fill: $ibexa-color-complementary-primary-200;
}

&__item-text-column {
color: $ibexa-color-info;
color: $ibexa-color-complementary-primary-200;
}
}
}
Expand Down Expand Up @@ -280,7 +301,7 @@
content: '';
width: calc(100% + #{calculateRem(12px)});
height: calculateRem(1px);
background: $ibexa-color-info-800;
background: $ibexa-color-dark-500;
position: absolute;
top: 0;
left: calculateRem(-6px);
Expand Down Expand Up @@ -327,6 +348,7 @@
padding: calculateRem(5px);
justify-content: center;
align-items: center;
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
}

&__first-level-popup-menu {
Expand Down
15 changes: 9 additions & 6 deletions src/bundle/Resources/public/scss/_popup-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,21 +106,24 @@
margin-left: calculateRem(6px);
}

&--info-neon {
&--navigation {
background-color: $ibexa-color-dark;
border-color: $ibexa-color-info-800;
border-color: $ibexa-color-dark-500;

.ibexa-popup-menu__item-content {
color: $ibexa-color-white;

&:hover {
color: $ibexa-color-info;
background-color: $ibexa-color-dark;
color: $ibexa-color-complementary-primary-400;
background-color: transparent;
}

&--current {
color: $ibexa-color-info;
background-color: $ibexa-color-info-800;
&,
&:hover {
color: $ibexa-color-complementary-primary-200;
background-color: $ibexa-color-complementary-primary-700;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/views/themes/admin/ui/menu/main.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{% endfor %}
</ul>
<ul
class="ibexa-popup-menu ibexa-popup-menu--info-neon ibexa-popup-menu--hidden ibexa-main-menu__first-level-popup-menu"
class="ibexa-popup-menu ibexa-popup-menu--navigation ibexa-popup-menu--hidden ibexa-main-menu__first-level-popup-menu"
data-item-template="{{ include('@ibexadesign/ui/menu/first_level_popup_menu_item.html.twig')|e('html_attr') }}"
>
</ul>
Expand Down
8 changes: 4 additions & 4 deletions src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@
<ul class="ibexa-main-menu__items-list" style="{{ second_menu_list_width_style }}">
<li class="ibexa-main-menu__item ibexa-main-menu__item--popup-container">
<button
class="ibexa-main-menu__tooltip-trigger ibexa-btn ibexa-btn--small ibexa-btn--no-text ibexa-btn--neon-info"
class="ibexa-main-menu__tooltip-trigger ibexa-btn ibexa-btn--small ibexa-btn--no-text"
data-popup-target-selector="#{{ child.name }}-popup"
>
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('menu') }}"></use>
</svg>
</button>

<ul id="{{ child.name }}-popup" class="ibexa-popup-menu ibexa-popup-menu--info-neon ibexa-popup-menu--hidden ibexa-main-menu-popup">
<ul id="{{ child.name }}-popup" class="ibexa-popup-menu ibexa-popup-menu--navigation ibexa-popup-menu--hidden ibexa-main-menu-popup">
{% for item in child.children %}
{% set renderItemAsGroup = item.children|length > 0 %}
{{ block('popupItem') }}
Expand All @@ -61,9 +61,9 @@
{% endfor %}
</div>
<div class="ibexa-main-menu__toggler-container">
<button class="ibexa-main-menu__toggler ibexa-btn ibexa-btn--small ibexa-btn--no-text ibexa-btn--neon-info">
<button class="ibexa-main-menu__toggler ibexa-btn ibexa-btn--small ibexa-btn--no-text">
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('vertical-left-right') }}"></use>
<use xlink:href="{{ ibexa_icon_path('expand-left') }}"></use>
</svg>
</button>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/lib/Menu/MainMenuBuilder.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ public function createStructure(array $options): ItemInterface
$contentMenu = $menu->addChild(self::ITEM_CONTENT, [
'attributes' => [
'data-tooltip-placement' => 'right',
'data-tooltip-extra-class' => 'ibexa-tooltip--info-neon',
'data-tooltip-extra-class' => 'ibexa-tooltip--navigation',
],
'extras' => [
'icon' => 'hierarchy',
Expand All @@ -202,7 +202,7 @@ public function createStructure(array $options): ItemInterface
'route' => 'ibexa.dashboard',
'attributes' => [
'data-tooltip-placement' => 'right',
'data-tooltip-extra-class' => 'ibexa-tooltip--info-neon',
'data-tooltip-extra-class' => 'ibexa-tooltip--navigation',
],
'extras' => [
'icon' => 'dashboard-clean',
Expand All @@ -214,7 +214,7 @@ public function createStructure(array $options): ItemInterface
'route' => 'ibexa.content_draft.list',
'attributes' => [
'data-tooltip-placement' => 'right',
'data-tooltip-extra-class' => 'ibexa-tooltip--info-neon',
'data-tooltip-extra-class' => 'ibexa-tooltip--navigation',
],
'extras' => [
'icon' => 'dashboard-clean',
Expand All @@ -225,7 +225,7 @@ public function createStructure(array $options): ItemInterface
$adminMenu = $menu->addChild(self::ITEM_ADMIN, [
'attributes' => [
'data-tooltip-placement' => 'right',
'data-tooltip-extra-class' => 'ibexa-tooltip--info-neon',
'data-tooltip-extra-class' => 'ibexa-tooltip--navigation',
'class' => 'ibexa-adaptive-items__item--force-show',
],
'extras' => [
Expand All @@ -241,7 +241,7 @@ public function createStructure(array $options): ItemInterface
'route' => 'ibexa.bookmark.list',
'attributes' => [
'data-tooltip-placement' => 'right',
'data-tooltip-extra-class' => 'ibexa-tooltip--info-neon',
'data-tooltip-extra-class' => 'ibexa-tooltip--navigation',
'class' => 'ibexa-adaptive-items__item--force-show',
],
'extras' => [
Expand All @@ -256,7 +256,7 @@ public function createStructure(array $options): ItemInterface
'route' => 'ibexa.trash.list',
'attributes' => [
'data-tooltip-placement' => 'right',
'data-tooltip-extra-class' => 'ibexa-tooltip--info-neon',
'data-tooltip-extra-class' => 'ibexa-tooltip--navigation',
'class' => 'ibexa-adaptive-items__item--force-show',
],
'extras' => [
Expand Down
Loading

0 comments on commit 0345679

Please sign in to comment.