create an svg icon sprite for all action icons

Makefile

@@ -0,0 +1,15 @@
+# This file is licensed under the Affero General Public License version 3 or
+# later. See the COPYING file.
+# @author Christoph Wurst <christoph@winzerhof-wurst.at>
+# @copyright Christoph Wurst 2017
+
+default: svg-sprites
+
+svg-sprites: clean
+	cd build && \
+	npm install && \
+	pwd && \
+	grunt
+
+clean:
+	rm -f core/css/images/actions-*.svg

apps/files/css/files.css

@@ -789,7 +789,6 @@ html.ie8 #controls .button.new {
 #controls .actions .button .icon {
 	display: inline-block;
 	vertical-align: middle;
-	background-size: 16px 16px;
 }
 
 #filestable .filename .action .icon.hidden,

build/Gruntfile.js

@@ -0,0 +1,52 @@
+module.exports = function (grunt) {
+	grunt.initConfig({
+		svg_sprite: {
+			options: {
+				// Task-specific options go here.
+			},
+			actions: {
+				expand: true,
+				cwd: '../core/img',
+				src: [
+					'actions/*.svg'
+				],
+				dest: '../core',
+				options: {
+					mode: {
+						css: {
+							prefix: '.icon-',
+							sprite: 'images/actions',
+							dimensions: true,
+							render: {
+								scss: {
+									dest: 'actions',
+									template: 'sprite.scss'
+								}
+							}
+						}
+					},
+
+					shape: {
+						id: {
+							/**
+							 * @param {string} name
+							 * @returns {string}
+							 */
+							generator: function (name) {
+								return name.substring('actions/'.length, name.indexOf('.svg'));
+							}
+						},
+
+						spacing: {
+							padding: 100
+						}
+					}
+				}
+			}
+		}
+	});
+
+	grunt.loadNpmTasks('grunt-svg-sprite');
+
+	grunt.registerTask('default', ['svg_sprite']);
+};

build/package.json

@@ -11,14 +11,16 @@
   "contributors": [],
   "dependencies": {},
   "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-svg-sprite": "^1.3.6",
+    "jasmine-core": "~2.5.2",
     "karma": "~1.3.0",
+    "karma-coverage": "*",
     "karma-jasmine": "~1.0.2",
     "karma-junit-reporter": "*",
-    "karma-coverage": "*",
     "karma-phantomjs-launcher": "*",
-    "phantomjs-prebuilt": "*",
-    "jasmine-core": "~2.5.2",
-    "node-sass": "~4.1.1"
+    "node-sass": "~4.1.1",
+    "phantomjs-prebuilt": "*"
   },
   "engine": "node >= 0.8"
 }

build/sprite.scss

@@ -0,0 +1,13 @@
+%svg-common {
+	background: url("{{{sprite}}}") no-repeat;
+}
+
+{{#shapes}}
+{{#selector.shape}}{{expression}}{{^last}},{{/last}}{{/selector.shape}} {
+	@extend %svg-common;
+	background-position: ({{position.absolute.x}}px - ({{width.outer}}px - {{width.inner}}px)/2) ({{position.absolute.y}}px - ({{height.outer}}px - {{height.inner}}px)/2);
+	width: {{width.inner}}px;
+	height: {{height.inner}}px;
+}
+
+{{/shapes}}