From 81d43ecfc5109168210d7ee9c755d55a37ce9973 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 8 Jan 2022 21:05:25 +0000
Subject: [PATCH] feat(frontend): adds views back

---
 .../components/viewer/CanonicalViews.vue      | 53 +++++++++++++++++++
 .../components/viewer/ViewerControls.vue      | 12 ++---
 2 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 packages/frontend/src/cleanup/components/viewer/CanonicalViews.vue

diff --git a/packages/frontend/src/cleanup/components/viewer/CanonicalViews.vue b/packages/frontend/src/cleanup/components/viewer/CanonicalViews.vue
new file mode 100644
index 000000000..9b885bac9
--- /dev/null
+++ b/packages/frontend/src/cleanup/components/viewer/CanonicalViews.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-menu
+    open-on-hover
+    top
+    offset-y
+    rounded="lg"
+    origin="center"
+    nudge-top="10"
+    close-delay="400"
+    nudge-left="10"
+  >
+    <template #activator="{ on, attrs }">
+      <v-btn :small="small" rounded class="mr-2" v-bind="attrs" v-on="on">
+        <v-icon small>mdi-camera-outline</v-icon>
+      </v-btn>
+    </template>
+    <v-list dense nav>
+      <v-list-item v-for="(item, index) in items" :key="index" @click="setView(item.title)">
+        <v-list-item-title>
+          <v-icon small>mdi-camera-control</v-icon>
+          {{ item.title }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+<script>
+export default {
+  props: ['small'],
+  data() {
+    return {
+      items: [
+        { title: 'Top' },
+        { title: 'Front' },
+        { title: 'Left' },
+        { title: 'Back' },
+        { title: 'Right' }
+      ]
+    }
+  },
+  methods: {
+    setView(view) {
+      window.__viewer.interactions.rotateTo(view.toLowerCase())
+    }
+  }
+}
+</script>
+<style scoped>
+.test {
+  position: absolute;
+  top: 0;
+}
+</style>
diff --git a/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue b/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue
index ae7c78402..d219fd71a 100644
--- a/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue
@@ -7,7 +7,6 @@
         v-show="showVisReset"
         v-tooltip="`Resets all applied filters`"
         :zzzdisabled="!showVisReset"
-        xxxtile
         :small="small"
         rounded
         class="mr-2"
@@ -18,7 +17,6 @@
       </v-btn>
       <v-btn
         v-tooltip="`Toggle between perspective or ortho camera.`"
-        xxxtile
         :small="small"
         rounded
         class="mr-2"
@@ -26,12 +24,12 @@
       >
         <v-icon small>mdi-perspective-less</v-icon>
       </v-btn>
-      <v-btn xxxtile :small="small" rounded class="mr-2" @click="zoomEx()">
-        <v-icon small>mdi-cube-scan</v-icon>
+      <canonical-views :small="small" />
+      <v-btn v-tooltip="'Zoom extents'" :small="small" rounded class="mr-2" @click="zoomEx()">
+        <v-icon small>mdi-arrow-expand</v-icon>
       </v-btn>
       <v-btn
         v-tooltip="`Toggle section box`"
-        xxxtile
         :small="small"
         rounded
         class="mr-2"
@@ -41,7 +39,6 @@
       </v-btn>
       <v-btn
         v-tooltip="'Overlay another commit or object'"
-        xxxtile
         color="primary"
         :small="small"
         rounded
@@ -55,6 +52,9 @@
 </template>
 <script>
 export default {
+  components: {
+    CanonicalViews: () => import('@/cleanup/components/viewer/CanonicalViews')
+  },
   props: {
     small: { type: Boolean, default: false }
   },