Initial commit

lib/assets/javascripts/new-dashboard/components/Dropdowns/CopyDropdown.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="dropdown" v-if="isVisible" @click.prevent="copyName">
+      <span class="text is-small copy-text" v-if="!copySuccessful"><img svg-inline class="copy-icon" src="../../assets/icons/common/copy.svg">{{$t(`DatasetCard.copy`)}}</span>
+      <span class="text is-small is-txtGrey" v-if="copySuccessful"><img svg-inline class="copy-icon" src="../../assets/icons/common/copy-success.svg">{{$t(`DatasetCard.copySuccess`)}}</span>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'CopyDropdown',
+  props: {
+    textToCopy: String,
+    isVisible: Boolean
+  },
+  data () {
+    return {
+      copySuccessful: false,
+      hideDropdownTimeout: null
+    };
+  },
+  watch: {
+    isVisible: function (newVal, oldVal) {
+      if (newVal === false) {
+        this.resetDropdown();
+      }
+    }
+  },
+  methods: {
+    copyName () {
+      var textArea = document.createElement('textarea');
+      textArea.style.position = 'fixed';
+      textArea.style.opacity = 0;
+      textArea.style.height = 0;
+      textArea.style.width = 0;
+      textArea.value = this.textToCopy;
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      try {
+        this.copySuccessful = document.execCommand('copy');
+        if (this.copySuccessful) {
+          this.hideDropdownTimeout = setTimeout(() => { this.$emit('hideDropdown'); }, 2000);
+        }
+      } catch (err) {
+        this.copySuccessful = false;
+      } finally {
+        document.body.removeChild(textArea);
+      }
+    },
+    resetDropdown () {
+      this.copySuccessful = false;
+      if (this.hideDropdownTimeout) {
+        clearTimeout(this.hideDropdownTimeout);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'new-dashboard/styles/variables';
+
+.dropdown {
+  position: relative;
+  padding: 12px 16px 8px;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+  background-color: #FFF;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 24px;
+    width: 14px;
+    height: 14px;
+    transform: rotate(45deg);
+    border: 1px solid $neutral--200;
+    border-top: none;
+    border-left: none;
+    border-radius: 2px;
+    background-color: #FFF;
+  }
+}
+
+.copy-text {
+  text-decoration: underline;
+}
+
+.copy-icon {
+  margin-right: 8px;
+  margin-bottom: -2px;
+}
+</style>

lib/assets/javascripts/new-dashboard/components/Dropdowns/Dropdown.vue

@@ -0,0 +1,76 @@
+<template>
+  <section v-click-outside="closeDropdown">
+    <button class="dropdown__toggle" :class="{ 'dropdown__toggle--active': isOpen }" @click="toggleDropdown">
+      <slot name="button"/>
+    </button>
+
+    <div class="dropdown" :class="{ 'is-open': isOpen }">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'Dropdown',
+  data () {
+    return {
+      isOpen: false
+    };
+  },
+  methods: {
+    toggleDropdown () {
+      this.isOpen = !this.isOpen;
+    },
+    closeDropdown () {
+      this.isOpen = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'new-dashboard/styles/variables';
+
+.dropdown {
+  visibility: hidden;
+  position: absolute;
+  z-index: $z-index__dropdown;
+  right: 0;
+  width: 316px;
+  margin-top: 8px;
+  overflow: hidden;
+  transition: all 0.25s linear;
+  border: 1px solid $border-color;
+  border-radius: 2px;
+  opacity: 0;
+  pointer-events: none;
+
+  &.is-open {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.dropdown__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 9px;
+  border-radius: 2px;
+
+  &:hover {
+    background-color: $softblue;
+  }
+
+  &.dropdown__toggle--active {
+    background-color: $primary-color;
+
+    .svgicon {
+      fill: $white;
+    }
+  }
+}
+</style>

lib/assets/javascripts/new-dashboard/components/Dropdowns/FeaturesDropdown.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="features-dropdown">
+    <slot />
+    <div class="dropdown-container">
+      <ul class="list">
+        <li class="element" v-for="element in list" :key="element.name || element">
+          <a :href="element.url" class="list-text text is-small" v-if="element.url">{{ element.name }}</a>
+
+          <router-link :to="{ name: linkRoute, params: routeParams(element) }" class="list-text text is-small" v-if="!element.url">
+            {{ element }}
+          </router-link>
+        </li>
+
+        <li class="element" v-if="$slots.footer" @click.stop.prevent="noop">
+          <span class="list-text text is-small footer">
+            <slot name="footer" />
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FeaturesDropdown',
+  props: {
+    list: Array,
+    feature: String,
+    linkRoute: String
+  },
+  methods: {
+    routeParams (element) {
+      return { [this.feature]: element };
+    },
+    noop () {}
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import 'new-dashboard/styles/variables';
+
+.features-dropdown {
+  &:hover {
+    .dropdown-container {
+      opacity: 1;
+      pointer-events: all;
+    }
+
+    .feature-text {
+      color: $primary-color;
+    }
+  }
+}
+
+.list-text {
+  display: inline-block;
+  width: 100%;
+  padding: 10px 22px;
+}
+
+.dropdown-container {
+  position: absolute;
+  z-index: 1;
+  min-width: 60%;
+  padding-top: 16px;
+  transform: translateX(-12px);
+  transform: all 0.3s linear;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.list {
+  position: relative;
+  padding: 0;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+  background-color: $white;
+}
+
+.element {
+  &:not(:last-of-type) {
+    border-bottom: 1px solid $softblue;
+  }
+
+  &:first-of-type {
+    &::before {
+      content: '';
+      position: absolute;
+      top: -8px;
+      left: 24px;
+      width: 14px;
+      height: 14px;
+      transform: rotate(45deg);
+      border: 1px solid $border-color;
+      border-right: none;
+      border-bottom: none;
+      border-radius: 2px;
+      background-color: $white;
+    }
+  }
+}
+
+.footer {
+  color: $text__color;
+  cursor: default;
+}
+</style>