Merge pull request #1712 from rhamilto/issue-1699

Merged by openshift-bot

Author: OpenShift Bot

app/scripts/app.js

@@ -495,6 +495,15 @@ angular
       // content (e.g. using :before pseudo-elements).
       $('body').addClass('ios');
     }
+  })
+  .run(function($rootScope){
+    // if the service catalog landing page is enabled,
+    // set global variable for use in views
+    // and add class to body
+    if (_.get(window, 'OPENSHIFT_CONSTANTS.ENABLE_TECH_PREVIEW_FEATURE.service_catalog_landing_page')) {
+      $rootScope.globalTechPreviewIndicator = true;
+      $('body').addClass('tech-preview');
+    }
   });
 
 hawtioPluginLoader.addModule('openshiftConsole');

app/styles/_catalog.less

@@ -45,7 +45,11 @@
 }
 
 @media(min-width: @screen-sm-min) {
-  .catalog-search, .landing-side-bar {
+  .catalog-search,
+  .landing-side-bar {
     top: @navbar-os-header-height-desktop + 1; // add 1 for the bottom border
+    .tech-preview & {
+      top: @navbar-os-header-height-desktop + 1 + @tech-preview-banner-height; // add 1 for the bottom border
+    }
   }
 }

app/styles/_log.less

@@ -123,6 +123,9 @@
       @media (min-width: @screen-sm-min) {
         right: @log-scroll-top-offset-right-sm;
         top: (@log-scroll-offset-top + @navbar-os-header-height-desktop);
+        .tech-preview & {
+          top: (@log-scroll-offset-top + @navbar-os-header-height-desktop + @tech-preview-banner-height);
+        }
       }
       @media (min-width: @screen-md-min) {
         right: @log-scroll-top-offset-right-lg;

app/styles/_navbar-alt.less

@@ -27,6 +27,9 @@
     top: 0;
     z-index: @zindex-navbar-fixed;
   }
+  .layout-pf-alt-fixed .tech-preview & {
+    top: @tech-preview-banner-height;
+  }
   .navbar-toggle {
     float: none;
     margin: 0;
@@ -350,3 +353,17 @@
     }
   }
 }
+
+
+.tech-preview-banner {
+  background: @brand-warning;
+  color: @color-pf-white;
+  font-size: 12px;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+  z-index: @zindex-navbar-fixed;
+  @media (min-width: @screen-sm-min) {
+    position: fixed;
+  }
+}

app/styles/_substructure.less

@@ -11,10 +11,14 @@ html,body {
 }
 .console-os {
   background-color: @body-bg;
+  &.tech-preview .top-header {
+    height: @navbar-os-header-height-mobile + @tech-preview-banner-height;
+  }
   .top-header {
     display: flex;
-    position:relative;
+    position: relative;
     height: @navbar-os-header-height-mobile;
+
   }
   .wrap {
     display: flex;
@@ -106,11 +110,20 @@ html,body {
     /* width: inherit; used if parent is using width: can't use 100% or auto */
   }
   .console-os {
+    &.tech-preview {
+      .top-header {
+        height: @navbar-os-header-height-desktop + @tech-preview-banner-height;
+      }
+      .wrap {
+        margin-top: -(@navbar-os-header-height-desktop + @tech-preview-banner-height); /* top offset height */
+        padding-top: @navbar-os-header-height-desktop + @tech-preview-banner-height; /* top offset height */
+      }
+    }
     .wrap {
       flex-direction: row;
-      margin-top:-@navbar-os-header-height-desktop; /* top offset height */
-      overflow:hidden;
-      padding-top:@navbar-os-header-height-desktop; /* top offset height */
+      margin-top: -@navbar-os-header-height-desktop; /* top offset height */
+      overflow: hidden;
+      padding-top: @navbar-os-header-height-desktop; /* top offset height */
       &.no-sidebar {
         .sidebar-left {
           display: none !important;

app/styles/_variables.less

@@ -105,6 +105,7 @@
 @scrollbar-width: 15px;
 @status-bg-color: #E6ECF1;
 @status-border-color: #BFCEDB;
+@tech-preview-banner-height: 20px;
 @tileHeadingIconFontSize: 33px;
 @tooltip-bg: #111;
 

app/views/directives/header/_tech-preview-banner.html

@@ -0,0 +1 @@
+Technology preview is enabled

app/views/directives/header/default-header.html

@@ -1,3 +1,4 @@
+<ng-include ng-if="globalTechPreviewIndicator" src="'views/directives/header/_tech-preview-banner.html'" class="tech-preview-banner"></ng-include>
 <nav class="navbar navbar-pf-alt" role="navigation">
   <div row>
     <div class="navbar-header">

app/views/directives/header/project-header.html

@@ -1,3 +1,4 @@
+<ng-include ng-if="globalTechPreviewIndicator" src="'views/directives/header/_tech-preview-banner.html'" class="tech-preview-banner"></ng-include>
 <nav class="navbar navbar-pf-alt" role="navigation">
   <div class="navbar-header hidden-xs">
     <a class="navbar-home" href="./"><span class="fa-fw pficon pficon-home" aria-hidden="true"></span>

dist/scripts/scripts.js

@@ -1166,6 +1166,8 @@ return h ? b(e, null) || d :a(e, null, f, g) || d;
 }, 1e3);
 } ]).run([ "IS_IOS", function(a) {
 a && $("body").addClass("ios");
+} ]).run([ "$rootScope", function(a) {
+_.get(window, "OPENSHIFT_CONSTANTS.ENABLE_TECH_PREVIEW_FEATURE.service_catalog_landing_page") && (a.globalTechPreviewIndicator = !0, $("body").addClass("tech-preview"));
 } ]), hawtioPluginLoader.addModule("openshiftConsole"), angular.module("openshiftConsole").factory("APIDiscovery", [ "LOGGING_URL", "METRICS_URL", "$q", function(a, b, c) {
 return {
 getLoggingURL:function() {

dist/scripts/templates.js

@@ -7021,7 +7021,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   );
 
 
+  $templateCache.put('views/directives/header/_tech-preview-banner.html',
+    "Technology preview is enabled"
+  );
+
+
   $templateCache.put('views/directives/header/default-header.html',
+    "<ng-include ng-if=\"globalTechPreviewIndicator\" src=\"'views/directives/header/_tech-preview-banner.html'\" class=\"tech-preview-banner\"></ng-include>\n" +
     "<nav class=\"navbar navbar-pf-alt\" role=\"navigation\">\n" +
     "<div row>\n" +
     "<div class=\"navbar-header\">\n" +
@@ -7048,6 +7054,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/directives/header/project-header.html',
+    "<ng-include ng-if=\"globalTechPreviewIndicator\" src=\"'views/directives/header/_tech-preview-banner.html'\" class=\"tech-preview-banner\"></ng-include>\n" +
     "<nav class=\"navbar navbar-pf-alt\" role=\"navigation\">\n" +
     "<div class=\"navbar-header hidden-xs\">\n" +
     "<a class=\"navbar-home\" href=\"./\"><span class=\"fa-fw pficon pficon-home\" aria-hidden=\"true\"></span>\n" +