feat: add editable start time to infobox time widget
This commit is contained in:
@@ -436,14 +436,12 @@ export function renderInfoBox() {
|
|||||||
|
|
||||||
// Time widget - show if enabled
|
// Time widget - show if enabled
|
||||||
if (config?.widgets?.time?.enabled) {
|
if (config?.widgets?.time?.enabled) {
|
||||||
// Determine which time value to display and edit
|
// Get both start and end times
|
||||||
const hasTimeEnd = Boolean(data.timeEnd);
|
const timeStartDisplay = data.timeStart || '12:00';
|
||||||
const hasTimeStart = Boolean(data.timeStart);
|
const timeEndDisplay = data.timeEnd || data.timeStart || '12:00';
|
||||||
const timeDisplay = data.timeEnd || data.timeStart || '12:00';
|
|
||||||
const timeField = hasTimeEnd ? 'timeEnd' : 'timeStart';
|
|
||||||
|
|
||||||
// Parse time for clock hands
|
// Parse end time for clock hands (use end time for visual display)
|
||||||
const timeMatch = timeDisplay.match(/(\d+):(\d+)/);
|
const timeMatch = timeEndDisplay.match(/(\d+):(\d+)/);
|
||||||
let hourAngle = 0;
|
let hourAngle = 0;
|
||||||
let minuteAngle = 0;
|
let minuteAngle = 0;
|
||||||
if (timeMatch) {
|
if (timeMatch) {
|
||||||
@@ -465,7 +463,11 @@ export function renderInfoBox() {
|
|||||||
<div class="rpg-clock-center"></div>
|
<div class="rpg-clock-center"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rpg-time-value rpg-editable" contenteditable="true" data-field="${timeField}" title="Click to edit">${timeDisplay}</div>
|
<div class="rpg-time-range">
|
||||||
|
<div class="rpg-time-value rpg-editable" contenteditable="true" data-field="timeStart" title="Click to edit start time">${timeStartDisplay}</div>
|
||||||
|
<span class="rpg-time-separator">→</span>
|
||||||
|
<div class="rpg-time-value rpg-editable" contenteditable="true" data-field="timeEnd" title="Click to edit end time">${timeEndDisplay}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1582,6 +1582,25 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rpg-time-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-time-range .rpg-time-value {
|
||||||
|
margin-top: 0;
|
||||||
|
min-width: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-time-separator {
|
||||||
|
font-size: clamp(0.5rem, 0.5vw, 0.625rem);
|
||||||
|
color: var(--rpg-text-muted, var(--rpg-text));
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
/* Location Widget - Map */
|
/* Location Widget - Map */
|
||||||
.rpg-map-bg {
|
.rpg-map-bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -5721,6 +5740,14 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
|
|||||||
font-size: min(2.5vw, 0.8125rem) !important;
|
font-size: min(2.5vw, 0.8125rem) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rpg-time-range {
|
||||||
|
gap: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-time-separator {
|
||||||
|
font-size: min(2vw, 0.625rem) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.rpg-location-text {
|
.rpg-location-text {
|
||||||
font-size: min(2.8vw, 0.875rem) !important;
|
font-size: min(2.8vw, 0.875rem) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user