Merge branch 'dev'

Author: Joshua O'Sullivan

client/src/assets/scss/_vars.scss

@@ -15,3 +15,6 @@ $grey-l: lighten( $grey, 20% );
 $almost-white: #F0F0F0;
 
 $red-d: darken( #E97777, 20% );
+
+$shadow-access: -1px 0px $spacer / 3 #0002, 1px 0px $spacer / 3 #0002,
+  0px -1px $spacer / 3 #0002, 0px 1px $spacer / 3 #0002;

client/src/components/CanvasMessage.vue

@@ -1,6 +1,11 @@
 <template lang="html">
-  <Message :author="msg.author" :colour="msg.colour">
-    <canvas :id="getID(msg)"></canvas>
+  <Message
+    @copy="handleCopy"
+    :copyable="true"
+    :author="msg.author"
+    :colour="msg.colour"
+  >
+    <canvas :id="getID"></canvas>
   </Message>
 </template>
 
@@ -18,13 +23,18 @@ export default {
       default: () => new Message()
     }
   },
+  computed: {
+    getID() {
+      return "canvas-" + this.msg.hash;
+    }
+  },
   methods: {
-    getID(msg) {
-      return "canvas-" + msg.hash;
+    handleCopy() {
+      this.$store.dispatch("compose/copy", this.msg);
     }
   },
   mounted() {
-    const canv = document.getElementById(this.getID(this.msg));
+    const canv = document.getElementById(this.getID);
     this.notepad = new Notepad(192, 64, canv);
     this.notepad.loadImageData(this.msg.raw());
   }

client/src/components/Message.vue

@@ -1,12 +1,15 @@
 <template lang="html">
   <div class="ratio">
     <div class="inner" v-bind:style="{ borderColor: this.borderCol }">
-      <span
+      <div
         class="author"
         v-bind:style="{ background: this.colour, borderColor: this.borderCol }"
       >
-        {{ author }}
-      </span>
+        <span>{{ author }}</span>
+        <span v-if="copyable" class="copy" title="Copy this message">
+          <font-awesome-icon @click="$emit('copy')" class="icn" icon="copy" />
+        </span>
+      </div>
       <div class="content">
         <slot></slot>
       </div>
@@ -25,6 +28,10 @@ export default {
     colour: {
       type: String,
       default: "#e97777"
+    },
+    copyable: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -46,6 +53,7 @@ $perc-spacer: 1%;
 }
 
 .inner {
+  z-index: 0;
   position: absolute;
   top: 0;
   left: 0;
@@ -58,6 +66,8 @@ $perc-spacer: 1%;
 }
 
 .content {
+  position: relative;
+  z-index: -1;
   width: 100%;
   height: 100%;
 }
@@ -78,7 +88,29 @@ $perc-spacer: 1%;
   color: #fff;
   font-family: "pixel 5x7";
   user-select: none;
-  text-shadow: -1px 0px $spacer / 3 #0002, 1px 0px $spacer / 3 #0002,
-    0px -1px $spacer / 3 #0002, 0px 1px $spacer / 3 #0002;
+  text-shadow: $shadow-access;
+
+  .copy {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    display: inline-block;
+    height: 3 * $spacer;
+    transition: all 200ms ease-in-out;
+    cursor: pointer;
+
+    .icn {
+      display: block;
+      margin-left: $spacer;
+      padding: $spacer / 4;
+      width: 3 * $spacer;
+      height: 3 * $spacer;
+    }
+  }
+
+  &:hover > .copy {
+    max-width: 4vw;
+    opacity: 1;
+  }
 }
 </style>

client/src/plugins/fontawesome-vue.js

@@ -12,7 +12,8 @@ import {
   faDoorOpen,
   faBug,
   faHeart,
-  faCodeBranch
+  faCodeBranch,
+  faCopy
 } from "@fortawesome/free-solid-svg-icons";
 import { faDotCircle } from "@fortawesome/free-regular-svg-icons";
 import { faTwitter } from "@fortawesome/free-brands-svg-icons";
@@ -32,7 +33,8 @@ library.add(
   faBug,
   faHeart,
   faTwitter,
-  faCodeBranch
+  faCodeBranch,
+  faCopy
 );
 
 Vue.component("font-awesome-icon", FontAwesomeIcon);

client/src/router/index.js

@@ -29,6 +29,10 @@ const routes = [
     path: "/room/:id",
     name: "room",
     component: () => import(/* webpackChunkName: "room" */ "../views/Room.vue")
+  },
+  {
+    path: "/room",
+    redirect: "/"
   }
 ];
 

client/src/store/compose.js

@@ -36,8 +36,8 @@ const actions = {
   clear: () => {
     window._sketch.clear();
   },
-  copy: ({ rootState }, id) => {
-    if (id == null) {
+  copy: ({ rootState }, msg) => {
+    if (!msg) {
       var msgs = rootState.messages.history
         .sort((a, b) => {
           a.id - b.id;
@@ -48,7 +48,9 @@ const actions = {
         console.error("No messages to copy!");
         return;
       }
-      const msg = msgs[0];
+      msg = msgs[0];
+      window._sketch.loadImageData(msg.raw());
+    } else {
       window._sketch.loadImageData(msg.raw());
     }
   },