@abi-software/gallery 0.2.2 → 0.3.0-beta.0

package/dist/img/logo-sparc-wave-primary.d50bcaff.svg

@@ -0,0 +1 @@
+module.exports = "<svg id=\"logo-sparc-wave-primary\" data-name=\"logo-sparc-wave-primary\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 400 190.5854\"><defs><linearGradient id=\"linear-gradient\" y1=\"96.3505\" x2=\"400\" y2=\"96.3505\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#0b00bf\"></stop><stop offset=\"1\" stop-color=\"#bc00fc\"></stop></linearGradient></defs><title>SPARC Logo</title><path d=\"M396.6976,128.6248l-146.2735-3.38a6.5358,6.5358,0,0,0-6.1378,3.9236l-.0612.1407-13.673,31.4482L202.9416,9.5333l-.01-.0685a8.9823,8.9823,0,0,0-17.6624-.0114L163.673,125.3819,3.298,129.2886a3.38,3.38,0,0,0,.0269,6.7592L169.34,138.7635a6.5939,6.5939,0,0,0,6.5373-5.1457l.0571-.2546,17.8534-79.5649L221.26,185.1237l.0256.1243A6.7593,6.7593,0,0,0,234.092,186.52L254.9005,138.66l141.7971-3.2762a3.3805,3.3805,0,0,0,0-6.7592Z\" style=\"fill:url(#linear-gradient)\"></path><path d=\"M25.6793,0C41.3957,0,51.057,10.0926,51.057,26.0972v9.5162H36.2053V26.0972c0-7.3532-3.8945-11.8219-10.526-11.8219-6.7768,0-10.6691,4.4687-10.6691,11.8219,0,3.8945,1.2982,7.3533,5.4786,11.3908l19.754,18.601C46.5861,62.1441,52.21,68.7778,52.21,79.88c0,16.0047-9.95,26.0973-25.9543,26.0973C10.108,105.9776.1585,95.885.1585,79.88V70.362H15.01V79.88c0,7.3533,4.0375,11.822,11.2455,11.822,7.065,0,11.1025-4.4687,11.1025-11.822,0-4.4709-2.1628-8.6514-6.0551-12.2576L11.1158,48.7357C3.043,41.2372.1585,34.8939.1585,25.666.1585,10.0926,9.82,0,25.6793,0Z\" style=\"fill:#0e0e19\"></path><path d=\"M99.7971,69.7856v35.1821H84.9454V1.01h25.3755c16.0047,0,26.0973,10.0926,26.0973,26.0973V43.6883c0,16.15-10.0926,26.0973-26.0973,26.0973Zm10.3808-13.9849c7.2081,0,11.3908-4.3257,11.3908-11.6789V26.6759c0-7.21-4.1827-11.6811-11.3908-11.6811H99.7971V55.8007Z\" style=\"fill:#0e0e19\"></path><path d=\"M278.5812,108.147H263.73V4.1893h26.0972c16.0047,0,26.0973,10.0926,26.0973,26.0972v14.13c0,9.95-4.3257,17.7363-11.3908,22.205,4.1827,12.6889,10.0926,29.9917,13.8418,41.5254h-15.14L290.6914,70.3708h-12.11Zm11.1-51.7632c7.21,0,11.3907-4.3257,11.3907-11.5338V29.8553c0-7.21-4.18-11.6812-11.3907-11.6812h-11.1v38.21Z\" style=\"fill:#0e0e19\"></path><path d=\"M399.844,73.5414V83.06c0,16.0047-9.9474,26.0973-25.9521,26.0973-16.15,0-26.0972-10.0926-26.0972-26.0973V29.2766c0-16.0046,9.9473-26.0972,26.0972-26.0972,16.0047,0,25.9521,10.0926,25.9521,26.0972v9.5161h-14.85V29.2766c0-7.3532-4.0374-11.822-11.1025-11.822-7.21,0-11.2477,4.4688-11.2477,11.822V83.06c0,7.3533,4.0375,11.822,11.2477,11.822,7.0651,0,11.1025-4.4687,11.1025-11.822V73.5414Z\" style=\"fill:#0e0e19\"></path></svg>"

package/jest.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
-}
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+}

package/package.json

