56 lines
2.9 KiB
Markdown
56 lines
2.9 KiB
Markdown
# 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.
|
|
|
|
### Requirement: Announcement Widget Behavior
|
|
- **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.
|
|
|