Skip to content

Move app menu to vue #33728

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

Merged
juliusknorr merged 8 commits into from
Aug 31, 2022
Merged

Move app menu to vue #33728

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b4708c
Move app menu to vue
juliusknorr Aug 27, 2022
e8193c2
Fix focus border and adjust active app indicator
juliusknorr Aug 29, 2022
09d8214
Use resize observer
juliusknorr Aug 30, 2022
3ad4e82
Address some more accessibility concerns
juliusknorr Aug 30, 2022
bff4c86
Compile assets
nextcloud-command Aug 31, 2022
ac2d885
Adjust acceptance tests to changes in app menu
danxuliu Aug 31, 2022
aa85e1c
Fix jsunit failures
juliusknorr Aug 31, 2022
ad8fadf
Fix active app indicator position
juliusknorr Aug 31, 2022
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
Next Next commit
Move app menu to vue 
Signed-off-by: Julius Härtl <[email protected]>
  • Loading branch information
@juliusknorr
juliusknorr committed Aug 31, 2022
commit 5b4708c5be100c3a4bbb2fd32151ae2a7420df2d
301 changes: 1 addition & 300 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@

/* prevent ugly selection effect on accidental selection */
#header,
#navigation,
#expanddiv {
-webkit-user-select: none;
-moz-user-select: none;
Expand Down Expand Up @@ -72,7 +71,6 @@
/* Header menu */
$header-menu-entry-height: 44px;

.header-left > nav > .menu,
.header-right > div > .menu {
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
Expand Down Expand Up @@ -103,16 +101,14 @@
right: 10px;
}

#apps > ul,
& > div,
& > ul {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
@include header-menu-height();
}

/* Use by the apps menu and the settings right menu */
#apps > ul,
/* Use by the settings right menu */
&.settings-menu > ul {
li {
a {
Expand Down Expand Up @@ -182,16 +178,6 @@
padding-right: 10px;
flex-shrink: 0;
}
/* show caret indicator next to logo to make clear it is tappable */
.icon-caret {
display: inline-block;
width: 12px;
height: 12px;
margin: 0;
margin-top: -21px;
padding: 0;
vertical-align: middle;
}

#header-left, .header-left,
#header-right, .header-right {
Expand Down Expand Up @@ -245,27 +231,6 @@
opacity: .75;
}

.menutoggle {
.icon-caret {
opacity: .75;
}
&:hover {
.header-appname, .icon-caret {
opacity: 1;
}
}
&:focus {
.header-appname, .icon-caret {
opacity: 1;
}
}
&.active {
.header-appname, .icon-caret {
opacity: 1;
}
}
}

/* TODO: move into minimal css file for public shared template */
/* only used for public share pages now as we have the app icons when logged in */
.header-appname {
Expand All @@ -291,56 +256,6 @@
text-overflow: ellipsis;
}

/* do not show menu toggle on public share links as there is no menu */
#body-public #header .icon-caret {
display: none;
}

/* NAVIGATION --------------------------------------------------------------- */
nav[role='navigation'] {
display: inline-block;
width: variables.$header-height;
height: variables.$header-height;
margin-left: -#{variables.$header-height};
position: relative;
}

#header .header-left > nav > #navigation {
position: relative;
left: 25px; /* half the togglemenu */
transform: translateX(-50%);
width: 160px;
}

#header .header-left > nav > #navigation,
.ui-datepicker,
.ui-timepicker.ui-widget {
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
&:after {
/* position of dropdown arrow */
left: 50%;
bottom: 100%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: var(--color-main-background);
border-width: 10px;
margin-left: -10px; /* border width */
}
}

#navigation {
box-sizing: border-box;
.in-header {
display: none;
}
}

/* USER MENU -----------------------------------------------------------------*/
#settings {
display: inline-block;
Expand Down Expand Up @@ -420,220 +335,6 @@ nav[role='navigation'] {
}
}

/* Apps menu */
#appmenu {
display: inline-flex;
min-width: variables.$header-height;
z-index: 2;

li {
position: relative;
cursor: pointer;
padding: 0 2px;
display: flex;
justify-content: center;

a {
position: relative;
display: flex;
margin: 0;
height: calc(variables.$header-height - 6px);
width: variables.$header-height;
align-items: center;
justify-content: center;
opacity: .85;
// Make sure most app names don’t ellipsize
letter-spacing: -0.5px;
font-size: 12px;
margin: 2px;
}

/* focused app visual feedback */
&:hover a,
a:focus,
a.active {
opacity: 1;
font-weight: bold;
}

// Text size back to normal for hover/focus
&:hover a,
a:focus {
font-size: 14px;
}

&:hover a + span,
a:focus + span,
&:hover span,
&:focus span,
a:focus span,
a.active span {
display: inline-block;
text-overflow: initial;
width: auto;
overflow: hidden;
padding: 0 5px;
z-index: 2;
}

/* hidden apps menu */
img,
.icon-more-white {
display: inline-block;
width: 20px;
height: 20px;
}

.icon-more-white {
background-image: url('../img/actions/more-white.svg?v=1');
}

/* App title */
span {
opacity: 0;
position: absolute;
color: var(--color-primary-text);
bottom: 2px;
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
transition: all var(--animation-quick) ease;
pointer-events: none;
}

/* Set up transitions for showing app titles on hover */
/* App icon */
svg,
.icon-more-white {
transition: transform var(--animation-quick) ease;
// If the primary is too bright, invert the app icons
filter: var(--primary-invert-if-bright);
}

/* Triangle */
a::before {
transition: border var(--animation-quick) ease;
}
}

/* Show all app titles on hovering app menu area */
&:hover {
li {
/* Move up app icon */
svg,
.icon-more,
.icon-more-white,
.icon-loading-small,
.icon-loading-small-dark {
transform: translateY(-7px);
}

/* Show app title */
span {
opacity: 1;
bottom: 2px;
z-index: -1; /* fix clickability issue - otherwise we need to move the span into the link */
}

/* Prominent app title for current and hovered/focused app */
&:hover span,
&:focus span,
.active + span {
opacity: 1;
}

/* Smaller triangle because of limited space */
a::before {
border-width: 5px;
}
}
}

/* Also show app title on focusing single entry (showing all on focus is only possible with CSS4 and parent selectors) */
li a:focus {
/* Move up app icon */
svg,
.icon-more,
.icon-more-white,
.icon-loading-small,
.icon-loading-small-dark {
transform: translateY(-7px);
}

/* Show app title */
& + span,
span {
opacity: 1;
bottom: 2px;
}

/* Smaller triangle because of limited space */
&::before {
border-width: 5px;
}
}

/* show triangle below active app */
li a::before {
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: 0 solid transparent;
border-bottom-color: var(--color-main-background);
border-width: 10px;
transform: translateX(-50%);
left: 50%;
bottom: -5px;
display: none;
}

/* triangle focus feedback */
li a.active::before,
li:hover a::before,
li:hover a.active::before,
li a:focus::before {
display: block;
}
li a.active::before {
z-index: 99;
}
li:hover a::before,
li a.active:hover::before,
li a:focus::before {
z-index: 101;
}

li.hidden {
display: none;
}

#more-apps {
z-index: 3;
}
}

.unread-counter {
display: none;
}
#apps .app-icon-notification,
#appmenu .app-icon-notification {
fill: var(--color-error);
}

#apps svg:not(.has-unread),
#appmenu svg:not(.has-unread) {
.app-icon-notification-mask {
display: none;
}
.app-icon-notification {
display: none;
}
}


/* Skip navigation links – show only on keyboard focus */
#skip-actions {
position: absolute;
Expand Down
Loading