Browse Source

Added icons for close and help

Raanan Weber 7 years ago
parent
commit
8dacec9f00

BIN
Viewer/assets/img/close.png


BIN
Viewer/assets/img/help-circle.png


+ 0 - 1
Viewer/assets/templates/default/defaultTemplate.html

@@ -29,7 +29,6 @@
         position: absolute;
         z-index: 99;
         opacity: 0;
-        pointer-events: none;
         display: flex;
         justify-content: center;
         align-items: center;

+ 7 - 3
Viewer/assets/templates/default/overlay.html

@@ -5,7 +5,7 @@
         display: none;
         align-items: center;
         justify-content: center;
-        background-color: rgba(255, 255, 255, 0.3);
+        background-color: rgba(121, 121, 121, 0.3);
     }
 
     error.overlay {
@@ -14,12 +14,16 @@
 
     div#close-button {
         position: absolute;
-        top: 30px;
-        right: 30px;
+        top: 10px;
+        right: 10px;
         width: 30px;
         height: 30px;
         cursor: pointer;
     }
+
+    div#close-button img {
+        width: 100%;
+    }
 </style>
 
 <div id="close-button">

+ 12 - 2
Viewer/src/configuration/configuration.ts

@@ -189,17 +189,23 @@ export let defaultConfiguration: ViewerConfiguration = {
                         html: require("../../assets/templates/default/navbar.html"),
                         config: {
                             buttons: [
+                                /*{
+                                    id: 'help-button',
+                                    altText: "Help",
+                                    image: require('../../assets/img/help-circle.png')
+                                },*/
                                 {
                                     id: 'fullscreen-button',
                                     altText: "Fullscreen",
                                     image: require('../../assets/img/fullscreen.png')
-                                }
+                                },
+
                             ],
                             visibilityTimeout: 2000/*,
                             disableOnFullscreen: false*/
                         },
                         events: {
-                            pointerdown: ['#fullscreen-button']
+                            pointerdown: ['#fullscreen-button'/*, '#help-button'*/]
                         }
                     }
                 }
@@ -216,6 +222,10 @@ export let defaultConfiguration: ViewerConfiguration = {
                     error: {
                         html: require("../../assets/templates/default/error.html")
                     }
+                },
+                config: {
+                    closeImage: require('../../assets/img/close.png'),
+                    closeText: 'Close'
                 }
             }
         }

+ 1 - 1
Viewer/src/viewer/defaultViewer.ts

@@ -236,7 +236,7 @@ export class DefaultViewer extends AbstractViewer {
     }
 
     public hideOverlayScreen() {
-        return this.templateManager.getTemplate('loadingScreen').hide((template => {
+        return this.templateManager.getTemplate('overlay').hide((template => {
             template.parent.style.opacity = "0";
             let onTransitionEnd = () => {
                 template.parent.removeEventListener("transitionend", onTransitionEnd);