Updating FunctionDevComponent to collapse log-streaming and function-console controls when viewport becomes too narrow

client/src/app/function-console/function-console.component.html

@@ -1,5 +1,6 @@
 <div class= "console-container">
-    <div class="console-toolbar">
+
+    <div *ngIf="!controlsCollapsed" class="console-toolbar">
         <span class="console-empty-space"></span>
         <span class="link action" (click)="clearConsole()"
             tabindex="0" role="button" attr.aria-label="{{ 'logStreaming_clear' | translate }}">
@@ -26,6 +27,46 @@
             {{ 'logStreaming_compress' | translate }}
         </span>
     </div>
+
+    <div *ngIf="controlsCollapsed"
+        class="menu-container"
+        (focusin)="onMenuFocusIn()"
+        (focusout)="onMenuFocusOut()">
+        <div class="menu-button-container">
+            <span role="button"
+                tabindex="0"
+                [attr.title]="'actions' | translate"
+                class="link action"
+                (click)="toggleMenu()"
+                [activate-with-keys]>
+                <span class="fa fa-ellipsis-v" aria-hidden="true"></span>
+            </span>
+        </div>
+        <ul *ngIf="!menuHidden" role="menu" [attr.aria-label]="'context_menu' | translate" (click)="hideMenu()">
+            <li role="menuitem" tabindex="0" class="link action"
+                (click)="clearConsole()"
+                [activate-with-keys]
+                [attr.aria-label]="'logStreaming_clear' | translate">
+                <span class="fa fa-book"></span>
+                {{ 'logStreaming_clear' | translate }}
+            </li>
+            <li role="menuitem" tabindex="0" class="link action"
+                (click)="copyLogs($event)"
+                [activate-with-keys]
+                [attr.aria-label]="'logStreaming_copyLogs' | translate">
+                <span class="fa fa-clone"></span>
+                {{ 'copypre_copy' | translate }}
+            </li>
+            <li role="menuitem" tabindex="0" class="link action"
+                (click)="isExpanded ? compress() : expand()"
+                [activate-with-keys]
+                [attr.aria-label]="(isExpanded ? 'logStreaming_compress' : 'logStreaming_expand') | translate">
+                <span [ngClass]="isExpanded ? 'fa fa-compress' : 'fa fa-expand'"></span>
+                {{ (isExpanded ? 'logStreaming_compress' : 'logStreaming_expand') | translate }}
+            </li>
+        </ul>
+    </div>
+
     <pre id= "console-body" class="console-body" tabindex="0"
          (keydown)="handleKeyPress($event)"
          (click)="focusConsole()">

client/src/app/function-console/function-console.component.scss

@@ -85,4 +85,67 @@ span.linux-cursor {
     to{
         visibility: hidden;
     }
+}
+
+.menu-container{
+    position: relative;
+    top: -13px;
+
+    .menu-button-container{
+        position: relative;
+        float: right;
+        text-align:
+        right; z-index: 1;
+
+        [role=button]{
+            display: inline-block;
+            padding: 6px 10px 6px 10px;
+            margin: 0;
+            background: $body-bg-color;
+
+            span{
+                padding: 0px;
+            }
+        }
+    }
+
+    [role=menu]{
+        position: relative;
+        float: right;
+        padding: 0px;
+        margin: 0px 5px 0px 0px;
+        box-shadow: 0 4px 8px 0 rgba($default-text-color,.14);
+        border: 1px solid rgba(204,204,204,.8);
+        z-index: 1;
+
+        [role=menuitem]{
+            display: block;
+            padding:
+            6px 10px 6px 10px;
+            margin: 0;
+            background: $body-bg-color;
+
+            span{
+                padding-right: 5px;
+            }
+        }
+    }
+}
+
+:host-context(#app-root[theme=dark]){
+    .menu-container{
+        .menu-button-container{
+            [role=button]{
+                background: $body-bg-color-dark;
+            }
+        }
+
+        [role=menu]{
+            border: 1px solid #605e5c;
+
+            [role=menuitem]{
+                background: $body-bg-color-dark;
+            }
+        }
+    }
 }

client/src/app/function-console/function-console.component.ts

@@ -1,4 +1,4 @@
-import { OnDestroy, Component, ViewContainerRef, ViewChild, ComponentRef, ComponentFactory, ComponentFactoryResolver, EventEmitter, Output } from '@angular/core';
+import { OnDestroy, Component, ViewContainerRef, ViewChild, ComponentRef, ComponentFactory, ComponentFactoryResolver, EventEmitter, Output, Input, SimpleChanges, OnChanges } from '@angular/core';
 import { FunctionAppContextComponent } from '../shared/components/function-app-context-component';
 import { FunctionAppService } from '../shared/services/function-app.service';
 import { BroadcastService } from '../shared/services/broadcast.service';
