blob: b4b8f341c494f94fc7a9ed844bf13c57a03f0011 [file] [log] [blame]
Simon Hunt58f23bb2015-01-16 16:32:24 -08001<!DOCTYPE html>
2<!--
3 ~ Copyright 2015 Open Networking Laboratory
4 ~
5 ~ Licensed under the Apache License, Version 2.0 (the "License");
6 ~ you may not use this file except in compliance with the License.
7 ~ You may obtain a copy of the License at
8 ~
9 ~ http://www.apache.org/licenses/LICENSE-2.0
10 ~
11 ~ Unless required by applicable law or agreed to in writing, software
12 ~ distributed under the License is distributed on an "AS IS" BASIS,
13 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 ~ See the License for the specific language governing permissions and
15 ~ limitations under the License.
16 -->
17
18<!--
19 ONOS -- Embedded icon test page
20
21 @author Simon Hunt
22 @author Bri Prebilic Cole
23 -->
24<html>
25<head>
26 <meta charset="utf-8">
27 <title>Embedded Icons</title>
28
29 <script src="../tp/d3.js"></script>
30
31 <link rel="stylesheet" href="../app/common.css">
32
33 <style>
34 html,
35 body {
36 background-color: #fff;
37 font-family: Arial, Helvetica, sans-serif;
38 font-size: 9pt;
39 }
40
41 svg .icon .glyph {
42 stroke: none;
43 fill: white;
44 fill-rule: evenodd;
45 }
46
47 svg .icon.deviceOnline {
48 fill: green;
49 }
50
51 svg .icon.deviceOffline {
52 fill: darkred;
53 }
54
55 svg .icon rect {
56 stroke: black;
57 stroke-width: 1px;
58 }
59
60 </style>
61</head>
62<body class="light">
63<!-- minimal framework to access glyphs library module -->
64<script>
65 var libs = {};
66 var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
67
68
69</script>
70
71<!-- Test HTML -->
72
73<div>
74 <table class="summary-list">
75 <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr>
76 <tr>
77 <td>
78 <div icon icon-id="deviceOnline">
79
80 <!-- icon directive needs to inject the following structure -->
81 <!-- ------------------------------------------------ -->
82 <svg width="20" height="20" viewBox="0 0 50 50">
83 <g class="icon deviceOnline">
84 <rect width="50" height="50" rx="4"></rect>
85 <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
86 </g>
87 </svg>
88 <!-- ------------------------------------------------ -->
89
90 </div>
91 </td>
92 <td>Some text</td>
93 <td>Some text</td>
94 </tr>
95 <tr>
96 <td>
97 <div icon icon-id="deviceOffline">
98
99 <!-- icon directive needs to inject the following structure -->
100 <!-- ------------------------------------------------ -->
101 <svg width="20" height="20" viewBox="0 0 50 50">
102 <g class="icon deviceOffline">
103 <rect width="50" height="50" rx="4"></rect>
104 <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
105 </g>
106 </svg>
107 <!-- ------------------------------------------------ -->
108
109
110 </div>
111 </td>
112 <td>Some text</td>
113 <td>Some Other text</td>
114 </tr>
115 </table>
116</div>
117
118<!-- common definitions for other SVG elements to use -->
119<svg width="0" height="0">
120 <defs>
121 <symbol id="ui" viewBox="0 0 10 10">
122 <path d="M2,2.5a.5,.5,0,0,1,.5-.5h5
123 a.5,.5,0,0,1,.5,.5v3a.5,.5,0,0,1-.5,.5h-5a.5,
124 .5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,.3-.3
125 h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,
126 .3h-4.4a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z">
127 </path>
128 </symbol>
129 </defs>
130</svg>
131
132</body>
133</html>