Added bubble style, applied to file actions menu

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 {

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));

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;