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

FEATURE: move user menu to left drawer #4934

Merged
merged 5 commits into from
Mar 14, 2024
Merged

FEATURE: move user menu to left drawer #4934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85ea0e4
TASK: move user menu to left drawer
laurahaenel Mar 12, 2024
ecaecc3
TASK: build assets for production
laurahaenel Mar 12, 2024
6bd5ba7
TASK: fix responsive styles
laurahaenel Mar 12, 2024
6d707c8
TASK: fixed restore button style
laurahaenel Mar 13, 2024
0479724
TASK: delete redundant code
laurahaenel Mar 13, 2024
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
2 changes: 1 addition & 1 deletion Neos.Neos/Readme.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Build frontend assets
If you need to rebuild the frontend assets you need to run the following commands within the
Neos.Neos package directory:

For develpment::
For development::

yarn
yarn build
Expand Down
3 changes: 3 additions & 0 deletions Neos.Neos/Resources/Private/Partials/Backend/Menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
</f:if>
</f:for>
</div>
<div class="neos-menu-bottom-wrapper">
<f:render partial="Backend/UserMenu" arguments="{_all}" />
</div>
</div>
</div>

Expand Down
4 changes: 4 additions & 0 deletions Neos.Neos/Resources/Private/Partials/Backend/UserImage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{namespace neos=Neos\Neos\ViewHelpers}
<div class="neos-user-image">
<neos:backend.userInitials>{user.accounts.0.accountIdentifier}</neos:backend.userInitials>
</div>
36 changes: 20 additions & 16 deletions Neos.Neos/Resources/Private/Partials/Backend/UserMenu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
{namespace neos=Neos\Neos\ViewHelpers}
<div class="neos-button-group neos-user-menu" data-csrf-Token="{f:security.csrfToken()}" data-module-basepath="{neos:uri.module(path: '')}">
<button class="neos-dropdown-toggle neos-button" data-neos-toggle="dropdown" href="#" title="{neos:backend.translate(id: 'userSettings.usermenu', source: 'Modules', value: 'User Menu')}" data-neos-tooltip data-placement="left">
<i class="fas fa-user"></i> {user.name.fullName} <i class="fas fa-chevron-down"></i>
</button>
<ul class="neos-dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<f:form controller="Login" action="logout">
<f:form.button value="logout"><i class="fas fa-sign-out-alt"></i> {neos:backend.translate(id: 'logout', value: 'Logout')}</f:form.button>
</f:form>
</li>
<li>
<neos:link.module path="user/usersettings">
<i class="fas fa-sliders-h"></i> {neos:backend.translate(id: 'userSettings.label', source: 'Modules', value: 'User Settings')}
</neos:link.module>
</li>
</ul>
<div id="neos-user-actions">
<div class="neos-button-group neos-user-menu" data-csrf-Token="{f:security.csrfToken()}" data-module-basepath="{neos:uri.module(path: '')}">
<button class="neos-dropdown-toggle neos-button" data-neos-toggle="dropdown" href="#" title="{neos:backend.translate(id: 'userSettings.usermenu', source: 'Modules', value: 'User Menu')}" data-neos-tooltip data-placement="left">
<f:render partial="Backend/UserImage" arguments="{_all}" />
<span>{user.name.fullName}</span>
<i class="fas fa-chevron-down"></i>
</button>
<ul class="neos-dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<neos:link.module path="user/usersettings">
<i class="fas fa-wrench"></i> {neos:backend.translate(id: 'userSettings.label', source: 'Modules', value: 'User Settings')}
</neos:link.module>
</li>
<li>
<f:form controller="Login" action="logout">
<f:form.button value="logout"><i class="fas fa-sign-out-alt"></i> {neos:backend.translate(id: 'logout', value: 'Logout')}</f:form.button>
</f:form>
</li>
</ul>
</div>
</div>
2 changes: 1 addition & 1 deletion Neos.Neos/Resources/Private/Styles/Lite.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
@import "Tree";
@import "General";
@import "TopBar/TopBar";
@import "TopBar/UserMenu";
@import "Menu/UserMenu";
@import "Menu/MenuPanel";
@import "Modules/Modules";
@import "Modules/Widget";
Expand Down
2 changes: 1 addition & 1 deletion Neos.Neos/Resources/Private/Styles/Main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
@import "Shared/Scrollbar";
@import "StyleWorkInProgress";
@import "TopBar/TopBar";
@import "TopBar/UserMenu";
@import "Menu/UserMenu";
@import "Menu/MenuPanel";
@import "Navigate/NavigatePanel";
@import "Modules/Modules";
Expand Down
6 changes: 6 additions & 0 deletions Neos.Neos/Resources/Private/Styles/Menu/_MenuPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,12 @@
padding: 0;
}

.neos-menu-bottom-wrapper {
bottom: 0;
position: absolute;
width: 100%;
}

