From b142fbe6d731e761d0098c0e41e42396ee23e24c Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Thu, 6 Aug 2015 10:58:59 +0200
Subject: [PATCH] Added bubble style, applied to file actions menu

---
 apps/files/css/files.css         |  1 +
 apps/files/js/fileactionsmenu.js |  2 +-
 core/css/apps.css                | 11 ++++++++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index e93993affa8..e608a029e2b 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -691,6 +691,7 @@ table.dragshadow td.size {
 .fileActionsMenu {
 	/* FIXME: should be variable width, but default one is too big */
 	width: 100px;
+	padding: 10px;
 }
 
 .fileActionsMenu.hidden {
diff --git a/apps/files/js/fileactionsmenu.js b/apps/files/js/fileactionsmenu.js
index 1795fdeab11..0cc08a1ec90 100644
--- a/apps/files/js/fileactionsmenu.js
+++ b/apps/files/js/fileactionsmenu.js
@@ -43,7 +43,7 @@
 		 * @private
 		 */
 		initialize: function() {
-			this.$el = $('<div class="fileActionsMenu dropdown hidden menu"></div>');
+			this.$el = $('<div class="fileActionsMenu bubble hidden open menu"></div>');
 			this._template = Handlebars.compile(TEMPLATE_MENU);
 
 			this.$el.on('click', 'a.action', _.bind(this._onClickAction, this));
diff --git a/core/css/apps.css b/core/css/apps.css
index 5769120c5ed..d4752cdde7e 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -292,8 +292,8 @@
 		list-style-type: none;
 	}
 
+.bubble,
 #app-navigation .app-navigation-entry-menu {
-	display: none;
 	position: absolute;
 	background-color: #eee;
 	color: #333;
@@ -310,11 +310,17 @@
 	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 }
 
+#app-navigation .app-navigation-entry-menu {
+	display: none;
+}
+
 #app-navigation .app-navigation-entry-menu.open {
 	display: block;
 }
 
 /* miraculous border arrow stuff */
+.bubble:after,
+.bubble:before,
 #app-navigation .app-navigation-entry-menu:after,
 #app-navigation .app-navigation-entry-menu:before {
 	bottom: 100%;
@@ -327,12 +333,15 @@
 	pointer-events: none;
 }
 
+.bubble:after,
 #app-navigation .app-navigation-entry-menu:after {
 	border-color: rgba(238, 238, 238, 0);
 	border-bottom-color: #eee;
 	border-width: 10px;
 	margin-left: -10px;
 }
+
+.bubble:before,
 #app-navigation .app-navigation-entry-menu:before {
 	border-color: rgba(187, 187, 187, 0);
 	border-bottom-color: #bbb;