popover menu restructuration & unification

fix #2798

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 150 insertions, 165 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8bb380ad0ae..eb554b8f061 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -269,122 +269,7 @@
 
 /* menu bubble / popover */
 
-.bubble, #app-navigation .app-navigation-entry-menu {
-	position: absolute;
-	background-color: #fff;
-	color: #333;
-	border-radius: 3px;
-	border-top-right-radius: 0;
-	z-index: 110;
-	margin: 5px;
-	margin-top: -5px;
-	right: 0;
-	-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-}
-
-.ie {
-	.bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after {
-		border: 1px solid #eee;
-	}
-}
 
-.edge {
-	.bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after {
-		border: 1px solid #eee;
-	}
-}
-
-/* miraculous border arrow stuff */
-
-.bubble:after, #app-navigation .app-navigation-entry-menu:after {
-	bottom: 100%;
-	right: 6px;
-	/* change this to adjust the arrow position */
-	border: solid transparent;
-	content: ' ';
-	height: 0;
-	width: 0;
-	position: absolute;
-	pointer-events: none;
-}
-
-.bubble:after, #app-navigation .app-navigation-entry-menu:after {
-	border-color: rgba(238, 238, 238, 0);
-	border-bottom-color: #fff;
-	border-width: 10px;
-}
-
-.bubble .action {
-	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
-	filter: alpha(opacity = 50) !important;
-	opacity: .5 !important;
-	&:hover, &:focus, &.active {
-		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
-		filter: alpha(opacity = 100) !important;
-		opacity: 1 !important;
-	}
-}
-
-#app-navigation {
-	.app-navigation-entry-menu {
-		display: none;
-		&.open {
-			display: block;
-		}
-		ul {
-			display: block !important;
-		}
-		li {
-			float: left;
-			width: 38px !important;
-			button {
-				float: right;
-				width: 36px !important;
-				height: 36px;
-				line-height: 36px;
-				border: 0;
-				opacity: .5;
-				background-color: transparent;
-				&:hover, &:focus {
-					opacity: 1;
-					background-color: transparent;
-				}
-			}
-		}
-	}
-	.app-navigation-entry-edit {
-		padding-left: 5px;
-		padding-right: 5px;
-		display: inline-block;
-		height: 39px;
-		width: 100%;
-		input {
-			border-bottom-right-radius: 0;
-			border-top-right-radius: 0;
-			width: calc(100% - 36px);
-			padding: 5px;
-			margin-right: 0;
-			height: 38px;
-			float: left;
-			border: 1px solid rgba(190, 190, 190, 0.9);
-		}
-		button, input[type='submit'] {
-			width: 36px;
-			height: 38px;
-			float: left;
-		}
-		.icon-checkmark {
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
-			border-left: 0;
-			margin-right: 0;
-		}
-	}
-}
 
 /* list of options for an entry */
 
@@ -505,18 +390,7 @@
 	}
 }
 
-/* buttons */
-
-button.loading {
-	background-image: url('../img/loading.gif');
-	background-position: right 10px center;
-	background-repeat: no-repeat;
-	background-size: 16px;
-	padding-right: 30px;
-}
-
 /* general styles for the content area */
-
 .section {
 	display: block;
 	padding: 30px;
@@ -640,50 +514,161 @@ em {
 	}
 }
 
-/* popover menu styles (use together with 'bubble' class) */
 
