| <!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 checkmarks and xmarks in table page |
| --> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Embedded Check and X Marks</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: white; |
| stroke-width: 3px; |
| } |
| |
| </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="10"></rect> |
| <use class="glyph" xlink:href="#checkmark" 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="10"></rect> |
| <use class="glyph" xlink:href="#xmark" 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="checkmark" viewBox="0 0 10 10"> |
| <path d="M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047,1.797c0,0, |
| 2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094 |
| c0,0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413,0.461-1.194, |
| 0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z"> |
| </path> |
| </symbol> |
| |
| <symbol id="xmark" viewBox="0 0 10 10"> |
| <path d="M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463, |
| 0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067 |
| C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386,3.371C4.865, |
| 2.544,4.541,1.918,4.541,1.918 |
| S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349,1.122, |
| 0.834,2.082,1.368,2.898 |
| C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869,8.315, |
| 0.917,9.556,2.4,9.067 |
| C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498,1.949s0.535, |
| 0.51,1.386-0.244 |
| C9.819,7.902,8.967,7.196,8.967,7.196z"> |
| </path> |
| </symbol> |
| |
| </defs> |
| </svg> |
| |
| </body> |
| </html> |