huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(frontend): Viewer changes for embed only mode

Browse Source
This commit is contained in:
Alan Rynne
2021-05-12 23:23:12 +02:00
parent 842d4767a2
commit d4e2002411
1 changed files with 80 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/Renderer.vue
+80 -30
View File
@@ -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;