@3cr/viewer-browser 0.0.119 → 0.0.121

package/package.json

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

package/src/App.vue

@@ -81,4 +81,7 @@ async function loadInstance(
 .transparent {
   background-color: transparent;
 }
+.v-dialog.v-overlay--active {
+  backdrop-filter: blur(4px);
+}
 </style>

package/src/assets/images/dark/demo-logo-small.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1500" height="1500" viewBox="0 0 1500 1500">
+    <rect width="100" height="100" fill="#00000000"></rect>
+    <g transform="matrix(0.6666666666666666,0,0,0.6666666666666666,249.39393939393938,699.7570253441612)">
+        <svg viewBox="350 0 396 40" data-background-color="#ffffff" preserveAspectRatio="xMidYMid meet" height="151" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <g id="tight-bounds" transform="matrix(1,0,0,1,0.2400000000000091,-0.035904110262748645)">
+            <svg viewBox="0 0 395.52 40.07180822052549" height="40.07180822052549" width="395.52">
+                <g>
+                    <svg viewBox="0 0 437.0186036473404 44.27620771176696" height="40.07180822052549" width="395.52">
+                        <g transform="matrix(1,0,0,1,403.08335022558833,0)">
+                            <svg viewBox="0 0 33.935253421752066 44.27620771176696" height="44.27620771176696" width="33.935253421752066">
+                                <g>
+                                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="15.509999999999998 5 68.98000000000002 90" x="0" y="0" height="44.27620771176696" width="33.935253421752066" class="icon-icon-0" data-fill-palette-color="accent" id="icon-0"><path d="M49.948 5c-9.011 0-17.417 3.197-23.667 9.004-7.046 6.548-10.771 15.858-10.771 26.922 0 19.274 31.807 52.126 33.161 53.515 0.347 0.356 0.823 0.557 1.32 0.559h0.005c0.496 0 0.971-0.199 1.318-0.552 1.355-1.374 33.176-33.866 33.176-53.522C84.49 17.341 67.115 5 49.948 5m0.056 85.466c-6.047-6.46-30.79-33.85-30.79-49.54 0-10.008 3.317-18.379 9.588-24.208 5.563-5.168 13.073-8.015 21.146-8.015 14.853 0 30.839 10.084 30.839 32.223 0 16.003-24.725 43.133-30.783 49.54" fill="#ffffff" data-fill-palette-color="accent"></path><path d="M50 19.491c-10.019 0-18.171 8.152-18.171 18.171S39.981 55.833 50 55.833s18.171-8.152 18.171-18.171S60.019 19.491 50 19.491m0 32.638c-7.977 0-14.467-6.49-14.467-14.467S42.023 23.195 50 23.195c7.979 0 14.467 6.49 14.467 14.467S57.979 52.129 50 52.129" fill="#ffffff" data-fill-palette-color="accent">
+
+                                    </path>
+                                    </svg>
+                                </g>
+                            </svg>
+                        </g>
+                    </svg>
+                </g>
+                <defs></defs>
+            </svg>
+            <rect width="395.52" height="40.07180822052549" fill="none" stroke="none" visibility="hidden"></rect>
+        </g>
+        </svg>
+    </g>
+</svg>

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -255,8 +255,8 @@
           </div>
           <div
             v-else
-            class="d-flex align-center pb-1 my-n12"
-            :class="drawerCollapsed ? 'py-2' : 'pa-2'"
+            class="d-flex align-center pb-1"
+            :class="drawerCollapsed ? 'py-2' : 'pa-2 my-n12'"
           >
             <img
               v-if="!drawerCollapsed"
@@ -266,6 +266,14 @@
               class="ma-auto my-n16"
               style="opacity: 0.9"
             />
+            <img
+              v-if="drawerCollapsed"
+              src="../../assets/images/dark/demo-icon-small.png"
+              height="48"
+              alt="logo"
+              class="ma-auto"
+              style="opacity: 0.9"
+            />
           </div>
           <div
             class="text-center mx-auto pa-0 text-white sub-type"

package/src/demo/patient/DemoPatientShareToMobileModal.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  demoPatientSubtitles,
+  demoPatientTitle,
+  openUrl,
+} from "@/demo/options";
+
+export interface Props {
+  modal: boolean;
+  isModalOpen: boolean;
+}
+
+const emit = defineEmits<{
+  "update:modal": [value: boolean];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false,
+  isModalOpen: true,
+});
+
+const modalState = computed({
+  get() {
+    return props.modal;
+  },
+  set(value) {
+    emit("update:modal", value);
+  },
+});
+</script>
+
+<template>
+  <v-dialog v-model:model-value="modalState">
+    <v-card
+      class="pa-1 ma-auto position-relative motif-background"
+      theme="dark"
+      max-width="680"
+    >
+      <v-card-title>{{ demoPatientTitle }}</v-card-title>
+      <v-card-text v-for="subtitle in demoPatientSubtitles" :key="subtitle"
+        >{{ subtitle }}
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          color="error"
+          @click="modalState = false"
+          :disabled="!isModalOpen"
+        >
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          variant="tonal"
+          color="success"
+          @click="openUrl('https://3dicomviewer.com/pricing')"
+        >
+          Purchase 3Dicom Patient
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped></style>