Vars cleanup

9 years ago · 627dc8ef89
13 changed files with 209 additions and 105 deletions
--- a/src/Squidex/app/features/schemas/pages/schemas-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas-page.component.html
@ -1,14 +1,46 @@
 <sqx-title message="{app} | Schemas" parameter="app" value="{{appName() | async}}"></sqx-title>

-<div class="panel panel-light">
+<div class="panel panel-dark">
    <div class="panel-header">
+        <div>
            <h3 class="panel-title">Schemas</h3>

            <a class="panel-close" dashboardLink>
                <i class="icon-close"></i>
            </a>
        </div>
+        <div class="subheader">
+            <div class="clearfix">
+                <button class="btn btn-new" (click)="createSchema()">
+                    <i class="icon-plus"></i> New Schema            
+                </button>
+            </div>
+            <div class="search-form">
+                <input class="form-control form-control-dark" placeholder="Search for schemas..." />
+
+                <i class="icon-search"></i>
+            </div>
+        </div>
+    </div>

    <div class="panel-content">
+        asdasd
+    </div>
+</div>
+
+<div class="modal" *sqxModalView="modalDialog" [@fade]>
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modalDialog.hide()">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+
+				<h4 class="modal-title">Create Schema</h4>
+			</div>
+
+			<div class="modal-body">
+			</div>
+		</div>
 	</div>
 </div>
--- a/src/Squidex/app/features/schemas/pages/schemas-page.component.scss
+++ b/src/Squidex/app/features/schemas/pages/schemas-page.component.scss
@ -2,6 +2,75 @@
@import '_mixins';

 .panel {
-    min-width: 600px;
-    max-width: 600px;
+    min-width: 450px;
+    max-width: 450px;
+}
+
+.panel-header {
+    min-height: 150px;
+    max-height: 150px;
+}
+
+.subheader {
+    margin-top: 1rem;
+    margin-right: -40px;
+}
+
+.search-form {
+    & {
+        position: relative;
+        margin-top: .5rem;
+    }
+
+    .form-control {
+        padding-left: 50px;
+    }
+
+    .icon-search {
+        @include absolute(8px, auto, auto, 12px);
+        color: $color-accent-dark;
+        font-size: 1.3rem;
+        font-weight: lighter;
+    }
+}
+
+.btn-new {
+    & {
+        padding-left: 0;
+        background: transparent;
+        border: 0;
+        color: darken($color-accent-dark, 15%);
+        font-size: 1.05rem;
+    }
+
+    &:hover {
+        color: darken($color-accent-dark, 5%);
+        outline: 0;
+    }
+
+    &:focus {
+        color: $color-accent-dark;
+        outline: 0;
+    }
+
+    .icon-plus {
+        & {
+            @include circle(24px);
+            background: transparent;
+            border: 2px solid darken($color-accent-dark, 15%);
+            font-size: .8rem;
+            font-weight: bold;
+            vertical-align: baseline;
+            line-height: 20px;
+            display: inline-block;
+        }
+
+        &:hover {
+            border-color: darken($color-accent-dark, 5%);
+        }
+
+        &:focus {
+            border-color: $color-accent-dark;
+        }
+    }
 }
--- a/src/Squidex/app/features/schemas/pages/schemas-page.component.ts
+++ b/src/Squidex/app/features/schemas/pages/schemas-page.component.ts
@ -10,6 +10,8 @@ import { Component } from '@angular/core';
 import {
    AppComponentBase,
    AppsStoreService,
+    fadeAnimation,
+    ModalView,
    NotificationService,
    UsersProviderService
 } from 'shared';
@ -17,11 +19,20 @@ import {
@Component({
    selector: 'sqx-schemas-page',
    styleUrls: ['./schemas-page.component.scss'],
-    templateUrl: './schemas-page.component.html'
+    templateUrl: './schemas-page.component.html',
+    animations: [
+        fadeAnimation
+    ]
 })
 export class SchemasPageComponent extends AppComponentBase {
+    public modalDialog = new ModalView();
+
    constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) {
        super(apps, notifications, users);
    }
+
+    public createSchema() {
+        this.modalDialog.show();
+    }
 }

--- a/src/Squidex/app/shell/pages/app/left-menu.component.html
+++ b/src/Squidex/app/shell/pages/app/left-menu.component.html
@ -1,21 +1,21 @@
 <div class="sidebar panel-dark">
    <ul class="nav nav-pills nav-stacked nav-dark">
