add icon task and styles

filer/private/sass/layout/_all.scss

@@ -1,5 +1,7 @@
 // #LAYOUT#
 
+@import "iconography";
+@import "icons";
 @import "old";
 @import "main";
 @import "modal";

filer/private/sass/layout/_drag-and-drop.scss

@@ -5,6 +5,84 @@
     &.dz-drag-hover {
         border: solid 1px $color-primary !important;
     }
+    &.dz-started {
+        .fileUpload {
+            display: none;
+        }
+    }
+    .dz-preview {
+        min-height: auto;
+        width: 100%;
+        padding-bottom: 10px;
+        margin-left: 0;
+        margin-right: 0;
+        margin-bottom: 0;
+        border-bottom: solid 1px $gray-light;
+        .dz-details {
+            min-width: calc(100% - 80px);
+            max-width: calc(100% - 80px);
+            padding: 0;
+            margin-left: 40px;
+            margin-top: 7px;
+            opacity: 1;
+            .dz-filename,
+            .dz-filename:hover,
+            .dz-size {
+                float: left;
+                text-align: left;
+                span {
+                    color: $gray;
+                    border: 0 !important;
+                    background-color: transparent !important;
+                }
+            }
+        }
+        .dz-error-message {
+            top: 45px;
+            left: 0;
+            width: 100%;
+        }
+        .dz-success-mark,
+        .dz-error-mark {
+            top: 5px;
+            left: auto;
+            right: 0;
+            margin-top: 0;
+            &:before {
+                color: $gray;
+            }
+            svg {
+                display: none;
+            }
+        }
+        .dz-success-mark {
+            @include icon(check);
+        }
+        .dz-error-mark {
+            @include icon(remove);
+        }
+        &.dz-image-preview {
+           background-color: transparent;
+        }
+        .dz-progress {
+            top: 18px;
+            left: 0;
+            height: 10px;
+            width: calc(100% - 40px);
+            margin-left: 40px;
+        }
+        .dz-image {
+            overflow: hidden;
+            width: 36px;
+            height: 36px;
+            border-radius: 0;
+            border: solid 1px $gray-light;
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
     .dz-message {
         color: $gray;
         float: right;

filer/private/sass/layout/_iconography.scss

@@ -0,0 +1,60 @@
+//######################################################################################################################
+// #ICONOGRAPHY#
+
+// default font file generated by gulp
+@font-face {
+    font-family: "django-filer-iconfont";
+    src: url("../fonts/django-filer-iconfont.eot?v=3.2.0");
+    src: url("../fonts/django-filer-iconfont.eot?v=3.2.0#iefix") format("eot"),
+         url("../fonts/django-filer-iconfont.woff2?v=3.2.0") format("woff2"),
+         url("../fonts/django-filer-iconfont.woff?v=3.2.0") format("woff"),
+         url("../fonts/django-filer-iconfont.ttf?v=3.2.0") format("truetype"),
+         url("../fonts/django-filer-iconfont.svg?v=3.2.0#django-filer-iconfont") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+%icon {
+    display: inline-block;
+    font: normal normal normal 14px/1 django-filer-iconfont;
+    font-size: inherit;
+    text-rendering: auto;
+    transform: translate(0, 0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@function icon-char($filename) {
+    $char: "";
+
+    @if $filename == check {
+        $char: "E001";
+    }
+    @if $filename == remove {
+        $char: "E002";
+    }
+
+    @return $char;
+}
+
+.cms-icon {
+    @extend %icon;
+}
+@mixin icon($filename, $insert: before) {
+    &:#{$insert} {
+        content: #{"\"\\"}#{icon-char($filename) + "\""};
+    }
+}
+
+// #####################################################################################################################
+// #ICONS:start#
+// use unicode characters for accessibility reasons and use aria-hidden="true" for decorative icons
+// DOCS: http://filamentgroup.com/lab/bulletproof_icon_fonts.html
+
+.cms-icon-check {
+    @include icon(check);
+}
+
+.cms-icon-remove {
+    @include icon(remove);
+}

filer/private/sass/layout/_icons.scss

@@ -0,0 +1,9 @@
+.dz-success-mark,
+.dz-error-mark {
+    &:before {
+         @extend %icon;
+         font-size: $font-size-large;
+         vertical-align: middle;
+         margin-right: 5px;
+    }
+}

filer/private/sass/libs/_iconfont.scss

@@ -0,0 +1,54 @@
+//######################################################################################################################
+// #ICONOGRAPHY#
+
+// default font file generated by gulp
+@font-face {
+    font-family: "<%= fontName %>";
+    src: url("<%= fontPath %><%= fontName %>.eot?v=3.2.0");
+    src: url("<%= fontPath %><%= fontName %>.eot?v=3.2.0#iefix") format("eot"),
+         url("<%= fontPath %><%= fontName %>.woff2?v=3.2.0") format("woff2"),
+         url("<%= fontPath %><%= fontName %>.woff?v=3.2.0") format("woff"),
+         url("<%= fontPath %><%= fontName %>.ttf?v=3.2.0") format("truetype"),
+         url("<%= fontPath %><%= fontName %>.svg?v=3.2.0#<%= fontName %>") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+%icon {
+    display: inline-block;
+    font: normal normal normal 14px/1 <%= fontName %>;
+    font-size: inherit;
+    text-rendering: auto;
+    transform: translate(0, 0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@function icon-char($filename) {
+    $char: "";
+<% _.each(glyphs, function(glyph) { %>
+    @if $filename == <%= glyph.fileName %> {
+        $char: "<%= glyph.codePoint %>";
+    }<% }); %>
+
+    @return $char;
+}
+
+.cms-icon {
+    @extend %icon;
+}
+@mixin icon($filename, $insert: before) {
+    &:#{$insert} {
+        content: #{"\"\\"}#{icon-char($filename) + "\""};
+    }
+}
+
+// #####################################################################################################################
+// #ICONS:start#
+// use unicode characters for accessibility reasons and use aria-hidden="true" for decorative icons
+// DOCS: http://filamentgroup.com/lab/bulletproof_icon_fonts.html
+<% _.each(glyphs, function(glyph) { %>
+.cms-icon-<%= glyph.fileName %> {
+    @include icon(<%= glyph.fileName %>);
+}
+<% }); %>

filer/private/sass/mixins/_custom.scss

@@ -13,7 +13,14 @@
         clear: both;
     }
 }
-
+// taken from bootstrap with adaptations
+@function important($important) {
+    @if($important == true) {
+        @return !important;
+    } @else {
+        @return true;
+    }
+}
 @mixin button-variant($color, $background, $border, $important: false) {
     background-image: none important($important);
     margin-bottom: 0; // For input.btn

gulpfile.js

@@ -2,7 +2,10 @@
 
 var gulp = require('gulp');
 var gulpsync = require('gulp-sync')(gulp);
+var gutil = require('gulp-util');
 var sass = require('gulp-sass');
+var iconfont = require('gulp-iconfont');
+var iconfontCss = require('gulp-iconfont-css');
 var autoprefixer = require('gulp-autoprefixer');
 var sourcemaps = require('gulp-sourcemaps');
 var jshint = require('gulp-jshint');
@@ -15,11 +18,15 @@ var PROJECT_PATH = {
     'sass': PROJECT_ROOT + '/filer/private/sass/',
     'css': PROJECT_ROOT + '/filer/static/filer/css/',
     'js': PROJECT_ROOT + '/filer/static/filer/js/',
-    'tests': PROJECT_ROOT + '/filer/tests/frontend/'
+    'tests': PROJECT_ROOT + '/filer/tests/frontend/',
+    'icons': PROJECT_ROOT + '/filer/static/filer/fonts/'
 };
 
 var PROJECT_PATTERNS = {
     'sass': PROJECT_PATH.sass + '**/*.scss',
+    icons: [
+        PROJECT_PATH.icons + '/src/*.svg'
+    ],
     'lint': [
         PROJECT_PATH.js + '**/*.js',
         '!' + PROJECT_PATH.js + '**/*.min.js',
@@ -44,6 +51,27 @@ gulp.task('sass:watch', function () {
     gulp.watch(PROJECT_PATTERNS.sass, ['sass']);
 });
 
+// #############################################################################
+// Icons
+
+gulp.task('icons', function () {
+    gulp.src(PROJECT_PATTERNS.icons)
+    .pipe(iconfontCss({
+        fontName: 'django-filer-iconfont',
+        fontPath: '../fonts/',
+        path: PROJECT_PATH.sass + '/libs/_iconfont.scss',
+        targetPath: '../../../private/sass/layout/_iconography.scss'
+    }))
+    .pipe(iconfont({
+        fontName: 'django-filer-iconfont',
+        normalize: true
+    }))
+    .on('glyphs', function (glyphs, options) {
+        gutil.log.bind(glyphs, options);
+    })
+    .pipe(gulp.dest(PROJECT_PATH.icons));
+});
+
 // #############################################################################
 // LINTING
 gulp.task('jscs', function () {

package.json

@@ -5,9 +5,12 @@
     "gulp": "3.9.*",
     "gulp-autoprefixer": "3.1.*",
     "gulp-jscs": "3.0.*",
+    "gulp-iconfont": "3.0.1",
+    "gulp-iconfont-css": "0.0.9",
     "gulp-jshint": "1.12.*",
     "gulp-sass": "2.1.*",
     "gulp-sourcemaps": "1.6.*",
+    "gulp-util": "3.0.6",
     "gulp-sync": "0.1.*",
     "jasmine": "2.3.*",
     "jshint-stylish": "2.0.*",