Merge pull request #3286 from nextcloud/popover-backport

[stable11] popovermenu backport

5 files changed, 234 insertions, 151 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 7956ef5c6ae..05b8e58cbe4 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -768,46 +768,20 @@ html.ie8 #controls .button.new {
 }
 
 .newFileMenu {
-	width: 200px;
-	margin-left: -56px;
-	margin-top: 25px;
+	font-weight: 300;
+	top: 100%;
+	margin-top: 4px;
+	min-width: 100px;
+	margin-left: 7px;
 	z-index: 1001;
 }
 
-.newFileMenu .menuitem {
-	white-space: nowrap;
-	overflow: hidden;
-}
-.newFileMenu.popovermenu a.menuitem,
-.newFileMenu.popovermenu label.menuitem,
-.newFileMenu.popovermenu .menuitem {
-	padding: 0;
-	margin: 0;
-}
-
-.newFileMenu.popovermenu a.menuitem.active {
-	opacity: 1;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	filter: alpha(opacity=100);
-}
-
-.newFileMenu.bubble:after {
-	left: 75px;
-	right: auto;
-}
-.newFileMenu.bubble:before {
-	left: 75px;
-	right: auto;
-}
-
 .newFileMenu .filenameform {
 	display: inline-block;
 }
 
 .newFileMenu .filenameform input {
-	width: 100%;
-	box-sizing: border-box;
-	margin: -2px 0;
+	margin: 2px 0;
 }
 
 #fileList .popovermenu .action {
@@ -835,6 +809,9 @@ html.ie8 #controls .button.new {
 	height: 15px;
 }
 
+.app-files .actions .button.new {
+	position: relative;
+}
 .app-files .actions .button.new .icon {
 	margin-bottom: 2px;
 }
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index c8ab8e15b70..3fb016b77e7 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -2947,7 +2947,7 @@
 				this._newFileMenu = new OCA.Files.NewFileMenu({
 					fileList: this
 				});
-				$('body').append(this._newFileMenu.$el);
+				$('.actions').append(this._newFileMenu.$el);
 			}
 			this._newFileMenu.showAt($target);
 
diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js
index 75c4cdcc0ba..e4023c62342 100644
--- a/apps/files/js/newfilemenu.js
+++ b/apps/files/js/newfilemenu.js
@@ -38,7 +38,8 @@
 	 */
 	var NewFileMenu = OC.Backbone.View.extend({
 		tagName: 'div',
-		className: 'newFileMenu popovermenu bubble hidden open menu',
+		// Menu is opened by default because it's rendered on "add-button" click
+		className: 'newFileMenu popovermenu bubble menu open menu-left',
 
 		events: {
 			'click .menuitem': '_onClickAction'
@@ -235,13 +236,6 @@
 		 */
 		showAt: function($target) {
 			this.render();
-			var targetOffset = $target.offset();
-			this.$el.css({
-				left: targetOffset.left,
-				top: targetOffset.top + $target.height()
-			});
-			this.$el.removeClass('hidden');
-
 			OC.showMenu(null, this.$el);
 		}
 	});
diff --git a/core/css/apps.css b/core/css/apps.css
index e709f9d901f..f0f8fbd9222 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -284,66 +284,6 @@
 		list-style-type: none;
 	}
 
-/* 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,
-.ie #app-navigation .app-navigation-entry-menu,
-.ie .bubble:after,
-.ie #app-navigation .app-navigation-entry-menu:after,
-.edge .bubble,
-.edge #app-navigation .app-navigation-entry-menu,
-.edge .bubble:after,
-.edge #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;
-}
-.bubble .action:hover,
-.bubble .action:focus,
-.bubble .action.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;
 }
@@ -639,62 +579,234 @@ em {
 	padding: 0 15px 15px;
 }
 
-/* popover menu styles (use together with "bubble" class) */
-.popovermenu .menuitem,
-.popovermenu .menuitem>span {
-	cursor: pointer;
-	vertical-align: middle;
-}
-
-.popovermenu .menuitem {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
-}
-
-.popovermenu .menuitem:hover,
-.popovermenu .menuitem:focus,
-.popovermenu .menuitem.active {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	filter: alpha(opacity=100);
-	opacity: 1;
+/* POPOVER MENU ------------------------------------------------------------- */
+.ie .bubble, .ie .bubble:after,
+.ie .popovermenu, .ie .popovermenu:after,
+.ie #app-navigation .app-navigation-entry-menu,
+.ie #app-navigation .app-navigation-entry-menu:after,
+.edge .bubble,
+.edge .bubble:after,
+.edge .popovermenu,
+.edge .popovermenu:after,
+.edge #app-navigation .app-navigation-entry-menu,
+.edge #app-navigation .app-navigation-entry-menu:after {
+	border: 1px solid #eee;
 }
 
