From 35b47b83d75d2cb7bab5f3bb87919e3b0c339e32 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Fri, 18 Oct 2019 16:28:31 -0400 Subject: [PATCH 1/5] Added v-tooltip dependency --- package-lock.json | 20 ++++++++++++++++++++ package.json | 1 + 2 files changed, 21 insertions(+) diff --git a/package-lock.json b/package-lock.json index bec51f58f..e1440035c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7615,6 +7615,11 @@ "find-up": "^3.0.0" } }, + "popper.js": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz", + "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==" + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -10777,6 +10782,16 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==" }, + "v-tooltip": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.2.tgz", + "integrity": "sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==", + "requires": { + "lodash": "^4.17.11", + "popper.js": "^1.15.0", + "vue-resize": "^0.4.5" + } + }, "validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -10865,6 +10880,11 @@ "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz", "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==" }, + "vue-resize": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz", + "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==" + }, "vue-router": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz", diff --git a/package.json b/package.json index 6b91d2346..19a8e7d9e 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@nuxtjs/toast": "^3.2.1", "highlight.js": "^9.15.10", "nuxt": "^2.10.1", + "v-tooltip": "^2.0.2", "vue-virtual-scroll-list": "^1.4.2", "vuejs-auto-complete": "^0.9.0", "vuex-persist": "^2.1.0", From b229bf6197290c44ef5321314a7343818639583f Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Fri, 18 Oct 2019 16:28:51 -0400 Subject: [PATCH 2/5] Registered v-tooltip dependency with Vue --- nuxt.config.js | 3 +++ plugins/v-tooltip.js | 4 ++++ 2 files changed, 7 insertions(+) create mode 100644 plugins/v-tooltip.js diff --git a/nuxt.config.js b/nuxt.config.js index 19bc0c28a..3da26f4be 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -209,6 +209,9 @@ export default { plugins: [ { src: '~/plugins/vuex-persist' + }, + { + src: '~/plugins/v-tooltip' } ], /* diff --git a/plugins/v-tooltip.js b/plugins/v-tooltip.js new file mode 100644 index 000000000..5fcfd130c --- /dev/null +++ b/plugins/v-tooltip.js @@ -0,0 +1,4 @@ +import Vue from 'vue'; +import VTooltip from 'v-tooltip'; + +Vue.use(VTooltip); From 0d55dc2b3885802522abfe403fc5ae18f6d20738 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Fri, 18 Oct 2019 16:29:24 -0400 Subject: [PATCH 3/5] Added tooltip styling --- assets/css/styles.scss | 110 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) diff --git a/assets/css/styles.scss b/assets/css/styles.scss index c3f12d3b8..ada462762 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -56,6 +56,116 @@ h3 { font-weight: 700; } +.tooltip { + display: block !important; + z-index: 10000; + + .tooltip-inner { + background: black; + color: white; + border-radius: 16px; + padding: 5px 10px 4px; + } + + .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: black; + z-index: 1; + } + + &[x-placement^="top"] { + margin-bottom: 5px; + + .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + 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; + } + } + + &.popover { + $color: #f9f9f9; + + .popover-inner { + background: $color; + color: black; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(black, .1); + } + + .popover-arrow { + border-color: $color; + } + } + + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } + + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } +} + h3.title { margin: 4px; } From 719928f5e560030ec0cd296ecfe3043e9801ab61 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Fri, 18 Oct 2019 16:29:54 -0400 Subject: [PATCH 4/5] Icons in the history entries have tooltips now --- components/history.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/history.vue b/components/history.vue index 18e0f592c..f59e399a6 100644 --- a/components/history.vue +++ b/components/history.vue @@ -42,12 +42,12 @@
  • -
  • -
    • From ab06ee6bd4dc5d3a8bbd2be0bfbab29512e82e3a Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Fri, 18 Oct 2019 16:30:40 -0400 Subject: [PATCH 5/5] Added tooltip for Settings icon on the header --- layouts/default.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/default.vue b/layouts/default.vue index 5d2a35cb9..af7c4d803 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -11,7 +11,7 @@