Move app menu to vue

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 1 insertions, 300 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index 5f3c4356d32..8ab0b019437 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -16,7 +16,6 @@
 
 /* prevent ugly selection effect on accidental selection */
 #header,
-#navigation,
 #expanddiv {
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -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));
@@ -103,7 +101,6 @@
 			right: 10px;
 		}
 
-		#apps > ul,
 		& > div,
 		& > ul {
 			overflow-y: auto;
@@ -111,8 +108,7 @@
 			@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 {
@@ -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 {
@@ -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 {
@@ -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;
@@ -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;