홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
94a856e7 1 parent 64b60cd3

GUI -- Added new icons to glyphs library. 

- Edited glyph-spec and icon-spec to test the changes.

Change-Id: I23472b7f6699a46da1728c49a9d72f826244c739
Inline Side-by-side
Showing 4 changed files with 180 additions and 6 deletions
1 +<!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 checkmarks and xmarks in table page
20 +
21 + @author Bri Prebilic Cole
22 + -->
23 +<html>
24 +<head>
25 + <meta charset="utf-8">
26 + <title>Embedded Check and X Marks</title>
27 +
28 + <script src="../tp/d3.js"></script>
29 +
30 + <link rel="stylesheet" href="../app/common.css">
31 +
32 + <style>
33 + html,
34 + body {
35 + background-color: #fff;
36 + font-family: Arial, Helvetica, sans-serif;
37 + font-size: 9pt;
38 + }
39 +
40 + svg .icon .glyph {
41 + stroke: none;
42 + fill: white;
43 + fill-rule: evenodd;
44 + }
45 +
46 + svg .icon.deviceOnline {
47 + fill: green;
48 + }
49 +
50 + svg .icon.deviceOffline {
51 + fill: darkred;
52 + }
53 +
54 + svg .icon rect {
55 + stroke: white;
56 + stroke-width: 3px;
57 + }
58 +
59 + </style>
60 +</head>
61 +<body class="light">
62 +<!-- minimal framework to access glyphs library module -->
63 +<script>
64 + var libs = {};
65 + var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
66 +
67 +
68 +</script>
69 +
70 +<!-- Test HTML -->
71 +
72 +<div>
73 + <table class="summary-list">
74 + <tr> <th></th> <th>Two</th> <th>Three</th> </tr>
75 + <tr>
76 + <td>
77 + <div icon icon-id="deviceOnline">
78 +
79 + <!-- icon directive needs to inject the following structure -->
80 + <!-- ------------------------------------------------ -->
81 + <svg width="20" height="20" viewBox="0 0 50 50">
82 + <g class="icon deviceOnline">
83 + <rect width="50" height="50" rx="10"></rect>
84 + <use class="glyph" xlink:href="#checkmark" width="50" height="50"></use>
85 + </g>
86 + </svg>
87 + <!-- ------------------------------------------------ -->
88 +
89 + </div>
90 + </td>
91 + <td>Some text</td>
92 + <td>Some text</td>
93 + </tr>
94 + <tr>
95 + <td>
96 + <div icon icon-id="deviceOffline">
97 +
98 + <!-- icon directive needs to inject the following structure -->
99 + <!-- ------------------------------------------------ -->
100 + <svg width="20" height="20" viewBox="0 0 50 50">
101 + <g class="icon deviceOffline">
102 + <rect width="50" height="50" rx="10"></rect>
103 + <use class="glyph" xlink:href="#xmark" width="50" height="50"></use>
104 + </g>
105 + </svg>
106 + <!-- ------------------------------------------------ -->
107 +
108 +
109 + </div>
110 + </td>
111 + <td>Some text</td>
112 + <td>Some Other text</td>
113 + </tr>
114 + </table>
115 +</div>
116 +
117 +<!-- common definitions for other SVG elements to use -->
118 +<svg width="0" height="0">
119 + <defs>
120 + <symbol id="checkmark" viewBox="0 0 10 10">
121 + <path d="M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047,1.797c0,0,
122 + 2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094
123 + c0,0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413,0.461-1.194,
124 + 0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z">
125 + </path>
126 + </symbol>
127 +
128 + <symbol id="xmark" viewBox="0 0 10 10">
129 + <path d="M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463,
130 + 0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067
131 + C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386,3.371C4.865,
132 + 2.544,4.541,1.918,4.541,1.918
133 + S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349,1.122,
134 + 0.834,2.082,1.368,2.898
135 + C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869,8.315,
136 + 0.917,9.556,2.4,9.067
137 + C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498,1.949s0.535,
138 + 0.51,1.386-0.244
139 + C9.819,7.902,8.967,7.196,8.967,7.196z">
140 + </path>
141 + </symbol>
142 +
143 + </defs>
144 +</svg>
145 +
146 +</body>
147 +</html>
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 ONOS GUI -- SVG -- Glyph Service 18 ONOS GUI -- SVG -- Glyph Service
19 19
20 @author Simon Hunt 20 @author Simon Hunt
21 + @author Bri Prebilic Cole
21 */ 22 */
22 (function () { 23 (function () {
23 'use strict'; 24 'use strict';
...@@ -116,7 +117,24 @@ ...@@ -116,7 +117,24 @@
116 uiAttached: "M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3" + 117 uiAttached: "M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3" +
117 "a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1," + 118 "a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1," +
118 ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" + 119 ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" +
119 - "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z" 120 + "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z",
121 +
122 + checkMark: "M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047," +
123 + "1.797c0,0,2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094c0," +
124 + "0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413," +
125 + "0.461-1.194,0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z",
126 +
127 + xMark: "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," +
130 + "3.371C4.865,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," +
132 + "1.122,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," +
134 + "8.315,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," +
136 + "1.949s0.535,0.51,1.386-0.244" +
137 + "C9.819,7.902,8.967,7.196,8.967,7.196z"
120 }; 138 };
121 139
122 // ---------------------------------------------------------------------- 140 // ----------------------------------------------------------------------
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 ONOS GUI -- SVG -- Icon Service 18 ONOS GUI -- SVG -- Icon Service
19 19
20 @author Simon Hunt 20 @author Simon Hunt
21 + @author Bri Prebilic Cole
21 */ 22 */
22 (function () { 23 (function () {
23 'use strict'; 24 'use strict';
...@@ -31,10 +32,8 @@ ...@@ -31,10 +32,8 @@
31 // maps icon id to the glyph id it uses. 32 // maps icon id to the glyph id it uses.
32 // note: icon id maps to a CSS class for styling that icon 33 // note: icon id maps to a CSS class for styling that icon
33 var glyphMapping = { 34 var glyphMapping = {
34 - deviceOnline: 'crown', 35 + deviceOnline: 'checkMark',
35 - deviceOffline: 'chain' 36 + deviceOffline: 'xMark'
36 - //deviceOnline: 'checkMark',
37 - //deviceOffline: 'xMark'
38 }; 37 };
39 38
40 function ensureIconLibDefs() { 39 function ensureIconLibDefs() {
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 describe('factory: fw/svg/glyph.js', function() { 22 describe('factory: fw/svg/glyph.js', function() {
23 var $log, fs, gs, d3Elem; 23 var $log, fs, gs, d3Elem;
24 24
25 - var numBaseGlyphs = 11, 25 + var numBaseGlyphs = 13,
26 vbBird = '352 224 113 112', 26 vbBird = '352 224 113 112',
27 vbGlyph = '0 0 110 110', 27 vbGlyph = '0 0 110 110',
28 vbBadge = '0 0 10 10', 28 vbBadge = '0 0 10 10',
...@@ -38,6 +38,8 @@ describe('factory: fw/svg/glyph.js', function() { ...@@ -38,6 +38,8 @@ describe('factory: fw/svg/glyph.js', function() {
38 chain: 'M60.4,77.6c-', 38 chain: 'M60.4,77.6c-',
39 crown: 'M99.5,21.6c0,', 39 crown: 'M99.5,21.6c0,',
40 uiAttached: 'M2,2.5a.5,.5', 40 uiAttached: 'M2,2.5a.5,.5',
41 + checkMark: 'M2.644,4.531c0',
42 + xMark: 'M8.967,7.196C8.172',
41 43
42 // our test ones.. 44 // our test ones..
43 triangle: 'M.5,.2', 45 triangle: 'M.5,.2',
...@@ -140,6 +142,14 @@ describe('factory: fw/svg/glyph.js', function() { ...@@ -140,6 +142,14 @@ describe('factory: fw/svg/glyph.js', function() {
140 gs.init(); 142 gs.init();
141 verifyGlyphLoadedInCache('uiAttached', vbBadge); 143 verifyGlyphLoadedInCache('uiAttached', vbBadge);
142 }); 144 });
145 + it('should load the checkMark glyph', function() {
146 + gs.init();
147 + verifyGlyphLoadedInCache('checkMark', vbBadge);
148 + });
149 + it('should load the xMark glyph', function() {
150 + gs.init();
151 + verifyGlyphLoadedInCache('xMark', vbBadge);
152 + });
143 153
144 // define some glyphs that we want to install 154 // define some glyphs that we want to install
145 155
......