mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 14:54:37 +00:00
25afd39d2b
A major, full rewrite of linear mode, now under the name "Simple Mode". - Fixes widget styling - Adds a new simplified history - Adds support for non-image outputs - Supports right sidebar - Allows and panning on the output image preview - Provides support for drag and drop zones - Moves workflow notes into a popover. - Allows scrolling through outputs with Ctrl+scroll or arrow keys The primary means of accessing Simple Mode is a toggle button on the bottom right. This button is only shown if a feature flag is enabled, or the user has already seen linear mode during the current session. Simple Mode can also be accessed by - Using the toggle linear mode keybind - Loading a workflow that that was saved in Simple Mode workflow - Loading a template url with appropriate parameter <img width="1790" height="1387" alt="image" src="https://github.com/user-attachments/assets/d86a4a41-dfbf-41e7-a6d9-146473005606" /> Known issues: - Outputs on cloud are not filtered to those produced by the current workflow. - Output filtering has been globally disabled for consistency - Outputs will load more items on scroll, but does not unload - Performance may be reduced on weak devices with very large histories. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7734-linear-v2-2d16d73d3650819b8a10f150ff12ea22) by [Unito](https://www.unito.io)
92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
/**
|
|
* Return a local date key in YYYY-MM-DD format for grouping.
|
|
*
|
|
* @param ts Unix timestamp in milliseconds
|
|
* @returns Local date key string
|
|
*/
|
|
export const dateKey = (ts: number): string => {
|
|
const d = new Date(ts)
|
|
const y = d.getFullYear()
|
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
|
const day = String(d.getDate()).padStart(2, '0')
|
|
return `${y}-${m}-${day}`
|
|
}
|
|
|
|
/**
|
|
* Check if a timestamp is on the same local day as today.
|
|
*
|
|
* @param ts Unix timestamp in milliseconds
|
|
* @returns True if today
|
|
*/
|
|
export const isToday = (ts: number): boolean => {
|
|
const d = new Date(ts)
|
|
const now = new Date()
|
|
return (
|
|
d.getFullYear() === now.getFullYear() &&
|
|
d.getMonth() === now.getMonth() &&
|
|
d.getDate() === now.getDate()
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Check if a timestamp corresponds to yesterday in local time.
|
|
*
|
|
* @param ts Unix timestamp in milliseconds
|
|
* @returns True if yesterday
|
|
*/
|
|
export const isYesterday = (ts: number): boolean => {
|
|
const d = new Date(ts)
|
|
const now = new Date()
|
|
const yest = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1)
|
|
return (
|
|
d.getFullYear() === yest.getFullYear() &&
|
|
d.getMonth() === yest.getMonth() &&
|
|
d.getDate() === yest.getDate()
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Localized short month + day label, e.g. "Jan 2".
|
|
*
|
|
* @param ts Unix timestamp in milliseconds
|
|
* @param locale BCP-47 locale string
|
|
* @returns Localized month/day label
|
|
*/
|
|
export const formatShortMonthDay = (ts: number, locale: string): string => {
|
|
const d = new Date(ts)
|
|
return new Intl.DateTimeFormat(locale, {
|
|
month: 'short',
|
|
day: 'numeric'
|
|
}).format(d)
|
|
}
|
|
|
|
/**
|
|
* Localized clock time, e.g. "10:05:06" with locale defaults for 12/24 hour.
|
|
*
|
|
* @param ts Unix timestamp in milliseconds
|
|
* @param locale BCP-47 locale string
|
|
* @returns Localized time string
|
|
*/
|
|
export const formatClockTime = (ts: number, locale: string): string => {
|
|
const d = new Date(ts)
|
|
return new Intl.DateTimeFormat(locale, {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
}).format(d)
|
|
}
|
|
|
|
export function formatDuration(durationSeconds?: number) {
|
|
if (durationSeconds == undefined) return ''
|
|
const hours = (durationSeconds / 60 ** 2) | 0
|
|
const minutes = ((durationSeconds % 60 ** 2) / 60) | 0
|
|
const seconds = (durationSeconds % 60) | 0
|
|
const parts = []
|
|
|
|
if (hours > 0) parts.push(`${hours}h`)
|
|
if (minutes > 0) parts.push(`${minutes}m`)
|
|
if (seconds > 0) parts.push(`${seconds}s`)
|
|
|
|
return parts.join(' ')
|
|
}
|