@@ -1,41 +1,42 @@
-{
-  "name": "@abi-software/gallery",
-  "version": "0.2.2",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/hsorby/mapcore-gallery.git"
-  },
-  "license": "Apache-2.0",
-  "private": false,
-  "scripts": {
-    "serve-no-lint": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
-    "build-dist": "vue-cli-service build",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "build-bundle": "vue-cli-service build --target lib --name gallery src/main-bundle.js --skip-plugins @vue/cli-plugin-eslint",
-    "lint": "vue-cli-service lint"
-  },
-  "main": "dist/gallery.common.js",
-  "dependencies": {
-    "@babel/code-frame": "^7.12.11",
-    "core-js": "^3.8.3",
-    "element-ui": "^2.15.0",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-eslint": "^3.1.1",
-    "@vue/cli-plugin-unit-jest": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.1.2",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.0.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^2.2.1",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+{
+  "name": "@abi-software/gallery",
+  "version": "0.3.0-beta.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hsorby/mapcore-gallery.git"
+  },
+  "license": "Apache-2.0",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "build-bundle": "vue-cli-service build --target lib --name gallery src/main.js",
+    "lint": "vue-cli-service lint"
+  },
+  "main": "dist/gallery.common.js",
+  "dependencies": {
+    "@babel/code-frame": "^7.12.11",
+    "axios": "^0.26.1",
+    "babel-plugin-component": "^1.1.1",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.0",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^3.1.1",
+    "@vue/cli-plugin-unit-jest": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.1.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.0.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^2.2.1",
+    "svg-inline-loader": "^0.8.2",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

package/public/index.html

@@ -1,17 +1,17 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -1,34 +1,28 @@
-<template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-      <gallery :items="dataInput"/>
-  </div>
-</template>
-
-<script>
-import Gallery from './components/Gallery'
-
-export default {
-  name: 'App',
-  components: {
-    Gallery
-  },
-  data: function(){
-    return{
-      dataInput: [{name: 'test1', type: 'data'}, {name:'test2', type: 'data'}]
-
-    }
-  }
-};
-</script>
-
-<style scoped>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <HelloWorld msg="Welcome to Your Vue.js App" />
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+  },
+}
+</script>
+
+<style scoped>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/src/assets/logo-sparc-wave-primary.svg

@@ -0,0 +1 @@
+<svg id="logo-sparc-wave-primary" data-name="logo-sparc-wave-primary" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 190.5854"><defs><linearGradient id="linear-gradient" y1="96.3505" x2="400" y2="96.3505" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0b00bf"/><stop offset="1" stop-color="#bc00fc"/></linearGradient></defs><title>SPARC Logo</title><path d="M396.6976,128.6248l-146.2735-3.38a6.5358,6.5358,0,0,0-6.1378,3.9236l-.0612.1407-13.673,31.4482L202.9416,9.5333l-.01-.0685a8.9823,8.9823,0,0,0-17.6624-.0114L163.673,125.3819,3.298,129.2886a3.38,3.38,0,0,0,.0269,6.7592L169.34,138.7635a6.5939,6.5939,0,0,0,6.5373-5.1457l.0571-.2546,17.8534-79.5649L221.26,185.1237l.0256.1243A6.7593,6.7593,0,0,0,234.092,186.52L254.9005,138.66l141.7971-3.2762a3.3805,3.3805,0,0,0,0-6.7592Z" style="fill:url(#linear-gradient)"/><path d="M25.6793,0C41.3957,0,51.057,10.0926,51.057,26.0972v9.5162H36.2053V26.0972c0-7.3532-3.8945-11.8219-10.526-11.8219-6.7768,0-10.6691,4.4687-10.6691,11.8219,0,3.8945,1.2982,7.3533,5.4786,11.3908l19.754,18.601C46.5861,62.1441,52.21,68.7778,52.21,79.88c0,16.0047-9.95,26.0973-25.9543,26.0973C10.108,105.9776.1585,95.885.1585,79.88V70.362H15.01V79.88c0,7.3533,4.0375,11.822,11.2455,11.822,7.065,0,11.1025-4.4687,11.1025-11.822,0-4.4709-2.1628-8.6514-6.0551-12.2576L11.1158,48.7357C3.043,41.2372.1585,34.8939.1585,25.666.1585,10.0926,9.82,0,25.6793,0Z" style="fill:#0e0e19"/><path d="M99.7971,69.7856v35.1821H84.9454V1.01h25.3755c16.0047,0,26.0973,10.0926,26.0973,26.0973V43.6883c0,16.15-10.0926,26.0973-26.0973,26.0973Zm10.3808-13.9849c7.2081,0,11.3908-4.3257,11.3908-11.6789V26.6759c0-7.21-4.1827-11.6811-11.3908-11.6811H99.7971V55.8007Z" style="fill:#0e0e19"/><path d="M278.5812,108.147H263.73V4.1893h26.0972c16.0047,0,26.0973,10.0926,26.0973,26.0972v14.13c0,9.95-4.3257,17.7363-11.3908,22.205,4.1827,12.6889,10.0926,29.9917,13.8418,41.5254h-15.14L290.6914,70.3708h-12.11Zm11.1-51.7632c7.21,0,11.3907-4.3257,11.3907-11.5338V29.8553c0-7.21-4.18-11.6812-11.3907-11.6812h-11.1v38.21Z" style="fill:#0e0e19"/><path d="M399.844,73.5414V83.06c0,16.0047-9.9474,26.0973-25.9521,26.0973-16.15,0-26.0972-10.0926-26.0972-26.0973V29.2766c0-16.0046,9.9473-26.0972,26.0972-26.0972,16.0047,0,25.9521,10.0926,25.9521,26.0972v9.5161h-14.85V29.2766c0-7.3532-4.0374-11.822-11.1025-11.822-7.21,0-11.2477,4.4688-11.2477,11.822V83.06c0,7.3533,4.0375,11.822,11.2477,11.822,7.0651,0,11.1025-4.4687,11.1025-11.822V73.5414Z" style="fill:#0e0e19"/></svg>

