1) Icons fixed

2) Download Link 3) Modified Information
9 years ago · b28cabbec4
13 changed files with 298 additions and 176 deletions
--- a/src/Squidex/Controllers/Api/Assets/AssetContentController.cs
+++ b/src/Squidex/Controllers/Api/Assets/AssetContentController.cs
@ -86,7 +86,7 @@ namespace Squidex.Controllers.Api.Assets
                return NotFound();
            }

-            return new FileStreamResult(content, asset.MimeType);
+            return new FileStreamResult(content, asset.MimeType) { FileDownloadName = asset.FileName };
        }
    }
 }
--- a/src/Squidex/app/features/assets/pages/asset.component.html
+++ b/src/Squidex/app/features/assets/pages/asset.component.html
@ -2,7 +2,7 @@
    <div class="card" (sqxFileDrop)="updateFile($event)">
        <div *ngIf="asset && progress == 0" [@fade]>
            <div class="card-block">
-                <div>
+                <div class="file-preview">
                    <div class="file-type">{{fileType}}</div>
                    
                    <div *ngIf="asset.isImage">
@ -11,6 +11,24 @@
                    <div *ngIf="!asset.isImage" class="file-icon-container">
                        <img class="file-icon" [attr.src]="fileIcon" sqxHideInvalidImage>
                    </div>
+
+                    <div class="file-overlay">
+                        <div class="file-overlay-background"></div>
+                        
+                        <a class="file-download" [attr.href]="downloadUrl" target="_blank">
+                            <i class="icon-download"></i>
+                        </a>
+                        <a class="file-delete">
+                            <i class="icon-delete"></i>
+                        </a>
+                        <span class="file-user">
+                            <i class="icon-user"></i> {{userName(asset.lastModifiedBy, true) | async}}
+                        </span>
+                        <span class="file-modified">
+                            {{asset.lastModified | fromNow}}
+                        </span>
+
+                    </div>
                </div>
            </div>
            <div class="card-footer">
--- a/src/Squidex/app/features/assets/pages/asset.component.scss
+++ b/src/Squidex/app/features/assets/pages/asset.component.scss
@ -68,6 +68,20 @@ $color-type-foreground: #fff;
        font-size: .8rem;
    }

