Changing overlay layout to a single column

app/scripts/directives/processTemplateDialog.js

@@ -45,6 +45,16 @@
       onShow: showSelect
     };
 
+    ctrl.infoStep = {
+      id: 'info',
+      label: 'Information',
+      view: 'views/directives/process-template-dialog/process-template-info.html',
+      allowed: true,
+      valid: true,
+      allowClickNav: true,
+      onShow: showInfo
+    };
+
     ctrl.configStep = {
       id: 'configuration',
       label: 'Configuration',
@@ -157,6 +167,7 @@
       ctrl.selectedTemplate = template;
       ctrl.template = _.get(template, 'resource');
       ctrl.selectStep.valid = !!template;
+      ctrl.iconClass = getIconClass();
     };
 
     ctrl.templateProjectChange = function () {
@@ -191,7 +202,7 @@
 
     function initializeSteps() {
       if (!ctrl.steps) {
-        ctrl.steps = [ctrl.selectStep, ctrl.configStep, ctrl.resultsStep];
+        ctrl.steps = [ctrl.selectStep, ctrl.infoStep, ctrl.configStep, ctrl.resultsStep];
       }
     }
 
@@ -202,7 +213,17 @@
       }
     }
 
+    function showInfo() {
+      ctrl.infoStep.selected = true;
+      ctrl.selectStep.selected = false;
+      ctrl.configStep.selected = false;
+      ctrl.resultsStep.selected = false;
+      ctrl.nextTitle = "Next >";
+      clearValidityWatcher();
+    }
+
     function showSelect() {
+      ctrl.infoStep.selected = false;
       ctrl.selectStep.selected = true;
       ctrl.configStep.selected = false;
       ctrl.resultsStep.selected = false;
@@ -212,6 +233,7 @@
     }
 
     function showConfig() {
+      ctrl.infoStep.selected = false;
       ctrl.selectStep.selected = false;
       ctrl.configStep.selected = true;
       ctrl.resultsStep.selected = false;
@@ -225,6 +247,7 @@
     }
 
     function showResults() {
+      ctrl.infoStep.selected = false;
       ctrl.selectStep.selected = false;
       ctrl.configStep.selected = false;
       ctrl.resultsStep.selected = true;

app/styles/_catalog.less

@@ -1,26 +1,6 @@
 @bind-service-page-height: 310px;
-@bind-service-wizard-min-external-height: 300px;
 @landing-search-area-height: 52px;
 
-.bind-service-config {
-  padding: 0 (@grid-gutter-width / 2);
-  width: 100%;
-  @media (min-width: @screen-sm-min) {
-    margin-bottom: -(@grid-gutter-width / 2);
-    margin-top: -(@grid-gutter-width / 2);
-    overflow-y: auto;
-    padding-right: 0;
-    .scroll-shadows-vertical(65%, 0.25);
-    _::-webkit-full-page-media, _:future, :root & { // only target Safari
-      .scroll-shadows-vertical-with-covers(65%, 0.25);
-    }
-
-    .form-horizontal .control-label {
-      padding-right: 0;
-    }
-  }
-}
-
 .landing {
   @media(min-width: @screen-sm-min) {
     top: (@navbar-os-header-height-desktop + @landing-search-area-height);
@@ -34,16 +14,9 @@
   }
 }
 
-.wizard-pf-footer.wizard-pf-position-override {
-  position: relative;
-}
-
 .wizard-pf-main.bind-service-wizard-step {
   @media (min-width: @screen-sm-min) {
     height: @bind-service-page-height + @grid-gutter-width;
-    max-height: calc(100vh ~"-" @bind-service-wizard-min-external-height);
-    min-height: 200px;
-    overflow-y: auto;
   }
 }
 

app/styles/_overlay-forms.less

@@ -1,19 +1,12 @@
-.order-service-config-single-column {
-  width: 100%;
-  @media (min-width: 768px) {
-    padding-left: 0;
-  }
-}
-
 .wizard-pf-main {
   .ace_editor.editor {
-    height: 285px;
+    height: 265px;
     .landing-page & {
-      height: 220px;
+      height: 200px;
     }
   }
 
   .deploy-image .empty-state-message {
-    margin: 30px auto;
+    margin: 30px auto 0;
   }
 }

app/views/directives/bind-service.html

@@ -1,6 +1,6 @@
 <div class="bind-service-wizard">
   <pf-wizard
-       hide-header="true"
+       title="Create Binding"
        hide-sidebar="true"
        step-class="bind-service-wizard-step"
        wizard-ready="ctrl.wizardReady"

app/views/directives/deploy-image-dialog.html

@@ -1,7 +1,7 @@
 <pf-wizard
+     title="Deploy Image"
      on-cancel="$ctrl.close()"
      on-finish="$ctrl.close()"
-     hide-header="true"
      hide-back-button="true"
      hide-sidebar="true"
      next-title="$ctrl.nextButtonTitle"
@@ -20,7 +20,7 @@
        allow-click-nav="false"
        next-enabled="$ctrl.deployForm.$valid || $ctrl.deployImageNewAppCreated">
     <div class="wizard-pf-main-inner-shadow-covers">
-      <div class="order-service-config order-service-config-single-column">
+      <div class="order-service-config">
         <div class="wizard-pf-main-form-contents">
           <form name="$ctrl.deployForm">
             <deploy-image is-dialog="true" project="$ctrl.project" context="$ctrl.context"></deploy-image>
@@ -37,7 +37,7 @@
        ok-to-nav-away="true"
        allow-click-nav="false">
     <div class="wizard-pf-main-inner-shadow-covers">
-      <div class="order-service-config order-service-config-single-column">
+      <div class="order-service-config">
         <div class="wizard-pf-main-form-contents">
           <next-steps project="$ctrl.selectedProject"
                       project-name="$ctrl.selectedProject.metadata.name"

app/views/directives/from-file-dialog.html

@@ -1,7 +1,7 @@
 <pf-wizard
+     title="Import YAML / JSON"
      on-cancel="$ctrl.close()"
      on-finish="$ctrl.close()"
-     hide-header="true"
      hide-sidebar="true"
      next-title="$ctrl.nextButtonTitle"
      next-callback="$ctrl.nextCallback"
@@ -18,7 +18,7 @@
        allow-click-nav="false"
        next-enabled="!$ctrl.importForm.$invalid">
     <div class="wizard-pf-main-inner-shadow-covers">
-      <div class="order-service-config order-service-config-single-column">
+      <div class="order-service-config">
         <div class="wizard-pf-main-form-contents">
           <form name="$ctrl.importForm">
             <from-file is-dialog="true" project="$ctrl.project"></from-file>
@@ -78,7 +78,7 @@
        allow-click-nav="false"
        prev-enabled="false">
     <div class="wizard-pf-main-inner-shadow-covers">
-      <div class="order-service-config order-service-config-single-column">
+      <div class="order-service-config">
         <div class="wizard-pf-main-form-contents">
           <!-- We don't want the directive to render until the results step is shown, this makes sure processed template info gets pulled from cache correctly -->
           <next-steps ng-if="$ctrl.currentStep === 'Results'" project="$ctrl.selectedProject"

app/views/directives/header/header.html

@@ -47,7 +47,7 @@
 
 <sidebar></sidebar>
 
-<overlay-panel show-panel="ordering.panelName" show-close="true" handle-close="closeOrderingPanel">
+<overlay-panel show-panel="ordering.panelName" handle-close="closeOrderingPanel">
   <deploy-image-dialog ng-if="ordering.panelName === 'deployImage'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></deploy-image-dialog>
   <from-file-dialog ng-if="ordering.panelName === 'fromFile'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></from-file-dialog>
   <process-template-dialog ng-if="ordering.panelName === 'fromProject'" project="project" use-project-template="true" on-dialog-closed="closeOrderingPanel"></process-template-dialog>

app/views/directives/process-template-dialog.html

@@ -1,6 +1,6 @@
 <div class="order-service">
   <pf-wizard
-       hide-header="true"
+       title="{{!$ctrl.useProjectTemplate && ($ctrl.template | displayName) || 'Select from Project'}}"
        hide-sidebar="true"
        hide-back-button="!$ctrl.useProjectTemplate"
        step-class="order-service-wizard-step"
@@ -22,29 +22,7 @@
          step-id="{{step.id}}"
          step-priority="{{$index}}">
       <div class="wizard-pf-main-inner-shadow-covers">
-        <div class="order-service-details" ng-if="!$ctrl.selectStep.selected">
-          <div class="order-service-details-top">
-            <div class="service-icon">
-              <span class="icon {{$ctrl.iconClass}}"></span>
-            </div>
-            <div class="service-title-area">
-              <div class="service-title">
-                {{$ctrl.template | displayName}}
-              </div>
-              <div class="order-service-tags">
-                <span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
-                  {{tag}}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div class="order-service-description-block">
-            <p ng-bind-html="$ctrl.template | description | linky : '_blank'" class="description"></p>
-          </div>
-        </div>
-        <div class="order-service-config" ng-class="{'order-service-config-single-column': $ctrl.selectStep.selected}">
-          <div ng-if="step.selected" ng-include="step.view" class="wizard-pf-main-form-contents"></div>
-        </div>
+        <div ng-if="step.selected" ng-include="step.view" class="wizard-pf-main-form-contents"></div>
       </div>
     </pf-wizard-step>
   </pf-wizard>

app/views/directives/process-template-dialog/process-template-config.html

@@ -1,5 +1,7 @@
-<div class="osc-form">
-  <form name="$ctrl.form">
-    <process-template template="$ctrl.template" project="$ctrl.preSelectedProject" on-project-selected="$ctrl.onProjectSelected" available-projects="$ctrl.unfilteredProjects" is-dialog="true"></process-template>
-  </form>
+<div class="order-service-config">
+  <div class="osc-form">
+    <form name="$ctrl.form">
+      <process-template template="$ctrl.template" project="$ctrl.preSelectedProject" on-project-selected="$ctrl.onProjectSelected" available-projects="$ctrl.unfilteredProjects" is-dialog="true"></process-template>
+    </form>
+  </div>
 </div>

app/views/directives/process-template-dialog/process-template-info.html

@@ -0,0 +1,20 @@
+<div class="order-service-details">
+  <div class="order-service-details-top">
+    <div class="service-icon">
+      <span class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>
+    </div>
+    <div class="service-title-area">
+      <div class="service-title">
+        {{$ctrl.template | displayName}}
+      </div>
+      <div class="order-service-tags">
+        <span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
+          {{tag}}
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="order-service-description-block">
+    <p ng-bind-html="$ctrl.template | description | linky : '_blank'" class="description"></p>
+  </div>
+</div>

app/views/directives/process-template-dialog/process-template-results.html

@@ -1,6 +1,8 @@
-<next-steps
-  project="$ctrl.selectedProject"
-  project-name="$ctrl.selectedProject.metadata.name"
-  login-base-url="$ctrl.loginBaseUrl"
-  on-continue="$ctrl.close">
-</next-steps>
+<div class="order-service-config">
+  <next-steps
+    project="$ctrl.selectedProject"
+    project-name="$ctrl.selectedProject.metadata.name"
+    login-base-url="$ctrl.loginBaseUrl"
+    on-continue="$ctrl.close">
+  </next-steps>
+</div>

app/views/directives/process-template-dialog/process-template-select.html

@@ -1,39 +1,41 @@
-<div class="config-top">
-  <div class="select-project-for-template">
-    <h2>Select from Project</h2>
-    <ui-select
-      name="selectProject"
-      ng-model="$ctrl.templateProject"
-      ng-change="$ctrl.templateProjectChange()"
-      search-enabled="$ctrl.searchEnabled">
-      <ui-select-match placeholder="Select a Project">
-        {{$select.selected | displayName}}
-      </ui-select-match>
-      <ui-select-choices repeat="project in $ctrl.templateProjects | searchProjects : $select.search track by (project | uid)">
-        <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
-        <span ng-if="project | displayName : true" class="small text-muted">
-          <span ng-if="project.metadata.name">&ndash;</span>
-          <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
-        </span>
-      </ui-select-choices>
-    </ui-select>
-  </div>
-  <pf-empty-state ng-if="!$ctrl.templateProject" config="$ctrl.projectEmptyState"></pf-empty-state>
-  <pf-empty-state ng-if="$ctrl.templateProject && !$ctrl.catalogItems.length" config="$ctrl.templatesEmptyState"></pf-empty-state>
-  <div class="services-view">
-    <div ng-if="$ctrl.templateProject && $ctrl.catalogItems.length" class="services-items">
-      <pf-filter config="$ctrl.filterConfig" class="services-items-filter order-services-filter"></pf-filter>
-      <a href="" class="services-item show-selection" ng-class="{'active': item === $ctrl.selectedTemplate}" ng-repeat="item in $ctrl.filteredItems track by item.resource.metadata.uid" ng-click="$ctrl.templateSelected(item)">
-        <div ng-if="!item.imageUrl" class="services-item-icon">
-          <span class="{{item.iconClass}}"></span>
-        </div>
-        <div ng-if="item.imageUrl" class="services-item-icon">
-          <img ng-src="{{item.imageUrl}}" alt="">
-        </div>
-        <div class="services-item-name" title="{{item.name}}">
-          {{item.name}}
-        </div>
-      </a>
+<div class="order-service-config">
+  <div class="config-top">
+    <div class="select-project-for-template">
+      <h2>Select from Project</h2>
+      <ui-select
+        name="selectProject"
+        ng-model="$ctrl.templateProject"
+        ng-change="$ctrl.templateProjectChange()"
+        search-enabled="$ctrl.searchEnabled">
+        <ui-select-match placeholder="Select a Project">
+          {{$select.selected | displayName}}
+        </ui-select-match>
+        <ui-select-choices repeat="project in $ctrl.templateProjects | searchProjects : $select.search track by (project | uid)">
+          <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
+          <span ng-if="project | displayName : true" class="small text-muted">
+            <span ng-if="project.metadata.name">&ndash;</span>
+            <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
+          </span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+    <pf-empty-state ng-if="!$ctrl.templateProject" config="$ctrl.projectEmptyState"></pf-empty-state>
+    <pf-empty-state ng-if="$ctrl.templateProject && !$ctrl.catalogItems.length" config="$ctrl.templatesEmptyState"></pf-empty-state>
+    <div class="services-view">
+      <div ng-if="$ctrl.templateProject && $ctrl.catalogItems.length" class="services-items">
+        <pf-filter config="$ctrl.filterConfig" class="services-items-filter order-services-filter"></pf-filter>
+        <a href="" class="services-item show-selection" ng-class="{'active': item === $ctrl.selectedTemplate}" ng-repeat="item in $ctrl.filteredItems track by item.resource.metadata.uid" ng-click="$ctrl.templateSelected(item)">
+          <div ng-if="!item.imageUrl" class="services-item-icon">
+            <span class="{{item.iconClass}}"></span>
+          </div>
+          <div ng-if="item.imageUrl" class="services-item-icon">
+            <img ng-src="{{item.imageUrl}}" alt="">
+          </div>
+          <div class="services-item-name" title="{{item.name}}">
+            {{item.name}}
+          </div>
+        </a>
+      </div>
     </div>
   </div>
 </div>

app/views/directives/resource-service-bindings.html

@@ -24,7 +24,7 @@ <h3>Bindings</h3>
     <span>There are no service bindings.</span>
   </div>
 </div>
-<overlay-panel single-column="true" show-panel="$ctrl.overlayPanelVisible" show-close="true" handle-close="$ctrl.closeOverlayPanel">
+<overlay-panel show-panel="$ctrl.overlayPanelVisible" handle-close="$ctrl.closeOverlayPanel">
   <bind-service target="$ctrl.apiObject"
                 project="$ctrl.project"
                 on-close="$ctrl.closeOverlayPanel"></bind-service>

app/views/directives/unbind-service.html

@@ -1,6 +1,6 @@
 <div class="bind-service-wizard unbind-service">
   <pf-wizard
-    hide-header="true"
+    title="Delete Binding"
     hide-sidebar="true"
     hide-back-button="true"
     step-class="bind-service-wizard-step"

app/views/landing-page.html

@@ -1,6 +1,6 @@
 <div class="middle landing-page">
   <div class="middle-content">
-    <overlay-panel show-panel="ordering.panelName" show-close="true" handle-close="closeOrderingPanel">
+    <overlay-panel show-panel="ordering.panelName" handle-close="closeOrderingPanel">
       <process-template-dialog ng-if="template" template="template" on-dialog-closed="closeOrderingPanel"></process-template-dialog>
       <deploy-image-dialog ng-if="ordering.panelName === 'deployImage'" on-dialog-closed="closeOrderingPanel"></deploy-image-dialog>
       <from-file-dialog ng-if="ordering.panelName === 'fromFile'" on-dialog-closed="closeOrderingPanel"></from-file-dialog>