From 0bbc380dab9e23cfc2592b472eff7ab5c80d520a Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Sat, 14 Apr 2018 19:29:33 +0200
Subject: [PATCH] Panel for plans page.

---
 .../pages/plans/plans-page.component.html     | 130 ++++++++----------
 1 file changed, 61 insertions(+), 69 deletions(-)

diff --git a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
index 67960107e..a45818252 100644
--- a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
+++ b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
@@ -1,86 +1,78 @@
 <sqx-title message="{app} | Plans | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
 <sqx-panel desiredWidth="61rem">
-    <div class="panel-header">
-        <div class="panel-title-row">
-            <div class="float-right">
-                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Plans (CTRL + SHIFT + R)">
-                    <i class="icon-reset"></i> Refresh
-                </button>
+    <ng-container title>
+        Update Plan
+    </ng-container>
 
-                <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
-            </div>
-            
-            <h3 class="panel-title">Update Plan</h3>
-        </div>
+    <ng-container menu>
+        <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Plans (CTRL + SHIFT + R)">
+            <i class="icon-reset"></i> Refresh
+        </button>
 
-        <a class="panel-close" sqxParentLink>
-            <i class="icon-close"></i>
-        </a>
-    </div>
+        <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
+    </ng-container>
 
-    <div class="panel-main">
-        <div class="panel-content">
-            <div *ngIf="plans">
-                <div class="panel-alert panel-alert-danger" *ngIf="!planOwned">
-                    You have not created the subscription. Therefore you cannot change the plan.
-                </div>
+    <ng-container content>
+        <ng-container *ngIf="plans">
+            <div class="panel-alert panel-alert-danger" *ngIf="!planOwned">
+                You have not created the subscription. Therefore you cannot change the plan.
+            </div>
 
-                <div class="text-muted text-center empty" *ngIf="plans.plans.length === 0">
-                    No plan configured, this app has unlimited usage.
-                </div>
+            <div class="text-muted text-center empty" *ngIf="plans.plans.length === 0">
+                No plan configured, this app has unlimited usage.
+            </div>
 
-                <div class="clearfix">
-                    <div class="card plan float-left" *ngFor="let plan of plans.plans">
-                        <div class="card-header text-center">
-                            <h4 class="card-title">{{plan.name}}</h4>
-                            <h5 class="plan-price">{{plan.costs}}</h5>
-    
-                            <small class="text-muted">Per Month</small>
-                        </div>
-                        <div class="card-body">
-                            <div class="plan-fact text-center">
-                                <div>
-                                    <strong>{{plan.maxApiCalls | sqxKNumber}}</strong> API Calls
-                                </div>
-                                <div>
-                                    {{plan.maxAssetSize | sqxFileSize}} Storage
-                                </div>
-                                <div>
-                                    {{plan.maxContributors}} Contributors
-                                </div>
-                            </div>
-                        
-                            <button *ngIf="plan.id === plans.currentPlanId" class="btn btn-block btn-link btn-success plan-selected">
-                                &#10003; Selected
-                            </button>
-                            
-                            <button *ngIf="plan.id !== plans.currentPlanId" class="btn btn-block btn-success" [disabled]="isDisabled || !planOwned" (click)="changePlan(plan.id)">
-                                Change
-                            </button>
-                        </div>
-                        <div class="card-footer" *ngIf="plan.yearlyId">
-                            <div class="text-center">
-                                <h5 class="plan-price">{{plan.yearlyCosts}}</h5>
+            <div class="clearfix">
+                <div class="card plan float-left" *ngFor="let plan of plans.plans">
+                    <div class="card-header text-center">
+                        <h4 class="card-title">{{plan.name}}</h4>
+                        <h5 class="plan-price">{{plan.costs}}</h5>
 
-                                <small class="text-muted">Per Year</small>
+                        <small class="text-muted">Per Month</small>
+                    </div>
+                    <div class="card-body">
+                        <div class="plan-fact text-center">
+                            <div>
+                                <strong>{{plan.maxApiCalls | sqxKNumber}}</strong> API Calls
                             </div>
+                            <div>
+                                {{plan.maxAssetSize | sqxFileSize}} Storage
+                            </div>
+                            <div>
+                                {{plan.maxContributors}} Contributors
+                            </div>
+                        </div>
+                    
+                        <button *ngIf="plan.id === plans.currentPlanId" class="btn btn-block btn-link btn-success plan-selected">
+                            &#10003; Selected
+                        </button>
+                        
+                        <button *ngIf="plan.id !== plans.currentPlanId" class="btn btn-block btn-success" [disabled]="isDisabled || !planOwned" (click)="changePlan(plan.id)">
+                            Change
+                        </button>
+                    </div>
+                    <div class="card-footer" *ngIf="plan.yearlyId">
+                        <div class="text-center">
+                            <h5 class="plan-price">{{plan.yearlyCosts}}</h5>
 
-                            <button *ngIf="plan.yearlyId === plans.currentPlanId" class="btn btn-block btn-link btn-success plan-selected">
-                                &#10003; Selected
-                            </button>
-                            
-                            <button *ngIf="plan.yearlyId !== plans.currentPlanId" class="btn btn-block btn-success" [disabled]="isDisabled || !planOwned" (click)="changePlan(plan.yearlyId)">
-                                Change
-                            </button>
+                            <small class="text-muted">Per Year</small>
                         </div>
+
+                        <button *ngIf="plan.yearlyId === plans.currentPlanId" class="btn btn-block btn-link btn-success plan-selected">
+                            &#10003; Selected
+                        </button>
+                        
+                        <button *ngIf="plan.yearlyId !== plans.currentPlanId" class="btn btn-block btn-success" [disabled]="isDisabled || !planOwned" (click)="changePlan(plan.yearlyId)">
+                            Change
+                        </button>
                     </div>
                 </div>
+            </div>
 
-                <div *ngIf="plans.hasPortal" class="billing-portal-link">
-                    Go to <a target="_blank" href="{{portalUrl}}">Billing Portal</a> for payment history and subscription overview.
-                </div>
+            <div *ngIf="plans.hasPortal" class="billing-portal-link">
+                Go to <a target="_blank" href="{{portalUrl}}">Billing Portal</a> for payment history and subscription overview.
             </div>
-        </div>
-    </div>
+        </ng-container>
+    </ng-container>
 </sqx-panel>
\ No newline at end of file