From cc46ece953b5207aa8605798c497c10367df7cf5 Mon Sep 17 00:00:00 2001
From: Kevin Fox <kevin@efox.cc>
Date: Tue, 22 Sep 2015 11:25:10 -0700
Subject: [PATCH] Bunch of updates

Gray out grid items that are unsupported. Fix some formatting issues.
Start breaking out css into its own file.

Change-Id: I736c600a76e52bf6ce44377328922dc1af5c7c2c
---
 .../dashboard/project/app_catalog/action.html |   4 +
 .../project/app_catalog/app_catalog.js        |   4 +
 .../project/app_catalog/app_catalog.scss      |  11 ++
 .../project/app_catalog/main_panel.html       | 128 +++++++++---------
 enabled/_90_project_app_catalog_panel.py      |   4 +
 5 files changed, 84 insertions(+), 67 deletions(-)
 create mode 100644 app_catalog/static/dashboard/project/app_catalog/app_catalog.scss

diff --git a/app_catalog/static/dashboard/project/app_catalog/action.html b/app_catalog/static/dashboard/project/app_catalog/action.html
index d0fdc1a..690590f 100644
--- a/app_catalog/static/dashboard/project/app_catalog/action.html
+++ b/app_catalog/static/dashboard/project/app_catalog/action.html
@@ -30,5 +30,9 @@
         <a ng-switch-default ng-class="extraclasses" class="btn btn-primary btn-default ajax-modal" href="{$ WEBROOT $}murano/packages/import_bundle?name={$ asset.service.murano_package_name | encodeURIComponent $}&import_type=by_repo">Install</a>
         <a ng-switch-when="true" ng-class="extraclasses" class="btn btn-default disabled ajax-modal" href="/">Installed</a>
       </div>
+    </div>
+  </div>
+  <div ng-switch-default>
+    <a ng-switch-when="false" ng-class="extraclasses" class="btn btn-default disabled ajax-modal" href="/">Unsupported</a>
   </div>
 </div>
