GUI -- WIP - VeilService
Change-Id: I56ff07f712e43f404e5ef5b8da2ba8cfa62102ff
diff --git a/web/gui/src/main/webapp/app/fw/layer/veil.css b/web/gui/src/main/webapp/app/fw/layer/veil.css
new file mode 100644
index 0000000..6411dbc
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/layer/veil.css
@@ -0,0 +1,49 @@
+/*
+ * 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 GUI -- Veil Service -- CSS file
+ */
+
+#veil {
+ z-index: 5000;
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 60px;
+}
+
+.light #veil {
+ background-color: rgba(0,0,0,0.75);
+}
+.dark #veil {
+ background-color: rgba(255,255,255,0.5);
+}
+
+#veil p {
+ display: block;
+ margin: 8px 20px;
+ font-size: 14pt;
+ font-style: italic;
+}
+
+.light #veil p {
+ color: #ddd;
+}
+.dark #veil p {
+ color: #404040;
+}
diff --git a/web/gui/src/main/webapp/app/fw/layer/veil.js b/web/gui/src/main/webapp/app/fw/layer/veil.js
new file mode 100644
index 0000000..7e1b43d
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/layer/veil.js
@@ -0,0 +1,72 @@
+/*
+ * 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 GUI -- Layer -- Veil Service
+
+ Provides a mechanism to display an overlaying div with information.
+ Used mainly for web socket connection interruption.
+ */
+(function () {
+ 'use strict';
+
+ // injected references
+ var $log, fs;
+
+ var veil, svg;
+
+ function show(msg) {
+ veil.selectAll('p').remove();
+
+ //veil.data(msg).enter().append('p').text(function (d) { return d; });
+
+ msg.forEach(function (line) {
+ veil.insert('p').text(line);
+ });
+
+ veil.style('display', 'block');
+
+ // TODO: disable key bindings
+ }
+
+ function hide() {
+ veil.style('display', 'none');
+ // TODO: re-enable key bindings
+ }
+
+ angular.module('onosLayer')
+ .factory('VeilService', ['$log', 'FnService', 'GlyphService',
+ function (_$log_, _fs_, gs) {
+ $log = _$log_;
+ fs = _fs_;
+
+ veil = d3.select('#veil');
+
+ svg = veil.append('svg').attr({
+ width: 500,
+ height: 500,
+ viewBox: '0 0 500 500'
+ });
+
+ gs.addGlyph(svg, 'bird', 400);
+
+ return {
+ show: show,
+ hide: hide
+ };
+ }]);
+
+}());
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index da9efb0..7bd640d 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -61,6 +61,7 @@
<script src="fw/layer/layer.js"></script>
<script src="fw/layer/panel.js"></script>
<script src="fw/layer/flash.js"></script>
+ <script src="fw/layer/veil.js"></script>
<!-- Framework and library stylesheets included here -->
<!-- TODO: use a single catenated-minified file here -->
@@ -71,6 +72,7 @@
<link rel="stylesheet" href="fw/svg/icon.css">
<link rel="stylesheet" href="fw/layer/panel.css">
<link rel="stylesheet" href="fw/layer/flash.css">
+ <link rel="stylesheet" href="fw/layer/veil.css">
<link rel="stylesheet" href="fw/nav/nav.css">
<!-- This is where contributed javascript will get injected -->
@@ -107,7 +109,10 @@
<div id="alerts"></div>
<div id="flash"></div>
<div id="quickhelp"></div>
- <div id="deathmask"></div>
+ <div id="veil"
+ resize
+ ng-style="resizeWithOffset(0, 0)"
+ ></div>
</div>
</body>
</html>