From dd175a37fdb36455ba1e503e16bd0a69ac2849cc Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 18 Oct 2019 19:29:16 +0200
Subject: [PATCH] Status buttons changed.

---
 .../Contents/ContentGrain.cs                        |  2 +-
 .../pages/contents/contents-page.component.html     |  9 +++++++--
 .../pages/contents/contents-page.component.scss     |  4 ++++
 .../pages/contents/contents-page.component.ts       | 13 +++++--------
 .../content/shared/content-status.component.html    |  4 ++--
 .../content/shared/content-status.component.scss    |  4 ----
 .../content/shared/content-status.component.ts      |  3 +++
 .../features/content/shared/content.component.html  |  9 ++++++++-
 8 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/Squidex.Domain.Apps.Entities/Contents/ContentGrain.cs b/src/Squidex.Domain.Apps.Entities/Contents/ContentGrain.cs
index 37443a04c..0de01a4a2 100644
--- a/src/Squidex.Domain.Apps.Entities/Contents/ContentGrain.cs
+++ b/src/Squidex.Domain.Apps.Entities/Contents/ContentGrain.cs
@@ -100,7 +100,7 @@ namespace Squidex.Domain.Apps.Entities.Contents
                                     Operation = "Published",
                                     Data = c.Data,
                                     Status = Status.Published,
-                                    StatusOld = status
+                                    StatusOld = default
                                 });
                         }
 
diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
index fb881a063..e543f7b81 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.html
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
@@ -77,8 +77,13 @@
         <div class="selection" *ngIf="selectionCount > 0">
             {{selectionCount}} items selected&nbsp;&nbsp;
 
-            <button type="button" class="btn btn-secondary mr-1" *ngFor="let status of nextStatuses" (click)="changeSelectedStatus(status)">
-                Status to {{status}}
+            <button type="button" class="btn btn-outline-secondary btn-status mr-1" *ngFor="let status of nextStatuses | sqxKeys" (click)="changeSelectedStatus(status)">
+                <sqx-content-status
+                    [status]="status"
+                    [statusColor]="nextStatuses[status]"
+                    showLabel="true"
+                    small="true">
+                </sqx-content-status>
             </button>
             
             <button type="button" class="btn btn-danger" *ngIf="selectionCanDelete"
diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.scss b/src/Squidex/app/features/content/pages/contents/contents-page.component.scss
index 951212239..8966039af 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.scss
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.scss
@@ -28,6 +28,10 @@
     font-size: .8rem;
 }
 
+.btn-status {
+    background: $color-dark-foreground;
+}
+
 .selection {
     background: $color-table-footer;
     border-bottom: 2px solid $color-border;
diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.ts b/src/Squidex/app/features/content/pages/contents/contents-page.component.ts
index 37e2e81fe..a6d5a8ee0 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.ts
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.ts
@@ -41,7 +41,7 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit {
     public selectionCount = 0;
     public selectionCanDelete = false;
 
-    public nextStatuses: ReadonlyArray<string> = [];
+    public nextStatuses: { [name: string]: string } = {};
 
     public language: AppLanguageDto;
     public languageMaster: AppLanguageDto;
@@ -197,12 +197,11 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit {
         this.selectedAll = this.contentsState.snapshot.contents.length > 0;
         this.selectionCount = 0;
         this.selectionCanDelete = true;
-
-        const allActions = {};
+        this.nextStatuses = {};
 
         for (let content of this.contentsState.snapshot.contents) {
             for (const info of content.statusUpdates) {
-                allActions[info.status] = info.color;
+                this.nextStatuses[info.status] = info.color;
             }
         }
 
@@ -210,9 +209,9 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit {
             if (this.selectedItems[content.id]) {
                 this.selectionCount++;
 
-                for (const action in allActions) {
+                for (const action in this.nextStatuses) {
                     if (!content.statusUpdates) {
-                        delete allActions[action];
+                        delete this.nextStatuses[action];
                     }
                 }
 
@@ -223,8 +222,6 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit {
                 this.selectedAll = false;
             }
         }
-
-        this.nextStatuses = Object.keys(allActions);
     }
 
     private updateQueries() {
diff --git a/src/Squidex/app/features/content/shared/content-status.component.html b/src/Squidex/app/features/content/shared/content-status.component.html
index ed082cf65..6679161bb 100644
--- a/src/Squidex/app/features/content/shared/content-status.component.html
+++ b/src/Squidex/app/features/content/shared/content-status.component.html
@@ -1,12 +1,12 @@
 <ng-container *ngIf="scheduledTo; else noSchedule">
     <span class="content-status pending mr-1"title="{{tooltipText}}" titlePosition="top">
-        <i class="icon-clock"></i>
+        <i class="icon-clock" [class.icon-sm]="small"></i>
     </span>
 </ng-container>
 
 <ng-template #noSchedule>
     <span class="content-status default mr-1" [style.color]="statusColor" title="{{tooltipText}}" titlePosition="top">
-        <i class="icon-circle"></i>
+        <i class="icon-circle" [class.icon-sm]="small"></i>
     </span>
 </ng-template>
 
diff --git a/src/Squidex/app/features/content/shared/content-status.component.scss b/src/Squidex/app/features/content/shared/content-status.component.scss
index c9345b133..ca2b22755 100644
--- a/src/Squidex/app/features/content/shared/content-status.component.scss
+++ b/src/Squidex/app/features/content/shared/content-status.component.scss
@@ -2,10 +2,6 @@
 @import '_mixins';
 
 .content-status {
-    & {
-        vertical-align: middle;
-    }
-
     &.default {
         color: $color-text-decent;
     }
diff --git a/src/Squidex/app/features/content/shared/content-status.component.ts b/src/Squidex/app/features/content/shared/content-status.component.ts
index 1c70a3559..ad8d2ad6c 100644
--- a/src/Squidex/app/features/content/shared/content-status.component.ts
+++ b/src/Squidex/app/features/content/shared/content-status.component.ts
@@ -34,6 +34,9 @@ export class ContentStatusComponent {
     @Input()
     public showLabel = false;
 
+    @Input()
+    public small = false;
+
     public get tooltipText() {
         if (this.scheduledAt) {
             return `Will be set to '${this.scheduledTo}' at ${this.scheduledAt.toStringFormat('LLLL')}`;
diff --git a/src/Squidex/app/features/content/shared/content.component.html b/src/Squidex/app/features/content/shared/content.component.html
index 51cd12140..2fcf6279f 100644
--- a/src/Squidex/app/features/content/shared/content.component.html
+++ b/src/Squidex/app/features/content/shared/content.component.html
@@ -14,7 +14,14 @@
             <ng-container *sqxModal="dropdown;closeAlways:true">
                 <div class="dropdown-menu" [sqxAnchoredTo]="buttonOptions" position="bottom-left" @fade>
                     <a class="dropdown-item" *ngFor="let info of content.statusUpdates" (click)="emitChangeStatus(info.status)">
-                        Change to <i class="icon-circle icon-sm" [style.color]="info.color"></i> {{info.status}}
+                        Change to 
+
+                        <sqx-content-status
+                            [status]="info.status"
+                            [statusColor]="info.color"
+                            showLabel="true"
+                            small="true">
+                        </sqx-content-status>
                     </a>
                     <a class="dropdown-item" (click)="emitClone(); dropdown.hide()" *ngIf="canClone">
                         Clone