Merge pull request #7355 from owncloud/new-menu-svg

Use SVG icons in New file menu

apps/files/css/files.css

@@ -20,7 +20,7 @@
 	padding: 10px;
 	font-weight: normal;
 }
-#new>a {
+#new > a {
 	padding: 14px 10px;
 	position: relative;
 	top: 7px;
@@ -30,7 +30,7 @@
 	border-bottom-right-radius: 0;
 	border-bottom: none;
 }
-#new>ul {
+#new > ul {
 	display: none;
 	position: fixed;
 	min-width: 112px;
@@ -39,16 +39,26 @@
 	padding-bottom: 0;
 	margin-top: 14px;
 	margin-left: -1px;
-	text-align:left;
+	text-align: left;
 	background: #f8f8f8;
 	border: 1px solid #ddd;
 	border-radius: 5px;
 	border-top-left-radius: 0;
-	box-shadow:0 2px 7px rgba(170,170,170,.4);
+	box-shadow: 0 2px 7px rgba(170,170,170,.4);
+}
+#new > ul > li {
+	height: 36px;
+	margin: 5px;
+	padding-left: 42px;
+	padding-bottom: 2px;
+	background-position: initial;
+	cursor: pointer;
+}
+#new > ul > li > p {
+	cursor: pointer;
+	padding-top: 7px;
+	padding-bottom: 7px;
 }
-#new>ul>li { height:36px; margin:5px; padding-left:48px; padding-bottom:2px;
-		background-repeat:no-repeat; cursor:pointer; }
-#new>ul>li>p { cursor:pointer; padding-top: 7px; padding-bottom: 7px;}
 
 #new .error, #fileList .error {
 	color: #e9322d;

apps/files/templates/index.php

@@ -5,12 +5,17 @@
 			<div id="new" class="button">
 				<a><?php p($l->t('New'));?></a>
 				<ul>
-					<li style="background-image:url('<?php p(OCP\mimetype_icon('text/plain')) ?>')"
-						data-type='file' data-newname='<?php p($l->t('New text file')) ?>.txt'><p><?php p($l->t('Text file'));?></p></li>
-					<li style="background-image:url('<?php p(OCP\mimetype_icon('dir')) ?>')"
-						data-type='folder' data-newname='<?php p($l->t('New folder')) ?>'><p><?php p($l->t('Folder'));?></p></li>
-					<li style="background-image:url('<?php p(OCP\image_path('core', 'places/link.svg')) ?>')"
-						data-type='web'><p><?php p($l->t('From link'));?></p></li>
+					<li class="icon icon-filetype-text"
+						data-type="file" data-newname="<?php p($l->t('New text file')) ?>.txt">
+						<p><?php p($l->t('Text file'));?></p>
+					</li>
+					<li class="icon icon-filetype-folder"
+						data-type="folder" data-newname="<?php p($l->t('New folder')) ?>">
+						<p><?php p($l->t('Folder'));?></p>
+					</li>
+					<li class="icon icon-link" data-type="web">
+						<p><?php p($l->t('From link'));?></p>
+					</li>
 				</ul>
 			</div>
 			<?php endif;?>

core/css/icons.css

@@ -226,6 +226,12 @@
 .icon-folder {
 	background-image: url('../img/places/folder.svg');
 }
+.icon-filetype-text {
+	background-image: url('../img/filetypes/text.svg');
+}
+.icon-filetype-folder {
+	background-image: url('../img/filetypes/folder.svg');
+}
 
 .icon-home {
 	background-image: url('../img/places/home.svg');