From d4e200241114ec1b3d6d76e1d07636de021c2c76 Mon Sep 17 00:00:00 2001
From: Alan Rynne <alan@speckle.systems>
Date: Wed, 12 May 2021 23:23:12 +0200
Subject: [PATCH] feat(frontend): Viewer changes for embed only mode

---
 packages/frontend/src/components/Renderer.vue | 110 +++++++++++++-----
 1 file changed, 80 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/Renderer.vue b/packages/frontend/src/components/Renderer.vue
index 4551753cf..1c8fac105 100644
--- a/packages/frontend/src/components/Renderer.vue
+++ b/packages/frontend/src/components/Renderer.vue
@@ -44,6 +44,25 @@
         class="vertical-center elevation-10"
         style="position: absolute; width: 80%; left: 10%; opacity: 0.5"
       ></v-progress-linear>
+
+      <div v-if="embeded" class="top-left ma-2">
+        <v-btn
+          text
+          small
+          color="primary"
+          elevation="0"
+          href="http://speckle.systems"
+          target="blank"
+        >
+          Powered by
+          <img src="@/assets/logo.svg" height="16" />
+          Speckle
+        </v-btn>
+      </div>
+      <div v-if="embeded" class="top-right ma-2">
+        <v-btn color="primary" small :href="url" target="blank">View in Speckle.xyz</v-btn>
+      </div>
+
       <v-card
         v-show="hasLoadedModel && loadProgress >= 99"
         style="position: absolute; bottom: 0px; z-index: 2; width: 100%"
@@ -51,21 +70,21 @@
       >
         <!--  -->
         <v-btn-toggle class="elevation-0">
-          <v-btn
-            v-show="selectedObjects.length !== 0 && (showSelectionHelper || fullScreen)"
-            :small="!fullScreen"
-            dark
-            text
-            color="primary"
-            @click="showObjectDetails = !showObjectDetails"
-          >
-            Selection Details ({{ selectedObjects.length }})
-          </v-btn>
-          <v-menu top close-on-click offset-y style="z-index: 100">
-            <template #activator="{ on, attrs }">
-              <v-btn :small="!fullScreen" dark text color="primary" v-bind="attrs" v-on="on">
-                Share
-              </v-btn>
+          <v-menu v-if="!embeded" top close-on-click offset-y style="z-index: 100">
+            <template #activator="{ on: onMenu, attrs: menuAttrs }">
+              <v-tooltip top>
+                <template #activator="{ on: onTooltip, attrs: tooltipAttrs }">
+                  <v-btn
+                    small
+                    v-bind="{ ...tooltipAttrs, ...menuAttrs }"
+                    v-on="{ ...onTooltip, ...onMenu }"
+                    @click="zoomEx()"
+                  >
+                    <v-icon small>mdi-share-variant</v-icon>
+                  </v-btn>
+                </template>
+                Embed 3D Viewer
+              </v-tooltip>
             </template>
             <v-list dense>
               <v-list-item @click="copyIFrame">
@@ -76,12 +95,31 @@
               </v-list-item>
             </v-list>
           </v-menu>
+          <v-btn
+            v-show="selectedObjects.length !== 0 && (showSelectionHelper || fullScreen)"
+            small
+            color="primary"
+            @click="showObjectDetails = !showObjectDetails"
+          >
+            Selection Details ({{ selectedObjects.length }})
+          </v-btn>
           <v-menu top close-on-click offset-y style="z-index: 100">
-            <template #activator="{ on, attrs }">
-              <v-btn :small="!fullScreen" dark text color="primary" v-bind="attrs" v-on="on">
-                Set View
-              </v-btn>
+            <template #activator="{ on: onMenu, attrs: menuAttrs }">
+              <v-tooltip top>
+                <template #activator="{ on: onTooltip, attrs: tooltipAttrs }">
+                  <v-btn
+                    small
+                    v-bind="{ ...tooltipAttrs, ...menuAttrs }"
+                    v-on="{ ...onTooltip, ...onMenu }"
+                    @click="zoomEx()"
+                  >
+                    <v-icon small>mdi-camera</v-icon>
+                  </v-btn>
+                </template>
+                Select view
+              </v-tooltip>
             </template>
+
             <v-list dense>
               <v-list-item @click="setView('top')">
                 <v-list-item-title>Top</v-list-item-title>
@@ -108,7 +146,7 @@
 
           <v-tooltip top>
             <template #activator="{ on, attrs }">
-              <v-btn :small="!fullScreen" v-bind="attrs" v-on="on" @click="zoomEx()">
+              <v-btn v-bind="attrs" v-on="on" small @click="zoomEx()">
                 <v-icon small>mdi-cube-scan</v-icon>
               </v-btn>
             </template>
@@ -116,20 +154,15 @@
           </v-tooltip>
           <v-tooltip top>
             <template #activator="{ on, attrs }">
-              <v-btn :small="!fullScreen" v-bind="attrs" @click="sectionToggle()" v-on="on">
+              <v-btn v-bind="attrs" small @click="sectionToggle()" v-on="on">
                 <v-icon small>mdi-scissors-cutting</v-icon>
               </v-btn>
             </template>
             Show / Hide Section plane
           </v-tooltip>
-          <v-tooltip top v-if="!embeded">
+          <v-tooltip v-if="!embeded" top>
             <template #activator="{ on, attrs }">
-              <v-btn
-                :small="!fullScreen"
-                v-bind="attrs"
-                @click="fullScreen = !fullScreen"
-                v-on="on"
-              >
+              <v-btn small v-bind="attrs" @click="fullScreen = !fullScreen" v-on="on">
                 <v-icon small>{{ fullScreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen' }}</v-icon>
               </v-btn>
             </template>
@@ -137,7 +170,7 @@
           </v-tooltip>
           <v-tooltip top>
             <template #activator="{ on, attrs }">
-              <v-btn :small="!fullScreen" v-bind="attrs" @click="showHelp = !showHelp" v-on="on">
+              <v-btn v-bind="attrs" @click="showHelp = !showHelp" v-on="on" small>
                 <v-icon small>mdi-help</v-icon>
               </v-btn>
             </template>
@@ -234,8 +267,11 @@ export default {
     darkMode() {
       return this.$vuetify.theme.dark
     },
+    url() {
+      return window.location.origin + this.$route.path
+    },
     embedUrl() {
-      return window.location.href + '?embed=true'
+      return this.url + '?embed=true'
     }
   },
   watch: {
@@ -382,6 +418,20 @@ export default {
   display: none;
 }
 
+.top-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+}
+
+.top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+}
+
 #rendererparent {
   position: relative;
   display: inline-block;