Merge pull request #890 from rhamilto/issue-3432

Merged by openshift-bot

Author: OpenShift Bot

app/styles/_core.less

@@ -468,15 +468,11 @@ label.checkbox {
 }
 
 .osc-form {
-  .template-name {
-    text-align: right;
-    span.fa {
-      font-size: 40px;
-    }
-    @media (min-width: @screen-sm-min) {
-      span.fa {
-        font-size: 100px;
-      }
+  .icon {
+    text-align: center;
+    custom-icon {
+      font-size: 100px;
+      line-height: 1;
     }
   }
   span.fa.visible-xs-inline {

app/views/catalog/_image.html

@@ -3,7 +3,7 @@
     <div class="card-pf-body card-pf-body-with-version">
       <div class="card-pf-details">
         <div class="card-pf-title-with-icon">
-          <custom-icon resource="imageStream" kind="image" tag="is.tag.tag" title="{{imageStream.metadata.name}}:{{is.tag.tag}}" class="image-icon"></custom-icon>
+          <custom-icon resource="imageStream" kind="image" tag="is.tag.tag" class="image-icon"></custom-icon>
           <h2 class="card-pf-title">
             {{imageStream | displayName}}
           </h2>

app/views/create/fromimage.html

@@ -9,13 +9,16 @@
       <div class="middle-container">
         <div class="middle-content">
           <div class="container surface-shaded">
-            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
             <div class="row">
               <div class="col-md-12">
-                <div class="osc-form">
+                <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
+                <div ng-hide="imageStream">
+                  {{ emptyMessage }}
+                </div>
+                <div class="osc-form" ng-show="imageStream">
                   <div class="row">
-                    <div class="col-md-2 template-name gutter-top hidden-sm hidden-xs">
-                      <span class="fa fa-cubes"></span>
+                    <div class="col-md-2 icon hidden-sm hidden-xs">
+                      <custom-icon resource="imageStream" kind="image" tag="imageTag"></custom-icon>
                     </div>
                     <div class="col-md-8">
                       <fieldset ng-disabled="disableInputs">
@@ -405,9 +408,6 @@ <h3>Environment Variables <span class="appended-icon">(Runtime only) <span class
                             <a class="btn btn-default btn-lg" href="{{projectName | projectOverviewURL}}">Cancel</a>
                           </div>
                         </form>
-                        <div ng-hide="imageStream">
-                          {{ emptyMessage }}
-                        </div>
                       </fieldset>
                     </div>
                   </div><!-- /row -->

app/views/newfromtemplate.html

@@ -12,10 +12,13 @@
             <div class="row">
               <div class="col-md-12">
                 <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
-                <div class="osc-form">
+                <div ng-hide="template">
+                  {{ emptyMessage }}
+                </div>
+                <div class="osc-form" ng-show="template">
                   <div class="row">
-                    <div class="col-md-2 template-name gutter-top hidden-sm hidden-xs">
-                      <span class="fa fa-cubes"></span>
+                    <div class="col-md-2 icon hidden-sm hidden-xs">
+                      <custom-icon resource="template" kind="template"></custom-icon>
                     </div>
                     <div class="col-md-8">
                       <fieldset ng-disabled="disableInputs">
@@ -56,9 +59,6 @@ <h2>Images</h2>
                       </fieldset>
                     </div>
                   </div>
-                  <div ng-hide="template">
-                    {{ emptyMessage }}
-                  </div>
                 </div><!-- /osc-form -->
               </div><!-- /col-* -->
             </div>

dist/scripts/templates.js

@@ -3777,7 +3777,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"card-pf-body card-pf-body-with-version\">\n" +
     "<div class=\"card-pf-details\">\n" +
     "<div class=\"card-pf-title-with-icon\">\n" +
-    "<custom-icon resource=\"imageStream\" kind=\"image\" tag=\"is.tag.tag\" title=\"{{imageStream.metadata.name}}:{{is.tag.tag}}\" class=\"image-icon\"></custom-icon>\n" +
+    "<custom-icon resource=\"imageStream\" kind=\"image\" tag=\"is.tag.tag\" class=\"image-icon\"></custom-icon>\n" +
     "<h2 class=\"card-pf-title\">\n" +
     "{{imageStream | displayName}}\n" +
     "</h2>\n" +
@@ -4368,13 +4368,16 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"middle-container\">\n" +
     "<div class=\"middle-content\">\n" +
     "<div class=\"container surface-shaded\">\n" +
-    "<breadcrumbs breadcrumbs=\"breadcrumbs\"></breadcrumbs>\n" +
     "<div class=\"row\">\n" +
     "<div class=\"col-md-12\">\n" +
-    "<div class=\"osc-form\">\n" +
+    "<breadcrumbs breadcrumbs=\"breadcrumbs\"></breadcrumbs>\n" +
+    "<div ng-hide=\"imageStream\">\n" +
+    "{{ emptyMessage }}\n" +
+    "</div>\n" +
+    "<div class=\"osc-form\" ng-show=\"imageStream\">\n" +
     "<div class=\"row\">\n" +
-    "<div class=\"col-md-2 template-name gutter-top hidden-sm hidden-xs\">\n" +
-    "<span class=\"fa fa-cubes\"></span>\n" +
+    "<div class=\"col-md-2 icon hidden-sm hidden-xs\">\n" +
+    "<custom-icon resource=\"imageStream\" kind=\"image\" tag=\"imageTag\"></custom-icon>\n" +
     "</div>\n" +
     "<div class=\"col-md-8\">\n" +
     "<fieldset ng-disabled=\"disableInputs\">\n" +
@@ -4604,9 +4607,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<a class=\"btn btn-default btn-lg\" href=\"{{projectName | projectOverviewURL}}\">Cancel</a>\n" +
     "</div>\n" +
     "</form>\n" +
-    "<div ng-hide=\"imageStream\">\n" +
-    "{{ emptyMessage }}\n" +
-    "</div>\n" +
     "</fieldset>\n" +
     "</div>\n" +
     "</div>\n" +
@@ -9530,10 +9530,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"row\">\n" +
     "<div class=\"col-md-12\">\n" +
     "<breadcrumbs breadcrumbs=\"breadcrumbs\"></breadcrumbs>\n" +
-    "<div class=\"osc-form\">\n" +
+    "<div ng-hide=\"template\">\n" +
+    "{{ emptyMessage }}\n" +
+    "</div>\n" +
+    "<div class=\"osc-form\" ng-show=\"template\">\n" +
     "<div class=\"row\">\n" +
-    "<div class=\"col-md-2 template-name gutter-top hidden-sm hidden-xs\">\n" +
-    "<span class=\"fa fa-cubes\"></span>\n" +
+    "<div class=\"col-md-2 icon hidden-sm hidden-xs\">\n" +
+    "<custom-icon resource=\"template\" kind=\"template\"></custom-icon>\n" +
     "</div>\n" +
     "<div class=\"col-md-8\">\n" +
     "<fieldset ng-disabled=\"disableInputs\">\n" +
@@ -9569,9 +9572,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</fieldset>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div ng-hide=\"template\">\n" +
-    "{{ emptyMessage }}\n" +
-    "</div>\n" +
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +

dist/styles/main.css

@@ -3682,6 +3682,7 @@ code.probe-command{display:inline-block;line-height:1.3;margin-right:2px}
 .builds-block{margin-left:5px}
 .builds-block .builds{margin:0;overflow:hidden}
 .builds-block .builds .build{border:1px solid transparent;border-radius:5px;padding:5px;position:relative;margin:10px 0 0;text-align:left}
+.empty-project .fa,.osc-form .icon,.service-table,.service-table thead tr th,.show-drag-and-drop-zone{text-align:center}
 @media (min-width:768px){.builds-block .builds .build.osc-object.osc-object-hover{cursor:pointer;border-color:rgba(0,168,225,.5)}
 .builds-block .builds .build.osc-object.osc-object-active{border-color:#00a8e1}
 }
@@ -3750,7 +3751,7 @@ body{padding-right:0px!important}
 .nav-tabs>li>a:before{left:0!important}
 .nav-tabs,.tab-content{margin-bottom:20px;margin-top:20px}
 .empty-project{margin:10px auto;max-width:500px;padding:30px}
-.empty-project .fa{width:16px;text-align:center}
+.empty-project .fa{width:16px}
 .empty-project dd{margin-left:20px;margin-bottom:10px}
 .empty-state-message{margin:60px auto;max-width:600px;padding:0 20px}
 .empty-state-message .h2,.empty-state-message h2{line-height:1.4}
@@ -3763,8 +3764,7 @@ body{padding-right:0px!important}
 @media (min-height:1024px){.empty-state-message{margin-top:200px}
 .empty-state-message .hero-icon{font-size:120px}
 }
-.service-table{text-align:center;max-width:650px}
-.service-table thead tr th{text-align:center}
+.service-table{max-width:650px}
 @media (max-width:991px){.service-table{min-width:100%}
 }
 .build-config-summary .latest-build-status{margin-right:5px}
@@ -3816,7 +3816,7 @@ body{padding-right:0px!important}
 label.checkbox{font-weight:400}
 .form-group .checkbox{margin-bottom:inherit}
 .drag-and-drop-zone{display:none}
-.show-drag-and-drop-zone{border-style:dashed;display:block;border-color:#888;border-width:3px;background-color:rgba(255,255,255,.6);margin:-3px;text-align:center;vertical-align:middle}
+.show-drag-and-drop-zone{border-style:dashed;display:block;border-color:#888;border-width:3px;background-color:rgba(255,255,255,.6);margin:-3px;vertical-align:middle}
 .show-drag-and-drop-zone p{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);font-size:24px;font-weight:400;margin:0}
 .highlight-drag-and-drop-zone{border-color:#0099d3}
 .highlight-drag-and-drop-zone p{color:#0099d3}
@@ -3833,10 +3833,7 @@ label.checkbox{font-weight:400}
 .lifecycle-hook{padding-bottom:20px}
 .lifecycle-hook:first-of-type{padding-top:20px}
 .lifecycle-hook .read-only-tag-image{padding-bottom:10px}
-.osc-form .template-name{text-align:right}
-.osc-form .template-name span.fa{font-size:40px}
-@media (min-width:768px){.osc-form .template-name span.fa{font-size:100px}
-}
+.osc-form .icon custom-icon{font-size:100px;line-height:1}
 .osc-form span.fa.visible-xs-inline{margin-right:10px}
 .osc-form .flow{border-top:1px solid rgba(0,0,0,.15);display:table;margin-top:40px;width:100%}
 .osc-form .flow>.flow-block{display:inline-block}