Dashboard

src/Squidex/app/app.module.ts

@@ -41,7 +41,7 @@ export function configCurrency() {
 }
 
 export function configUserReport() {
-    return new UserReportConfig('5e3e70c2-19b8-493a-9fa0-af240d50e0ba');
+    return new UserReportConfig('221afe63-0ca2-42aa-8efe-188d77964a7f');
 }
 
 @NgModule({

src/Squidex/app/features/dashboard/pages/dashboard-page.component.html

@@ -1,12 +1,54 @@
 <sqx-title message="{app} | Dashboard" parameter1="app" value1="{{appName() | async}}"></sqx-title>
 
-<div class="panel panel-light">
+<div class="dashboard">
-    <div class="panel-header">
+    <div>
-        <h3 class="panel-title">Dashboard</h3>
+        <h1>Hi {{profileDisplayName}}</h1>
-    </div>
 
-    <div class="panel-main">
+        <div class="subtext">
-        <div class="panel-content">
+            Welcome to <span class="app-name">{{appName() | async}}</span> dashboard.
         </div>
     </div>
-</div>
+
+    <div>
+        <a class="card" [routerLink]="['schemas', { showDialog: true }]">
+            <div class="card-block">
+                <div class="card-image">
+                    <img src="/images/dashboard-schema.png" />
+                </div>
+
+                <h4 class="card-title">New Schema</h4>
+                <p class="card-text">A schema defines the structure of your content element.</p>
+            </div>
+        </a>
+        <a class="card" href="/api/content/{{appName() | async}}/docs" target="_blank">
+            <div class="card-block">
+                <div class="card-image">
+                    <img src="/images/dashboard-api.png" />
+                </div>
+
+                <h4 class="card-title">API Documentation</h4>
+                <p class="card-text">Swagger compatible documentation for your schemas.</p>
+            </div>
+        </a>
+        <a class="card" (click)="showForum()">
+            <div class="card-block">
+                <div class="card-image">
+                    <img src="/images/dashboard-feedback.png" />
+                </div>
+
+                <h4 class="card-title">Feedback</h4>
+                <p class="card-text">Provide feedback and request features to help us to improve Squidex.</p>
+            </div>
+        </a>
+        <a class="card" href="https://github.com/squidex/squidex" target="_blank">
+            <div class="card-block">
+                <div class="card-image">
+                    <img src="/images/dashboard-github.png" />
+                </div>
+
+                <h4 class="card-title">Github</h4>
+                <p class="card-text">Get the source code from Github and report bugs or ask for support.</p>
+            </div>
+        </a>
+    </div>
+</div> 

src/Squidex/app/features/dashboard/pages/dashboard-page.component.scss

@@ -0,0 +1,65 @@
+@import '_vars';
+@import '_mixins';
+
+.dashboard {
+    padding: 2rem;
+    padding-right: 1rem;
+}
+
+h1 {
+    font-weight: light;
+    font-size: 1.4rem;
+}
+
+.subtext {
+    margin-top: .5rem;
+    margin-bottom: .8rem;
+    color: $color-subtext;
+}
+
+.app-name {
+    color: $color-title;
+}
+
+.card {
+    & {
+        cursor: pointer;
+        margin-right: 1rem;
+        margin-bottom: 1rem;
+        width: 16rem;
+        float: left;
+    }
+
+    &:hover {
+        @include box-shadow(0, 3px, 16px, .2px);
+    }
+
+    &:hover,
+    &:active {
+        text-decoration: none;
+    }
+
+    h4 {
+        color: $color-title;
+    }
+
+    &-block {
+        min-height: 14.5rem;
+    }
+
+    &-image {
+        text-align: center;
+    }
+
+    &-text {
+        font-weight: normal;
+        font-size: .9rem;
+        color: $color-empty;
+    }
+
+    &-title {
+        font-weight: light;
+        font-size: 1.2rem;
+        margin-top: .4rem;
+    }
+}

src/Squidex/app/features/dashboard/pages/dashboard-page.component.ts

@@ -6,22 +6,51 @@
  */
 
 import { Component } from '@angular/core';
+import { Subscription} from 'rxjs';
 
 import {
     AppComponentBase,
     AppsStoreService,
+    AuthService,
     NotificationService,
     UsersProviderService
  } from 'shared';
 
+declare var _urq: any;
+
 @Component({
     selector: 'sqx-dashboard-page',
     styleUrls: ['./dashboard-page.component.scss'],
     templateUrl: './dashboard-page.component.html'
 })
 export class DashboardPageComponent extends AppComponentBase {
-    constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) {
+    private authenticationSubscription: Subscription;
+
+    public profileDisplayName = '';
+
+    constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService,
+        private readonly auth: AuthService
+    ) {
         super(apps, notifications, users);
     }
+
+    public ngOnDestroy() {
+        this.authenticationSubscription.unsubscribe();
+    }
+
+    public ngOnInit() {
+        this.authenticationSubscription =
+            this.auth.isAuthenticated.subscribe(() => {
+                const user = this.auth.user;
+
+                if (user) {
+                    this.profileDisplayName = user.displayName;
+                }
+            });
+    }
+
+    public showForum() {
+        _urq.push(['Feedback_Open']);
+    }
 }
 

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -83,6 +83,7 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit {
             this.schemaName = schema.name;
             this.schemaFields = ImmutableArray.of(schema.fields);
             this.schemaProperties = new SchemaPropertiesDto(schema.name, schema.label, schema.hints);
+
             this.isPublished = schema.isPublished;
         });
     }

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.ts

