| <!DOCTYPE html> |
| <!-- |
| ~ Copyright 2016-present 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> |