+    &-preview {
+        position: relative;
+
+        &:hover {
+            .file-overlay {
+                @include opacity(1);
+            }
+
+            .file-type {
+                @include opacity(0);
+            }
+        }
+    }
+
    &-icon {
        &-container {
            background: $color-border;
@ -85,8 +99,47 @@ $color-type-foreground: #fff;
        line-height: 2rem;
    }

+    &-user {
+        @include absolute(auto, auto, 1.7rem, .5rem);
+    }
+
+    &-modified {
+        @include absolute(auto, auto, .5rem, .5rem);
+    }
+
+    &-delete {
+        & {
+            @include absolute(.5rem, 1rem, auto, auto);
+            font-size: 1.1rem;
+            font-weight: normal;
+            cursor: pointer;
+            color: $color-accent-dark;
+        }
+
+        &:focus,
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    &-download {
+        & {
+            @include absolute(.5rem, 2.5rem, auto, auto);
+            font-size: 1.1rem;
+            font-weight: normal;
+            cursor: pointer;
+            color: $color-accent-dark;
+        }
+
+        &:focus,
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
    &-type {
-        @include absolute(1.1rem, auto, auto, 1.1rem);
+        @include transition(opacity.4s ease);
+        @include absolute(.5rem, auto, auto, .5rem);
        @include border-radius(2px);
        @include opacity(.8);
        background: $color-type-background;
@ -97,4 +150,21 @@ $color-type-foreground: #fff;
        font-weight: normal;
        color: $color-type-foreground;
    }
+
+    &-overlay {
+        & {
+            @include transition(opacity.4s ease);
+            @include absolute(0, 0, 0, 0);
+            @include opacity(0);
+            font-size: .9rem;
+            font-weight: normal;
+            color: $color-accent-dark;
+        }
+
+        &-background {
+            @include absolute(0, 0, 0, 0);
+            @include opacity(.7);
+            background: $color-type-background;
+        }
+    }
 }
--- a/src/Squidex/app/features/assets/pages/asset.component.ts
+++ b/src/Squidex/app/features/assets/pages/asset.component.ts
@ -52,6 +52,10 @@ export class AssetComponent extends AppComponentBase implements OnInit {
        return this.apiUrl.buildUrl(`api/assets/${this.asset.id}/?width=230&height=155&mode=Crop&q=${this.assetVersion}`);
    }

+    public get downloadUrl(): string {
+        return this.apiUrl.buildUrl(`api/assets/${this.asset.id}/?q=${this.assetVersion}`);
+    }
+
    public get fileType(): string {
        return this.asset.mimeType.split('/')[1];
    }
--- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
@ -34,7 +34,7 @@
                            </div>
                            <div class="col col-4">
                                <span class="schema-user">
-                                    <i class="icon-person"></i> {{userName(schema.lastModifiedBy, true) | async}}
+                                    <i class="icon-user"></i> {{userName(schema.lastModifiedBy, true) | async}}
                                </span>
                            </div>
                            <div class="col col-4 schema-modified">
--- a/src/Squidex/app/theme/icomoon/demo-files/demo.css
+++ b/src/Squidex/app/theme/icomoon/demo-files/demo.css
@ -147,19 +147,19 @@ p {
  font-size: 16px;
 }
 .fs1 {
-  font-size: 28px;
+  font-size: 24px;
 }
 .fs2 {
-  font-size: 20px;
+  font-size: 28px;
 }
 .fs3 {
-  font-size: 32px;
+  font-size: 20px;
 }
 .fs4 {
  font-size: 32px;
 }
 .fs5 {
-  font-size: 24px;
+  font-size: 32px;
 }
 .fs6 {
  font-size: 32px;
--- a/src/Squidex/app/theme/icomoon/demo.html
+++ b/src/Squidex/app/theme/icomoon/demo.html
@ -9,11 +9,46 @@
    <link rel="stylesheet" href="style.css"></head>
 <body>
    <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;62)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;63)</small></h1>
    </div>
    <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-download">
+                
+                </span>
+                <span class="mls"> icon-download</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93e;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-control-RichText">
+                
+                </span>
+                <span class="mls"> icon-control-RichText</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e939" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe939;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-bug">
                
@ -29,7 +64,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-control-Markdown">
                
@ -45,7 +80,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-control-Date">
                
@ -61,7 +96,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-control-DateTime">
                
@ -77,7 +112,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-angle-right">
                
@ -93,7 +128,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-user-o">
                
@ -109,7 +144,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-caret-right">
                
@ -125,7 +160,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-caret-left">
                
@ -141,7 +176,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-caret-up">
                
@ -157,7 +192,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-caret-down">
                
@ -173,7 +208,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-angle-up">
                
@ -189,7 +224,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-angle-down">
                
@ -205,7 +240,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-angle-left">
                
@ -224,7 +259,7 @@
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-info">
                
@ -240,7 +275,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-unlocked">
                
@ -256,7 +291,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-lock">
                
@ -272,7 +307,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-reset">
                
@ -288,7 +323,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-pause">
                
@ -304,7 +339,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-play">
                
@ -320,7 +355,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-settings2">
                
@ -336,7 +371,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs2">
+        <div class="glyph fs3">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-bin2">
                
@ -355,7 +390,7 @@
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-google">
                
@ -371,7 +406,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-unlocked">
                
@ -387,7 +422,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-lock">
                
@ -403,7 +438,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-reset">
                
@ -419,7 +454,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-pause">
                
@ -435,7 +470,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-play">
                
@ -451,7 +486,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-settings2">
                
@ -467,7 +502,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs3">
+        <div class="glyph fs4">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-bin2">
                
@ -486,7 +521,7 @@
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
-        <div class="glyph fs4">
+        <div class="glyph fs5">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-control-Stars">
                
@ -502,7 +537,7 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
-        <div class="glyph fs4">
+        <div class="glyph fs5">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-browser">
                
@ -519,41 +554,6 @@
            </div>
        </div>
    </div>
-    <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
-        <div class="glyph fs5">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-RichText">
-                
-                </span>
-                <span class="mls"> icon-control-RichText</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e939" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe939;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs5">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-Date">
-                
-                </span>
-                <span class="mls"> icon-control-Date</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e936" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe936;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
        <div class="glyph fs6">
--- a/src/Squidex/app/theme/icomoon/fonts/icomoon.eot
+++ b/src/Squidex/app/theme/icomoon/fonts/icomoon.eot
--- a/src/Squidex/app/theme/icomoon/fonts/icomoon.svg
+++ b/src/Squidex/app/theme/icomoon/fonts/icomoon.svg
@ -69,4 +69,5 @@
 <glyph unicode="&#xe93b;" glyph-name="google" d="M522.2 521.2v-175.6h290.4c-11.8-75.4-87.8-220.8-290.4-220.8-174.8 0-317.4 144.8-317.4 323.2s142.6 323.2 317.4 323.2c99.4 0 166-42.4 204-79l139 133.8c-89.2 83.6-204.8 134-343 134-283 0-512-229-512-512s229-512 512-512c295.4 0 491.6 207.8 491.6 500.2 0 33.6-3.6 59.2-8 84.8l-483.6 0.2z" />
 <glyph unicode="&#xe93c;" glyph-name="info" d="M636.518 972.8c68.608 0 102.912-46.694 102.912-100.198 0-66.816-59.597-128.614-137.165-128.614-64.973 0-102.861 38.4-101.069 101.888 0 53.402 45.107 126.925 135.322 126.925zM425.421-51.2c-54.17 0-93.85 33.382-55.962 180.429l62.157 260.71c10.803 41.677 12.595 58.419 0 58.419-16.23 0-86.477-28.774-128.102-57.19l-27.034 45.056c131.686 111.923 283.187 177.51 348.211 177.51 54.118 0 63.13-65.178 36.096-165.376l-71.219-274.022c-12.595-48.384-7.219-65.075 5.427-65.075 16.23 0 69.478 20.070 121.805 61.798l30.72-41.677c-128.102-130.406-268.032-180.582-322.099-180.582z" />
 <glyph unicode="&#xe93d;" glyph-name="bug" horiz-adv-x="951" d="M932.571 402.286c0-20-16.571-36.571-36.571-36.571h-128c0-71.429-15.429-125.143-38.286-165.714l118.857-119.429c14.286-14.286 14.286-37.143 0-51.429-6.857-7.429-16.571-10.857-25.714-10.857s-18.857 3.429-25.714 10.857l-113.143 112.571s-74.857-68.571-172-68.571v512h-73.143v-512c-103.429 0-178.857 75.429-178.857 75.429l-104.571-118.286c-7.429-8-17.143-12-27.429-12-8.571 0-17.143 2.857-24.571 9.143-14.857 13.714-16 36.571-2.857 52l115.429 129.714c-20 39.429-33.143 90.286-33.143 156.571h-128c-20 0-36.571 16.571-36.571 36.571s16.571 36.571 36.571 36.571h128v168l-98.857 98.857c-14.286 14.286-14.286 37.143 0 51.429s37.143 14.286 51.429 0l98.857-98.857h482.286l98.857 98.857c14.286 14.286 37.143 14.286 51.429 0s14.286-37.143 0-51.429l-98.857-98.857v-168h128c20 0 36.571-16.571 36.571-36.571zM658.286 731.428h-365.714c0 101.143 81.714 182.857 182.857 182.857s182.857-81.714 182.857-182.857z" />
+<glyph unicode="&#xe93e;" glyph-name="download" d="M640 853.334q78 0 149.167-30.5t122.5-81.833 81.833-122.5 30.5-149.167q0-85-35-160.667t-96.667-129.167-140-77.5l21 20.667q18 18.333 28 42.667 9.333 22.667 9.333 49.333 0 6.667-0.333 9.333 59.333 41.333 93.833 105.833t34.5 139.5q0 60.667-23.667 116t-63.667 95.333-95.333 63.667-116 23.667q-55.333 0-106.5-19.833t-90-53.833-65-81.333-33.833-101h-88.667q-70.667 0-120.667-50t-50-120.667q0-38.667 15.167-71.667t39.833-54.167 54.833-33 60.833-11.833h50q11.667-29.333 30-48l37.667-37.333h-117.667q-69.667 0-128.5 34.333t-93.167 93.167-34.333 128.5 34.333 128.5 93.167 93.167 128.5 34.333h22q26.333 74.333 79.333 132.167t126.833 90.833 155.833 33zM554.667 512q17.667 0 30.167-12.5t12.5-30.167v-281l55 55.333q12.333 12.333 30.333 12.333 18.333 0 30.5-12.167t12.167-30.5q0-18-12.333-30.333l-128-128q-12.333-12.333-30.333-12.333t-30.333 12.333l-128 128q-12.333 13-12.333 30.333 0 17.667 12.5 30.167t30.167 12.5q18 0 30.333-12.333l55-55.333v281q0 17.667 12.5 30.167t30.167 12.5z" />
 </font></defs></svg>
--- a/src/Squidex/app/theme/icomoon/fonts/icomoon.ttf
+++ b/src/Squidex/app/theme/icomoon/fonts/icomoon.ttf
--- a/src/Squidex/app/theme/icomoon/fonts/icomoon.woff
+++ b/src/Squidex/app/theme/icomoon/fonts/icomoon.woff
--- a/src/Squidex/app/theme/icomoon/selection.json
+++ b/src/Squidex/app/theme/icomoon/selection.json
@ -1,6 +1,64 @@
 {
  "IcoMoonType": "selection",
  "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M640 85.333q78 0 149.167 30.5t122.5 81.833 81.833 122.5 30.5 149.167q0 85-35 160.667t-96.667 129.167-140 77.5l21-20.667q18-18.333 28-42.667 9.333-22.667 9.333-49.333 0-6.667-0.333-9.333 59.333-41.333 93.833-105.833t34.5-139.5q0-60.667-23.667-116t-63.667-95.333-95.333-63.667-116-23.667q-55.333 0-106.5 19.833t-90 53.833-65 81.333-33.833 101h-88.667q-70.667 0-120.667 50t-50 120.667q0 38.667 15.167 71.667t39.833 54.167 54.833 33 60.833 11.833h50q11.667 29.333 30 48l37.667 37.333h-117.667q-69.667 0-128.5-34.333t-93.167-93.167-34.333-128.5 34.333-128.5 93.167-93.167 128.5-34.333h22q26.333-74.333 79.333-132.167t126.833-90.833 155.833-33zM554.667 426.667q17.667 0 30.167 12.5t12.5 30.167v281l55-55.333q12.333-12.333 30.333-12.333 18.333 0 30.5 12.167t12.167 30.5q0 18-12.333 30.333l-128 128q-12.333 12.333-30.333 12.333t-30.333-12.333l-128-128q-12.333-13-12.333-30.333 0-17.667 12.5-30.167t30.167-12.5q18 0 30.333 12.333l55 55.333v-281q0-17.667 12.5-30.167t30.167-12.5z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "cloud-download"
+        ],
+        "grid": 24
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 1,
+        "id": 0,
+        "prevSize": 24,
+        "code": 59710,
+        "name": "download"
+      },
+      "setIdx": 0,
+      "setId": 8,
+      "iconIdx": 0
+    },
+    {
+      "icon": {
+        "paths": [
+          "M918 384v128h-128v298h-128v-298h-128v-128h384zM106 170h556v128h-214v512h-128v-512h-214v-128z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "text_fields"
+        ],
+        "grid": 24
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 75,
+        "id": 0,
+        "prevSize": 24,
+        "code": 59705,
+        "name": "control-RichText"
+      },
+      "setIdx": 6,
+      "setId": 2,
+      "iconIdx": 0
+    },
    {
      "icon": {
        "paths": [
@ -27,7 +85,7 @@
        "code": 59709,
        "name": "bug"
      },
-      "setIdx": 0,
+      "setIdx": 1,
      "setId": 7,
      "iconIdx": 0
    },
@ -56,7 +114,7 @@
        "prevSize": 28,
        "code": 59704
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 0
    },