package/src/components/Card.vue

@@ -1,136 +1,263 @@
-<template>
-  <el-card :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
-    <div v-loading="!isReady">
-      <img :src="entry.thumbnail" alt="thumbnail loading ..." />
-      <div v-if="false" class="image-overlay">
-        <div
-          class="triangle-right-corner"
-          :style="`border-left-width: ${triangleHeight * 1.2}rem; border-top-width: ${triangleHeight}rem;`"
-          @click="openLinkInNewTab"
-        />
-        <el-tooltip class="item" :content="`View ${entry.type}`" placement="left">
-          <img
-            class="triangle-icon"
-            :style="`height: ${triangleHeight * 0.25}rem;top: ${triangleHeight * 0.15}rem;right: ${triangleHeight * 0.15}rem`"
-            :src="typeIcon"
-            @click="openLinkInNewTab"
-          />
-        </el-tooltip>
-      </div>
-      <div v-if="showCardDetails" class="details">
-        <p>
-          <b>{{ entry.type }}</b>
-        </p>
-        <el-tooltip :content="entry.title" placement="top">
-          <p class="title">
-            {{ entry.title }}
-          </p>
-        </el-tooltip>
-        <el-button @click.prevent="openLinkInNewTab"> View {{ entry.type }}</el-button>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import Vue from "vue";
-import { Card, Button, Tooltip, Loading } from "element-ui";
-
-Vue.use(Card)
-Vue.use(Button)
-Vue.use(Tooltip)
-Vue.use(Loading)
-
-export default {
-  name: 'GalleryCard',
-  props: {
-    entry: {
-      type: Object,
-      required: true,
-    },
-    width: {
-      type: Number,
-      default: 3,
-    },
-    height: {
-      type: Number,
-      default: 3,
-    },
-    showCardDetails: {
-      type: Boolean,
-    },
-  },
-  data() {
-    return {
-      ro: null,
-      triangleSize: 4,
-    }
-  },
-  computed: {
-    isReady() {
-      return this.entry.title && this.entry.thumbnail && this.entry.link
-    },
-    imageHeight() {
-      return this.showCardDetails ? this.height * 0.525 : this.height
-    },
-    imageWidth() {
-      return this.width - 2 * this.marginDetails
-    },
-    triangleHeight() {
-      return this.height * 0.237
-    },
-    marginDetails() {
-      return this.height * 0.076
-    },
-    typeIcon() {
-      return undefined
-    },
-  },
-  methods: {
-    openLinkInNewTab() {
-      const link = document.createElement('a')
-      link.href = this.entry.link
-      link.target = '_blank'
-      document.body.appendChild(link)
-      link.click()
-      link.remove()
-    },
-  },
-}
-</script>
-
-<style scoped>
-.card {
-  position: relative;
-}
-.details {
-  text-align: left;
-}
-
-.title {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-p.bold {
-  font-weight: bold;
-}
-
-.image-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.triangle-icon {
-  position: absolute;
-}
-
-.triangle-right-corner {
-  width: 0;
-  height: 0;
-  border-left: solid transparent;
-  border-top: solid #8300bf;
-}
-</style>
+<template>
+  <el-card :shadow="shadow" :body-style="bodyStyle" :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
+    <div v-loading="!isReady">
+      <div :style="imageStyle">
+        <img :src="thumbnail" alt="thumbnail loading ..." :style="imageStyle" />
+      </div>
+      <div v-if="false" class="image-overlay">
+        <div
+          class="triangle-right-corner"
+          :style="`border-left-width: ${triangleHeight * 1.2}rem; border-top-width: ${triangleHeight}rem;`"
+          @click="openLinkInNewTab"
+        />
+        <el-tooltip class="item" :content="`View ${data.type}`" placement="left">
+          <img
+            class="triangle-icon"
+            :style="`height: ${triangleHeight * 0.25}rem;top: ${triangleHeight * 0.15}rem;right: ${triangleHeight * 0.15}rem`"
+            :src="typeIcon"
+            @click="openLinkInNewTab"
+          />
+        </el-tooltip>
+      </div>
+      <div v-if="showCardDetails" class="details">
+        <p>
+          <b>{{ data.type }}</b>
+        </p>
+        <el-popover ref="galleryPopover" :content="data.title" placement="top" trigger="hover" popper-class="gallery-popper" />
+        <p class="title" v-popover:galleryPopover>
+          {{ data.title }}
+        </p>
+        <el-button class="button" @click.prevent="cardClicked"> View {{ data.type }}</el-button>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+// import { SvgIcon } from '@abi-software/svg-sprite'
+import axios from 'axios'
+import Vue from 'vue'
+import { Button, Card, Popover } from 'element-ui'
+Vue.use(Button)
+Vue.use(Card)
+Vue.use(Popover)
+
+function isValidHttpUrl(string) {
+  let url = undefined
+
+  try {
+    url = new URL(string)
+  } catch (_) {
+    return false
+  }
+  return url.protocol === 'http:' || url.protocol === 'https:'
+}
+
+const getRequest = async (url, params, timeout) => {
+  return await axios({
+    method: 'get',
+    url,
+    params,
+    timeout,
+  })
+}
+
+export default {
+  name: 'GalleryCard',
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    width: {
+      type: Number,
+      default: 3,
+    },
+    height: {
+      type: Number,
+      default: 3,
+    },
+    showCardDetails: {
+      type: Boolean,
+    },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return { padding: '20px', background: '#ffffff' }
+      },
+    },
+    imageStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    shadow: {
+      type: String,
+      default: 'always',
+    },
+  },
+  data() {
+    return {
+      ro: null,
+      triangleSize: 4,
+      thumbnail: undefined,
+      defaultImg: require('svg-inline-loader?classPrefix!../assets/logo-sparc-wave-primary.svg'),
+    }
+  },
+  computed: {
+    isReady() {
+      return this.data.title && this.thumbnail && (this.data.link || this.data.userData)
+    },
+    imageHeight() {
+      return this.showCardDetails ? this.height * 0.525 : this.height
+    },
+    imageWidth() {
+      return this.width - 2 * this.marginDetails
+    },
+    triangleHeight() {
+      return this.height * 0.237
+    },
+    marginDetails() {
+      return this.height * 0.076
+    },
+    typeIcon() {
+      return undefined
+    },
+  },
+  methods: {
+    cardClicked: function () {
+      if (this.data.link) {
+        const link = document.createElement('a')
+        link.href = this.data.link
+        link.target = '_blank'
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
+      }
+      if (this.data.userData) {
+        this.$emit('card-clicked', this.data.userData)
+      }
+    },
+    downloadThumbnail: function (url, info) {
+      getRequest(url, {}, 11000).then(
+        (response) => {
+          let data = response.data
+          if (data.startsWith('data:')) {
+            this.thumbnail = response.data
+          } else {
+            if (this.data.mimetype) {
+              this.thumbnail = `data:${this.data.mimetype};base64,${response.data}`
+            } else {
+              this.thumbnail = response.data
+            }
+          }
+        },
+        (reason) => {
+          if (reason.message.includes('timeout') && reason.message.includes('exceeded') && info.fetchAttempts < 3) {
+            info.fetchAttempts += 1
+            this.downloadThumbnail(url, info)
+          } else {
+            this.thumbnail = this.defaultImg
+          }
+        }
+      )
+    },
+  },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      handler: function () {
+        this.thumbnail = undefined
+        if (this.data.thumbnail) {
+          if (isValidHttpUrl(this.data.thumbnail) && this.data.mimetype) {
+            this.downloadThumbnail(this.data.thumbnail, { fetchAttempts: 0 })
+          } else {
+            this.thumbnail = this.data.thumbnail
+          }
+        } else {
+          this.thumbnail = this.defaultImg
+        }
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+.button {
+  z-index: 10;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  background-color: #8300bf;
+  border: #8300bf;
+  color: white;
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+.button:hover {
+  background: #8300bf;
+  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.25);
+  color: #fff;
+}
+
+.card {
+  position: relative;
+}
+.details {
+  text-align: left;
+}
+
+.title {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+p.bold {
+  font-weight: bold;
+}
+
+.image-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.triangle-icon {
+  position: absolute;
+}
+
+.triangle-right-corner {
+  width: 0;
+  height: 0;
+  border-left: solid transparent;
+  border-top: solid #8300bf;
+}
+</style>
+
+<style>
+.gallery-popper {
+  background: #f3ecf6 !important;
+  border: 1px solid #8300bf;
+  border-radius: 4px;
+  color: #303133 !important;
+  font-size: 12px;
+  line-height: 1rem;
+  height: 1rem;
+  padding: 10px;
+}
+.gallery-popper.el-popper[x-placement^='top'] .popper__arrow {
+  border-top-color: #8300bf !important;
+}
+.gallery-popper.el-popper[x-placement^='top'] .popper__arrow:after {
+  border-top-color: #f3ecf6 !important;
+}
+</style>