-.popovermenu .menuitem img {
-	padding: initial;
+.bubble,
+.app-navigation-entry-menu,
+.popovermenu {
+	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;
 }
-
-.popovermenu a.menuitem,
-.popovermenu label.menuitem,
-.popovermenu .menuitem {
-	padding: 10px !important;
-	width: auto;
+.bubble:after,
+.app-navigation-entry-menu:after,
+.popovermenu:after {
+	bottom: 100%;
+ /* Min-width of popover is 36px and arrow width is 20px
+	wich leaves us 8px right and 8px left */
+	right: 8px;	/* 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;
 }
-
-.popovermenu.hidden {
-	display: none;
+/* Center the popover */
+.bubble.menu-center,
+.app-navigation-entry-menu.menu-center,
+.popovermenu.menu-center {
+	transform: translateX(50%);
+	right: 50%;
+	margin-right: 0;
+	border-top-right-radius: 3px;
+}
+.bubble.menu-center:after,
+.app-navigation-entry-menu.menu-center:after,
+.popovermenu.menu-center:after {
+	right: 50%;
+	transform: translateX(50%);
+}
+/* Align the popover to the left */
+.bubble.menu-left,
+.app-navigation-entry-menu.menu-left,
+.popovermenu.menu-left {
+	right: auto;
+	left: 0;
+	margin-right: 0;
+	border-top-left-radius: 0;
+	border-top-right-radius: 3px;
+}
+.bubble.menu-left:after,
+.app-navigation-entry-menu.menu-left:after,
+.popovermenu.menu-left:after {
+	left: 6px;
+	right: auto;
+}
+.bubble.open,
+.app-navigation-entry-menu.open,
+.popovermenu.open {
+	display: block;
 }
-
-.popovermenu .menuitem {
+.bubble ul,
+.app-navigation-entry-menu ul,
+.popovermenu ul {
+	/* Overwrite #app-navigation > ul ul */
 	display: flex !important;
-	line-height: 30px;
-	color: #000;
+	flex-direction: column;
+}
+.bubble li,
+.app-navigation-entry-menu li,
+.popovermenu li {
+	display: flex;
+}
+.bubble li > button,
+.bubble li > a,
+.bubble li > .menuitem,
+.app-navigation-entry-menu li > button,
+.app-navigation-entry-menu li > a,
+.app-navigation-entry-menu li > .menuitem,
+.popovermenu li > button,
+.popovermenu li > a,
+.popovermenu li > .menuitem {
+	cursor: pointer;
+	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;
+	margin: 0;
+	font-weight: inherit;
+	box-shadow: none;
 }
-
-.popovermenu .menuitem .icon,
-.popovermenu .menuitem .no-icon {
-	display: inline-block;
-	width: 16px;
-	height: 16px;
-	margin-right: 10px;
-	vertical-align: middle;
-}
-
-.popovermenu .menuitem {
-	opacity: 0.5;
+.bubble li > button.action,
+.bubble li > a.action,
+.bubble li > .menuitem.action,
+.app-navigation-entry-menu li > button.action,
+.app-navigation-entry-menu li > a.action,
+.app-navigation-entry-menu li > .menuitem.action,
+.popovermenu li > button.action,
+.popovermenu li > a.action,
+.popovermenu li > .menuitem.action {
+	padding: inherit !important;
+}
+.bubble li > button:hover, .bubble li > button:focus,
+.bubble li > a:hover,
+.bubble li > a:focus,
+.bubble li > .menuitem:hover,
+.bubble li > .menuitem:focus,
+.app-navigation-entry-menu li > button:hover,
+.app-navigation-entry-menu li > button:focus,
+.app-navigation-entry-menu li > a:hover,
+.app-navigation-entry-menu li > a:focus,
+.app-navigation-entry-menu li > .menuitem:hover,
+.app-navigation-entry-menu li > .menuitem:focus,
+.popovermenu li > button:hover,
+.popovermenu li > button:focus,
+.popovermenu li > a:hover,
+.popovermenu li > a:focus,
+.popovermenu li > .menuitem:hover,
+.popovermenu li > .menuitem:focus {
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
+	filter: alpha(opacity=100) !important;
+	opacity: 1 !important;
+	background-color: transparent;
+}
+.bubble li > button > span,
+.bubble li > a > span,
+.bubble li > .menuitem > span,
+.app-navigation-entry-menu li > button > span,
+.app-navigation-entry-menu li > a > span,
+.app-navigation-entry-menu li > .menuitem > span,
+.popovermenu li > button > span,
+.popovermenu li > a > span,
+.popovermenu li > .menuitem > span {
+	cursor: pointer;
+	white-space: nowrap;
 }
-
-.popovermenu li:hover .menuitem {
-	opacity: 1;
+.bubble li > button > p,
+.bubble li > a > p,
+.bubble li > .menuitem > p,
+.app-navigation-entry-menu li > button > p,
+.app-navigation-entry-menu li > a > p,
+.app-navigation-entry-menu li > .menuitem > p,
+.popovermenu li > button > p,
+.popovermenu li > a > p,
+.popovermenu li > .menuitem > p {
+	width: 150px;
+	line-height: 1.6em;
+	padding: 8px 0;
+}
+.bubble li > button > p > span,
+.bubble li > a > p > span,
+.bubble li > .menuitem > p > span,
+.app-navigation-entry-menu li > button > p > span,
+.app-navigation-entry-menu li > a > p > span,
+.app-navigation-entry-menu li > .menuitem > p > span,
+.popovermenu li > button > p > span,
+.popovermenu li > a > p > span,
+.popovermenu li > .menuitem > p > span {
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)' !important;
+	filter: alpha(opacity=70) !important;
+	opacity: .7 !important;
+}
+.bubble li > button:not(:empty),
+.bubble li > a:not(:empty),
+.bubble li > .menuitem:not(:empty),
+.app-navigation-entry-menu li > button:not(:empty),
+.app-navigation-entry-menu li > a:not(:empty),
+.app-navigation-entry-menu li > .menuitem:not(:empty),
+.popovermenu li > button:not(:empty),
+.popovermenu li > a:not(:empty),
+.popovermenu li > .menuitem:not(:empty) {
+	padding: 0 !important;
+	padding-right: 10px !important;
+}
+.bubble li > button > img,
+.bubble li > a > img,
+.bubble li > .menuitem > img,
+.app-navigation-entry-menu li > button > img,
+.app-navigation-entry-menu li > a > img,
+.app-navigation-entry-menu li > .menuitem > img,
+.popovermenu li > button > img,
+.popovermenu li > a > img,
+.popovermenu li > .menuitem > img {
+	width: 16px;
+	padding: 0 10px;
+}
+.bubble li [class^='icon-'],
+.bubble li [class*=' icon-'],
+.app-navigation-entry-menu li [class^='icon-'],
+.app-navigation-entry-menu li [class*=' icon-'],
+.popovermenu li [class^='icon-'],
+.popovermenu li [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;
 }
diff --git a/settings/js/federationscopemenu.js b/settings/js/federationscopemenu.js
index 0862556a2c3..872f59c5de8 100644
--- a/settings/js/federationscopemenu.js
+++ b/settings/js/federationscopemenu.js
@@ -37,7 +37,7 @@
 	 */
 	var FederationScopeMenu = OC.Backbone.View.extend({
 		tagName: 'div',
-		className: 'federationScopeMenu popovermenu bubble hidden open menu',
+		className: 'federationScopeMenu popovermenu bubble hidden menu',
 		field: undefined,
 		_scopes: undefined,