Close buttons fixed.

8 years ago · ccf8413c3b
17 changed files with 116 additions and 111 deletions
--- a/src/Squidex/app/features/content/pages/content/content-page.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.html
@ -6,7 +6,7 @@
            <div class="panel-title-row">
                <div class="float-right">
                    <span *ngIf="isNewMode">
-                        <button type="button" class="btn btn-default" (click)="saveAsDraft()" title="CTRL + S">
+                        <button type="button" class="btn btn-secondary" (click)="saveAsDraft()" title="CTRL + S">
                            Save as Draft
                        </button>

--- a/src/Squidex/app/features/content/shared/content-item.component.html
+++ b/src/Squidex/app/features/content/shared/content-item.component.html
@ -33,7 +33,7 @@
    </div>
 </td>
 <td *ngIf="isReference">
-    <button type="button" class="btn btn-link btn-danger" (click)="deleting.emit(); $event.stopPropagation()">
-        <i class="icon-bin2"></i>
+    <button type="button" class="btn btn-link btn-secondary" (click)="deleting.emit(); $event.stopPropagation()">
+        <i class="icon-close"></i>
    </button>
 </td>
--- a/src/Squidex/app/features/dashboard/pages/dashboard-page.component.scss
+++ b/src/Squidex/app/features/dashboard/pages/dashboard-page.component.scss
@ -26,7 +26,7 @@
 .subtext {
    margin-top: .5rem;
    margin-bottom: .8rem;
-    color: $color-subtext;
+    color: $color-text-decent;
 }

 .card {
@ -50,13 +50,13 @@
    }

    &-text {
-        color: $color-empty;
+        color: $color-text-decent;
        font-weight: normal;
        font-size: .9rem;
    }

    &-more {
-        color: $color-empty;
+        color: $color-text-decent;
        font-weight: normal;
        font-size: .8rem;
        margin-top: .4rem;
@ -96,7 +96,7 @@
    }

    &-label {
-        color: $color-subtext;
+        color: $color-text-decent;
    }

    &-value {
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.scss
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.scss
@ -32,11 +32,11 @@ $field-header: #e7ebef;
    }

    &-hidden {
-        color: $color-subtext;
+        color: $color-text-decent;
    }

    &-partitioning {
-        color: $color-subtext;
+        color: $color-text-decent;
        font-weight: normal;
        font-size: .85rem;
    }
--- a/src/Squidex/app/features/settings/pages/languages/language.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.html
@ -42,20 +42,20 @@
                            <div class="fallback-language" *ngFor="let language of fallbackLanguages; let i = index" dnd-sortable [sortableIndex]="i">
                                {{language.englishName}}

-                                <button type="button" class="btn btn-link btn-sm float-right" (click)="removeFallbackLanguage(language)">
-                                    <i class="icon-bin2"></i>
+                                <button type="button" class="btn btn-link btn-secondary btn-sm float-right" (click)="removeFallbackLanguage(language)">
+                                    <i class="icon-close"></i>
                                </button>
                            </div>
                        </div>

-                        <form class="form-inline fallback-form" [formGroup]="addLanguageForm" (ngSubmit)="addLanguage()" *ngIf="otherLanguages.length > 0">
+                        <form class="form-inline fallback-form" (ngSubmit)="addLanguage()" *ngIf="otherLanguages.length > 0">
                            <div class="form-group mr-1">
-                                <select class="form-control fallback-select" formControlName="language">
-                                    <option *ngFor="let language of otherLanguages" [ngValue]="language">{{language.englishName}}</option>
+                                <select class="form-control fallback-select" [(ngModel)]="otherLanguage" name="otherLanguage">
+                                    <option *ngFor="let otherLanguage of otherLanguages" [ngValue]="otherLanguage">{{otherLanguage.englishName}}</option>
                                </select>
                            </div>

-                            <button type="submit" class="btn btn-success" [disabled]="!addLanguageForm.valid">Add Language</button>
+                            <button type="submit" class="btn btn-success">Add Language</button>
                        </form>
                    </div>
                </div>
--- a/src/Squidex/app/features/settings/pages/languages/language.component.scss
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.scss
@ -9,7 +9,7 @@ $field-header: #e7ebef;
    }

    &-optional {
-        color: $color-subtext;
+        color: $color-text-decent;
    }
 }