+/* Popover/bubble/app-navigation dropdown menu */
+.ie,
+.edge {
+	.bubble, .bubble:after,
+	.popovermenu, .popovermenu:after,
+	#app-navigation .app-navigation-entry-menu,
+	#app-navigation .app-navigation-entry-menu:after {
+		border: 1px solid #eee;
+	}
+}
+
+.bubble,
+.app-navigation-entry-menu,
 .popovermenu {
-	.menuitem {
-		cursor: pointer;
-		vertical-align: middle;
-		> span {
+	position: absolute;
+	background-color: #fff;
+	color: #333;
+	border-radius: 3px;
+	border-top-right-radius: 0;
+	z-index: 110;
+	margin: 5px;
+	margin-top: -5px;
+	right: 0;
+	-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	display: none;
+
+	&:after {
+		bottom: 100%;
+		right: 6px;
+		/* change this to adjust the arrow position */
+		border: solid transparent;
+		content: ' ';
+		height: 0;
+		width: 0;
+		position: absolute;
+		pointer-events: none;
+		border-color: rgba(238, 238, 238, 0);
+		border-bottom-color: #fff;
+		border-width: 10px;
+	}
+	/* Center the popover */
+	&.center {
+		transform: translateX(50%);
+		right: 50%;
+		margin-right: 0;
+		border-top-right-radius: 3px;
+		&:after {
+			right: 50%;
+			transform: translateX(50%);
+		}
+	}
+	/* Align the popover to the left */
+	&.left {
+		right: auto;
+		left: 0;
+		margin-right: 0;
+		border-top-left-radius: 0;
+		border-top-right-radius: 3px;
+		&:after {
+			left: 6px;
+			right: auto;
+		}
+	}
+
+	&.open {
+		display: block;
+	}
+	ul {
+		display: flex;
+		flex-direction: column;
+	}
+	li {
+		display: flex;
+		> button,
+		> a {
 			cursor: pointer;
-			vertical-align: middle;
-		}
-		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
-		filter: alpha(opacity = 50);
-		opacity: .5;
-		&:hover, &:focus, &.active {
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			filter: alpha(opacity = 100);
-			opacity: 1;
+			line-height: 36px;
+			border: 0;
+			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
+			filter: alpha(opacity = 50) !important;
+			opacity: .5 !important;
+			background-color: transparent;
+			display: flex;
+			align-items: center;
+			width: auto;
+			height: auto;
+			padding: 0;
+			/* prevent .action class to break the design */
+			&.action {
+				padding: inherit !important;
+			}
+			&:hover, &:focus {
+				-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
+				filter: alpha(opacity = 100) !important;
+				opacity: 1 !important;
+				background-color: transparent;
+			}
+			> span {
+				cursor: pointer;
+			}
+			> p {
+				width: 150px;
+				line-height: 1.6em;
+				padding: 8px 0;
+				> span {
+					-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)' !important;
+					filter: alpha(opacity = 70) !important;
+					opacity: .7 !important;
+				}
+			}
+			/* Add padding if contains icon+text */
+			&:not(:empty) {
+				padding-right: 10px !important;
+			}
+			> img {
+				width: 16px;
+				padding: 0 10px;
+			}
 		}
-		img {
-			padding: initial;
+		[class^="icon-"],
+		[class*=" icon-"]{
+			/* Keep padding to define the width to
+			 assure correct position of a possible text */
+			padding: 18px 0 18px 36px;
+			min-width: 0; /* Overwrite icons*/
+			min-height: 0;
+			background-position: 10px center
 		}
 	}
-	a.menuitem, label.menuitem, .menuitem {
-		padding: 10px !important;
-		width: auto;
-	}
-	&.hidden {
-		display: none;
-	}
-	.menuitem {
-		display: flex !important;
-		line-height: 30px;
-		color: #000;
-		align-items: center;
-		.icon, .no-icon {
-			display: inline-block;
-			width: 16px;
-			height: 16px;
-			margin-right: 10px;
-			vertical-align: middle;
+	
+	.app-navigation-entry-edit {
+		padding-left: 5px;
+		padding-right: 5px;
+		display: inline-block;
+		height: 39px;
+		width: 100%;
+		input {
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+			width: calc(100% - 36px);
+			padding: 5px;
+			margin-right: 0;
+			height: 38px;
+			float: left;
+			border: 1px solid rgba(190, 190, 190, 0.9);
+		}
+		button, input[type='submit'] {
+			width: 36px;
+			height: 38px;
+			float: left;
 		}
-		opacity: 0.5;
-	}
-	li:hover .menuitem {
-		opacity: 1;
 	}
-}
+}
\ No newline at end of file