Templates histroy screen - "YAML" button is not floating anymore. Adj…

…ust Yaml panel be able to scroll to the end of yaml. (argoproj#26) job details screen - adjust yaml panel body to fill full height of panel.
wokeGit · Nov 22, 2017 · bfc46c1 · bfc46c1
1 parent 3db3cf4
commit bfc46c1
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 7 deletions.
diff --git a/saas/axops/src/ui/src/app/common/template-viewer/template-viewer.component.ts b/saas/axops/src/ui/src/app/common/template-viewer/template-viewer.component.ts
@@ -13,6 +13,9 @@ export class TemplateViewerComponent {
     @Input()
     public template: Template;
 
+    @Input()
+    public isHiddenYamlBtn: false;
+
     public selectedStep: string;
     public isYamlVisible: boolean;
 

diff --git a/saas/axops/src/ui/src/app/common/template-viewer/template-viewer.html b/saas/axops/src/ui/src/app/common/template-viewer/template-viewer.html
@@ -7,7 +7,7 @@
         </ax-workflow-tree>
     </div>
 </div>
-<div class="template-viewer__btn" (click)="showYaml()">YAML</div>
+<div class="template-viewer__btn template-viewer__btn--high-priority" (click)="showYaml()" *ngIf="!isHiddenYamlBtn">YAML</div>
 
 <ax-sliding-panel class="template-viewer__yaml" [show]="isYamlVisible" (closePanel)="closeYaml()" [hasNoPadding]="true" [offCanvas]="true">
     <sliding-panel-header>

diff --git a/saas/axops/src/ui/src/app/common/template-viewer/template-viewer.scss b/saas/axops/src/ui/src/app/common/template-viewer/template-viewer.scss
@@ -27,6 +27,10 @@
         border-bottom-left-radius: $border-radius;
         cursor: pointer;
         box-shadow: 0 2px 3px rgba(0,0,0,.3);
+
+        &--high-priority {
+            z-index: 1;
+        }
     }
 
     &__yaml {

diff --git a/.../axops/src/ui/src/app/views/+service-catalog/service-history/service-history.component.ts b/.../axops/src/ui/src/app/views/+service-catalog/service-history/service-history.component.ts
@@ -11,6 +11,7 @@ import { TemplateViewerComponent } from '../../../common/template-viewer/templat
 @Component({
     selector: 'ax-service-history',
     templateUrl: './service-history.html',
+    styles: [ require('./service-history.scss') ],
 })
 export class ServiceHistoryComponent implements LayoutSettings, OnInit, AfterViewInit, OnDestroy {
     public canLoadMore: boolean = false;

diff --git a/saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.html b/saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.html
@@ -2,10 +2,13 @@
     <div (click)="onBackToSearch()" class="ax-back-to-search" *ngIf="backToSearchUrl">
         <i class="ax-icon-back"></i>
     </div>
+    <div class="template-viewer__btn" style="z-index: 1" (click)="templateViewer.showYaml()">YAML</div>
     <ax-tabs [selectedTabKey]="'workflow'" (selected)="selectedTab($event)">
         <ax-tab [tabKey]="'workflow'" [tabTitle]="'Workflow'" [isOnlyContentScrollable]="true" [noPadding]="true"
                 [extraVerticalScrollPadding]="156" [extraHorizontalScrollPadding]="isYamlVisible ? 500 : 0">
-            <ax-template-viewer *ngIf="template" [template]="template" #templateViewer></ax-template-viewer>
+            <div class="service-history__yaml-panel">
+                <ax-template-viewer *ngIf="template" [template]="template" [isHiddenYamlBtn]="true" #templateViewer></ax-template-viewer>
+            </div>
         </ax-tab>
         <ax-tab [tabKey]="'history'" [tabTitle]="'Job History'" [isOnlyContentScrollable]="true"
                 [extraVerticalScrollPadding]="156">

diff --git a/saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.scss b/saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.scss
@@ -0,0 +1,7 @@
+.service-history {
+    &__yaml-panel {
+        .sliding-panel__body {
+            height: calc(100% - 156px);
+        }
+    }
+}
diff --git a/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.scss b/saas/axops/src/ui/src/app/views/+timeline/job-details/job-details.scss
@@ -367,11 +367,7 @@
 
     &__yaml-panel {
         .sliding-panel__body {
-            height: calc(100% - 172px);
-
-            @media screen and (max-width: $ax-breakpoint-md) {
-                height: calc(100% - 148px);
-            }
+            height: calc(100% - 156px);
         }
     }