refactor(board): modernize item and application select modals with SelectableCard (#6642)
Modernize board item, application, and integration selection flows with shared Mantine components, batch board actions, improved accessibility, and hardened persistence.
This commit is contained in:
1 parent
bd4f6a92c6
commit
f3014fe271
60 files changed
+3791
-1839
No files matched your search
@@ -204,10 +204,13 @@ changes, Homarr asks whether to discard them. If the editor cannot load, the boa
|
||||
style={{ maxWidth: "100%" }}
|
||||
/>
|
||||
|
||||
While edit mode is active, **Add board content** opens the same Universal Create surface as the global header action and
|
||||
Spotlight. It lists the available actions directly and can add a widget, app, integration, Container, board, Workshop item, or Custom Widget when the
|
||||
current user and context allow it. Widget setup offers the main canvas, enabled rails, and existing Containers as
|
||||
destinations before the widget is created, so the common flow does not require a second move step.
|
||||
While edit mode is active, **Add board content** opens a menu for adding a widget, app, integration, or Container. The
|
||||
available actions respect the current user's permissions. Widget setup offers the main canvas, enabled rails, and existing
|
||||
Containers as destinations before the widget is created, so the common flow does not require a second move step.
|
||||
|
||||
Hold `Ctrl` on Windows or Linux, or `⌘` on macOS, while clicking board items to select several at once. The selection
|
||||
toolbar can move the complete selection to another canvas, rail, or Container, delete it with an undo option, or clear the
|
||||
selection. A move is applied only when every selected item fits in the destination.
|
||||
|
||||
The widget editor also lists its selected integrations. Users with full access can choose **Edit connection** to test,
|
||||
diagnose, and repair an integration without leaving the board. A successful repair refreshes the affected widget; the
|
||||
@@ -227,11 +230,7 @@ During a pointer or touch interaction, Escape cancels the move or resize and res
|
||||
Invalid, outside, or otherwise forbidden drops are cancelled in the same way.
|
||||
The **Move / resize item** action in the edit menu remains available for precise numeric input.
|
||||
|
||||
<img
|
||||
src={keyboardTileEditingImage}
|
||||
alt="A focused board tile in keyboard editing mode"
|
||||
style={{ maxWidth: "100%" }}
|
||||
/>
|
||||
<img src={keyboardTileEditingImage} alt="A focused board tile in keyboard editing mode" style={{ maxWidth: "100%" }} />
|
||||
|
||||
#### Preview
|
||||
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
title: "Today"
|
||||
description: "Displays the current date and progress through the calendar."
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
|
||||
|
||||
import { AddingWidget } from "@site/src/components/widgets/adding";
|
||||
import { WidgetConfig } from "@site/src/components/widgets/configuration";
|
||||
import { WidgetHeader } from "@site/src/components/widgets/header";
|
||||
import { todayWidget } from ".";
|
||||
|
||||
<WidgetHeader widget={todayWidget} categories={["Date", "Time"]} />
|
||||
|
||||
The Today widget presents the current local date without duplicating a live clock. It progressively adds the week
|
||||
number, day of year, quarter, remaining days, and calendar progress as more space becomes available.
|
||||
|
||||
The advanced view shows week, month, and year progress together with a twelve-month overview. Week numbers can follow
|
||||
your locale or the ISO 8601 convention. “Days after today” excludes the current day to keep the remaining-day count
|
||||
unambiguous.
|
||||
|
||||
The widget runs entirely in your browser and does not send date or location data to an external service. It follows
|
||||
the timezone and locale of the device viewing the board, so viewers in different regions can see their own local date.
|
||||
|
||||
<WidgetInteractionGuide />
|
||||
|
||||
### Adding the widget
|
||||
|
||||
<AddingWidget />
|
||||
|
||||
### Configuration
|
||||
|
||||
<WidgetConfig configuration={todayWidget.configuration} />
|
||||
@@ -1,43 +0,0 @@
|
||||
import type { WidgetDefinition } from "@site/src/types";
|
||||
import { IconCalendarWeek } from "@tabler/icons-react";
|
||||
|
||||
export const todayWidget: WidgetDefinition = {
|
||||
icon: IconCalendarWeek,
|
||||
name: "Today",
|
||||
description: "Displays the current date and progress through the calendar.",
|
||||
path: "../../widgets/today",
|
||||
configuration: {
|
||||
items: [
|
||||
{
|
||||
name: "Week numbering",
|
||||
description: "Use locale-specific week numbering or ISO 8601 week numbers",
|
||||
values: { type: "select", options: ["Use locale rules", "ISO 8601"] },
|
||||
defaultValue: "Use locale rules",
|
||||
},
|
||||
{
|
||||
name: "Show week number",
|
||||
description: "Display the current week number when the widget has room",
|
||||
values: { type: "boolean" },
|
||||
defaultValue: "yes",
|
||||
},
|
||||
{
|
||||
name: "Show day of year",
|
||||
description: "Display the current day number within the year",
|
||||
values: { type: "boolean" },
|
||||
defaultValue: "yes",
|
||||
},
|
||||
{
|
||||
name: "Show quarter",
|
||||
description: "Display the current calendar quarter",
|
||||
values: { type: "boolean" },
|
||||
defaultValue: "yes",
|
||||
},
|
||||
{
|
||||
name: "Show year progress",
|
||||
description: "Display progress through the current year",
|
||||
values: { type: "boolean" },
|
||||
defaultValue: "yes",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
Reference in new issue
Block a user