-        <li class="nav-item nav-item--schemas" *ngIf="permission !== 'Editor'">
+        <li class="nav-item" *ngIf="permission !== 'Editor'">
            <a class="nav-link" routerLink="schemas" routerLinkActive="active">
                <i class="nav-icon icon-schemas"></i> <span class="nav-text">Schemas</span>
            </a>
        </li>
-        <li class="nav-item nav-item--content">
+        <li class="nav-item">
            <a class="nav-link" routerLink="content" routerLinkActive="active">
                <i class="nav-icon icon-content"></i> <span class="nav-text">Content</span>
            </a>
        </li>
-        <li class="nav-item nav-item--media">
+        <li class="nav-item">
            <a class="nav-link" routerLink="media" routerLinkActive="active">
                <i class="nav-icon icon-media"></i> <span class="nav-text">Media</span>
            </a>
        </li>
-        <li class="nav-item nav-item--settings" *ngIf="permission === 'Owner'">
+        <li class="nav-item" *ngIf="permission === 'Owner'">
            <a class="nav-link" routerLink="settings" routerLinkActive="active">
                <i class="nav-icon icon-settings"></i> <span class="nav-text">Settings</span>
            </a>
--- a/src/Squidex/app/shell/pages/app/left-menu.component.scss
+++ b/src/Squidex/app/shell/pages/app/left-menu.component.scss
@ -8,30 +8,9 @@
    z-index: 100;
 }

