GUI -- WIP - VeilService

Change-Id: I56ff07f712e43f404e5ef5b8da2ba8cfa62102ff

+/*
+ * 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;
+}

+/*
+ * 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
+                };
+        }]);
+
+}());

@@ -61,6 +61,7 @@
     <script src="fw/layer/layer.js"></script>
     <script src="fw/layer/layer.js"></script>
     <script src="fw/layer/panel.js"></script>
     <script src="fw/layer/panel.js"></script>
     <script src="fw/layer/flash.js"></script>
     <script src="fw/layer/flash.js"></script>
+    <script src="fw/layer/veil.js"></script>
 
 
     <!-- Framework and library stylesheets included here -->
     <!-- Framework and library stylesheets included here -->
     <!-- TODO: use a single catenated-minified file 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/svg/icon.css">
     <link rel="stylesheet" href="fw/layer/panel.css">
     <link rel="stylesheet" href="fw/layer/panel.css">
     <link rel="stylesheet" href="fw/layer/flash.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">
     <link rel="stylesheet" href="fw/nav/nav.css">
 
 
     <!-- This is where contributed javascript will get injected -->
     <!-- This is where contributed javascript will get injected -->
@@ -107,7 +109,10 @@
         <div id="alerts"></div>
         <div id="alerts"></div>
         <div id="flash"></div>
         <div id="flash"></div>
         <div id="quickhelp"></div>
         <div id="quickhelp"></div>
-        <div id="deathmask"></div>
+        <div id="veil"
+             resize
+             ng-style="resizeWithOffset(0, 0)"
+                ></div>
     </div>
     </div>
 </body>
 </body>
 </html>
 </html>