@ -85,7 +143,7 @@
        "prevSize": 28,
        "code": 59702
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 9
    },
@ -114,7 +172,7 @@
        "prevSize": 28,
        "code": 59703
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 10
    },
@ -144,7 +202,7 @@
        "code": 59697,
        "name": "angle-right"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 11
    },
@ -173,7 +231,7 @@
        "prevSize": 28,
        "code": 59698
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 12
    },
@ -203,7 +261,7 @@
        "code": 59689,
        "name": "caret-right"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 13
    },
@ -233,7 +291,7 @@
        "code": 59690,
        "name": "caret-left"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 14
    },
@ -263,7 +321,7 @@
        "code": 59691,
        "name": "caret-up"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 15
    },
@ -293,7 +351,7 @@
        "code": 59692,
        "name": "caret-down"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 16
    },
@ -323,7 +381,7 @@
        "code": 59651,
        "name": "angle-up"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 17
    },
@ -353,7 +411,7 @@
        "code": 59648,
        "name": "angle-down"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 18
    },
@ -383,7 +441,7 @@
        "code": 59649,
        "name": "angle-left"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 19
    },
@ -412,7 +470,7 @@
        "code": 59708,
        "name": "info"
      },
-      "setIdx": 1,
+      "setIdx": 2,
      "setId": 6,
      "iconIdx": 0
    },
