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
This commit is contained in:
Kevin Fox
parent
5d17d09f1f
commit
cc46ece953
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue