UI and Functional Improvements Spec

Why

User reported several UI inconsistencies, visual bugs, and missing feedback mechanisms that affect the usability and aesthetic quality of the application. Specifically, the announcement feature needs polish, font colors need adjustment for dark mode, and feedback for save operations is missing.

What Changes

Announcement Feature

Settings Dialog (AnnouncementSettingsDialog.vue):
- Fix Markdown toolbar layout to prevent conflicts/overflow (use flex-wrap).
- Fix Preview functionality (ensure parseMarkdown works).
- Add "Save Success" feedback when adding/modifying announcements.
Widget (AnnouncementWidget.vue):
- Hide the widget completely when there are no active/upcoming announcements (User requirement: "only shows when there are announcements").
- Make the widget clickable to open a detail popup of the current announcement.
Detail Popup (AnnouncementOverlay.vue or new):
- Ensure manually clicking the widget opens the detail view.

Homework UI

Homework Grid (HomeworkGrid.vue):
- Change "Self Correction" (自批) tag color from Orange/Warning to Green/Success.
Homework Edit Dialog (HomeworkEditDialog.vue):
- Add Item Button: Change style to be more obvious (White background, black text).
- Metadata Buttons (Submission Time, Self Correction): Adjust height and border-radius to match the "Preset" chips on the left for visual consistency.

General UI

Font Colors:
- Change gray text to White in key locations (e.g., Homework Edit dialog controls, Announcement widget text) for better contrast in dark mode.
Floating Toolbar:
- Fix the "Refresh" button loading state (it appears stuck).
Feedback:
- Implement a "Save Success" (green) notification (Snackbar/Toast) that triggers after successful save operations (Homework save, Announcement save, etc.).

Impact

Affected Components: AnnouncementSettingsDialog, AnnouncementWidget, HomeworkGrid, HomeworkEditDialog, FloatingToolbar, index.vue.
User Experience: Improved visual consistency, better feedback on actions, and cleaner interface when no announcements are present.

ADDED Requirements

Requirement: Save Feedback

The system SHALL display a green "Save Success" notification (Snackbar) when:

A homework entry is saved (auto-save or manual).
An announcement is added or modified.
Attendance is saved.

WHEN there are no active announcements, THEN the widget on the main board SHALL be hidden.
WHEN the widget is visible and clicked, THEN it SHALL open the announcement detail popup.

MODIFIED Requirements

Requirement: Visual Styles

Self Correction Tag: SHALL be Green.
Add Item Button: SHALL be White (filled).
Metadata Buttons: SHALL match Preset Chips in size and shape.
Refresh Button: SHALL NOT show loading state indefinitely.

2.9 KiB Raw Blame History