Mercurial > hg > orthanc-stone

changeset 1686:59fc37c10cfa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
nicer info message at startup
author Sebastien Jodogne <s.jodogne@gmail.com>
date Wed, 25 Nov 2020 16:51:44 +0100
parents 7896aac14587
children c14dd6e11ddd fad38c4525f9
files Applications/StoneWebViewer/WebApplication/app-fixes.css Applications/StoneWebViewer/WebApplication/index.html Applications/StoneWebViewer/WebAssembly/CMakeLists.txt
diffstat 3 files changed, 93 insertions(+), 42 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Applications/StoneWebViewer/WebApplication/app-fixes.css	Wed Nov 25 16:51:44 2020 +0100
@@ -0,0 +1,45 @@
+/* https://stackoverflow.com/a/16863182/881731 */
+.tooltip {
+    position: fixed;
+}
+
+
+/* The following fixes the layout if Bootstrap CSS is not used */
+
+/**
+ *,
+ *::before,
+ *::after {
+box-sizing: border-box;
+}
+**/
+
+.wvInfoScreen {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wvInfoPopup {
+    background-color: black;
+    border: white;
+    border-style: solid;
+    border-radius: 5px;
+    border-width: 2px;
+    padding: 20px;
+}
+
+.wvInfoPopupCloseButton {
+    background-color: gray;
+    border: none;
+    border-radius: 5px;
+    padding: 7px;
+}
--- a/Applications/StoneWebViewer/WebApplication/index.html	Wed Nov 25 12:16:53 2020 +0100
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Wed Nov 25 16:51:44 2020 +0100
@@ -13,26 +13,54 @@
     <link rel="stylesheet" href="css/bootstrap.css">
     <link rel="stylesheet" href="open-sans.css">
     <link rel="stylesheet" href="app.css">
-
-    <!-- https://stackoverflow.com/a/16863182/881731 -->
-    <style>
-      .tooltip {
-      position: fixed;
-      }
-    </style>
-
-    <!-- Fix if Bootstrap CSS is not used -->
-    <!--style>
-        *,
-        *::before,
-        *::after {
-        box-sizing: border-box;
-        }
-        </style-->
+    <link rel="stylesheet" href="app-fixes.css">
   </head>
+  
   <body class="wv-body">
     <div id="wv">
-      <div class="wvLoadingScreen" v-show="!ready">
+
+      <div class="wvInfoScreen" v-show="modalNotDiagnostic" style="display: none">
+        <div class="wvInfoPopup">
+          <div class="wvInfoPopupLogo">
+            <a href="https://www.osimis.io" target="_blank">
+              <img style="width: 340px;" src="img/orthanc.png"/>
+            </a>
+          </div>
+          <div class="wvInfoPopupText">
+            <h3>Usage</h3>
+            <p>
+              The Stone Web Viewer is intended for<br> patients
+              reviewing their images,<br> for research and for quality
+              assurance.
+            </p>
+            <!--
+                <h3>Documentation</h3>
+            <p>
+              <a href="#" target="_blank">User Manual</a>
+            </p>
+            <h3>Versions</h3>
+            <p>
+              Orthanc: aa<br>
+              Osimis WebViewer: bb
+            </p>
+            -->
+          </div>
+          <div class="wvInfoPopupForm">
+            <br>
+            <label>Show this info panel at startup
+              <input type="checkbox" style="margin-left: 20px" v-model="settingNotDiagnostic">
+            </label>
+            <br><br>
+            <div style="text-align: center;">
+              <button class="wvInfoPopupCloseButton" @click="modalNotDiagnostic = false">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="wvLoadingScreen" v-show="!ready && !modalNotDiagnostic" style="display: none">
         <span class="wvLoadingSpinner">
           <div class="bounce1"></div>
           <div class="bounce2"></div>
@@ -40,7 +68,8 @@
         </span>
       </div>
 
-      <div class="fluid-height fluid-width" v-show="ready">
+      <div class="fluid-height fluid-width" v-show="ready && !modalNotDiagnostic"
+           style="display: none">
 
         <div class="wvWarning wvPrintExclude" v-show="modalWarning">
           <div class="wvWarning-content clearfix">
@@ -59,30 +88,6 @@
         </div>
 
 
-        <div class="wvWarning wvPrintExclude" v-show="modalNotDiagnostic">
-          <div class="wvWarning-content clearfix">
-            <span class="wvWarning-text">
-              <h2 class="mb10"><i class="fa fa-exclamation-triangle wvWarning-icon mr5"></i>Warning!</h2>
-              <p class="mn mb10" style="color:#000">
-                The Stone Web Viewer is intended for <b>patients
-                reviewing their images<b>, for research purpose and
-                for quality assurance.
-              </p>
-
-              <div class="form-check">
-                <input class="form-check-input" type="checkbox" v-model="settingNotDiagnostic" id="checkboxNotDiagnostic1">
-                <label class="form-check-label" for="checkboxNotDiagnostic1" style="color:#000;display:inline">
-                  Show this warning at startup
-                </label>
-              </div>
-            </span> 
-          </div>
-          <div class="text-right mb10 mr10">
-            <button class="btn btn-primary" @click="modalNotDiagnostic=false">OK</button>
-          </div>
-        </div>
-
-
         <div class="wvWarning wvPrintExclude" v-show="modalPreferences">
           <div class="wvWarning-content clearfix">
             <span class="wvWarning-text">
--- a/Applications/StoneWebViewer/WebAssembly/CMakeLists.txt	Wed Nov 25 12:16:53 2020 +0100
+++ b/Applications/StoneWebViewer/WebAssembly/CMakeLists.txt	Wed Nov 25 16:51:44 2020 +0100
@@ -154,6 +154,7 @@
 install(
   FILES
   ${CMAKE_CURRENT_BINARY_DIR}/StoneWebViewer.wasm
+  ${CMAKE_SOURCE_DIR}/../WebApplication/app-fixes.css
   ${CMAKE_SOURCE_DIR}/../WebApplication/app.css
   ${CMAKE_SOURCE_DIR}/../WebApplication/app.js
   ${CMAKE_SOURCE_DIR}/../WebApplication/index.html