diff --git a/app_catalog/static/dashboard/project/app_catalog/app_catalog.js b/app_catalog/static/dashboard/project/app_catalog/app_catalog.js
index 08f6b7d..600a2c4 100644
--- a/app_catalog/static/dashboard/project/app_catalog/app_catalog.js
+++ b/app_catalog/static/dashboard/project/app_catalog/app_catalog.js
@@ -233,6 +233,7 @@
             notify_update();
           }).error(function(data, status) {
             var str = 'ERROR: Could not retrieve template:';
+            asset.disabled = true;
             asset.validated = 'unsupported';
             if (status == 400 && data.slice(0, str.length) == str) {
               asset.validated = 'error';
@@ -247,6 +248,9 @@
             process(asset);
           } else if (asset.service.type == 'murano') {
             asset.validated = true;
+            asset.disabled = !$scope.has_murano;
+          } else if (asset.service.type != 'glance' && asset.service.type != 'bundle') {
+            asset.disabled = true;
           }
           asset.has_murano = $scope.has_murano;
         }
diff --git a/app_catalog/static/dashboard/project/app_catalog/app_catalog.scss b/app_catalog/static/dashboard/project/app_catalog/app_catalog.scss
new file mode 100644
index 0000000..7c87bf8
--- /dev/null
+++ b/app_catalog/static/dashboard/project/app_catalog/app_catalog.scss
@@ -0,0 +1,11 @@
+.app_catalog_grid_item_hidden {
+    height: 172px;
+    width: 182px;
+    margin: -170px 0px 0px -10px;
+    opacity: 1;
+    overflow: hidden;
+    display: block;
+    position: relative;
+    background: rgba(0, 0, 0, .25);
+    z-index: 100;
+}
diff --git a/app_catalog/static/dashboard/project/app_catalog/main_panel.html b/app_catalog/static/dashboard/project/app_catalog/main_panel.html
index 758a32f..e49cc2d 100644
--- a/app_catalog/static/dashboard/project/app_catalog/main_panel.html
+++ b/app_catalog/static/dashboard/project/app_catalog/main_panel.html
@@ -40,66 +40,70 @@
         position: relative;
         ">
         <div style="">
-  	<div style="
-  	  width:128px;
-  	  height:128px;
-  	  overflow: hidden;
-  	  margin-left: auto; margin-right:auto;
-  	  ">
-     
-  	  <img style="
-  	    margin: {$ asset.icon.top $}px 0px 0px {$ asset.icon.left $}px;
-  	    height: {$ asset.icon.height $}px;
-  	    " src="{$ asset.icon.url $}">
-     
-  	</div>
+
+          <div style="
+            width:128px;
+            height:128px;
+            overflow: hidden;
+            margin-left: auto; margin-right:auto;
+            ">
+
+            <img style="
+              margin: {$ asset.icon.top $}px 0px 0px {$ asset.icon.left $}px;
+              height: {$ asset.icon.height $}px;
+              " src="{$ asset.icon.url $}">
+          
+          </div>
 <!--FIXME Share images locally to the plugin.-->
-  	<span style="
-  	  max-height: 100%;
-  	  width: 23px;
-  	  height: 23px;
-  	  top: 0;
-  	  right: 0;
-  	  position: absolute;
-  	  background: rgba(0, 0, 0, 0) url('http://apps.openstack.org/static/images/featured-corner-{$ asset.service.type $}.png') no-repeat scroll right top;
-  	  ">
-  	</span>
+          <span style="
+            max-height: 100%;
+            width: 23px;
+            height: 23px;
+            top: 0;
+            right: 0;
+            position: absolute;
+            background: rgba(0, 0, 0, 0) url('http://apps.openstack.org/static/images/featured-corner-{$ asset.service.type $}.png') no-repeat scroll right top;
+            ">
+          </span>
         </div>
         <div title="{$ asset.name $}" style="
-  	overflow: hidden;
-  	white-space: nowrap;
-  	position: relative;
-  	line-height: 18px;
-  	font-size: 16px;
-  	"> {$ asset.name $}
-  	<span style="
-  	  max-height: 100%;
-  	  width: 40px;
-  	  height: 20px;
-  	  bottom: 0;
-  	  right: 0;
-  	  position: absolute;
-  	  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0;
-  	  ">
-  	</span>
+          overflow: hidden;
+          white-space: nowrap;
+          position: relative;
+          line-height: 18px;
+          font-size: 16px;
+          "> {$ asset.name $}
+          <span style="
+            max-height: 100%;
+            width: 40px;
+            height: 20px;
+            bottom: 0;
+            right: 0;
+            position: absolute;
+            background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0;
+            ">
+          </span>
         </div>
         <div title="{$ asset.provided_by.name $}" style="
-  	overflow: hidden;
-  	white-space: nowrap;
-  	position: relative;
-  	line-height: 14px;
-  	font-size: 12px;
-  	"> {$ asset.provided_by.name $}
-  	<span style="
-  	  max-height: 100%;
-  	  width: 40px;
-  	  height: 20px;
-  	  bottom: 0;
-  	  right: 0;
-  	  position: absolute;
-  	  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0;
-  	  ">
-  	</span>
+            overflow: hidden;
+            white-space: nowrap;
+            position: relative;
+            line-height: 14px;
+            font-size: 12px;
+            "> {$ asset.provided_by.name $}
+          <span style="
+              max-height: 100%;
+              width: 40px;
+              height: 20px;
+              bottom: 0;
+              right: 0;
+              position: absolute;
+              background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0;
+              ">
+          </span>
+        </div>
+        <div ng-switch="asset.disabled">
+          <div ng-switch-when="true" class="app_catalog_grid_item_hidden"></div>
         </div>
       </div>
     </div>
@@ -109,16 +113,6 @@
     <table hz-table ng-cloak st-table="dispassets" st-safe-src="assets"
       class="table-striped table-rsp table-detail modern">
       <thead>
-<!--
-        <tr>
-          <th colspan="4">
-    	<st-magic-search>
-    	  <hz-magic-search-bar filter-facets="asset_filter_facets" filter-strings="asset_filter_strings">
-    	  </hz-magic-search-bar>
-    	</st-magic-search>
-          </th>
-        </tr>
--->
         <tr>
           <th class="expander"></th>
           <th st-sort="name" st-sort-default="true" class="rsp-p1">Name</th>
@@ -130,7 +124,7 @@
       <tbody>
         <tr ng-repeat-start="asset in dispassets track by asset.name">
           <td class="expander">
-    	    <i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
+            <i class="fa fa-chevron-right" hz-expand-detail duration="200"></i>
           </td>
           <td class="rsp-p1">{$ asset.name $}</td>
           <td class="rsp-p2">{$ asset.license $}</td>
@@ -148,7 +142,7 @@
       <tfoot>
         <tr>
           <td colspan="5" class="text-center">
-    	<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
+            <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
           </td>
         </tr>
       </tfoot>
diff --git a/enabled/_90_project_app_catalog_panel.py b/enabled/_90_project_app_catalog_panel.py
index 24edb06..c98425c 100644
--- a/enabled/_90_project_app_catalog_panel.py
+++ b/enabled/_90_project_app_catalog_panel.py
@@ -27,3 +27,7 @@ ADD_ANGULAR_MODULES = ['horizon.dashboard.project.app_catalog']
 ADD_JS_FILES = [
   'dashboard/project/app_catalog/app_catalog.js'
 ]
+
+ADD_SCSS_FILES = [
+  'dashboard/project/app_catalog/app_catalog.scss'
+]