UI enhancements including moving application pool settings into its o…

…wn tab on site creation.
microsoft · Aug 14, 2017 · f14f77a · f14f77a
1 parent cd7003e
commit f14f77a
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 32 deletions.
diff --git a/app/files/file-list-item.ts b/app/files/file-list-item.ts
@@ -18,7 +18,7 @@ import { ApiFile, ApiFileType } from './file';
                 </div>
                 <div *ngIf="_editing">
                     <i></i>
-                    <input class="form-control" type="text" 
+                    <input class="form-control inline-block" type="text" 
                            [ngModel]="model.name"
                            (ngModelChange)="rename($event)"
                            (keyup.esc)="onCancel($event)"

diff --git a/app/webserver/default-documents/file-list.component.ts b/app/webserver/default-documents/file-list.component.ts
@@ -32,7 +32,9 @@ import { DefaultDocumentsService } from './default-documents.service';
     `,
     styles: [`
         .grid-item fieldset {
-            padding: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+            padding-right: 0;
         }
     `]
 })

diff --git a/app/webserver/files/webfile-list-item.ts b/app/webserver/files/webfile-list-item.ts
@@ -18,7 +18,7 @@ import { WebFileType, WebFile } from './webfile';
                 </div>
                 <div *ngIf="_editing">
                     <i></i>
-                    <input class="form-control" type="text" 
+                    <input class="form-control inline-block" type="text" 
                            [ngModel]="model.name"
                            (ngModelChange)="rename($event)"
                            (keyup.esc)="onCancel($event)"

diff --git a/app/webserver/request-filtering/file-extensions.component.ts b/app/webserver/request-filtering/file-extensions.component.ts
@@ -13,13 +13,13 @@ import { RequestFilteringService } from './request-filtering.service';
         <div *ngIf="model" class="grid-item row" [class.background-editing]="_editing">
 
             <div class="actions">
-                <button class="no-border no-editing" [class.inactive]="!_editable" title="Edit" (click)="onEdit()">
+                <button class="no-border" *ngIf="!_editing" [class.inactive]="!_editable" title="Edit" (click)="onEdit()">
                     <i class="fa fa-pencil color-active"></i>
                 </button>
-                <button class="no-border editing" [disabled]="!isValid() || locked" title="Ok" (click)="onSave()">
+                <button class="no-border" *ngIf="_editing" [disabled]="!isValid() || locked" title="Ok" (click)="onSave()">
                     <i class="fa fa-check color-active"></i>
                 </button>
-                <button class="no-border editing" title="Cancel" (click)="onDiscard()">
+                <button class="no-border" title="Cancel" *ngIf="_editing" (click)="onDiscard()">
                     <i class="fa fa-times red"></i>
                 </button>
                 <button class="no-border" *ngIf="model.id" [disabled]="locked" title="Delete" [class.inactive]="!_editable" (click)="onDelete()">
@@ -32,7 +32,7 @@ import { RequestFilteringService } from './request-filtering.service';
                 <label class="hidden-xs" [hidden]="!_editing">Extension</label>
                 <i class="fa fa-circle green hidden-xs" *ngIf="model.allow && !_editing"></i>
                 <i class="fa fa-ban red hidden-xs" *ngIf="!model.allow && !_editing"></i>
-                <input class="form-control" type="text" [disabled]="locked" [(ngModel)]="model.extension" throttle required />
+                <input class="form-control" *ngIf="_editing" type="text" [disabled]="locked" [(ngModel)]="model.extension" throttle required />
                 <span *ngIf="!_editing">{{model.extension}}</span>
                 <div *ngIf="!_editing">
                     <br class="visible-xs" />

diff --git a/app/webserver/request-tracing/provider.component.ts b/app/webserver/request-tracing/provider.component.ts
@@ -28,7 +28,7 @@ import {RequestTracingService} from './request-tracing.service';
             </div>
             <fieldset>
                 <label [hidden]="!_isEditing">Name</label>
-                <input class="form-control name" type="text" [(ngModel)]="model.name" required throttle/>
+                <input class="form-control name" *ngIf="_isEditing" type="text" [(ngModel)]="model.name" required throttle/>
                 <span>{{model.name}}</span>
             </fieldset>
             <fieldset class="name" *ngIf="_isEditing">

diff --git a/app/webserver/request-tracing/rule.component.ts b/app/webserver/request-tracing/rule.component.ts
@@ -36,10 +36,10 @@ import { RequestTracingService } from './request-tracing.service';
             <fieldset class="hidden-xs col-sm-3 col-md-3 col-lg-2" *ngIf="!_isEditing">
                 <span>{{model.status_codes.join(", ")}}</span>
             </fieldset>
-            <fieldset class="hidden-xs hidden-sm col-md-3 col-lg-2">
+            <fieldset class="hidden-xs hidden-sm col-md-3 col-lg-2" *ngIf="!_isEditing">
                 <span *ngIf="hasMinReqExecutionTime()">{{model.min_request_execution_time}}</span>
             </fieldset>
-            <fieldset class="hidden-xs hidden-sm hidden-md col-lg-2">
+            <fieldset class="hidden-xs hidden-sm hidden-md col-lg-2" *ngIf="!_isEditing">
                 <span *ngIf="model.event_severity != 'ignore'">{{friendlyEventSeverity(model.event_severity)}}</span>
             </fieldset>
             <div *ngIf="_isEditing" id="statusCodes" class="col-xs-12">

diff --git a/app/webserver/websites/new-website.component.ts b/app/webserver/websites/new-website.component.ts
@@ -29,31 +29,25 @@ import { ApplicationPool } from '../app-pools/app-pool';
                     </div>
                     <server-file-selector #fileSelector [types]="['directory']" (selected)="onSelectPath($event)"></server-file-selector>
                 </fieldset>
-
-                <section>
-                    <div class="collapse-heading" data-toggle="collapse" data-target="#applicationPool">
-                        <h2>Application Pool</h2>
-                    </div>
-                    <div id="applicationPool" class="collapse in">
-                        <fieldset>
-                            <label>Create Own Application Pool</label>
-                            <switch class="block" [(model)]="_createAppPool" (modelChange)="onNewAppPool($event)">{{_createAppPool ? "Yes" : "No"}}</switch>
-                        </fieldset>
-                        <div *ngIf="!_createAppPool">
-                            <fieldset>
-                                <app-pool-item [model]="site.application_pool" [actions]="'view,recycle,start,stop'"></app-pool-item>
-                            </fieldset>
-                            <button [class.background-active]="poolSelect.opened" (click)="selectAppPool()">Select <i class="fa fa-caret-down"></i></button>
-                            <selector #poolSelect class="container-fluid">
-                                <app-pools #appPools [actions]="'view'" [lazy]="true" (itemSelected)="onAppPoolSelected($event)"></app-pools>
-                            </selector>
-                        </div>
-                    </div>
-                </section>
             </tab>
             <tab [name]="'Bindings'">
                 <binding-list #bindingList [(model)]="site.bindings"></binding-list>
             </tab>
+            <tab [name]="'Application Pool'">
+                <fieldset>
+                    <label>Create Own Application Pool</label>
+                    <switch class="block" [(model)]="_createAppPool" (modelChange)="onNewAppPool($event)">{{_createAppPool ? "Yes" : "No"}}</switch>
+                </fieldset>
+                <div *ngIf="!_createAppPool">
+                    <fieldset>
+                        <app-pool-item [model]="site.application_pool" [actions]="'view,recycle,start,stop'"></app-pool-item>
+                    </fieldset>
+                    <button [class.background-active]="poolSelect.opened" (click)="selectAppPool()">Select <i class="fa fa-caret-down"></i></button>
+                    <selector #poolSelect class="container-fluid">
+                        <app-pools #appPools [actions]="'view'" [lazy]="true" (itemSelected)="onAppPoolSelected($event)"></app-pools>
+                    </selector>
+                </div>
+            </tab>
         </tabs>
         <p class="pull-right">
             <button (click)="onSave()" [disabled]="!IsValid() || bindingList.isEditing()">
@@ -73,6 +67,10 @@ import { ApplicationPool } from '../app-pools/app-pool';
         ul {
             margin-bottom: 32px;
         }
+
+        p {
+            margin: 10px 0;
+        }
     `]
 })
 export class NewWebSiteComponent {
@@ -150,6 +148,7 @@ export class NewWebSiteComponent {
     private onNewAppPool(value: boolean) {
         if (!value) {
             this.site.application_pool = null;
+            setTimeout(() => this.selectAppPool(), 10);
         }
     }
 

diff --git a/app/webserver/websites/website-general.component.ts b/app/webserver/websites/website-general.component.ts
@@ -51,7 +51,7 @@ import { AppPoolsService } from '../app-pools/app-pools.service';
             </tab>
             <tab [name]="'Application Pool'">
                 <button [class.background-active]="poolSelect.opened" (click)="selectAppPool()">Change Application Pool <i class="fa fa-caret-down"></i></button>
-                <selector #poolSelect class="container-fluid">
+                <selector #poolSelect class="container-fluid create">
                     <app-pools #appPools [actions]="'view'" [lazy]="true" (itemSelected)="onAppPoolSelected($event)"></app-pools>
                 </selector>
                 <app-pool-details [model]="site.application_pool"></app-pool-details>