@3cr/viewer-browser 0.0.140 → 0.0.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.140",
+  "version": "0.0.142",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -220,9 +220,13 @@
 
         <v-spacer />
         <div class="font-weight-bold">
-          <span v-if="isDemo" class="text-capitalize"
-            >[3DICOM {{ demoType }} Demo]&nbsp;</span
-          >Not for Diagnostic Use
+          <span v-if="isDemo" class="text-capitalize">
+            3DICOM {{ demoType }} DEMO&nbsp;|
+          </span>
+          <span v-else class="text-capitalize">
+            3DICOM Patient Viewer&nbsp;|
+          </span>
+          Not for Diagnostic Use
         </div>
         <v-spacer />
         <v-btn
@@ -500,21 +504,24 @@
 
       <v-btn
         height="84"
+        color="grey"
+        variant="flat"
         width="20"
         min-width="20"
-        class="my-auto rounded-bl-0 rounded-tl-0 pa-0 slide-item-card"
+        class="my-auto rounded-bl-0 rounded-tl-0 pa-0"
         style="
           border-bottom-left-radius: 0 !important;
           border-top-left-radius: 0 !important;
           position: absolute;
           top: 50%;
-          z-index: 1000;
+          opacity: 0.7;
+          z-index: 100000;
           transform: translateY(-50%);
         "
         :style="drawerCollapsed ? 'left: 68px' : 'left: 300px'"
         @click="drawerCollapsed = !drawerCollapsed"
       >
-        <v-icon>{{
+        <v-icon color="black">{{
           drawerCollapsed ? "chevron_right" : "chevron_left"
         }}</v-icon>
       </v-btn>

package/src/demo/DemoModal.vue

@@ -26,7 +26,7 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card class="pa-1 ma-auto position-relative" max-width="450">
-      <v-card-title>Demo Instance</v-card-title>
+      <v-card-title class="font-weight-bold">Demo Instance</v-card-title>
       <v-card-text>
         This instance of 3Dicom Online Viewer is a Demo instance.
       </v-card-text>

package/src/demo/licence/DemoLicenceInfoModal.vue

@@ -37,7 +37,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">{{
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{
         demoLicenceTitle
       }}</v-card-title>
       <v-card-text
@@ -47,11 +47,7 @@ const modalState = computed({
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
-        <v-btn
-          color="error"
-          @click="modalState = false"
-          :disabled="!isModalOpen"
-        >
+        <v-btn color="red" @click="modalState = false" :disabled="!isModalOpen">
           Continue with Demo
         </v-btn>
         <v-spacer />

package/src/demo/licence/DemoLicenceSendToPartyModal.vue

@@ -47,7 +47,7 @@ function isValid() {
       max-width="680"
       min-width="450"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Send Scan to a 3rd Party
       </v-card-title>
       <v-card-text>
@@ -116,7 +116,7 @@ function isValid() {
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -140,7 +140,9 @@ function isValid() {
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2"> Scan shared </v-card-title>
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
+        Scan shared
+      </v-card-title>
       <v-card-text class="text-justify">
         Congratulations, you have sent your scan to a 3rd party.
       </v-card-text>
@@ -153,7 +155,7 @@ function isValid() {
         please select below
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"

package/src/demo/licence/DemoLicenceShareToMobileModal.vue

@@ -32,7 +32,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Download 3Dicom Mobile
       </v-card-title>
       <v-card-text class="text-justify">
@@ -50,7 +50,7 @@ const modalState = computed({
         />
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -73,7 +73,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Load your scan
       </v-card-title>
       <v-card-text class="text-justify">
@@ -83,7 +83,7 @@ const modalState = computed({
         Tomography (PET) scans.
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"

package/src/demo/options.ts

@@ -134,9 +134,14 @@ export const demoPatientOptions: LoadViewerOptions = {
   OnScreenshot: undefined,
 };
 
+const optionalTypes = ["licence", "patient"];
+
 export const demoType = computed(() => {
   const urlParams = new URLSearchParams(window.location.search);
-  return (urlParams.get("demoType") || "licence").toLowerCase();
+  let type = (urlParams.get("demoType") || "licence").toLowerCase();
+
+  if (type === "license") type = optionalTypes[0];
+  return optionalTypes.includes(type) ? type : optionalTypes[0];
 });
 
 export function executeDemoOption(key: keyof LoadViewerOptions) {

package/src/demo/patient/DemoPatientInfoModal.vue

@@ -37,7 +37,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">{{
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{
         demoPatientTitle
       }}</v-card-title>
       <v-card-text
@@ -47,11 +47,7 @@ const modalState = computed({
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
-        <v-btn
-          color="error"
-          @click="modalState = false"
-          :disabled="!isModalOpen"
-        >
+        <v-btn color="red" @click="modalState = false" :disabled="!isModalOpen">
           Continue with Demo
         </v-btn>
         <v-spacer />

package/src/demo/patient/DemoPatientSendToPartyModal.vue

@@ -47,7 +47,7 @@ function isValid() {
       max-width="680"
       min-width="450"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Send Scan to a 3rd Party
       </v-card-title>
       <v-card-text>
@@ -116,7 +116,7 @@ function isValid() {
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -140,7 +140,9 @@ function isValid() {
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2"> Scan shared </v-card-title>
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
+        Scan shared
+      </v-card-title>
       <v-card-text class="text-justify">
         Congratulations, you have sent your scan to a 3rd party.
       </v-card-text>
@@ -153,7 +155,7 @@ function isValid() {
         please select below
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"

package/src/demo/patient/DemoPatientShareToMobileModal.vue

@@ -32,7 +32,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Download 3Dicom Mobile
       </v-card-title>
       <v-card-text class="text-justify">
@@ -50,7 +50,7 @@ const modalState = computed({
         />
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -73,7 +73,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Load your scan
       </v-card-title>
       <v-card-text class="text-justify">
@@ -83,7 +83,7 @@ const modalState = computed({
         Tomography (PET) scans.
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"