@ -442,7 +500,7 @@
        "code": 59707,
        "name": "google"
      },
-      "setIdx": 2,
+      "setIdx": 3,
      "setId": 5,
      "iconIdx": 0
    },
@ -472,7 +530,7 @@
        "code": 59699,
        "name": "unlocked"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 2
    },
@ -504,7 +562,7 @@
        "code": 59700,
        "name": "lock"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 3
    },
@ -543,7 +601,7 @@
        "code": 59694,
        "name": "reset"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 4
    },
@ -573,7 +631,7 @@
        "code": 59695,
        "name": "pause"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 5
    },
@ -603,7 +661,7 @@
        "code": 59696,
        "name": "play"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 6
    },
@ -638,7 +696,7 @@
        "code": 59693,
        "name": "settings2"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 7
    },
@ -675,7 +733,7 @@
        "prevSize": 32,
        "code": 59650
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 8
    },
@ -705,7 +763,7 @@
        "code": 59706,
        "name": "control-Stars"
      },
-      "setIdx": 3,
+      "setIdx": 4,
      "setId": 4,
      "iconIdx": 0
    },
@ -738,39 +796,10 @@
        "code": 59701,
        "name": "browser"
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 1
    },
-    {
-      "icon": {
-        "paths": [
-          "M918 384v128h-128v298h-128v-298h-128v-128h384zM106 170h556v128h-214v512h-128v-512h-214v-128z"
-        ],
-        "attrs": [
-          {}
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "text_fields"
-        ],
-        "grid": 24
-      },
-      "attrs": [
-        {}
-      ],
-      "properties": {
-        "order": 75,
-        "id": 0,
-        "prevSize": 24,
-        "code": 59705,
-        "name": "control-RichText"
-      },
-      "setIdx": 5,
-      "setId": 2,
-      "iconIdx": 0
-    },
    {
      "icon": {
        "paths": [
@ -796,7 +825,7 @@
        "prevSize": 32,
        "code": 59652
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 20
    },
@ -825,7 +854,7 @@
        "prevSize": 32,
        "code": 59653
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 21
    },
@ -854,7 +883,7 @@
        "prevSize": 32,
        "code": 59654
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 22
    },
