Merge branch 'feature/pan-corkboard' into develop

richjyoung · Mar 31, 2018 · 727fa3f · 727fa3f
2 parents d1bef90 + d38c0d5
commit 727fa3f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
diff --git a/view/corkboard.vue b/view/corkboard.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="corkboard">
+<div class="corkboard" @mousedown="corkboard_mousedown">
     <corkboard-toolbar />
     <sticky v-for="(sticky, index) in stickies" :key=index :item-id="index" />
     <polaroid v-for="(polaroid, index) in polaroids" :key=index :item-id="index" />
@@ -19,6 +19,37 @@ export default {
         'sticky': sticky,
         'polaroid': polaroid
     },
+    methods: {
+        corkboard_mousedown: function (e) {
+            e = e || window.event;
+            if(e.target == this.$el) {
+                e.preventDefault();
+                
+                var startX = e.clientX;
+                var startY = e.clientY;
+
+                document.onmouseup = function() {
+                    document.onmouseup = null;
+                    document.onmousemove = null;
+                }
+
+                document.onmousemove = function(e) {
+                    e = e || window.event;
+                    e.preventDefault();
+
+                    var x = e.clientX - startX
+                    var y = e.clientY - startY
+
+                    // console.log('moved ' + xx + ' ' + yy)
+
+                    startX = e.clientX;
+                    startY = e.clientY;
+
+                    window.scrollTo(document.body.scrollLeft - x, document.body.scrollTop-y)
+                }
+            }
+        }
+    },
     computed: {
         stickies: function() {
             return this.$store.state.stickies.items;

diff --git a/view/corkboard_toolbar.vue b/view/corkboard_toolbar.vue
@@ -1,15 +1,12 @@
 <template>
-<div class="toolbar-container">
-    <div class="pad"></div>
-    <div class="toolbar" :style="{ zIndex: this.z }">
-        <icon-wrapper v-if="this.godmode" icon="wrench" @click="devtools_click" />
-        <icon-wrapper icon="search_plus" @click="zoom_click($event, 'in')" />
-        <icon-wrapper icon="search" @click="zoom_click($event, 'reset')" />
-        <icon-wrapper icon="search_minus" @click="zoom_click($event, 'out')" />
-        <icon-wrapper icon="sticky_note" @click="sticky_click" />
-        <icon-wrapper icon="expand" @click="fullscreen_click" />
-        <icon-wrapper v-if="this.godmode" icon="sync" @click="refresh_click" />
-    </div>
+<div class="toolbar" :style="{ zIndex: this.z }">
+    <icon-wrapper icon="sticky_note" @click="sticky_click" />
+    <icon-wrapper icon="search_plus" @click="zoom_click($event, 'in')" />
+    <icon-wrapper icon="search" @click="zoom_click($event, 'reset')" />
+    <icon-wrapper icon="search_minus" @click="zoom_click($event, 'out')" />
+    <icon-wrapper icon="expand" @click="fullscreen_click" />
+    <icon-wrapper v-if="this.godmode" icon="wrench" @click="devtools_click" />
+    <icon-wrapper v-if="this.godmode" icon="sync" @click="refresh_click" />
 </div>
 </template>
 
@@ -96,6 +93,8 @@ export default {
 }
 
 .toolbar {
+    position: fixed;
+    right: 8;
     flex: 0 0 auto;
     padding: 0rem 0.33rem;
     background: rgba(33, 33, 33, 0.25);

diff --git a/view/polaroid.vue b/view/polaroid.vue
@@ -11,9 +11,7 @@
     >
 
     <polaroid-toolbar :itemId="this.itemId" />
-    <div class="spacer top"></div>
     <img :src="polaroid.url">
-    <div class="spacer bottom"></div>
     <polaroid-caption :itemId="this.itemId" />
 </div>
 </template>
@@ -96,12 +94,10 @@ export default {
 
 img {
     background: #eeeeee;
-    border-bottom: 0px;
-    border-top: 0px;
     border: 1px solid #dddddd;
     flex: 0 0 auto;
     margin: 0rem 1.5rem;
-    max-height: 14rem;
+    height: 14rem;
     max-width: 14rem;
     object-fit: contain;
 }