feat(frontend): adds views back

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>

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 }
   },