--- a/src/Squidex/app/features/settings/pages/languages/language.component.ts
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.ts
@ -6,7 +6,7 @@
 */

 import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 import { Subscription } from 'rxjs';

 import {
@ -39,6 +39,7 @@ export class LanguageComponent implements OnInit, OnChanges, OnDestroy {
    public saving = new EventEmitter<AppLanguageDto>();

    public otherLanguages: ImmutableArray<AppLanguageDto>;
+    public otherLanguage: AppLanguageDto;

    public fallbackLanguages: AppLanguageDto[] = [];

@ -52,13 +53,6 @@ export class LanguageComponent implements OnInit, OnChanges, OnDestroy {
            isOptional: [false, []]
        });

-    public addLanguageForm =
-        this.formBuilder.group({
-            language: [null,
-                Validators.required
-            ]
-        });
-
    constructor(
        private readonly formBuilder: FormBuilder
    ) {
@ -92,19 +86,21 @@ export class LanguageComponent implements OnInit, OnChanges, OnDestroy {
    }

    public addLanguage() {
-        this.addFallbackLanguage(this.addLanguageForm.controls['language'].value);
+        this.addFallbackLanguage(this.otherLanguage);
    }

    public removeFallbackLanguage(language: AppLanguageDto) {
        this.fallbackLanguages.splice(this.fallbackLanguages.indexOf(language), 1);

        this.otherLanguages = this.otherLanguages.push(language);
+        this.otherLanguage = this.otherLanguages.values[0];
    }

    public addFallbackLanguage(language: AppLanguageDto) {
        this.fallbackLanguages.push(language);

        this.otherLanguages = this.otherLanguages.filter(l => l.iso2Code !== language.iso2Code);
+        this.otherLanguage = this.otherLanguages.values[0];
    }

    public save() {
@ -138,6 +134,7 @@ export class LanguageComponent implements OnInit, OnChanges, OnDestroy {
                this.allLanguages.filter(l =>
                    this.language.iso2Code !== l.iso2Code &&
                    this.language.fallback.indexOf(l.iso2Code) < 0);
+            this.otherLanguage = this.otherLanguages.values[0];
        }

        if (this.language) {
--- a/src/Squidex/app/framework/angular/dialog-renderer.component.ts
+++ b/src/Squidex/app/framework/angular/dialog-renderer.component.ts
@ -8,6 +8,8 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';

+import { fadeAnimation } from './animations';
+
 import {
    DialogRequest,
    DialogService,
@ -19,7 +21,10 @@ import { ModalView } from './../utils/modal-view';
@Component({
    selector: 'sqx-dialog-renderer',
    styleUrls: ['./dialog-renderer.component.scss'],
-    templateUrl: './dialog-renderer.component.html'
+    templateUrl: './dialog-renderer.component.html',
+    animations: [
+        fadeAnimation
+    ]
 })
 export class DialogRendererComponent implements OnDestroy, OnInit {
    private dialogSubscription: Subscription;
--- a/src/Squidex/app/framework/angular/slider.component.scss
+++ b/src/Squidex/app/framework/angular/slider.component.scss
@ -11,7 +11,7 @@ $thumb-margin: ($thumb-size - $bar-height) * .5;
        & {
            @include border-radius($bar-height * .5);
            position: relative;
-            border: 1px solid $color-control;
+            border: 1px solid $color-input-border;
            margin-bottom: 1.25rem;
            margin-top: .25rem;
            margin-right: $thumb-size * .5;
@ -30,7 +30,7 @@ $thumb-margin: ($thumb-size - $bar-height) * .5;
            position: absolute;
            width: $thumb-size;
            height: $thumb-size;
-            border: 1px solid $color-control;
+            border: 1px solid $color-input-border;
            background: $color-dark-foreground;
            margin-top: -$thumb-margin;
            margin-left: -$thumb-size * .5;
--- a/src/Squidex/app/framework/angular/stars.component.scss
+++ b/src/Squidex/app/framework/angular/stars.component.scss
@ -4,7 +4,7 @@
 $color-gold: #ffd700;

 .many-stars {
-    color: $color-empty;
+    color: $color-text-decent;
 }

 .stars {
--- a/src/Squidex/app/framework/angular/toggle.component.scss
+++ b/src/Squidex/app/framework/angular/toggle.component.scss
@ -50,7 +50,7 @@ $toggle-button-size: $toggle-height - .3rem;
        }

        &.disabled {
-            background: $color-disabled;
+            background: $color-input-disabled;
            border: 0;
            cursor: not-allowed;
        }
--- a/src/Squidex/app/shared/components/history.component.scss
+++ b/src/Squidex/app/shared/components/history.component.scss
@ -24,6 +24,6 @@
    &-created {
        font-size: .65rem;
        font-weight: normal;
-        color: $color-empty;
+        color: $color-text-decent;
    }
 }
--- a/src/Squidex/app/theme/_bootstrap-vars.scss
+++ b/src/Squidex/app/theme/_bootstrap-vars.scss
@ -34,9 +34,9 @@ $alert-danger-text:         #fff;
 $btn-secondary-bg:          $color-theme-secondary;
 $btn-secondary-border:      $color-theme-secondary;

-$input-bg-disabled:         $color-disabled;
+$input-bg-disabled:         $color-input-disabled;
 $input-border-color:        $color-input;
-$input-color-placeholder:   $color-empty;
+$input-color-placeholder:   $color-text-decent;

 $badge-default-bg:          $color-badge-default-background;
 $badge-primary-bg:          $color-badge-primary-background;
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@ -321,6 +321,10 @@ a {
            @include build-link-button($color-theme-blue);
        }

+        &.btn-secondary {
+            @include build-link-button($color-text-decent);
+        }
+
        &.btn-danger {
            @include build-link-button($color-theme-error);
        }
@ -330,7 +334,7 @@ a {
        }

        &.btn-decent {
-            @include build-link-button($color-subtext);
+            @include build-link-button($color-text-decent);
        }
    }
 }
--- a/src/Squidex/app/theme/_lists.scss
+++ b/src/Squidex/app/theme/_lists.scss
@ -57,7 +57,7 @@
            // Each row is white and a has a border.
            & {
                @include transition(all .2s ease);
-                background: $color-table;
+                background: $color-table-background;
                border: 1px solid $color-table-border;
                border-bottom: 2px solid $color-table-border;
                margin-bottom: .5rem;
@ -92,7 +92,7 @@
    &-row {
        & {
            padding: 1rem 1.25rem;
-            background: $color-table;
+            background: $color-table-background;
            border: 1px solid $color-border;
            border-top: 0;
            border-bottom-width: 2px;
@ -111,7 +111,7 @@
        }

        &-empty {
-            color: $color-empty;
+            color: $color-text-decent;
        }

        // Detail row for expandable rows.
--- a/src/Squidex/app/theme/_static.scss
+++ b/src/Squidex/app/theme/_static.scss
@ -25,7 +25,7 @@ noscript {
    // Lightweight, table like headline.
    &-headline {
        & {
-            color: $color-empty;
+            color: $color-text-decent;
            display: block;
            margin-bottom: 1rem;
            font-size: 1.3rem;
@ -51,7 +51,7 @@ noscript {
    }

    &-password-signup {
-        color: $color-empty;
+        color: $color-text-decent;
    }

    &-section {
--- a/src/Squidex/app/theme/_vars.scss
+++ b/src/Squidex/app/theme/_vars.scss
@ -1,94 +1,93 @@
-$color-background: #eef1f4;
-
-$color-border: #dae4e9;
-$color-border-dark: darken($color-border, 20%);
-
-$color-title: #000;
-$color-text: #373a3c;
-$color-text-decent: #a9b2bb;
-$color-subtext: $color-text-decent;
-$color-empty: $color-text-decent;
-$color-control: rgba(0, 0, 0, .15);
-$color-input: #dbe4eb;
-$color-input-border: rgba(0, 0, 0, .15);
-$color-input-background: #fff;
-$color-disabled: #eef1f4;
-
-$color-extern-google: #d34836;
-$color-extern-google-icon: #b02c1b;
-$color-extern-microsoft: #004185;
-$color-extern-microsoft-icon: #1b67b7;
-$color-extern-github: #191919;
-$color-extern-github-icon: #4a4a4a;
-
-$color-theme-blue: #438cef;
-$color-theme-blue-dark: #3d7dd5;
-$color-theme-blue-light: #9ebeea;
+$color-background:          #eef1f4;
+
+$color-border:              #dae4e9;
+$color-border-dark:         #b3bbbf;
+
+$color-title:               #000;
+$color-text:                #373a3c;
+$color-text-decent:         #a9b2bb;
+
+$color-input:               #dbe4eb;
+$color-input-background:    #fff;
+$color-input-disabled:      #eef1f4;
+$color-input-border:        rgba(0, 0, 0, .15);
+
+$color-extern-google:           #d34836;
+$color-extern-google-icon:      #b02c1b;
+$color-extern-microsoft:        #004185;
+$color-extern-microsoft-icon:   #1b67b7;
+$color-extern-github:           #191919;
+$color-extern-github-icon:      #4a4a4a;
+
+$color-theme-blue:          #438cef;
+$color-theme-blue-dark:     #3d7dd5;
+$color-theme-blue-light:    #9ebeea;
 $color-theme-blue-lightest: #d9e8fc;
-$color-theme-secondary: #dce5e8;
+$color-theme-secondary:     #dce5e8;

-$color-theme-green: #4cc159;
-$color-theme-green-dark: #47b353;
+$color-theme-green:         #4cc159;
+$color-theme-green-dark:    #47b353;
+$color-theme-orange:        #ffb136;
+$color-theme-orange-dark:   #a65b00;

-$color-theme-orange: #ffb136;
-$color-theme-orange-dark: #a65b00;
+$color-theme-error:         #f00;
+$color-theme-error-dark:    #c00;

-$color-theme-error: #f00;
-$color-theme-error-dark: darken($color-theme-error, 5%);
-
-$color-dark1-background: #2e3842;
-$color-dark1-foreground: #6a7681;
-$color-dark1-border1: #37424c;
-$color-dark1-border2: #222a32;
-$color-dark1-focus-foreground: #fff;
+$color-dark1-background:        #2e3842;
+$color-dark1-foreground:        #6a7681;
+$color-dark1-border1:           #37424c;
+$color-dark1-border2:           #222a32;
+$color-dark1-focus-foreground:  #fff;
 $color-dark1-active-background: #273039;

-$color-dark2-background: #273039;
-$color-dark2-foreground: #6a7681;
-$color-dark2-border1: #37424c;
-$color-dark2-border2: #222a32;
-$color-dark2-focus-foreground: #fff;
+$color-dark2-background:        #273039;
+$color-dark2-foreground:        #6a7681;
+$color-dark2-border1:           #37424c;
+$color-dark2-border2:           #222a32;
+$color-dark2-focus-foreground:  #fff;
 $color-dark2-active-background: #222931;
-$color-dark2-control: #2e3842;
-$color-dark2-separator: #2e3842;
+$color-dark2-control:           #2e3842;
+$color-dark2-separator:         #2e3842;
+
+$color-panel-icon:              #a2b0b6;

-$color-panel-icon: #a2b0b6;
+$color-badge-success-background:    #d6ffdb;
+$color-badge-success-foreground:    #3bab48;

-$color-badge-success-background: #d6ffdb;
-$color-badge-success-foreground: #3bab48;
+$color-badge-warning-background:    #ffe8cc;
+$color-badge-warning-foreground:    #efa243;

-$color-badge-warning-background: #ffe8cc;
-$color-badge-warning-foreground: #efa243;
+$color-badge-danger-background:     #fcc;
+$color-badge-danger-foreground:     #ef4343;

-$color-badge-danger-background: #fcc;
-$color-badge-danger-foreground: #ef4343;
+$color-badge-info-background:       #d0f2fb;
+$color-badge-info-foreground:       #43ccef;

-$color-badge-info-background: #d0f2fb;
-$color-badge-info-foreground: #43ccef;
+$color-badge-primary-background:    #cce1ff;
+$color-badge-primary-foreground:    #438cef;

-$color-badge-primary-background: #cce1ff;
-$color-badge-primary-foreground: #438cef;
+$color-badge-default-background:    #e6e6e6;
+$color-badge-default-foreground:    #999;

-$color-badge-default-background: #e6e6e6;
-$color-badge-default-foreground: #999;
+$color-table-background:    #fff;
+$color-table-footer:        #ecf2f6;

-$color-table: #fff;
-$color-table-footer: #ecf2f6;
-$color-table-border: $color-border;
-$color-table-header: $color-text-decent;
+$color-table-border:        $color-border;
+$color-table-header:        $color-text-decent;

 $color-modal-header-background: #2e3842;
 $color-modal-header-foreground: #6a7681;

-$color-dark-black: #000;
-$color-dark-foreground: #fff;
+$color-dark-black:          #000;
+$color-dark-foreground:     #fff;
+
+$size-navbar-height:        3.25rem;

-$size-navbar-height: 3.25rem;
-$size-sidebar-width: 7rem;
+$size-sidebar-width:        7rem;

-$panel-padding: 1.5rem;
-$panel-header: 5.4rem;
-$panel-sidebar: 3.75rem;
-$panel-light-background: #fff;
+$panel-padding:             1.5rem;
+$panel-header:              5.4rem;
+$panel-sidebar:             3.75rem;
+$panel-light-background:    #fff;

-$asset-height: 13rem;
+$asset-height:              13rem;