mirror of
https://github.com/vladmandic/automatic
synced 2026-09-19 09:14:35 +02:00
Merge pull request #4091 from CalamitousFelicitousness/dev
Expandable hints & enhanced look
This commit is contained in:
Vladimir Mandic
GitHub
+78
-13
@@ -602,6 +602,7 @@ div#extras_scale_to_tab div.form {
|
||||
display: block;
|
||||
font-size: var(--text-xs);
|
||||
min-height: 1.3em;
|
||||
max-width: 40em;
|
||||
opacity: 0;
|
||||
padding: 0.5em;
|
||||
pointer-events: none;
|
||||
@@ -611,12 +612,87 @@ div#extras_scale_to_tab div.form {
|
||||
transition: opacity 0.2s ease-in;
|
||||
width: 22em;
|
||||
z-index: 999;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.tooltip-show {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tooltip-expanded {
|
||||
width: 32em;
|
||||
}
|
||||
|
||||
.tooltip .separator {
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--button-primary-border-color), transparent);
|
||||
margin: 0.5em 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.tooltip .long-content {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.3s ease-in, max-height 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.tooltip .long-content.show {
|
||||
opacity: 1;
|
||||
max-height: 50em;
|
||||
}
|
||||
|
||||
.tooltip-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tooltip-progress-ring {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tooltip-progress-ring.active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tooltip-progress-ring svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.tooltip-progress-ring .ring-background {
|
||||
fill: none;
|
||||
stroke: var(--button-primary-border-color);
|
||||
stroke-width: 2;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.tooltip-progress-ring .ring-progress {
|
||||
fill: none;
|
||||
stroke: var(--body-text-color);
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 31.4; /* Circumference of circle with radius 5 (2πr = 2π×5 ≈ 31.4) */
|
||||
stroke-dashoffset: 31.4;
|
||||
transition: stroke-dashoffset 3s linear;
|
||||
}
|
||||
|
||||
.tooltip-progress-ring .ring-progress.animate {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
.toolbutton-selected {
|
||||
background: var(--background-fill-primary) !important;
|
||||
}
|
||||
@@ -680,19 +756,8 @@ div#extras_scale_to_tab div.form {
|
||||
|
||||
#quicksettings>button {
|
||||
align-self: end;
|
||||
height: 1.3em;
|
||||
margin: 0em 0.7em 0.3em -0.5em;
|
||||
line-height: 1em;
|
||||
background-color: var(--background-fill-primary);
|
||||
}
|
||||
|
||||
#quicksettings>button:hover {
|
||||
background-color: var(--button-cancel-border-color-hover);
|
||||
}
|
||||
|
||||
button#quicksettings_reset {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 0 1em 0 0;
|
||||
}
|
||||
|
||||
#settings {
|
||||
|
||||
+92
-3
@@ -9,6 +9,8 @@ const localeData = {
|
||||
type: 2,
|
||||
hint: null,
|
||||
btn: null,
|
||||
expandTimeout: null, // New property for expansion timeout
|
||||
currentElement: null, // Track current element for expansion
|
||||
};
|
||||
|
||||
async function cycleLocale() {
|
||||
@@ -44,20 +46,103 @@ async function tooltipCreate() {
|
||||
if (window.opts.tooltips === 'UI tooltips') localeData.type = 2;
|
||||
}
|
||||
|
||||
async function expandTooltip(element, longHint) {
|
||||
if (localeData.currentElement === element && localeData.hint.classList.contains('tooltip-show')) {
|
||||
// Hide the progress ring
|
||||
const ring = localeData.hint.querySelector('.tooltip-progress-ring');
|
||||
if (ring) {
|
||||
ring.style.opacity = '0';
|
||||
}
|
||||
|
||||
// Expand the container
|
||||
localeData.hint.classList.add('tooltip-expanded');
|
||||
|
||||
// After container starts expanding, reveal the long content
|
||||
setTimeout(() => {
|
||||
const longContent = localeData.hint.querySelector('.long-content');
|
||||
if (longContent) {
|
||||
longContent.classList.add('show');
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
async function tooltipShow(e) {
|
||||
// Clear any existing expansion timeout
|
||||
if (localeData.expandTimeout) {
|
||||
clearTimeout(localeData.expandTimeout);
|
||||
localeData.expandTimeout = null;
|
||||
}
|
||||
|
||||
// Remove expanded class and reset current element
|
||||
localeData.hint.classList.remove('tooltip-expanded');
|
||||
localeData.currentElement = e.target;
|
||||
|
||||
if (e.target.dataset.hint) {
|
||||
// Create progress ring SVG
|
||||
const progressRing = `
|
||||
<div class="tooltip-progress-ring">
|
||||
<svg viewBox="0 0 12 12">
|
||||
<circle class="ring-background" cx="6" cy="6" r="5"></circle>
|
||||
<circle class="ring-progress" cx="6" cy="6" r="5"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Set up the complete content structure from the start
|
||||
let content = `
|
||||
<div class="tooltip-header">
|
||||
<b>${e.target.textContent}</b>
|
||||
${e.target.dataset.longHint ? progressRing : ''}
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
${e.target.dataset.hint}
|
||||
`;
|
||||
|
||||
// Add long content if available, but keep it hidden
|
||||
if (e.target.dataset.longHint) {
|
||||
content += `<div class="long-content"><div class="separator"></div>${e.target.dataset.longHint}</div>`;
|
||||
}
|
||||
|
||||
localeData.hint.innerHTML = content;
|
||||
localeData.hint.classList.add('tooltip-show');
|
||||
localeData.hint.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
|
||||
|
||||
if (e.clientX > window.innerWidth / 2) {
|
||||
localeData.hint.classList.add('tooltip-left');
|
||||
} else {
|
||||
localeData.hint.classList.remove('tooltip-left');
|
||||
}
|
||||
|
||||
// Set up expansion timer if long hint is available
|
||||
if (e.target.dataset.longHint) {
|
||||
// Start progress ring animation
|
||||
const ring = localeData.hint.querySelector('.tooltip-progress-ring');
|
||||
const ringProgress = localeData.hint.querySelector('.ring-progress');
|
||||
|
||||
if (ring && ringProgress) {
|
||||
// Show the ring and start animation
|
||||
setTimeout(() => {
|
||||
ring.classList.add('active');
|
||||
ringProgress.classList.add('animate');
|
||||
}, 100);
|
||||
}
|
||||
|
||||
localeData.expandTimeout = setTimeout(() => {
|
||||
expandTooltip(e.target, e.target.dataset.longHint);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function tooltipHide(e) {
|
||||
localeData.hint.classList.remove('tooltip-show');
|
||||
// Clear expansion timeout when hiding
|
||||
if (localeData.expandTimeout) {
|
||||
clearTimeout(localeData.expandTimeout);
|
||||
localeData.expandTimeout = null;
|
||||
}
|
||||
|
||||
localeData.hint.classList.remove('tooltip-show', 'tooltip-expanded');
|
||||
localeData.currentElement = null;
|
||||
}
|
||||
|
||||
async function validateHints(json, elements) {
|
||||
@@ -85,7 +170,7 @@ async function addMissingHints(json, missingHints) {
|
||||
json.missing = [];
|
||||
for (const h of missingHints.sort()) {
|
||||
if (h.length <= 1) continue;
|
||||
json.missing.push({ id: '', label: h, localized: '', hint: h });
|
||||
json.missing.push({ id: '', label: h, localized: '', hint: h, longHint: '' }); // Add longHint property
|
||||
}
|
||||
log('missing hints', missingHints);
|
||||
log('added missing hints:', { missing: json.missing });
|
||||
@@ -192,6 +277,10 @@ async function setHints(analyze = false) {
|
||||
el.title = found.hint;
|
||||
} else if (localeData.type === 2) {
|
||||
el.dataset.hint = found.hint;
|
||||
// Set long hint if available
|
||||
if (found.longHint && found.longHint.length > 0) {
|
||||
el.dataset.longHint = found.longHint;
|
||||
}
|
||||
el.addEventListener('mouseover', tooltipShow);
|
||||
el.addEventListener('mouseout', tooltipHide);
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user