-
-@mixin build-item($color) {
-    .nav-link {
-        &.active {
-            & {
-                background: $color-dark-selected;
-            }
-
-            i {
-                color: $color;
-            }
-        }
-    }
-
-    &:hover {
-        i {
-            color: $color;
-        }
-    }
-}
-
 .nav {
-    &-link {
-        padding: 20px;
+    & {
+        text-align: center;
    }

    &-icon {
@ -45,23 +24,28 @@
    &-item {
        & {
            color: $color-dark-foreground;
-            text-align: center;
        }

-        &--media {
-            @include build-item($color-section-media);
+        &:hover {
+            i {
+                color: $color-theme-blue;
+            }
+        }
    }

-        &--content {
-            @include build-item($color-section-content);
+    &-link {
+        & {
+            padding: 20px;
        }

-        &--schemas {
-            @include build-item($color-section-schemas);
+        &.active {
+            & {
+                background: $color-theme-blue-dark;
            }

-        &--settings {
-            @include build-item($color-section-settings);
+            i {
+                color: $color-theme-blue;
+            }
        }
    }
 }
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@ -98,20 +98,6 @@
    }
 }

-.form-hint {
-    font-size: .8rem;
-}
-
-.form-error {
-    @include border-radius(3px);
-    @include truncate;
-    color: $color-accent-dark;
-    margin-top: 4px;
-    margin-bottom: 10px;
-    padding: 6px;
-    background: $color-theme-error;
-}
-
 .ng-invalid {
    &.ng-dirty {
        & {
@ -153,45 +139,46 @@
    }
 }

+.form-hint {
+    font-size: .8rem;
+}
+
+.form-error {
+    @include border-radius(3px);
+    @include truncate;
+    color: $color-accent-dark;
+    margin-top: 4px;
+    margin-bottom: 10px;
+    padding: 6px;
+    background: $color-theme-error;
+}
+
 .form-group {
    &:last-child {
        margin: 0;
    }
 }

-.modal {
-    &-content,
-    &-header {
-        border: 0;
-    }
-
-    &-header {
-        @include border-radius-top(.3rem);
-        background: $color-modal-header-background;
-
-        h4 {
-            color: $color-modal-header-foreground;
-            font-size: 1rem;
-            font-weight: normal;
-        }
-
-        .close {
+.form-control-dark {
    & {
-                @include opacity(1);
-                @include text-shadow-none;
-                color: $color-modal-header-foreground;
-                font-size: 1.6rem;
-                font-weight: 400;
+        @include transition(background-color .3s ease);
+        @include placeholder-color(darken($color-accent-dark, 30%));
+        background: lighten($color-dark-background, 5%);
+        border: 0;
+        color: darken($color-accent-dark, 20%);
    }

-            &:hover {
-                color: lighten($color-modal-header-foreground, 15%);
-            }
-        }
+    &:focus {
+        background: lighten($color-dark-background, 7%);
+        border: 0;
+        color: $color-accent-dark;
    }
+}

+.modal {
    &-content {
        @include box-shadow(0, 6px, 16px, .4);
+        border: 0;
    }

    &-dialog {
@ -269,13 +256,13 @@
            &.active {
                & {
                    @include border-radius(0);
-                    background: $color-dark-selected;
-                    pointer-events: none;
+                    background: $color-dark-background-selected;
+                    border: 0;
                    color: lighten($color-dark-foreground, 30%);
                }

                &:hover {
-                    background: $color-dark-selected;
+                    background: $color-dark-background-selected;
                }
            }
        }
--- a/src/Squidex/app/theme/_vars.scss
+++ b/src/Squidex/app/theme/_vars.scss
@ -1,16 +1,9 @@
-$color-nav-text: #333;
-
 $color-background: #f4f8f9;
 $color-border: #dbe4eb;

 $color-text: #373a3c;
 $color-empty: #777;

-$color-section-media: #ab6eee;
-$color-section-settings: #ff5800;
-$color-section-content: #07a6ff;
-$color-section-schemas: #00e200;
-
 $color-theme-blue: #438cef;
 $color-theme-blue-dark: #3f83df;
 $color-theme-blue-light: #a1c6f7;
@ -22,9 +15,9 @@ $color-theme-green-dark: #47b353;
 $color-theme-error: #f00;
 $color-theme-error-dark: darken($color-theme-error, 5%);

-$color-dark-background: #2e3842;
-$color-dark-selected: #273039;
 $color-dark-foreground: #6a7681;
+$color-dark-background: #2e3842;
+$color-dark-background-selected: #273039;

 $color-modal-header-background: #2e3842;
 $color-modal-header-foreground: #6a7681;
@ -38,8 +31,5 @@ $color-accent-dark: #fff;

 $color-card-footer: #fff;

-$padding-layout-h: 30px;
-$padding-layout-v: 20px;
-
 $size-navbar-height: 52px;
 $size-sidebar-width: 100px;
--- 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
@ -9,6 +9,7 @@
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
 <glyph unicode="&#xe5cd;" glyph-name="close" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
 <glyph unicode="&#xe8b5;" glyph-name="time" d="M534 640.667v-224l192-114-32-54-224 136v256h64zM512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
+<glyph unicode="&#xe8b6;" glyph-name="search" d="M406 340.667c106 0 192 86 192 192s-86 192-192 192-192-86-192-192 86-192 192-192zM662 340.667l212-212-64-64-212 212v34l-12 12c-48-42-112-66-180-66-154 0-278 122-278 276s124 278 278 278 276-124 276-278c0-68-24-132-66-180l12-12h34z" />
 <glyph unicode="&#xe900;" glyph-name="logo" d="M512.34 939.52c-0.174-0.065-226.41-96.5-283.902-294.74-5.545-19.035 40.453-10.673 38.399-31.6-2.517-25.409-55.264-35.821-48.385-108.78 7.001-74.289 74.617-149.342 84.791-194.72v-31.78c-0.615-9.802-5.639-36.405-22.285-49.4-9.13-7.105-21.442-9.661-37.671-7.78-22.528 2.612-31.493 16.604-35.078 27.9-5.881 18.616-0.409 40.331 12.793 50.52 13.271 10.243 15.084 28.513 4.029 40.82-11.055 12.296-30.785 13.965-44.056 3.7-32.168-24.839-45.65-70.615-32.785-111.34 12.146-38.328 44.789-64.147 87.363-69.080 6.067-0.699 11.848-1.040 17.335-1.040 32.945 0 55.27 11.669 68.785 22.32 40.671 32.105 43.867 85.623 44.099 91.62 0.011 0.355 0.022 0.705 0.022 1.060v24.36h0.129v1.64c0 14.177 12.394 25.66 27.707 25.66 14.869 0 26.889-10.843 27.578-24.46v-232.2c-0.255-3.343-3.155-34.297-22.157-49.28-9.118-7.201-21.512-9.802-37.799-7.9-22.54 2.612-31.526 16.605-35.099 27.88-5.893 18.627-0.387 40.341 12.814 50.52 13.271 10.254 15.062 28.523 4.007 40.84-11.044 12.274-30.764 13.945-44.035 3.68-32.191-24.828-45.65-70.615-32.785-111.34 12.122-38.328 44.789-64.136 87.363-69.080 6.067-0.699 11.848-1.040 17.335-1.040 32.945 0 55.262 11.669 68.742 22.32 40.683 32.105 43.879 85.623 44.099 91.62 0.024 0.376 0.042 0.696 0.042 1.040v259l0.129 0.060v1.14c0 14.456 12.65 26.18 28.264 26.18 15.288 0 27.657-11.292 28.135-25.36v-261.020c0-0.355-0.002-0.675 0.022-1.040 0.232-5.987 3.438-59.515 44.121-91.62 13.504-10.652 35.819-22.32 68.764-22.32 5.499 0 11.258 0.341 17.314 1.040 42.562 4.944 75.24 30.763 87.363 69.080 12.876 40.725-0.584 86.501-32.764 111.34-13.294 10.265-33.013 8.584-44.056-3.68-11.055-12.328-9.264-30.586 4.007-40.84 13.201-10.179 18.697-31.893 12.793-50.52-3.561-11.275-12.55-25.268-35.078-27.88-16.217-1.892-28.531 0.675-37.649 7.78-16.716 13.038-21.715 39.783-22.307 49.36v231.8c0.445 13.816 12.612 24.9 27.642 24.9 15.313 0 27.707-11.472 27.707-25.66v-1.64h0.085v-24.36c0-0.365-0.002-0.716 0.022-1.060 0.22-5.987 3.438-59.515 44.121-91.62 13.503-10.651 35.818-22.32 68.763-22.32 5.487 0 11.259 0.332 17.314 1.020 42.562 4.933 75.24 30.783 87.363 69.1 12.876 40.725-0.606 86.49-32.785 111.34-13.294 10.254-33.003 8.576-44.035-3.72-11.067-12.307-9.285-30.557 3.986-40.8 13.201-10.189 18.719-31.904 12.814-50.52-3.561-11.296-12.571-25.299-35.099-27.9-16.194-1.892-28.51 0.686-37.628 7.78-16.716 13.048-21.727 39.785-22.307 49.34v24.24c6.634 62.066 78.084 123.637 85.499 202.32 6.844 72.959-45.943 83.371-48.449 108.78-2.065 20.927 43.943 12.565 38.421 31.6-57.503 198.24-283.718 294.675-283.88 294.74z" />
 <glyph unicode="&#xe901;" glyph-name="plus" d="M810 384.667h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
 <glyph unicode="&#xe905;" glyph-name="pencil" d="M864 960c88.364 0 160-71.634 160-160 0-36.020-11.91-69.258-32-96l-64-64-224 224 64 64c26.742 20.090 59.978 32 96 32zM64 224l-64-288 288 64 592 592-224 224-592-592zM715.578 596.422l-448-448-55.156 55.156 448 448 55.156-55.156z" />
--- 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
@ -55,6 +55,33 @@
      "setId": 2,
      "iconIdx": 157
    },
+    {
+      "icon": {
+        "paths": [
+          "M406 598c106 0 192-86 192-192s-86-192-192-192-192 86-192 192 86 192 192 192zM662 598l212 212-64 64-212-212v-34l-12-12c-48 42-112 66-180 66-154 0-278-122-278-276s124-278 278-278 276 124 276 278c0 68-24 132-66 180l12 12h34z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "search"
+        ],
+        "defaultCode": 59574,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "order": 18,
+        "ligatures": "search",
+        "id": 655,
+        "prevSize": 24,
+        "code": 59574,
+        "name": "search"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 655
+    },
    {
      "icon": {
        "paths": [
--- 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?2yz9dj');
-  src:  url('fonts/icomoon.eot?2yz9dj#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?2yz9dj') format('truetype'),
-    url('fonts/icomoon.woff?2yz9dj') format('woff'),
-    url('fonts/icomoon.svg?2yz9dj#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?66xt8i');
+  src:  url('fonts/icomoon.eot?66xt8i#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?66xt8i') format('truetype'),
+    url('fonts/icomoon.woff?66xt8i') format('woff'),
+    url('fonts/icomoon.svg?66xt8i#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -30,6 +30,9 @@
 .icon-close:before {
  content: "\e5cd";
 }
+.icon-search:before {
+  content: "\e8b6";
+}
 .icon-plus:before {
  content: "\e901";
 }