@ -883,7 +912,7 @@
        "prevSize": 32,
        "code": 59655
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 23
    },
@ -912,7 +941,7 @@
        "prevSize": 32,
        "code": 59656
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 24
    },
@ -941,7 +970,7 @@
        "prevSize": 32,
        "code": 59657
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 25
    },
@ -970,7 +999,7 @@
        "prevSize": 32,
        "code": 59658
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 26
    },
@ -999,7 +1028,7 @@
        "prevSize": 32,
        "code": 59659
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 27
    },
@ -1028,7 +1057,7 @@
        "prevSize": 32,
        "code": 59660
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 28
    },
@ -1057,7 +1086,7 @@
        "prevSize": 32,
        "code": 59661
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 29
    },
@ -1086,7 +1115,7 @@
        "prevSize": 32,
        "code": 59662
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 30
    },
@ -1115,7 +1144,7 @@
        "prevSize": 32,
        "code": 59663
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 31
    },
@ -1144,7 +1173,7 @@
        "prevSize": 32,
        "code": 59664
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 32
    },
@ -1173,7 +1202,7 @@
        "prevSize": 32,
        "code": 59665
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 33
    },
@ -1202,7 +1231,7 @@
        "prevSize": 32,
        "code": 59666
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 34
    },
@ -1231,7 +1260,7 @@
        "prevSize": 32,
        "code": 59667
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 35
    },
