Use tippy.js for context popup

package.json

@@ -29,6 +29,7 @@
  "pretty-ms": "7.0.1",
  "sortablejs": "1.15.0",
  "swagger-ui-dist": "4.11.1",
+ "tippy.js": "6.3.7",
  "tributejs": "5.1.3",
  "uint8-to-base64": "0.2.0",
  "vue": "2.6.14",

web_src/js/features/contextpopup.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import ContextPopup from '../components/ContextPopup.vue';
 import {parseIssueHref} from '../utils.js';
+import {createTippy} from '../modules/tippy.js';
 
 export default function initContextPopups() {
  const refIssues = $('.ref-issue');
@@ -16,7 +17,6 @@ export default function initContextPopups() {
  if (!owner) return;
 
  const el = document.createElement('div');
- el.className = 'ui custom popup hidden';
  el.innerHTML = '<div></div>';
  this.parentNode.insertBefore(el, this.nextSibling);
 
@@ -33,17 +33,12 @@ export default function initContextPopups() {
  el.textContent = 'ContextPopup failed to load';
  }
 
- $(this).popup({
- variation: 'wide',
- delay: {
- show: 250
- },
+ createTippy(this, {
+ content: el,
+ interactive: true,
  onShow: () => {
- view.$emit('load-context-popup', {owner, repo, index}, () => {
- $(this).popup('reposition');
- });
- },
- popup: $(el),
+ view.$emit('load-context-popup', {owner, repo, index});
+ }
  });
  });
 }

web_src/js/modules/tippy.js

@@ -0,0 +1,12 @@
+import tippy from 'tippy.js';
+
+export function createTippy(target, opts) {
+ return tippy(target, {
+ appendTo: document.body,
+ placement: 'top-start',
+ animation: false,
+ allowHTML: true,
+ arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
+ ...opts,
+ });
+}

web_src/less/index.less

@@ -9,6 +9,7 @@
 @import "./features/imagediff.less";
 @import "./features/codeeditor.less";
 @import "./features/projects.less";
+@import "./modules/tippy.less";
 @import "./markup/content.less";
 @import "./markup/codecopy.less";
 @import "./code/linebutton.less";

web_src/less/modules/tippy.less

@@ -0,0 +1,84 @@
+/* styles are based on node_modules/tippy.js/dist/tippy.css */
+
+.tippy-box[data-animation="fade"][data-state="hidden"] {
+ opacity: 0;
+}
+
+[data-tippy-root] {
+ max-width: calc(100vw - 10px);
+}
+
+.tippy-box {
+ position: relative;
+ background-color: var(--color-body);
+ color: var(--color-secondary-dark-6);
+ border: 1px solid var(--color-secondary);
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ transition-property: transform, visibility, opacity;
+}
+
+.tippy-content {
+ position: relative;
+ padding: 1rem;
+ z-index: 1;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
+ bottom: 0;
+}
+
+.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after,
+.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
+ top: 16px;
+ transform: rotate(180deg);
+}
+
+.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
+ top: 0;
+}
+
+.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
+ bottom: 16px;
+}
+
+.tippy-box[data-placement^="left"] > .tippy-svg-arrow {
+ right: 0;
+}
+
+.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
+.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
+ transform: rotate(90deg);
+ top: calc(50% - 3px);
+ left: 11px;
+}
+
+.tippy-box[data-placement^="right"] > .tippy-svg-arrow {
+ left: 0;
+}
+
+.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
+.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
+ transform: rotate(-90deg);
+ top: calc(50% - 3px);
+ right: 11px;
+}
+
+.tippy-svg-arrow {
+ width: 16px;
+ height: 16px;
+ text-align: initial;
+}
+
+.tippy-svg-arrow,
+.tippy-svg-arrow > svg {
+ position: absolute;
+}
+
+.tippy-svg-arrow-outer {
+ fill: var(--color-secondary);
+}
+
+.tippy-svg-arrow-inner {
+ fill: var(--color-body);
+}