From 9f5e559e3766f1f2b3e2e9f2584883ad9179e6db Mon Sep 17 00:00:00 2001
From: Kevin Fox <kevin@efox.cc>
Date: Wed, 2 Sep 2015 17:44:01 -0700
Subject: [PATCH] Test icons

Adds a testicons.html file that for now should provide a simple way
to test icon submissions.

Change-Id: I4f50a9540c33847c9eb88bafa927df89dac7e593
---
 openstack_catalog/web/testicons.html | 116 +++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 openstack_catalog/web/testicons.html
diff --git a/openstack_catalog/web/testicons.html b/openstack_catalog/web/testicons.html
new file mode 100644
index 0000000..0d055a0
--- /dev/null
+++ b/openstack_catalog/web/testicons.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+<script>
+var app = angular.module('myApp', []);
+app.controller('myCtrl', function($scope, $http) {
+  $http({url:'/api/v1/assets'}).success(function(data) {
+    $scope.assets = [];
+    for(i in data.assets) {
+      var asset = data.assets[i];
+      if('tags' in asset) {
+        var found;
+        for(j in asset['tags']) {
+          if(asset['tags'][j] == 'app') {
+            $scope.assets.push(asset);
+          }
+        }
+      }
+    }
+    console.log($scope.assets);
+  });
+});
+</script>
+<body>
+
+<div style="margin-bottom: 4px;" ng-app="myApp" ng-controller="myCtrl">
+
+  <div style="
+    background-color:#f9f9f9;
+    overflow: auto;
+    border-color:#cccccc; border-width:1px; border-style: solid;
+    ">
+    <div ng-repeat="asset in assets | orderBy:'name':false" style="border:1px;
+      margin: 10px;
+      width: 200px; height: 180px; float: left;
+      ">
+      <div style="
+        margin:10px;
+        border-color:#cccccc; border-width:1px;
+        border-radius: 2px;
+        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
+        padding:8px;
+        height: 170px;
+        overflow: hidden;
+        background-color:#ffffff;
+        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>
+     
+  	<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>
+        </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
