diff options
Diffstat (limited to 'framework/src/onos/web/gui/src/main/webapp/_sdh/embedded-icon.html')
| -rw-r--r-- | framework/src/onos/web/gui/src/main/webapp/_sdh/embedded-icon.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/framework/src/onos/web/gui/src/main/webapp/_sdh/embedded-icon.html b/framework/src/onos/web/gui/src/main/webapp/_sdh/embedded-icon.html new file mode 100644 index 00000000..8d4d62a8 --- /dev/null +++ b/framework/src/onos/web/gui/src/main/webapp/_sdh/embedded-icon.html @@ -0,0 +1,130 @@ +<!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 + --> +<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.active { + fill: green; + } + + svg .icon.inactive { + 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></th> <th>Two</th> <th>Three</th> </tr> + <tr> + <td> + <div icon icon-id="active"> + + <!-- icon directive needs to inject the following structure --> + <!-- ------------------------------------------------ --> + <svg width="20" height="20" viewBox="0 0 50 50"> + <g class="icon active"> + <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="inactive"> + + <!-- icon directive needs to inject the following structure --> + <!-- ------------------------------------------------ --> + <svg width="20" height="20" viewBox="0 0 50 50"> + <g class="icon inactive"> + <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> |