blob: 1a03584ba4c67e19997c533073df6242b9b9fa27 [file] [log] [blame]
<!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>