Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IBX-1065: Redesigned user menu #76

Merged
merged 3 commits into from
Dec 2, 2021
Merged

IBX-1065: Redesigned user menu #76

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84864b4
IBX-1065: Redesigned user menu
dew326 Nov 30, 2021
1529266
Update user.html.twig
dew326 Nov 30, 2021
26221d4
Update admin.user.menu.js
dew326 Dec 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/bundle/Resources/public/img/ibexa-icons.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/bundle/Resources/public/img/icons/bell.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/js/scripts/admin.user.menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
return;
}

const userNameElement = userMenuContainer.querySelector('.ibexa-header-user-menu__name');
const userNameElement = userMenuContainer.querySelector('.ibexa-header-user-menu__toggler');
dew326 marked this conversation as resolved.
Show resolved Hide resolved
const popupMenuElement = userMenuContainer.querySelector('.ibexa-popup-menu');
const popupMenu = new eZ.core.PopupMenu({
triggerElement: userNameElement,
Expand Down
75 changes: 43 additions & 32 deletions src/bundle/Resources/public/scss/_header-user-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,37 @@
display: flex;
justify-content: flex-end;

&__image {
max-width: calculateRem(32px);
max-height: calculateRem(32px);
border: calculateRem(3px) solid $ibexa-color-black;
border-radius: 50%;
cursor: pointer;
&__popup-menu {
z-index: 1060;
top: calculateRem(65px);
right: calculateRem(24px);
min-width: calculateRem(200px);
padding: 0;

ul {
margin-bottom: 0;
padding: calculateRem(8px);
}
}

&__notice-dot {
width: calculateRem(6px);
height: calculateRem(6px);
margin-left: calculateRem(-4px);
margin-top: calculateRem(8px);
&__popup-menu-title {
padding: calculateRem(16px) calculateRem(24px);
border-bottom: calculateRem(1px) solid $ibexa-color-light;
color: $ibexa-color-dark-400;
font-size: $ibexa-text-font-size-small;
}

&__image {
width: calculateRem(30px);
height: calculateRem(30px);
border-radius: 50%;
background: $ibexa-color-danger;
opacity: 1;
cursor: pointer;

&--no-notice {
opacity: 0;
}
}

&__name {
&__toggler {
display: flex;
align-items: center;
margin-left: calculateRem(8px);
color: $ibexa-color-white;
font-size: $ibexa-text-font-size-small;
border: none;

&:after {
Expand All @@ -42,20 +44,29 @@
border-right: calculateRem(4px) solid transparent;
border-top: calculateRem(4px) solid $ibexa-color-white;
}
}

&:hover {
color: $ibexa-color-primary;

&:after {
border-top: calculateRem(4px) solid $ibexa-color-primary;
}
}
&__notifications-toggler {
display: flex;
align-items: flex-end;
position: relative;
padding-bottom: calculateRem(4px);
cursor: pointer;
}

&__popup-menu {
z-index: 1060;
top: calculateRem(65px);
right: calculateRem(24px);
min-width: calculateRem(200px);
&__notice-dot {
width: calculateRem(6px);
height: calculateRem(6px);
border-radius: 50%;
background: $ibexa-color-danger;
opacity: 1;
cursor: pointer;
position: absolute;
left: calculateRem(10px);
top: calculateRem(10px);

&--no-notice {
opacity: 0;
}
}
}
6 changes: 6 additions & 0 deletions src/bundle/Resources/public/scss/_popup-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@
align-items: initial;
border-top: calculateRem(1px) solid $ibexa-color-info-800;
}

&--with-border {
border-top: calculateRem(1px) solid $ibexa-color-light;
margin-top: calculateRem(8px);
padding-top: calculateRem(8px);
}
}

.ibexa-popup-menu__item-content {
Expand Down
46 changes: 33 additions & 13 deletions src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,45 @@
{% set user_image = user.content.thumbnail %}

<div class="ibexa-header-user-menu">
<img
class="ibexa-header-user-menu__image"
src="{{ user_image.resource }}"
alt="{{ user.name }}"
<div
class="ibexa-header-user-menu__notifications-toggler"
data-bs-toggle="modal"
data-bs-target="#view-notifications"
/>
<span
class="ibexa-header-user-menu__notice-dot ibexa-header-user-menu__notice-dot--no-notice"
data-bs-toggle="modal"
data-bs-target="#view-notifications"
></span>
<button class="ibexa-header-user-menu__name">{{ user.name }}</button>
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--light">
dew326 marked this conversation as resolved.
Show resolved Hide resolved
<use xlink:href="{{ ibexa_icon_path('bell') }}"></use>
</svg>
<span class="ibexa-header-user-menu__notice-dot ibexa-header-user-menu__notice-dot--no-notice"></span>
dew326 marked this conversation as resolved.
Show resolved Hide resolved
</div>
<button class="ibexa-header-user-menu__toggler">
{% if user_image.resource is same as("/bundles/ibexaicons/img/all-icons.svg#user") %}
dew326 marked this conversation as resolved.
Show resolved Hide resolved
{% set user_name_array = user.name|split(' ') %}
{% set user_initials = user_name_array|reduce((initials, name) => initials ~ name|first|upper) %}

<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<ellipse ry="15" rx="15" cy="16" cx="16" fill="#0ee7f6"/>
<text x="5" y="22" font-size="16px" fill="#ae1164">{{ user_initials }}</text>
</svg>
{% else %}
<img
class="ibexa-header-user-menu__image"
src="{{ user_image.resource }}"
alt="{{ user.name }}"
/>
{% endif %}
</button>

{% do item.setChildrenAttribute('class', 'ibexa-header-user-menu__popup-menu ibexa-popup-menu ibexa-popup-menu--hidden') %}
{{ include('@ezdesign/account/notifications/modal.html.twig') }}

<div class="ibexa-header-user-menu__popup-menu ibexa-popup-menu ibexa-popup-menu--hidden">
<div class="ibexa-header-user-menu__popup-menu-title">
{{ 'user_menu.popup_menu.title'|trans({'%userName%': user.name})|desc('Logged as %userName%') }}
</div>
{{ parent() }}
</div>
</div>

{{ parent() }}

dew326 marked this conversation as resolved.
Show resolved Hide resolved
{% endblock %}

{% block item %}
Expand Down
9 changes: 7 additions & 2 deletions src/lib/Menu/UserMenuBuilder.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,14 @@ public function createStructure(array $options): ItemInterface
);

$menu->addChild(
$this->createMenuItem(self::ITEM_LOGOUT, ['route' => 'logout', 'extras' => [
$this->createMenuItem(self::ITEM_LOGOUT, [
'route' => 'logout',
'attributes' => [
'class' => 'ibexa-popup-menu__item--with-border',
],
'extras' => [
'orderNumber' => 60,
]])
], ])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's wrong formatting? It should be in two lines

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used the same formatting as above.

Copy link
Contributor

@tischsoic tischsoic Dec 1, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't 'orderNumber' => 60, be indented? As it is above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ViniTou Can you confirm how it should be?

);
}

Expand Down