Skip to content

Commit

Permalink
Move app menu to vue
Browse files Browse the repository at this point in the history 
Signed-off-by: Julius Härtl <[email protected]>
  • Loading branch information
@juliusknorr
juliusknorr committed Aug 29, 2022
1 parent b1421f6 commit 1721afe
Show file tree
Hide file tree
Showing 6 changed files with 274 additions and 529 deletions.
301 changes: 1 addition & 300 deletions core/css/header.scss
View file
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

0 comments on commit 1721afe

Please sign in to comment.