@ -1260,7 +1289,7 @@
        "prevSize": 32,
        "code": 59668
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 36
    },
@ -1289,7 +1318,7 @@
        "prevSize": 32,
        "code": 59669
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 37
    },
@ -1318,7 +1347,7 @@
        "prevSize": 32,
        "code": 59670
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 38
    },
@ -1347,7 +1376,7 @@
        "prevSize": 32,
        "code": 59671
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 39
    },
@ -1376,7 +1405,7 @@
        "prevSize": 32,
        "code": 59672
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 40
    },
@ -1405,7 +1434,7 @@
        "prevSize": 32,
        "code": 59673
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 41
    },
@ -1434,7 +1463,7 @@
        "prevSize": 32,
        "code": 59674
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 42
    },
@ -1463,7 +1492,7 @@
        "prevSize": 32,
        "code": 59675
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 43
    },
@ -1492,7 +1521,7 @@
        "prevSize": 32,
        "code": 59676
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 44
    },
@ -1521,7 +1550,7 @@
        "prevSize": 32,
        "code": 59677
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 45
    },
@ -1550,7 +1579,7 @@
        "prevSize": 32,
        "code": 59678
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 46
    },
@ -1579,7 +1608,7 @@
        "prevSize": 32,
        "code": 59679
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 47
    },
@ -1608,7 +1637,7 @@
        "prevSize": 32,
        "code": 59680
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 48
    },
@ -1637,7 +1666,7 @@
        "prevSize": 32,
        "code": 59681
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 49
    },
@ -1666,7 +1695,7 @@
        "prevSize": 32,
        "code": 59682
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 50
    },
@ -1695,7 +1724,7 @@
        "prevSize": 32,
        "code": 59683
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 51
    },
@ -1724,7 +1753,7 @@
        "prevSize": 32,
        "code": 59684
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 52
    },
@ -1753,7 +1782,7 @@
        "prevSize": 32,
        "code": 59685
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 53
    },
@ -1782,7 +1811,7 @@
        "prevSize": 32,
        "code": 59686
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 54
    },
@ -1811,7 +1840,7 @@
        "prevSize": 32,
        "code": 59687
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 55
    },
@ -1840,7 +1869,7 @@
        "prevSize": 32,
        "code": 59688
      },
-      "setIdx": 6,
+      "setIdx": 7,
      "setId": 1,
      "iconIdx": 56
    }
--- a/src/Squidex/app/theme/icomoon/style.css
+++ b/src/Squidex/app/theme/icomoon/style.css
@ -1,10 +1,10 @@
@font-face {
  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?jcn9ba');
-  src:  url('fonts/icomoon.eot?jcn9ba#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?jcn9ba') format('truetype'),
-    url('fonts/icomoon.woff?jcn9ba') format('woff'),
-    url('fonts/icomoon.svg?jcn9ba#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?pgarx9');
+  src:  url('fonts/icomoon.eot?pgarx9#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?pgarx9') format('truetype'),
+    url('fonts/icomoon.woff?pgarx9') format('woff'),
+    url('fonts/icomoon.svg?pgarx9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -24,6 +24,12 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-download:before {
+  content: "\e93e";
+}
+.icon-control-RichText:before {
+  content: "\e939";
+}
 .icon-bug:before {
  content: "\e93d";
 }
@ -117,12 +123,6 @@
 .icon-browser:before {
  content: "\e935";
 }
-.icon-control-RichText:before {
-  content: "\e939";
-}
-.icon-control-Date:before {
-  content: "\e936";
-}
 .icon-activity:before {
  content: "\e904";
 }