feat(tooltip): Adds copied tooltip

build/webpack.config.base.js

@@ -40,7 +40,7 @@ const baseConfig = [
     }
   }),
 
-  match('*.js', { exclude: /no-real-folder/ }, [
+  match('*.js', { exclude: [] }, [
     babel()
   ]),
 

package.json

@@ -53,8 +53,8 @@
     "@podlove/html5-audio-driver": "0.7.1",
     "babel-polyfill": "6.26.0",
     "binary-search": "1.3.3",
-    "clipboard": "1.7.1",
     "color": "3.0.0",
+    "copy-to-clipboard": "3.0.8",
     "detect-browser": "2.1.0",
     "hashcode": "1.0.3",
     "iframe-resizer": "3.5.16",
@@ -69,6 +69,7 @@
     "redux-actions": "2.3.0",
     "revue": "3.0.0",
     "superagent": "3.8.2",
+    "v-tooltip": "2.0.0-rc.31",
     "vue": "2.5.13",
     "vue-i18n": "7.4.2"
   },

src/components/App.vue

@@ -59,6 +59,7 @@
   @import '~styles/transitions';
   @import '~styles/animations';
   @import '~styles/marquee';
+  @import '~styles/tooltip';
 
   .podlove {
     display: block;

src/components/shared/CopyTooltip.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-popover ref="popover" :popover-class="[ theme.negative ? 'negative' : '' ]" :auto-hide="true" trigger="manual" delay.show="100" delay.hide="3000">
+    <span @click="onClick" @mouseleave="onMouseLeave">
+      <slot class="tooltip-target"></slot>
+    </span>
+    <template slot="popover">
+      {{ $t('MESSAGES.COPIED') }}
+    </template>
+  </v-popover>
+</template>
+
+<script>
+import copy from 'copy-to-clipboard'
+
+import { VPopover } from 'v-tooltip'
+
+export default {
+  props: ['content'],
+  data () {
+    return {
+      theme: this.$select('theme'),
+      open: false
+    }
+  },
+
+  methods: {
+    onClick () {
+      if (!this.content) {
+        return
+      }
+
+      copy(this.content)
+      this.show()
+      setTimeout(() => this.hide(), 6000)
+    },
+
+    show() {
+      this.$refs.popover.show()
+    },
+
+    hide() {
+      this.$refs.popover.hide()
+    },
+
+    onMouseLeave () {
+      this.hide()
+    }
+  },
+
+  components: {
+    VPopover
+  }
+}
+</script>
+
+<style lang="scss">
+  .trigger {
+    display: block !important;
+  }
+</style>

src/components/tabs/download/Download.vue

@@ -10,7 +10,9 @@
     </div>
     <div class="file-selection centered column" :style="sectionStyle">
       <button-component class="action download-button" :href="download.selected" type="link" download>{{ $t('DOWNLOAD.ACTIONS.DOWNLOAD') }}</button-component>
-      <button-component class="action copy-button" :data-clipboard-text="download.selected" v-clipboard>{{ $t('DOWNLOAD.ACTIONS.COPY') }}</button-component>
+      <copy-tooltip-component :content="download.selected">
+        <button-component class="action copy-button">{{ $t('DOWNLOAD.ACTIONS.COPY') }}</button-component>
+      </copy-tooltip-component>
       <input-select-component class="download-select" :change="setDownloadFile">
         <option v-for="(option, index) in download.files" v-bind:key="index" v-bind:value="option.url" :selected="download.selected === option.url">
           {{ option.title }} • {{ toMegabyte(option.size) }} MB
@@ -27,6 +29,7 @@
 
   import ButtonComponent from 'shared/Button'
   import InputSelectComponent from 'shared/InputSelect'
+  import CopyTooltipComponent from 'shared/CopyTooltip'
 
   import ClockIcon from 'icons/ClockIcon'
   import CalendarIcon from 'icons/CalendarIcon'
@@ -68,6 +71,7 @@
     components: {
       ButtonComponent,
       InputSelectComponent,
+      CopyTooltipComponent,
       ClockIcon,
       CalendarIcon
     }

src/components/tabs/share/ShareEmbed.vue

@@ -10,7 +10,9 @@
         <input-text-component class="block" disabled="true" :value="embedCode"></input-text-component>
       </div>
       <div class="input-element">
-        <button-component class="block action" :data-clipboard-text="embedCode" v-clipboard>{{ $t('SHARE.EMBED.ACTIONS.COPY') }}</button-component>
+        <copy-tooltip-component :content="embedCode">
+          <button-component class="block action">{{ $t('SHARE.EMBED.ACTIONS.COPY') }}</button-component>
+        </copy-tooltip-component>
       </div>
     </overlay-component>
 </template>
@@ -27,6 +29,7 @@
   import ButtonComponent from 'shared/Button'
   import InputSelectComponent from 'shared/InputSelect'
   import InputTextComponent from 'shared/InputText'
+  import CopyTooltipComponent from 'shared/CopyTooltip'
 
   export default {
     props: ['type'],
@@ -90,7 +93,8 @@
       OverlayComponent,
       ButtonComponent,
       InputSelectComponent,
-      InputTextComponent
+      InputTextComponent,
+      CopyTooltipComponent
     }
   }
 </script>

src/components/tabs/share/ShareLink.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="share-link">
     <input-group-component>
-      <button-component slot="button" class="truncate" :data-clipboard-text="shareLink" v-clipboard>{{ $t('SHARE.ACTIONS.COPY') }}</button-component>
+      <copy-tooltip-component slot="button" :content="shareLink">
+        <button-component class="truncate">{{ $t('SHARE.ACTIONS.COPY') }}</button-component>
+      </copy-tooltip-component>
       <input-text-component slot="input" disabled="true" :value="shareLink"></input-text-component>
     </input-group-component>
   </div>
 </template>
 
 <script>
+  import Vue from 'vue'
+
   import ButtonComponent from 'shared/Button'
   import InputGroupComponent from 'shared/InputGroup'
   import InputTextComponent from 'shared/InputText'
+  import CopyTooltipComponent from 'shared/CopyTooltip'
 
   import { addQueryParameter } from 'utils/url'
   import { fromPlayerTime } from 'utils/time'
@@ -54,7 +59,8 @@
     components: {
       InputGroupComponent,
       ButtonComponent,
-      InputTextComponent
+      InputTextComponent,
+      CopyTooltipComponent
     }
   }
 </script>

