GUI -- Working towards embedding icons in tables. WIP.
- Skeleton of icon directive added.
- icons embedded in table - test HTML file.
- Augmented GlyphService.loadDefs() to allow subset of glyph ids to be specified.
Change-Id: I775a958ef9dc35b0b89a126d5c0497f72a721b71
diff --git a/web/gui/src/main/webapp/_sdh/embedded-icon.html b/web/gui/src/main/webapp/_sdh/embedded-icon.html
new file mode 100644
index 0000000..b4b8f34
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/embedded-icon.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<!--
+ ~ Copyright 2015 Open Networking Laboratory
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ -->
+
+<!--
+ ONOS -- Embedded icon test page
+
+ @author Simon Hunt
+ @author Bri Prebilic Cole
+ -->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Embedded Icons</title>
+
+ <script src="../tp/d3.js"></script>
+
+ <link rel="stylesheet" href="../app/common.css">
+
+ <style>
+ html,
+ body {
+ background-color: #fff;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 9pt;
+ }
+
+ svg .icon .glyph {
+ stroke: none;
+ fill: white;
+ fill-rule: evenodd;
+ }
+
+ svg .icon.deviceOnline {
+ fill: green;
+ }
+
+ svg .icon.deviceOffline {
+ fill: darkred;
+ }
+
+ svg .icon rect {
+ stroke: black;
+ stroke-width: 1px;
+ }
+
+ </style>
+</head>
+<body class="light">
+<!-- minimal framework to access glyphs library module -->
+<script>
+ var libs = {};
+ var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
+
+
+</script>
+
+<!-- Test HTML -->
+
+<div>
+ <table class="summary-list">
+ <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr>
+ <tr>
+ <td>
+ <div icon icon-id="deviceOnline">
+
+ <!-- icon directive needs to inject the following structure -->
+ <!-- ------------------------------------------------ -->
+ <svg width="20" height="20" viewBox="0 0 50 50">
+ <g class="icon deviceOnline">
+ <rect width="50" height="50" rx="4"></rect>
+ <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
+ </g>
+ </svg>
+ <!-- ------------------------------------------------ -->
+
+ </div>
+ </td>
+ <td>Some text</td>
+ <td>Some text</td>
+ </tr>
+ <tr>
+ <td>
+ <div icon icon-id="deviceOffline">
+
+ <!-- icon directive needs to inject the following structure -->
+ <!-- ------------------------------------------------ -->
+ <svg width="20" height="20" viewBox="0 0 50 50">
+ <g class="icon deviceOffline">
+ <rect width="50" height="50" rx="4"></rect>
+ <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
+ </g>
+ </svg>
+ <!-- ------------------------------------------------ -->
+
+
+ </div>
+ </td>
+ <td>Some text</td>
+ <td>Some Other text</td>
+ </tr>
+ </table>
+</div>
+
+<!-- common definitions for other SVG elements to use -->
+<svg width="0" height="0">
+ <defs>
+ <symbol id="ui" viewBox="0 0 10 10">
+ <path d="M2,2.5a.5,.5,0,0,1,.5-.5h5
+ a.5,.5,0,0,1,.5,.5v3a.5,.5,0,0,1-.5,.5h-5a.5,
+ .5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,.3-.3
+ h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,
+ .3h-4.4a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z">
+ </path>
+ </symbol>
+ </defs>
+</svg>
+
+</body>
+</html>