Hongru/cibuildwheel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve the touch support (tap the tooltip to follow link)

Browse Source
This commit is contained in:
Joe Rickerby
2022-05-09 13:31:47 +01:00
parent 960b069eb9
commit a37367fb86
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/diagram.md
+26 -16
View File
@@ -255,30 +255,35 @@
info: { info: {
inserted(el, binding) { inserted(el, binding) {
const action = binding.value const action = binding.value
const {env, label, optional=false, description=''} = action const {env, label, optional=false, description='', href=''} = action
const tooltip = action.tooltip const tooltip = action.tooltip
if (tooltip) { if (tooltip) {
const tippyInstance = tippy(el, { const tippyInstance = tippy(el, {
content: ` content: `
<div class="tooltip-title"> <a class="tooltip-contents" href="${href || ''}">
${tooltip.title || ''} <div class="tooltip-title">
</div> ${tooltip.title || ''}
<div class="tooltip-tag"> </div>
${tooltip.tag || ''} <div class="tooltip-tag">
</div> ${tooltip.tag || ''}
<div class="tooltip-description"> </div>
${tooltip.description} <div class="tooltip-description">
</div ${tooltip.description}
</div>
</a>
`, `,
placement: 'right-start', placement: 'right-start',
allowHTML: true, allowHTML: true,
maxWidth: 'none', maxWidth: 'none',
appendTo: document.getElementById('flow-diagram'), appendTo: document.getElementById('flow-diagram'),
offset: [0, 10], offset: [0, 10],
onShow() { onShow(instance) {
const stepEl = el.closest('.action') const stepEl = el.closest('.action')
stepEl.classList.add('tooltip-open') stepEl.classList.add('tooltip-open')
instance.setProps({
interactive: tippy.currentInput.isTouch
})
}, },
onHide() { onHide() {
const stepEl = el.closest('.action') const stepEl = el.closest('.action')
@@ -286,11 +291,11 @@
} }
}) })
el.addEventListener('touchend', e => { el.addEventListener('click', e => {
e.preventDefault() // click event should just open the tooltip on touch devices
e.stopPropagation() if (tippy.currentInput.isTouch) {
tippy.hideAll() e.preventDefault()
tippyInstance.show() }
}) })
} }
} }
@@ -451,6 +456,11 @@
.tippy-box[data-placement^='right'] > .tippy-arrow::before { .tippy-box[data-placement^='right'] > .tippy-arrow::before {
border-right-color: white; border-right-color: white;
} }
a.tooltip-contents {
color: inherit;
text-decoration: none;
display: block;
}
.tooltip-title { .tooltip-title {
font-weight: 600; font-weight: 600;
font-size: 1.1em; font-size: 1.1em;