@@ -6,6 +6,7 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { FormControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
@@ -46,8 +47,9 @@ export class SchemasPageComponent extends AppComponentBase implements OnDestroy,
 
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService,
         private readonly schemasService: SchemasService,
+        private readonly authService: AuthService,
         private readonly messageBus: MessageBus,
-        private readonly authService: AuthService
+        private readonly route: ActivatedRoute
     ) {
         super(apps, notifications, users);
     }
@@ -64,6 +66,12 @@ export class SchemasPageComponent extends AppComponentBase implements OnDestroy,
                 this.updateSchemas(this.schemas, this.schemaQuery = q);
             });
 
+        this.route.params.map(q => q['showDialog']).subscribe(showDialog => {
+            if (showDialog) {
+                this.addSchemaDialog.show();
+            }
+        });
+
         this.messageSubscription =
             this.messageBus.of(SchemaUpdated)
                 .subscribe(m => {

src/Squidex/app/framework/angular/modal-view.directive.ts

@@ -17,7 +17,7 @@ export class ModalViewDirective implements OnChanges, OnInit, OnDestroy {
     private subscription: Subscription;
     private isEnabled = true;
     private clickHandler: Function | null;
-    private renderedView: EmbeddedViewRef<any> | null;
+    private renderedView: EmbeddedViewRef<any> | null = null;
 
     @Input('sqxModalView')
     public modalView: ModalView;

src/Squidex/app/theme/_bootstrap.scss

@@ -37,7 +37,7 @@ body {
 }
 
 .dropdown-menu {
-    @include box-shadow(0, .3px, 16px, .2px);
+    @include box-shadow(0, 3px, 16px, .2px);
     border: 0;
     background: $panel-light-background;
 }

src/Squidex/app/theme/_vars.scss

@@ -3,8 +3,10 @@ $color-background: #eef1f4;
 $color-border: #dae4e9;
 $color-border-dark: darken($color-border, 20%);
 
+$color-title: #000;
 $color-text: #373a3c;
-$color-empty: #777;
+$color-subtext: #818181;
+$color-empty: #949494;
 $color-control: rgba(0, 0, 0, .15);
 
 $color-theme-blue: #438cef;