Bugfixes

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -63,7 +63,7 @@
     </table>
 </div>
 
-<div class="modal" *sqxModalView="modalDialog">
+<div class="modal" *sqxModalView="modalDialog" [@fade]>
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 			<div class="modal-header">

src/Squidex/app/features/settings/pages/clients/client.component.ts

@@ -11,7 +11,11 @@ import * as Ng2Forms from '@angular/forms';
 import {
     AccessTokenDto,
     AppClientDto,
-    ModalView
+    AppClientsService,
+    fadeAnimation,
+    ModalView,
+    Notification,
+    NotificationService
 } from 'shared';
 
 const ESCAPE_KEY = 27;
@@ -19,7 +23,10 @@ const ESCAPE_KEY = 27;
 @Ng2.Component({
     selector: 'sqx-client',
     styles,
-    template
+    template,
+    animations: [
+        fadeAnimation
+    ]
 })
 export class ClientComponent {
     public isRenaming = false;
@@ -55,7 +62,9 @@ export class ClientComponent {
         });
 
     constructor(
-        private readonly formBuilder: Ng2Forms.FormBuilder
+        private readonly appClientsService: AppClientsService,
+        private readonly formBuilder: Ng2Forms.FormBuilder,
+        private readonly notifications: NotificationService
     ) {
     }
 
@@ -90,5 +99,15 @@ export class ClientComponent {
             this.isRenaming = false;
         }
     }
+
+    public createToken(client: AppClientDto) {
+        this.appClientsService.createToken(this.appName, client)
+            .subscribe(token => {
+                this.appClientToken = token;
+                this.modalDialog.show();
+            }, error => {
+                this.notifications.notify(Notification.error('Failed to retrieve access token. Please retry.'));
+            });
+    }
 }
 

src/Squidex/app/shared/components/app-form.component.html

@@ -8,7 +8,7 @@
 	<div class="form-group">
 		<label for="app-name">Name</label>
         
-        <div class="errors-box" *ngIf="createForm.get('name').invalid && createForm.get('name').dirty">
+        <div class="errors-box" *ngIf="createForm.get('name').invalid && createForm.get('name').dirty" [@fade]>
             <div class="errors">
                 <span *ngIf="createForm.get('name').hasError('required')">
                     Name is required.

src/Squidex/app/shared/components/app-form.component.ts

@@ -11,11 +11,16 @@ import * as Ng2Forms from '@angular/forms';
 import { AppsStoreService } from './../services/apps-store.service';
 import { AppDto, CreateAppDto } from './../services/apps.service';
 
+import { fadeAnimation } from 'framework';
+
 const FALLBACK_NAME = 'my-app';
 
 @Ng2.Component({
     selector: 'sqx-app-form',
-    template
+    template,
+    animations: [
+        fadeAnimation
+    ]
 })
 export class AppFormComponent implements Ng2.OnInit {
     @Ng2.Input()

src/Squidex/app/shell/pages/internal/apps-menu.component.html

@@ -2,7 +2,7 @@
     <li class="nav-item dropdown">
         <span class="nav-link dropdown-toggle" id="app-name" (click)="modalMenu.toggle()">{{appName}}</span>
 
-        <div class="dropdown-menu" *sqxModalView="modalMenu" closeAlways="true">
+        <div class="dropdown-menu" *sqxModalView="modalMenu" closeAlways="true" [@fade]>
             <a class="dropdown-item all-apps"  [routerLink]="['/app']">
                 <span class="all-apps-text">All Apps</span> 
                 <span class="all-apps-pill tag tag-pill tag-default">{{apps.length || 0}}</span>
@@ -23,7 +23,7 @@
     </li>
 </ul>
 
-<div class="modal" *sqxModalView="modalDialog">
+<div class="modal" *sqxModalView="modalDialog" [@fade]>
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 			<div class="modal-header">

src/Squidex/app/shell/pages/internal/apps-menu.component.ts

@@ -11,6 +11,7 @@ import * as Ng2Router from '@angular/router';
 import {
     AppDto,
     AppsStoreService,
+    fadeAnimation,
     ModalView
 } from 'shared';
 
@@ -19,7 +20,10 @@ const FALLBACK_NAME = 'Apps Overview';
 @Ng2.Component({
     selector: 'sqx-apps-menu',
     styles,
-    template
+    template,
+    animations: [
+        fadeAnimation
+    ]
 })
 export class AppsMenuComponent implements Ng2.OnInit, Ng2.OnDestroy {
     private appsSubscription: any | null = null;

src/Squidex/app/shell/pages/internal/profile-menu.component.html

@@ -8,7 +8,7 @@
             </span>
         </span>
 
-        <div class="dropdown-menu" *sqxModalView="modalMenu" closeAlways="true">
+        <div class="dropdown-menu" *sqxModalView="modalMenu" closeAlways="true" [@fade]>
             <a class="dropdown-item" (click)="logout()">Logout</a>
         </div>
     </li>

src/Squidex/app/shell/pages/internal/profile-menu.component.ts

@@ -9,13 +9,17 @@ import * as Ng2 from '@angular/core';
 
 import {
     AuthService,
+    fadeAnimation,
     ModalView
 } from 'shared';
 
 @Ng2.Component({
     selector: 'sqx-profile-menu',
     styles,
-    template
+    template,
+    animations: [
+        fadeAnimation
+    ]
 })
 export class ProfileMenuComponent implements Ng2.OnInit, Ng2.OnDestroy {
     private authenticationSubscription: any | null = null;

src/Squidex/app/theme/_bootstrap.scss

@@ -175,12 +175,28 @@
         }
 
         .close {
-            color: $color-modal-header-foreground;
+            & {
+                @include opacity(1);
+                @include text-shadow-none;
+                color: $color-modal-header-foreground;
+                font-size: 1.6rem;
+                font-weight: 400;
+            }
+
+            &:hover {
+                color: lighten($color-modal-header-foreground, 15%);
+            }
         }
     }
 
     &-content {
-        @include box-shadow(0, 6px, 16px, .2px);
+        @include box-shadow(0, 6px, 16px, .4);
+    }
+
+    &-dialog {
+        @media (min-width: 576px) {
+            margin-top: 70px;
+        }
     }
 }
 

src/Squidex/app/theme/_vars.scss

@@ -6,9 +6,6 @@ $color-border: #dbe4eb;
 $color-text: #373a3c;
 $color-empty: #777;
 
-$color-modal-header-background: #273039;
-$color-modal-header-foreground: #6a7681;
-
 $color-section-media: #ab6eee;
 $color-section-settings: #ff5800;
 $color-section-content: #07a6ff;
@@ -30,6 +27,9 @@ $color-dark-background: #2e3842;
 $color-dark-selected: #273039;
 $color-dark-foreground: #6a7681;
 
+$color-modal-header-background: #2e3842;
+$color-modal-header-foreground: #6a7681;
+
 $color-table: #fff;
 $color-table-footer: #ecf2f6;
 $color-table-border: #dbe4eb;