Space under code container if small resolution

Azure · Feb 28, 2017 · dc5e7e2 · dc5e7e2
1 parent ba343aa
commit dc5e7e2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 39 deletions.
diff --git a/AzureFunctions.AngularClient/src/app/file-explorer/file-explorer.component.scss b/AzureFunctions.AngularClient/src/app/file-explorer/file-explorer.component.scss
@@ -16,7 +16,7 @@
 .file-container {
     flex-grow: 1;
     height: 100%;
-    border: 1px solid #ccc;    
+    border-top: 1px solid #ccc;    
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -33,21 +33,6 @@
     white-space: nowrap;
 }
 
-#lower-panel {
-    border-bottom: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-    position: relative;
-    bottom: 0;
-    width: 100%;
-    display: flex;
-}
-
-#lower-panel > div {
-    text-align: center;
-    padding: 10px;
-    border-right: 1px solid #ccc;
-}
-
 .hidden {
     display: none;
 }

diff --git a/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.html b/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.html
@@ -45,6 +45,8 @@
                                     <i class="fa fa-play"></i>
                                     {{ 'functionDev_saveAndRun' | translate }}
                                 </button>
+                            </span>
+                            <span>
                                 <button *ngIf="!scriptFile.isDirty" [disabled]="!runValid"
                                         [class.custom-button-invert]="runValid"
                                         [class.custom-button-disabled]="!runValid"
@@ -53,6 +55,8 @@
                                     <i class="fa fa-play"></i>
                                     {{ 'run' | translate }}
                                 </button>
+                            </span>
+                            <span>
                                 <button *ngIf="running"
                                         class="custom-button cancel-button"
                                         (click)="cancelCurrentRun()">
@@ -131,27 +135,28 @@
                     <!--class="right-block"-->
                     <div #rightContainer id="sidebar" class="right-container">
 
-                        <div *ngIf="rightTab" class="rigth-container-bar">
-                            <span [class.tab-label-selected]="rightTab==='files'" [class.tab-label]="rightTab!=='files'" (click)="clickRightTab('files')">{{ 'functionDev_viewFiles' | translate }}</span>
-                            <span [class.tab-label-selected]="rightTab==='run'" [class.tab-label]="rightTab!=='run'" (click)="clickRightTab('run')">{{ 'test' | translate }}</span>
-                            <span [class.tab-label-selected]="rightTab==='keys'" [class.tab-label]="rightTab!=='keys'" *ngIf="_functionsService?.isMultiKeySupported" (click)="clickRightTab('keys')">{{ 'keys' | translate }}</span>
-                            <span style="flex-grow: 1;"></span>
-                            <span style="padding-right: 10px;" class="tab-label" (click)="clickRightTab(rightTab)"><i class="fa fa-chevron-right"></i></span>
+                        <div *ngIf="rightTab">
+                            <div class="rigth-container-bar">
+                                <span [class.tab-label-selected]="rightTab==='files'" [class.tab-label]="rightTab!=='files'" (click)="clickRightTab('files')">{{ 'functionDev_viewFiles' | translate }}</span>
+                                <span [class.tab-label-selected]="rightTab==='run'" [class.tab-label]="rightTab!=='run'" (click)="clickRightTab('run')">{{ 'test' | translate }}</span>
+                                <span [class.tab-label-selected]="rightTab==='keys'" [class.tab-label]="rightTab!=='keys'" *ngIf="_functionsService?.isMultiKeySupported" (click)="clickRightTab('keys')">{{ 'keys' | translate }}</span>
+                                <span style="flex-grow: 1;"></span>
+                                <span style="padding-right: 10px;" class="tab-label" (click)="clickRightTab(rightTab)"><i class="fa fa-chevron-right"></i></span>
+                            </div>
                         </div>
 
-
-                        <div *ngIf="rightTab==='files' && functionInfo" class="dev-full">
+                        <div *ngIf="rightTab==='files' && functionInfo" class="dev-border files-container">
                             <file-explorer [functionInfo]="functionInfo"
-                                           [selectedFile]="scriptFile"
-                                           (selectedFileChange)="selectedFileStream.next($event)"
-                                           (closeClicked)="clickRightTab('files')">
+                                            [selectedFile]="scriptFile"
+                                            (selectedFileChange)="selectedFileStream.next($event)"
+                                            (closeClicked)="clickRightTab('files')">
                             </file-explorer>
                         </div>
 
-                        <div [class.hidden]="rightTab!=='run'" class="dev-full dev-border dev-flex-column" [class.run-container-http]="isHttpFunction">
+                        <div [class.hidden]="rightTab!=='run'" class="dev-full dev-border dev-flex-column">
 
 
-                            <div class="dev-full dev-flex-column run-container" *ngIf="functionInfo">
+                            <div class="dev-full dev-flex-column run-container" *ngIf="functionInfo" [class.run-container-http]="isHttpFunction">
 
                                 <run-http *ngIf="isHttpFunction"
                                           [functionInvokeUrl]="functionInvokeUrl"
@@ -196,13 +201,13 @@
 
                                 <!--<div *ngIf="isHttpFunction">
 
-                                    <div class="control-label">{{ 'logStreaming_logs' | translate }}</div>
+                <div class="control-label">{{ 'logStreaming_logs' | translate }}</div>
 
-                                    <log-streaming [functionInfo]="functionInfo"
-                                                   [isHttpLogs]="true"
-                                                   (closeClicked)="clickRightTab('logs')">
-                                    </log-streaming>
-                                </div>-->
+                <log-streaming [functionInfo]="functionInfo"
+                               [isHttpLogs]="true"
+                               (closeClicked)="clickRightTab('logs')">
+                </log-streaming>
+            </div>-->
 
                             </div>
 
@@ -226,7 +231,7 @@
                             </div>
                         </div>
 
-                        <div [hidden]="rightTab!=='keys'" *ngIf="functionInfo && _functionsService?.isMultiKeySupported" class="dev-full dev-border">
+                        <div [hidden]="rightTab!=='keys'" *ngIf="functionInfo && _functionsService?.isMultiKeySupported" class="dev-full dev-border" style="overflow: auto;">
                             <function-keys [autoSelect]="true" [functionInfo]="functionInfo" [enableKeySelect]="true" (selectedKey)="selectedKeyStream.next($event)"></function-keys>
                             <div style="margin: 25px 0 25px 0;width: 100%;height: 1px;background-color: black;"></div>
                             <function-keys [autoSelect]="autoSelectAdminKey" [enableKeySelect]="true" (selectedKey)="selectedKeyStream.next($event)" [inputChange]="functionInfo"></function-keys>

diff --git a/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.scss b/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.scss
@@ -35,8 +35,6 @@
 
 .top-toolbar {
     flex-grow: 1;
-    border-left: 1px solid #ccc;
-    border-top: 1px solid #ccc;
     margin: 0px;
     margin-left: 0px;
     line-height: 25px;
@@ -197,4 +195,9 @@
 
 .hidden {
     visibility:hidden;
+}
+
+.files-container {
+    flex-grow: 1; 
+    overflow: auto;
 }
diff --git a/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.ts b/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.ts
@@ -259,7 +259,7 @@ export class FunctionDevComponent implements OnChanges, OnDestroy {
 
         if (this.rightContainer) {
             this.rightContainer.nativeElement.style.width = rigthContainerWidth + "px";
-            //this.rightContainer.nativeElement.style.height = functionContainaerHeight + "px";
+            this.rightContainer.nativeElement.style.height = functionContainaerHeight + "px";
         }
 
         if (this.bottomContainer) {