Gitiles
Code Review Sign In
gerrit.onosproject.org / onos / f9872a0ddfbd926af3b4b7194b04e333aebf246c / . / web / gui / src / main / webapp / _dev / checkmark-xmark-icon.html
blob: fe49a76885ed943ada0ba8449aae565735398e1b [file] [log] [blame]
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]1<!DOCTYPE html>
2<!--
Brian O'Connor5ab426f2016-04-09 01:19:45 -0700[diff] [blame]3 ~ Copyright 2016-present Open Networking Laboratory
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]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 checkmarks and xmarks in table page
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]20 -->
21<html>
22<head>
23 <meta charset="utf-8">
24 <title>Embedded Check and X Marks</title>
25
26 <script src="../tp/d3.js"></script>
27
28 <link rel="stylesheet" href="../app/common.css">
29
30 <style>
31 html,
32 body {
33 background-color: #fff;
34 font-family: Arial, Helvetica, sans-serif;
35 font-size: 9pt;
36 }
37
38 svg .icon .glyph {
39 stroke: none;
40 fill: white;
41 fill-rule: evenodd;
42 }
43
Bri Prebilic Coleab582b82015-04-14 15:08:22 -0700[diff] [blame]44 svg .icon.active {
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]45 fill: green;
46 }
47
Bri Prebilic Coleab582b82015-04-14 15:08:22 -0700[diff] [blame]48 svg .icon.inactive {
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]49 fill: darkred;
50 }
51
52 svg .icon rect {
53 stroke: white;
54 stroke-width: 3px;
55 }
56
57 </style>
58</head>
59<body class="light">
60<!-- minimal framework to access glyphs library module -->
61<script>
62 var libs = {};
63 var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
64
65
66</script>
67
68<!-- Test HTML -->
69
70<div>
71 <table class="summary-list">
72 <tr> <th></th> <th>Two</th> <th>Three</th> </tr>
73 <tr>
74 <td>
Bri Prebilic Coleab582b82015-04-14 15:08:22 -0700[diff] [blame]75 <div icon icon-id="active">
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]76
77 <!-- icon directive needs to inject the following structure -->
78 <!-- ------------------------------------------------ -->
79 <svg width="20" height="20" viewBox="0 0 50 50">
Bri Prebilic Coleab582b82015-04-14 15:08:22 -0700[diff] [blame]80 <g class="icon active">
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]81 <rect width="50" height="50" rx="10"></rect>
82 <use class="glyph" xlink:href="#checkmark" width="50" height="50"></use>
83 </g>
84 </svg>
85 <!-- ------------------------------------------------ -->
86
87 </div>
88 </td>
89 <td>Some text</td>
90 <td>Some text</td>
91 </tr>
92 <tr>
93 <td>
Bri Prebilic Coleab582b82015-04-14 15:08:22 -0700[diff] [blame]94 <div icon icon-id="inactive">
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]95
96 <!-- icon directive needs to inject the following structure -->
97 <!-- ------------------------------------------------ -->
98 <svg width="20" height="20" viewBox="0 0 50 50">
Bri Prebilic Coleab582b82015-04-14 15:08:22 -0700[diff] [blame]99 <g class="icon inactive">
Bri Prebilic Cole94a856e2015-01-19 15:16:40 -0800[diff] [blame]100 <rect width="50" height="50" rx="10"></rect>
101 <use class="glyph" xlink:href="#xmark" width="50" height="50"></use>
102 </g>
103 </svg>
104 <!-- ------------------------------------------------ -->
105
106
107 </div>
108 </td>
109 <td>Some text</td>
110 <td>Some Other text</td>
111 </tr>
112 </table>
113</div>
114
115<!-- common definitions for other SVG elements to use -->
116<svg width="0" height="0">
117 <defs>
118 <symbol id="checkmark" viewBox="0 0 10 10">
119 <path d="M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047,1.797c0,0,
120 2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094
121 c0,0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413,0.461-1.194,
122 0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z">
123 </path>
124 </symbol>
125
126 <symbol id="xmark" viewBox="0 0 10 10">
127 <path d="M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463,
128 0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067
129 C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386,3.371C4.865,
130 2.544,4.541,1.918,4.541,1.918
131 S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349,1.122,
132 0.834,2.082,1.368,2.898
133 C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869,8.315,
134 0.917,9.556,2.4,9.067
135 C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498,1.949s0.535,
136 0.51,1.386-0.244
137 C9.819,7.902,8.967,7.196,8.967,7.196z">
138 </path>
139 </symbol>
140
141 </defs>
142</svg>
143
144</body>
145</html>