Stories for status icon.

4 years ago · 2b3aef9928
12 changed files with 112 additions and 23 deletions
--- a/frontend/src/app/framework/angular/avatar.stories.tsx
+++ b/frontend/src/app/framework/angular/avatar.stories.tsx
@ -5,10 +5,8 @@
 * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
 */

-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { moduleMetadata } from '@storybook/angular';
 import { Meta, Story } from '@storybook/angular/types-6-0';
-import { AvatarComponent, SqxFrameworkModule } from '@app/framework';
+import { AvatarComponent } from '@app/framework';

 export default {
    title: 'Framework/Avatar',
@ -24,15 +22,6 @@ export default {
            control: 'number',
        },
    },
-    decorators: [
-        moduleMetadata({
-            imports: [
-                BrowserAnimationsModule,
-                SqxFrameworkModule,
-                SqxFrameworkModule.forRoot(),
-            ],
-        }),
-    ],
 } as Meta;

 const Template: Story<AvatarComponent> = (args: AvatarComponent) => ({
--- a/frontend/src/app/framework/angular/status-icon.component.html
+++ b/frontend/src/app/framework/angular/status-icon.component.html
@ -8,7 +8,7 @@
    <div *ngSwitchCase="'Completed'" class="status-icon status-icon-success status-icon-{{size}}" [title]="statusText">
        <i class="icon-checkmark"></i>
    </div>
-    <div *ngSwitchDefault class="status status-icon-status-icon status-icon-{{size}} spin" [title]="statusText">
-        <i class="icon-hour-glass"></i>
+    <div *ngSwitchDefault class="status-icon status-icon-pending status-icon-{{size}} spin" [title]="statusText">
+        <i class="icon-hourglass_top"></i>
    </div>
 </ng-container>
--- a/frontend/src/app/framework/angular/status-icon.component.ts
+++ b/frontend/src/app/framework/angular/status-icon.component.ts
@ -15,7 +15,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 })
 export class StatusIconComponent {
    @Input()
-    public status?: 'Started' | 'Failed' | 'Success' | 'Completed' | 'Pending';
+    public status?: 'Started' | 'Failed' | 'Success' | 'Completed' | 'Pending' | string;

    @Input()
    public statusText: string | undefined | null;
--- a/frontend/src/app/framework/angular/status-icon.stories.tsx
+++ b/frontend/src/app/framework/angular/status-icon.stories.tsx
@ -0,0 +1,82 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Meta, Story } from '@storybook/angular/types-6-0';
+import { StatusIconComponent } from '@app/framework';
+
+export default {
+    title: 'Framework/StatusIcon',
+    component: StatusIconComponent,
+    argTypes: {
+        status: {
+            control: 'enum',
+            options: [
+                'Failed',
+                'Success',
+                'Completed',
+                'Pending',
+            ],
+        },
+        statusText: {
+            control: 'text',
+        },
+        size: {
+            control: 'enum',
+            options: [
+                'sm',
+                'md',
+                'lg',
+            ],
+        },
+    },
+} as Meta;
+
+const Template: Story<StatusIconComponent> = (args: StatusIconComponent) => ({
+    props: args,
+});
+
+export const Success = Template.bind({});
+
+Success.args = {
+    status: 'Success',
+};
+
+export const Completed = Template.bind({});
+
+Completed.args = {
+    status: 'Completed',
+};
+
+export const Failed = Template.bind({});
+
+Failed.args = {
+    status: 'Failed',
+};
+
+export const Pending = Template.bind({});
+
+Pending.args = {
+    status: 'Pending',
+};
+
+export const Started = Template.bind({});
+
+Started.args = {
+    status: 'Started',
+};
+
+export const SizeSm = Template.bind({});
+
+SizeSm.args = {
+    size: 'sm',
+};
+
+export const SizeLg = Template.bind({});
+
+SizeLg.args = {
+    size: 'lg',
+};
--- a/frontend/src/app/theme/_common.scss
+++ b/frontend/src/app/theme/_common.scss
@ -322,7 +322,7 @@ hr {
    }

    &-pending {
-        color: inherit;
+        color: $color-text;
    }

    &-warning {
--- a/frontend/src/app/theme/icomoon/demo.html
+++ b/frontend/src/app/theme/icomoon/demo.html
@ -9,10 +9,24 @@
    <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;149)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;150)</small></h1>
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-hourglass_top"></span>
+                <span class="mls"> icon-hourglass_top</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e992" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe992;" 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-wrap_text"></span>
--- a/frontend/src/app/theme/icomoon/fonts/icomoon.eot
+++ b/frontend/src/app/theme/icomoon/fonts/icomoon.eot
--- a/frontend/src/app/theme/icomoon/fonts/icomoon.svg
+++ b/frontend/src/app/theme/icomoon/fonts/icomoon.svg
@ -153,6 +153,7 @@
 <glyph unicode="&#xe98f;" glyph-name="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
 <glyph unicode="&#xe990;" glyph-name="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
 <glyph unicode="&#xe991;" glyph-name="wrap_text" d="M726 468.667q70 0 120-50t50-120-50-120-120-50h-86v-86l-128 128 128 128v-86h96q34 0 60 26t26 60-26 60-60 26h-566v84h556zM854 724.667v-84h-684v84h684zM170 128.667v84h256v-84h-256z" />
+<glyph unicode="&#xe992;" glyph-name="hourglass_top" d="M256 852.667v-256l170-170-170-172v-254h512v256l-170 170 170 170v256h-512zM682 234.667v-150h-340v150l170 170z" />
 <glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
 <glyph unicode="&#xf00a;" glyph-name="grid" d="M292.571 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf0c9;" glyph-name="list1" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />
--- a/frontend/src/app/theme/icomoon/fonts/icomoon.ttf
+++ b/frontend/src/app/theme/icomoon/fonts/icomoon.ttf
--- a/frontend/src/app/theme/icomoon/fonts/icomoon.woff
+++ b/frontend/src/app/theme/icomoon/fonts/icomoon.woff
--- a/frontend/src/app/theme/icomoon/selection.json
+++ b/frontend/src/app/theme/icomoon/selection.json
--- a/frontend/src/app/theme/icomoon/style.css
+++ b/frontend/src/app/theme/icomoon/style.css
@ -1,10 +1,10 @@
@font-face {
  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?t85fog');
-  src:  url('fonts/icomoon.eot?t85fog#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?t85fog') format('truetype'),
-    url('fonts/icomoon.woff?t85fog') format('woff'),
-    url('fonts/icomoon.svg?t85fog#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?krjhn9');
+  src:  url('fonts/icomoon.eot?krjhn9#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?krjhn9') format('truetype'),
+    url('fonts/icomoon.woff?krjhn9') format('woff'),
+    url('fonts/icomoon.svg?krjhn9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
@ -25,6 +25,9 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-hourglass_top:before {
+  content: "\e992";
+}
 .icon-wrap_text:before {
  content: "\e991";
 }