Merge pull request #3118 from nextcloud/newFileMenu-css-guidelines

Fit newFileMenu to css guidelines

Author: MorrisJobke

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

apps/files/js/filelist.js

@@ -2951,7 +2951,7 @@
 				this._newFileMenu = new OCA.Files.NewFileMenu({
 					fileList: this
 				});
-				$('body').append(this._newFileMenu.$el);
+				$('.actions').append(this._newFileMenu.$el);
 			}
 			this._newFileMenu.showAt($target);
 

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