.neos-menu-panel-open & {
left: 0;
display: block;
Expand Down
186 changes: 186 additions & 0 deletions Neos.Neos/Resources/Private/Styles/Menu/_UserMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
#neos-user-actions {
float: none;

.neos-dropdown-toggle {
outline: none;

&:hover span {
color: $blue;

i {
color: white;
}
}
}

.neos-dropdown-menu {
@import "../Shared/Checkboxes";
border: 0;
right: 0;
background: none;
padding: 2px;
margin: -2px 0 0;
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);

li {
height: $unit;
background: $grayDarker;
border-top: 1px solid $grayDark;

a,
button {
height: $unit;
color: white;
font-size: $generalFontSize;
line-height: $unit;
padding: 0 $defaultMargin;
box-sizing: border-box;
border: 0;

&:hover {
background: $blue;
}
}

button {
width: 100%;
text-align: left;
background-color: $grayDarker;

&:hover {
background-color: $blue;
}
}

label {
padding-top: 9px;
}

button i {
line-height: 18px;
}
}

label {
font-size: $generalFontSize;
}
}

.neos-user-menu.neos-dropdown-open {
.neos-dropdown-menu {
display: block;
}
}

.neos-user-menu.neos-button-group {
font-size: $generalFontSize;

.neos-button.neos-dropdown-toggle {
background: none;
height: 40px;
padding-top: 2em;
padding-bottom: 2em;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;

&:hover span {
color: var(--colors-PrimaryBlue);
}

i {
width: $menuButtonWidth;
height: $unit;
font-size: 14px;
line-height: $unit;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
padding: 0;
margin: 0;
}
}
}

.neos-user-menu {
width: 100%;
background: $grayDarker;
}

i {
margin-left: $relatedMargin;
margin-right: .75em;
}

.neos-dropdown-menu {
border: 0;
right: 0;
padding: 2px;
margin: -2px 0 0 !important;
display: none;
position: relative;
min-width: 160px;
background: $grayDarker;
width: 100%;
box-shadow: none;

li {
height: $unit;
background: $grayDarker;
border-top: 1px solid $grayDark;

a,
button {
height: $unit;
color: white;
font-size: $generalFontSize;
line-height: $unit;
padding: 0 $defaultMargin;
box-sizing: border-box;
border: 0;

&:hover span {
background: $blue;
}
}

button {
width: 100%;
text-align: left;
background-color: $grayDarker;

&:hover {
background-color: $blue;
}
}

label {
padding-top: 9px;
}

button i {
line-height: 18px;
}
}

label {
font-size: $generalFontSize;
}
}

.neos-user-image {
margin-right: 2em;
border-radius: 100%;
background: var(--colors-ContrastBright);
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: nowrap;
}
}
2 changes: 1 addition & 1 deletion Neos.Neos/Resources/Private/Styles/Minimal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

// Essential Neos styles for the top bar and notifications
@import "TopBar/TopBar";
@import "TopBar/UserMenu";
@import "Menu/UserMenu";
@import "Menu/MenuPanel";
@import "Modules/Modules";
@import "Notifications";
Expand Down
82 changes: 0 additions & 82 deletions Neos.Neos/Resources/Private/Styles/TopBar/_TopBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,86 +36,4 @@
-webkit-flex-flow: row wrap;
justify-content: space-around;
}

#neos-user-actions {
float: left;

i {
margin-left: $relatedMargin;
margin-right: $relatedMargin;
}

.neos-dropdown-toggle {
outline: none;

&:hover {
color: $blue;
i {
color: white;
}
}
}

.neos-dropdown-menu {
@import "../Shared/Checkboxes";
border: 0;
right: 0;
background: none;
padding: 2px;
margin: -2px 0 0;
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);

li {
height: $unit;
background: $grayDarker;
border-top: 1px solid $grayDark;

a,
button {
height: $unit;
color: white;
font-size: $generalFontSize;
line-height: $unit;
padding: 0 $defaultMargin;
box-sizing: border-box;
border: 0;

&:hover {
background: $blue;
}
}

button {
width: 100%;
text-align: left;
background-color: $grayDarker;

&:hover {
background-color: $blue;
}
}

label {
padding-top: 9px;
}

button i {
line-height: 18px;
}
}

label {
font-size: $generalFontSize;
}
}

.neos-user-menu {
&.neos-dropdown-open {
.neos-dropdown-menu {
display: block;
}
}
}
}
}
8 changes: 0 additions & 8 deletions Neos.Neos/Resources/Private/Styles/TopBar/_UserMenu.scss
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions Neos.Neos/Resources/Private/Templates/Backend/Module/Index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,6 @@
<f:render partial="Backend/Menu" arguments="{_all}" />
<f:render partial="Backend/Branding" />
</div>
<div class="neos-top-bar-right">
<div id="neos-user-actions">
<f:render partial="Backend/UserMenu" arguments="{_all}" />
</div>
</div>
</div>
<f:render
partial="Backend/Menu"
Expand Down
Loading
Loading