Merge pull request #10608 from nextcloud/header-menu-fixes

Fix header menu & contact popover

4 files changed, 13 insertions, 8 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index d17cf9140c8..1446187ad83 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -879,6 +879,10 @@ $popovericon-size: 16px;
 		display: block;
 	}
 
+	&.contactsmenu-popover {
+		margin: 0;
+	}
+
 	ul {
 		/* Overwrite #app-navigation > ul ul */
 		display: flex !important;
diff --git a/core/css/header.scss b/core/css/header.scss
index b66c740c8fe..7b7606a0de5 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -70,7 +70,8 @@
 
 #header {
 	/* Header menu */
-	.menu {
+	.header-left > nav > .menu, 
+	.header-right > div > .menu {
 		background-color: var(--color-main-background);
 		filter: drop-shadow(0 1px 5px var(--color-box-shadow));
 		border-radius: 0 0 3px 3px;
diff --git a/core/js/jquery.contactsmenu.js b/core/js/jquery.contactsmenu.js
index 1ea9f732f79..e3f24dfff52 100644
--- a/core/js/jquery.contactsmenu.js
+++ b/core/js/jquery.contactsmenu.js
@@ -15,7 +15,7 @@
 		+ '</li>';
 
 	var LIST = ''
-		+ '<div class="menu popovermenu bubble hidden contactsmenu-popover">'
+		+ '<div class="menu popovermenu menu-left hidden contactsmenu-popover">'
 		+ '    <ul>'
 		+ '        <li>'
 		+ '            <a>'
diff --git a/core/js/tests/specs/jquery.contactsmenuSpec.js b/core/js/tests/specs/jquery.contactsmenuSpec.js
index 7287648f5a2..80d08150c3f 100644
--- a/core/js/tests/specs/jquery.contactsmenuSpec.js
+++ b/core/js/tests/specs/jquery.contactsmenuSpec.js
@@ -45,7 +45,7 @@ describe('jquery.contactsMenu tests', function() {
 		it('append list if shareType supported', function() {
 			$selector1.contactsMenu('user', 0, $appendTo);
 			expect($appendTo.children().length).toEqual(1);
-			expect($appendTo.html()).toEqual('<div class="menu popovermenu bubble hidden contactsmenu-popover">    <ul>        <li>            <a>                <span class="icon-loading-small"></span>            </a>        </li>    </ul></div>');
+			expect($appendTo.html()).toEqual('<div class="menu popovermenu menu-left hidden contactsmenu-popover">    <ul>        <li>            <a>                <span class="icon-loading-small"></span>            </a>        </li>    </ul></div>');
 		});
 	});
 
@@ -120,7 +120,7 @@ describe('jquery.contactsMenu tests', function() {
 			expect(fakeServer.requests[0].method).toEqual('POST');
 			expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/contactsmenu/findOne');
 
-			expect($appendTo.html()).toEqual('<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li></ul></div>');
+			expect($appendTo.html()).toEqual('<div class="menu popovermenu menu-left contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li></ul></div>');
 		});
 
 		it('load topaction and more actions', function() {
@@ -147,7 +147,7 @@ describe('jquery.contactsMenu tests', function() {
 			expect(fakeServer.requests[0].method).toEqual('POST');
 			expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/contactsmenu/findOne');
 
-			expect($appendTo.html()).toEqual('<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li><li>    <a href="http://localhost/index.php/apps/contacts">        <img src="details.svg">        <span>Details</span>    </a></li></ul></div>');
+			expect($appendTo.html()).toEqual('<div class="menu popovermenu menu-left contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="mailto:bar%40baz.wtf">        <img src="foo.svg">        <span>bar@baz.wtf</span>    </a></li><li>    <a href="http://localhost/index.php/apps/contacts">        <img src="details.svg">        <span>Details</span>    </a></li></ul></div>');
 		});
 
 		it('load no actions', function() {
@@ -167,7 +167,7 @@ describe('jquery.contactsMenu tests', function() {
 			expect(fakeServer.requests[0].method).toEqual('POST');
 			expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/contactsmenu/findOne');
 
-			expect($appendTo.html()).toEqual('<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>');
+			expect($appendTo.html()).toEqual('<div class="menu popovermenu menu-left contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>');
 		});
 
 		it('should throw an error', function() {
@@ -182,7 +182,7 @@ describe('jquery.contactsMenu tests', function() {
 			expect(fakeServer.requests[0].method).toEqual('POST');
 			expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/contactsmenu/findOne');
 
-			expect($appendTo.html()).toEqual('<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>Error fetching contact actions</span>    </a></li></ul></div>');
+			expect($appendTo.html()).toEqual('<div class="menu popovermenu menu-left contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>Error fetching contact actions</span>    </a></li></ul></div>');
 		});
 
 		it('should handle 404', function() {
@@ -197,7 +197,7 @@ describe('jquery.contactsMenu tests', function() {
 			expect(fakeServer.requests[0].method).toEqual('POST');
 			expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/contactsmenu/findOne');
 
-			expect($appendTo.html()).toEqual('<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>');
+			expect($appendTo.html()).toEqual('<div class="menu popovermenu menu-left contactsmenu-popover loaded" style="display: block;">    <ul>        <li class="hidden">            <a>                <span class="icon-loading-small"></span>            </a>        </li>    <li>    <a href="#">                <span>No action available</span>    </a></li></ul></div>');
 		});
 	});