Merge branch 'dev' of https://github.com/nwittwer/shift into dev

package.json

@@ -122,6 +122,7 @@
     "jest": "^24.1.0",
     "jest-vue-preprocessor": "^1.4.0",
     "mini-css-extract-plugin": "^0.5.0",
+    "moment": "^2.24.0",
     "multispinner": "^0.2.1",
     "node-loader": "^0.6.0",
     "node-sass": "^4.9.2",

src/renderer/components/SidePanel/PanelComponent.vue

@@ -5,17 +5,20 @@
     </div>
     <div class="panel__content">
       <ScreensPanel v-show="isChildPanel('Screens')" />
+      <ScreenshotPanel v-show="isChildPanel('Screenshot')" />
     </div>
   </div>
 </template>
 
 <script>
 import ScreensPanel from './ScreensPanel.vue'
+import ScreenshotPanel from './ScreenshotPanel.vue'
 
 export default {
   name: 'PanelComponent',
   components: {
-    ScreensPanel
+    ScreensPanel,
+    ScreenshotPanel
   },
   props: ['title'],
   computed: {},

src/renderer/components/SidePanel/ScreensPanel.vue

@@ -254,8 +254,6 @@ export default {
           break
       }
 
-      console.log(this.defaultSizeSelection, sizes)
-
       this.$store.dispatch('addMultipleArtboards', {
         data: sizes
       })

src/renderer/components/SidePanel/ScreenshotPanel.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="screenshot-panel">
+    <div
+      v-for="(artboard, index) in artboards"
+      v-bind:key="index"
+      class="screenshot-panel__artboard"
+    >
+      <div class="artboard-group">
+        <div class="title">{{artboard.title}}</div>
+        <div class="dimensions">{{artboard.width}} x {{artboard.height}}</div>
+      </div>
+      <div class="button button--secondary" @click="capture(index, artboard.title)">Capture</div>
+    </div>
+    <div class="button button--primary" @click="captureAll()">Capture All</div>
+  </div>
+</template>
+
+<script>
+const { dialog } = require("electron").remote;
+const path = require("path");
+const fs = require("fs");
+const moment = require("moment");
+
+export default {
+  name: "ScreenshotPanel",
+
+  computed: {
+    // Bind to our Vuex Store's URL value
+    artboards() {
+      return this.$store.state.artboards;
+    }
+  },
+
+  methods: {
+    async capture(id, title, screenshotPath) {
+      const webview = document.querySelectorAll("webview")[id];
+
+      async function saveScreenshot(screenshot) {
+        if (!screenshotPath) {
+          // Case: no path set yet (single screenshot save)
+          // Prompt location to save screenshot
+          dialog.showOpenDialog(
+            { properties: ["openFile", "openDirectory", "createDirectory"] },
+            function(filePaths) {
+              try {
+                makeFile(filePaths[0], screenshot);
+              } catch (e) {
+                // Nothing was selected
+              }
+            }
+          );
+        } else {
+          // Case: already has a path (multi-save)
+          makeFile(screenshotPath, screenshot);
+        }
+      }
+
+      // Create the file
+      function makeFile(filePath, screenshot) {
+        const timestamp = moment().format("YYYY-MM-D_h-mm-ssa");
+
+        if (title) {
+          title = `_${title}_`;
+        } else {
+          title = "";
+        }
+
+        fs.writeFile(
+          path.join(filePath, `reflex${title}${timestamp}.png`),
+          screenshot,
+          err => {
+            if (err) throw err;
+            popNotification();
+          }
+        );
+
+        function popNotification() {
+          // Alert the user that the screenshot was saved
+          let notification = new Notification("Screenshot saved", {
+            body: filePath
+          });
+        }
+      }
+
+      // Capture the <webview>
+      webview.getWebContents().capturePage(image => {
+        const PNG = image.toPNG();
+        saveScreenshot(PNG);
+      });
+    },
+    async captureAll() {
+      const vm = this;
+
+      // 1. Capture the path to save all
+      dialog.showOpenDialog(
+        { properties: ["openFile", "openDirectory", "createDirectory"] },
+        async function(filePaths) {
+          try {
+            // Capture each
+            for (let i = 0; i < vm.artboards.length; i++) {
+              await vm.capture(
+                i,
+                `${vm.artboards[i].title}_${i}`,
+                filePaths[0]
+              );
+            }
+          } catch (e) {
+            // Nothing was selected
+          }
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/_variables";
+
+#screenshot-panel {
+  box-sizing: border-box;
+
+  .screenshot-panel__artboard {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1 0 auto;
+    background: #ffffff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-bottom: 1px solid $border-color;
+    padding: 0.5rem 1rem;
+    user-select: none;
+
+    .dimensions {
+      color: gray;
+    }
+  }
+
+  .button.button--primary {
+    margin: 1rem 1rem;
+    width: auto;
+    border-radius: 4px;
+  }
+}
+</style>

src/renderer/components/SidePanel/index.vue

@@ -20,26 +20,24 @@
             Screens
           </span>
         </div>
-        <!-- <div
-          v-if="artboards.length"
+        <div
           class="station"
-          title="Sync"
-          @click="setActive('Sync')"
+          title="Screenshot"
+          @click="setActive('Screenshot')"
         >
           <div
             class="station__button button"
-            :class="{ 'button--is-active' : isActive('Sync') }"
+            :class="{ 'button--is-active' : isActive('Screenshot') }"
           >
             <img
-              src="@/assets/icons/sync.svg"
-              alt="Sync"
+              src="@/assets/icons/screenshot.svg"
+              alt="Screenshot"
             >
           </div>
-          <div class="station__title">
-            Sync
-          </div>
-        </div>-->
-        <!-- <div class="station button" @click="setActive('Screenshot')">3</div> -->
+          <span class="station__title">
+            Screenshot
+          </span>
+        </div>
       </div>
       <div
         v-if="sidebar===true"

src/renderer/scss/_global.scss

@@ -1,6 +1,7 @@
 @import 'variables';
 
-html, body {
+html,
+body {
 	font-size: 15px;
 }
 
@@ -47,7 +48,29 @@ body {
 		background: darken(white, 20%);
 	}
 
-	&--is-active {
+	&.button--primary {
+		position: relative;
+		border: none;
+		width: 100%;
+		padding: 0.75rem 0;
+		vertical-align: middle;
+		text-align: center;
+		border-radius: 0;
+		color: white;
+		background: $accent-color;
+
+		&:hover {
+			cursor: pointer;
+			background: $accent-color;
+		}
+
+		&:active {
+			color: white;
+			background: darken($accent-color, 15%);
+		}
+	}
+
+	&.button--is-active {
 		color: white;
 		border-color: $accent-color;
 		background: $accent-color;