@@ -22,15 +22,19 @@ import { UtilitiesService } from '../shared/services/utilities.service';
     templateUrl: './function-console.component.html',
     styleUrls: ['./function-console.component.scss', '../function-dev/function-dev.component.scss'],
 })
-export class FunctionConsoleComponent extends FunctionAppContextComponent implements OnDestroy {
+export class FunctionConsoleComponent extends FunctionAppContextComponent implements OnChanges, OnDestroy {
 
     public appName: string;
     public isLinux = false;
     public isExpanded = false;
-    public command = {'left': '', 'mid': ' ', 'right': '', 'complete': ''};
+    public command = { 'left': '', 'mid': ' ', 'right': '', 'complete': '' };
     public dir: string;
     public isFocused: boolean;
     public leftSideText = '';
+    public menuHidden = true;
+    @Input() controlsCollapsed: boolean;
+
+    private _menuHasFocus: boolean;
     private _tabKeyPointer: number;
     private _resourceId: string;
     private _functionName: string;
@@ -49,7 +53,7 @@ export class FunctionConsoleComponent extends FunctionAppContextComponent implem
     private _messageComponent: ComponentFactory<any>;
     private _errorComponent: ComponentFactory<any>;
     private _msgComponents: ComponentRef<any>[] = [];
-    @ViewChild('prompt', {read: ViewContainerRef})
+    @ViewChild('prompt', { read: ViewContainerRef })
     private _prompt: ViewContainerRef;
     @Output() expandClicked = new EventEmitter<boolean>();
 
@@ -68,6 +72,8 @@ export class FunctionConsoleComponent extends FunctionAppContextComponent implem
         return this.viewInfoEvents
             .subscribe(view => {
                 this.isFocused = false;
+                this.menuHidden = true;
+                this._menuHasFocus = false;
                 this._resourceId = view.siteDescriptor.resourceId;
                 this._functionName = view.functionDescriptor.name;
                 this.clearConsole();
@@ -84,7 +90,13 @@ export class FunctionConsoleComponent extends FunctionAppContextComponent implem
                         this._updateDirectory();
                     });
             }
-        );
+            );
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['controlsCollapsed']) {
+            this.menuHidden = true;
+        }
     }
 
     ngOnDestroy() {
@@ -171,9 +183,11 @@ export class FunctionConsoleComponent extends FunctionAppContextComponent implem
     /**
      * Compress the console interface
      */
-    compress() {
+    compress(preventEvent?: boolean) {
         this.isExpanded = false;
-        this.expandClicked.emit(false);
+        if (!preventEvent) {
+            this.expandClicked.emit(false);
+        }
     }
 
     /**
@@ -624,7 +638,7 @@ export class FunctionConsoleComponent extends FunctionAppContextComponent implem
         if (this.isLinux) {
             const result = cmd.split(ConsoleConstants.linuxNewLine);
             this.dir = result[result.length - 1];
-        }else {
+        } else {
             const result = cmd.split(ConsoleConstants.windowsNewLine);
             this.dir = result[result.length - 1];
         }
@@ -708,9 +722,30 @@ export class FunctionConsoleComponent extends FunctionAppContextComponent implem
             },
         );
         res.subscribe(data => {
-            const {Output} = data.json();
+            const { Output } = data.json();
             this.dir = Output.trim() + ConsoleConstants.singleBackslash + this._functionName;
             this._setLeftSideText();
         });
     }
+
+    public hideMenu() {
+        this.menuHidden = true;
+    }
+
+    public toggleMenu() {
+        this.menuHidden = !this.menuHidden;
+    }
+
+    public onMenuFocusOut() {
+        this._menuHasFocus = false;
+        setTimeout(_ => {
+            if (!this._menuHasFocus) {
+                this.hideMenu();
+            }
+        });
+    }
+
+    public onMenuFocusIn() {
+        this._menuHasFocus = true;
+    }
 }

client/src/app/function-dev/function-dev.component.html

@@ -50,7 +50,7 @@ <h3>{{'functionDev_githubSelect' | translate}}</h3>
   [class.bottom-tabs-expanded]="bottomBarExpanded"
   [class.bottom-tabs-maximized]="expandLogs">
 
-  <section id="editor-section">
+  <section #editorSection id="editor-section">
     <div id="command-bar-container">
       <h2
         tabindex="0" class="filename-title">
@@ -239,64 +239,50 @@ <h3>{{'functionDev_githubSelect' | translate}}</h3>
   </aside>
 
   <footer id="bottom-tabs-bar">
+    <div class="tab-heading" (click)="clickBottomTab(bottomBarExpanded ? bottomTab : 'logs')">
+      <h4 tabindex="0"
+        class="tab-label"
+        (keydown)="keyDown($event, 'clickBottomTab', bottomBarExpanded ? bottomTab : 'logs')">
+          <i *ngIf="bottomBarExpanded" class="fa fa-chevron-down"></i>
+          <i *ngIf="!bottomBarExpanded" class="fa fa-chevron-up"></i>
+      </h4>
+    </div>
+
     <div class="tab-heading" (click)="clickBottomTab('logs')">
       <h4 [class.tab-label-disabled]="bottomTab !== 'logs'"
         [class.tab-label-selected]="bottomTab === 'logs'"
         tabindex="0"
         (keydown)="keyDown($event, 'clickBottomTab', 'logs')">{{ 'logStreaming_logs' | translate }}</h4>
-
-      <h4 tabindex="0"
-        class="tab-label"
-        (keydown)="keyDown($event, 'clickBottomTab', 'logs')">
-          <i *ngIf="bottomTab !== 'logs'" class="fa fa-chevron-up"></i>
-          <i *ngIf="bottomTab === 'logs'" class="fa fa-chevron-down"></i>
-      </h4>
     </div>
 
     <div *ngIf="showErrorsAndWarnings | async" class="tab-heading" (click)="clickBottomTab('errors')">
       <h4 [class.tab-label-disabled]="bottomTab !== 'errors'"
         [class.tab-label-selected]="bottomTab === 'errors'"
         tabindex="0"
-        (keydown)="keyDown($event, 'clickBottomTab', 'logs')">{{ 'diagnostics_errorsAndWarnings' | translate }}</h4>
-
-      <h4 tabindex="0"
-        class="tab-label"
-        (keydown)="keyDown($event, 'clickBottomTab', 'errors')">
-          <i *ngIf="bottomTab !== 'errors'" class="fa fa-chevron-up"></i>
-          <i *ngIf="bottomTab === 'errors'" class="fa fa-chevron-down"></i>
-      </h4>
+        (keydown)="keyDown($event, 'clickBottomTab', 'errors')">{{ 'diagnostics_errorsAndWarnings' | translate }}</h4>
     </div>
 
     <div *ngIf="showConsole" class="tab-heading" (click)="clickBottomTab('console')">
       <h4 [class.tab-label-disabled]="bottomTab !== 'console'"
         [class.tab-label-selected]="bottomTab === 'console'"
         tabindex="0"
         (keydown)="keyDown($event, 'clickBottomTab', 'console')">{{ 'feature_consoleName' | translate }}</h4>
-
-      <h4 tabindex="0"
-        class="tab-label"
-        (keydown)="keyDown($event, 'clickBottomTab', 'console')">
-          <i *ngIf="bottomTab !== 'console'" class="fa fa-chevron-up"></i>
-          <i *ngIf="bottomTab === 'console'" class="fa fa-chevron-down"></i>
-      </h4>
     </div>
 
     <log-streaming [hidden]="bottomTab !== 'logs'"
+      [controlsCollapsed]="bottomControlsCollapsed"
       [viewInfo]="viewInfo"
-      (closeClicked)="clickBottomTab('logs')"
       (expandClicked)="expandLogsClicked($event)"> </log-streaming>
 
     <errors-warnings *ngIf="showErrorsAndWarnings | async"
       [hidden]="bottomTab !== 'errors'"
       (selectFile)="selectedFileStream.next($event)"
       [viewInfo]="viewInfo"
-      [monacoEditor]="codeEditor"
-      (expandClicked)="expandLogsClicked($event)"
-      (diagnosticDblClicked)="clickRightTab('files')"></errors-warnings>
+      [monacoEditor]="codeEditor"></errors-warnings>
 
     <console [hidden]="bottomTab !== 'console'"
+      [controlsCollapsed]="bottomControlsCollapsed"
       [viewInfo]="viewInfo"
-      (closeClicked)="clickBottomTab('console')"
       (expandClicked)="expandLogsClicked($event)"> </console>
 
   </footer>

client/src/app/function-dev/function-dev.component.scss

@@ -182,11 +182,18 @@
     flex-grow: 1;
 }
 
-
 .tab-heading {
     display: inline-block;
 }
 
+.tab-label {
+    margin-left: 0px;
+}
+
+.tab-label-disabled, .tab-label-selected {
+    margin-left: 5px;
+}
+
 .tab-label-dev {
     padding-left: 0;
     margin-left: 0;
@@ -234,6 +241,7 @@
   grid-column: 1;
   -ms-grid-row: 1;
   grid-row: 1;
+  min-width: 550px;
   #text-editor-container {
     height: calc(100% - 40px);
     border-bottom: $border;