From bfc46c1547c6e3818cb510afd1fcc0f0c33a0270 Mon Sep 17 00:00:00 2001
From: wokeGit <wojciech.kalemba@acaisoft.com>
Date: Fri, 25 Aug 2017 11:55:25 +0200
Subject: [PATCH] Templates histroy screen - "YAML" button is not floating
 anymore. Adjust Yaml panel be able to scroll to the end of yaml. (#26)

job details screen - adjust yaml panel body to fill full height of panel.
---
 .../common/template-viewer/template-viewer.component.ts    | 3 +++
 .../ui/src/app/common/template-viewer/template-viewer.html | 2 +-
 .../ui/src/app/common/template-viewer/template-viewer.scss | 4 ++++
 .../service-history/service-history.component.ts           | 1 +
 .../+service-catalog/service-history/service-history.html  | 5 ++++-
 .../+service-catalog/service-history/service-history.scss  | 7 +++++++
 .../src/app/views/+timeline/job-details/job-details.scss   | 6 +-----
 7 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.scss

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
index 6111758c9538..8ce6f63b678c 100644
--- 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
index 792f4dc30629..20290a6c7b04 100644
--- 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
index 2baba89f2d76..a4e3c20f5977 100644
--- 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/saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.component.ts b/saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.component.ts
index f342c0102db3..726dd4676a20 100644
--- a/saas/axops/src/ui/src/app/views/+service-catalog/service-history/service-history.component.ts
+++ b/saas/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
index e6e2b12c8854..52bde561ab72 100644
--- 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
new file mode 100644
index 000000000000..9d1e90a954bc
--- /dev/null
+++ 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);
+        }
+    }
+}
\ No newline at end of file
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
index da2d29a6013a..8d11c5eb0b91 100644
--- 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);
         }
     }