src/core/directives/index.js

@@ -1,9 +1,7 @@
-import clipboard from './clipboard'
 import resize from './resize'
 import marquee from './marquee'
 
 const registerDirectives = context => {
-  context.Renderer.directive('clipboard', clipboard)
   context.Renderer.directive('resize', resize)
   context.Renderer.directive('marquee', marquee)
 

src/lang/de.json

@@ -89,5 +89,8 @@
     "FOLLOW": "folgen",
     "SEARCH": "Suche",
     "NO_SEARCH_RESULTS": "Keine Ergebnisse"
+  },
+  "MESSAGES": {
+    "COPIED": "Copied!"
   }
 }

src/lang/en.json

@@ -84,5 +84,8 @@
     "FOLLOW": "follow",
     "SEARCH": "Search",
     "NO_SEARCH_RESULTS": "No results"
+  },
+  "MESSAGES": {
+    "COPIED": "Copied!"
   }
 }

src/store/theme/reducer.js

@@ -20,6 +20,7 @@ const themeColors = (colors = {}) => {
   const fallbackColor = (first, second) => first || second
 
   return {
+    negative,
     background: light,
     player: {
       background: main,
@@ -100,12 +101,12 @@ const themeColors = (colors = {}) => {
     input: {
       background: color(main).lighten(0.3),
       color: negative ? light : dark,
-      border: color(main).lighten(0.1)
+      border: negative ? color(main).lighten(0.1) : dark
     },
     button: {
       background: main,
       color: negative ? light : dark,
-      border: negative ? main : dark
+      border: negative ? color(main).lighten(0.1) : dark
     }
   }
 }

src/styles/_tooltip.scss

@@ -0,0 +1,96 @@
+@import 'variables';
+@import 'font';
+
+.tooltip {
+  @include font();
+  font-size: 12px;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: $overlay-color;
+    color: $background-color;
+    border-radius: 3px;
+    padding: 5px 10px 4px;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: $overlay-color;
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 8px;
+
+    .tooltip-arrow {
+      border-width: 3px 3px 0 3px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -3px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.negative {
+    .tooltip-inner {
+      background: $background-color;
+      color: $overlay-color;
+    }
+
+    .tooltip-arrow {
+      border-color: $background-color;
+    }
+  }
+}