checkmark-xmark-icon.html 4.44 KB
<!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 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.deviceOnline {
            fill: green;
        }

        svg .icon.deviceOffline {
            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="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="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="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="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>