Merge dev

Author: alrod

AzureFunctions.AngularClient/src/app/apps-list/apps-list.component.html

@@ -24,6 +24,7 @@ <h2>{{ 'functionApps' | translate }}</h2><i *ngIf="isLoading" class="fa fa-refre
   </multi-drop-down>
 
   <drop-down id="groupingDropDown"
+    size="large"
     [options]="groupOptions"
     (value)="onGroupSelect($event)">
   </drop-down>

AzureFunctions.AngularClient/src/app/busy-state/busy-state.component.scss

@@ -95,7 +95,7 @@
 .fxs-progress-dots > div:nth-child(4) {
     padding-top: 20px;
     width: 100%;
-    background-color: rgba($body-bg-color, 0.30);
+    background-color: inherit !important;
   }
 
 :host-context(#app-root[theme=dark]){

AzureFunctions.AngularClient/src/app/controls/click-to-edit/click-to-edit.component.html

@@ -1,13 +1,15 @@
-<div class="click-to-edit-wrapper" (mousedown)="onMouseDown($event)">
-  <div *ngIf="!showTextbox && !hiddenText" class="read-only-text">
-    {{control.value || '&#8203;'}}
-  </div>
+<div #container class="click-to-edit-wrapper" (mousedown)="onMouseDown($event)">
+  <ng-container *ngIf="group.valid && !showTextbox && !this?.group?.msStayInEditMode">
+    <div *ngIf="!hiddenText" class="read-only-text">
+      {{control.value || '&#8203;'}}
+    </div>
 
-  <div *ngIf="!showTextbox && hiddenText" class="read-only-text hidden-text">
-    {{ 'hiddenValueClickToShow' | translate }}
-  </div>
+    <div *ngIf="hiddenText" class="read-only-text hidden-text">
+      {{ 'hiddenValueClickToShow' | translate }}
+    </div>
+  </ng-container>
 
-  <div #target [class.hidden]="!showTextbox">
+  <div #target [class.hidden]="group.valid && !showTextbox && !this?.group?.msStayInEditMode">
     <ng-content></ng-content>
   </div>
 </div>

AzureFunctions.AngularClient/src/app/controls/click-to-edit/click-to-edit.component.ts

@@ -9,15 +9,18 @@ import { Subscription } from 'rxjs/Subscription';
 export class CustomFormGroup extends FormGroup {
 
   // Tells other ClickToEdit components when we're in "edit" mode for the form group.
-  public _msShowTextbox: Subject<boolean>;
+  public msShowTextbox: Subject<boolean>;
 
   // Tells other ClickToEdit components which control currently has focus
-  public _msFocusedControl: string;
+  public msFocusedControl: string;
 
   // Overrides the ClickToEdit default behavior to start in edit mode for new items
-  public _msStartInEditMode: boolean;
+  public msStartInEditMode: boolean;
 
-  public _msExistenceState: 'original' | 'new' | 'deleted' = 'original';
+  public msExistenceState: 'original' | 'new' | 'deleted' = 'original';
+
+  // Overrides the ClickToEdit default behavior to remain in edit mode
+  public msStayInEditMode: boolean;
 }
 
 export class CustomFormControl extends FormControl {
@@ -33,7 +36,10 @@ export class CustomFormControl extends FormControl {
 export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
 
   public showTextbox = false;
-  @Input() group: FormGroup;
+  public group: CustomFormGroup;
+  @Input('group') set origGroup(group: FormGroup) {
+    this.group = group as CustomFormGroup;
+  }
   @Input() name: string;
   @Input() placeholder: string;
   @Input() hiddenText: boolean;
@@ -42,6 +48,8 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
   // (i.e. The control's own editable/non-editable state is not affected by the extended fields in the CustomFormGroup its associated with.)
   @Input() alwaysShow: boolean;
 
+  @ViewChild('container') container: ElementRef;
+
   @ViewChild('target') target: ElementRef;
 
   @ContentChild(TextboxComponent) textbox: TextboxComponent;
@@ -52,7 +60,7 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private _targetFocusState: 'focused' | 'blurring' | 'blurred';
   private _focusFunc = (e: FocusEvent) => { this._targetFocusListener(e); };
-  private _blurFunc =  (e: FocusEvent) => { this._targetBlurListener(e); };
+  private _blurFunc = (e: FocusEvent) => { this._targetBlurListener(e); };
 
   constructor() { }
 
@@ -62,20 +70,21 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
     this.control = this.group.controls[this.name] as CustomFormControl;
 
     const group = this.group as CustomFormGroup;
-    if (!group._msShowTextbox) {
-      group._msShowTextbox = new Subject<boolean>();
+
+    if (!group.msShowTextbox) {
+      group.msShowTextbox = new Subject<boolean>();
     }
 
-    this._sub = group._msShowTextbox.subscribe(showTextbox => {
-      this.showTextbox = showTextbox || this.alwaysShow || (group._msStartInEditMode && group.pristine);
-      if (this.showTextbox && (this.group as CustomFormGroup)._msFocusedControl === this.name) {
+    this._sub = group.msShowTextbox.subscribe(showTextbox => {
+      this.showTextbox = showTextbox || this.alwaysShow || (group.msStartInEditMode && group.pristine);
+      if (this.showTextbox && (this.group as CustomFormGroup).msFocusedControl === this.name) {
         setTimeout(() => {
           this._focusChild();
         });
       }
     });
 
-    if (group._msStartInEditMode || this.alwaysShow) {
+    if (group.msStartInEditMode || this.alwaysShow) {
       this.showTextbox = true;
     }
   }
@@ -99,6 +108,14 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private _focusChild() {
+    if (!this.target) {
+      return;
+    }
+
+    if ((this.target.nativeElement as HTMLElement).contains(document.activeElement)) {
+      return;
+    }
+
     if (this.textbox) {
       this.textbox.focus();
     } else if (this.dropdown) {
@@ -111,9 +128,14 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   onMouseDown(event: MouseEvent) {
-    if (!this.showTextbox) {
+    if (!this.showTextbox && !!this.control && !this.control.disabled) {
       event.preventDefault();
+      event.stopPropagation();
       this._updateShowTextbox(true);
+
+      // Simulate 'mousedown', 'mouseup', click' event sequence on the outer-most element.
+      // We do this because the actual clicked element will be removed from the DOM before 'mouseup' and 'click' can occur.
+      this._simulateMouseEvents(this.container.nativeElement, ['mousedown', 'mouseup', 'click']);
     }
   }
 
@@ -145,16 +167,24 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   protected _updateShowTextbox(show: boolean) {
+    // When an instance with alwaysShow === true gains focus:
+    //   1. Do not make the controls in the group become visible if they
+    //      are not currently visible.
+    //   2. If the conrols are already visible because the focus came from
+    //      another control in the group, make sure they stay visible.
+
+    const alwaysShowSuffix = '#ALWAYSSHOW';
     const group = this.group as CustomFormGroup;
+    const name = this.name + (this.alwaysShow ? alwaysShowSuffix : '');
 
-    if (show) {
-      group._msFocusedControl = this.name;
-    } else if (group._msFocusedControl === this.name) {
-      group._msFocusedControl = '';
+    if (show) { //gained focus
+      group.msFocusedControl = name;
+    } else if (group.msFocusedControl === name) { //lost focus
+      group.msFocusedControl = '';
     }
 
-    if (!group._msFocusedControl || group._msFocusedControl === this.name) {
-      group._msShowTextbox.next(show);
+    if (!group.msFocusedControl || (group.msFocusedControl === name && !this.alwaysShow)) {
+      group.msShowTextbox.next(show);
     }
   }
 
@@ -175,4 +205,27 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
     this._targetFocusState = 'focused';
   }
 
+  private _simulateMouseEvents(target: HTMLElement, eventTypes: string[]) {
+    if (!eventTypes || eventTypes.length === 0) {
+      return;
+    }
+
+    let newEvent: MouseEvent;
+    if (typeof (Event) === 'function') {
+      // This isn't IE, so we can use MouseEvent()
+      newEvent = new MouseEvent(eventTypes[0], { bubbles: true, cancelable: true });
+    } else {
+      // This is IE, so we have to use document.createEvent() and .initEvent()
+      newEvent = document.createEvent('MouseEvents');
+      newEvent.initEvent(eventTypes[0], true, true);
+    }
+
+    target.dispatchEvent(newEvent);
+
+    setTimeout(() => {
+      eventTypes.splice(0, 1);
+      this._simulateMouseEvents(target, eventTypes);
+    });
+  }
+
 }

AzureFunctions.AngularClient/src/app/controls/command-bar/command/command.component.html

@@ -1,4 +1,12 @@
-  <a class="list-item clickable command" [class.disabled-command]="disabled" (click)="onClick($event)" tabindex="0" (keydown)="onKeyPress($event)">
+  <a
+    role="button"
+    [attr.aria-label]="displayText"
+    class="list-item clickable command"
+    [class.disabled-command]="disabled"
+    [attr.aria-disabled]="disabled"
+    (click)="onClick($event)"
+    tabindex="0"
+    (keydown)="onKeyPress($event)">
       <span [load-image]="iconUrl" class="icon-small"></span>
       {{displayText}}
   </a>

AzureFunctions.AngularClient/src/app/controls/info-box/info-box.component.html

@@ -1,12 +1,13 @@
 <div
     class="info-box"
+    [ngClass]="typeClass"
     [class.clickable]="!!infoLink"
     (click)="onClick($event)"
     [tabIndex]="!!infoLink ? 0 : -1"
     (keydown)="onKeyPress($event)">
 
     <div class="info-icon-container">
-        <div class="glyphicon glyphicon-info-sign info-icon"></div>
+        <div [load-image]="iconPath" class="info-icon"></div>
     </div>
     <div class="info-text-container">
         <div>{{ infoText }}</div>

AzureFunctions.AngularClient/src/app/controls/info-box/info-box.component.scss

@@ -2,16 +2,15 @@
 
 .info-box{
     margin-bottom: 10px;
-    background-color: $info-box-color;
 
     .info-icon-container{
         display: table-cell;
         vertical-align: middle;
 
         .info-icon{
-            font-size: 30px;
+            height: 40px;
+            width: 40px;
             padding: 5px;
-            color: $primary-color;
         }
     }
 
@@ -31,6 +30,38 @@
     }
 }
 
-.info-box.clickable:hover{
-    background-color: $info-box-color-hover;
+.info-box.info{
+    background-color: $info-box-color;
+    
+    &.clickable:hover{
+        background-color: $info-box-color-hover;
+    }
+}
+
+.info-box.info /deep/ .msportalfx-svg-c15, .info-box.info /deep/ .msportalfx-svg-c16 {
+    fill: $primary-color;
+}
+
+.info-box.warning{
+    background-color: $warning-box-color;
+    
+    &.clickable:hover{
+        background-color: $warning-box-color-hover;
+    }
+}
+
+.info-box.warning /deep/ .msportalfx-svg-c10 {
+    fill: $warning-color;
+}
+
+.info-box.error{
+    background-color: $error-box-color;
+    
+    &.clickable:hover{
+        background-color: $error-box-color-hover;
+    }
+}
+
+.info-box.error /deep/ .msportalfx-svg-c22 {
+    fill: $error-color;
 }

AzureFunctions.AngularClient/src/app/controls/info-box/info-box.component.ts

@@ -11,8 +11,28 @@ export class InfoBoxComponent {
     @Input() infoText: string = null;
     @Input() infoLink: string = null;
 
+    public typeClass = 'info';
+    public iconPath = 'image/info.svg';
+
     constructor() { }
 
+    @Input('typeClass') set type(value: 'info' | 'warning' | 'error') {
+        switch (value) {
+            case 'info':
+                this.typeClass = 'info';
+                this.iconPath = 'image/info.svg';
+                break;
+            case 'warning':
+                this.typeClass = 'warning';
+                this.iconPath = 'image/warning.svg';
+                break;
+            case 'error':
+                this.typeClass = 'error';
+                this.iconPath = 'image/error.svg';
+                break;
+        }
+    }
+
     onClick(event: any) {
         if (!!this.infoLink) {
             window.open(this.infoLink, '_blank');