Feat/project card redesign 7.2.x#617
Open
bmestrallet wants to merge 7 commits into
Open
Conversation
…, trim CSS Project cards (replaces the flip card): - Single-face card with a left color bar carrying the project colour, bold 18px title, space chip shown once, favorite star + 3-dots at a fixed position, fixed height, and a bottom-right progress bar split per status column (tooltip per segment, colour by status rank: ToDo/InProgress/WaitingOn/Done). - Hide the space chip (and skip the space fetch) when the portlet runs inside a space, where every project belongs to that space. - Delete the now-unused ProjectCardReverse.vue + its registration and the dead flip/reverse-card CSS. List toolbars: ProjectListToolbar / TasksListToolbar adopt the shared application-toolbar (flush-left Add button + collapsible cone search with the advanced filter inside, like Spaces); symmetric grid gutter so cards align to both edges; a Favorites option added to both filter dropdowns (client-side for projects). Fix the Add Project button not showing inside a space (ApplicationTool reads $slots.left non-reactively, so the slot is always declared and the v-if moved to the inner button). Plan view: move the unscheduled-tasks button from a floating button overlaying the gantt into the board toolbar, after the extension icons; drop its dead CSS. Net effect: tasks.less shrinks from 3179 to ~2890 lines despite the new card, progress bar and skeleton loader, by reusing existing platform components. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Audited every app-specific selector in tasks.less against actual usage across the Vue templates and JS; removed blocks whose class/id appears nowhere (verified live: cards, board, list, plan, Add Project drawer all unchanged). Removed (dead since their features were rewritten/removed): - Old flip/echart project card: the two #TasksParentContainer media blocks. - Old card/list tasks toolbar (.tasksToolbar + its 599/399px media). - Custom permission-avatar list in the Add Project drawer (replaced by identitySuggester): the seeMore*/peopleInfoIcon/avatar float rules. - 22 *_border project-colour classes (never referenced). - "Task Snapshot" leftovers (.flexCard, .noTasks, .iconlarge, .color-title, .list-leave-*), dead .taskCard/.taskAssignee/.noTasksProject children, mis-cased #TasksListToolbar/#ProjectListToolbar (real ids are lowercase), .CalendarTableColor, .gantt-tasks-title, .AllAssigneeAvatar, and assorted small dead selectors + one now-empty .taskAssignee block. tasks.less 2871 -> 2160 lines. Across the whole effort: 3179 -> 2160 (~32%). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…tatus, hover)
TasksListItem (the cross-project My Tasks list):
- Replace the broken hand-rolled space <v-img> (empty src, no tooltip) with the
shared exo-space-avatar (correct image + hover popover showing the space name).
- Show the project as a colour dot + full project name (plain text) instead of a
narrow colour chip that truncated heavily ("Bug Tri…", "Customer O…").
- Rebalance the row columns: title 40% -> 30%, project 10% -> 22% (+ drop the
inner chip max-width caps and the title's oversized pe-14), so names show fully.
- Widen the status column 7% -> 11% (and trim its padding) so "In Progress" /
"Waiting On" no longer truncate.
- Add a subtle row hover (primary border + soft shadow, pointer cursor) since the
rows are clickable.
Only affects TasksListItem; the project List view (TaskViewListItem) is a separate
component with no project/space column.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- My Tasks list space avatar: the exo-space-avatar identity popover opened over the small avatar, so the cursor landed on the popover -> close/reopen flicker. Replaced with a plain avatar + v-tooltip (opens below, shows the space name). - Project card progress bar "shook" when hovering the member avatars: the avatar list lazy-loads on hover (retrieve-extra-information) and re-renders the footer, and the segments had `transition: width` so they re-animated each time. Dropped the transition (the bar doesn't need to animate). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…tatus, less CSS Avatar-hover flicker (card + My Tasks list): the shared user-avatars-list lifts the hovered avatar via .mt-n1 (negative margin), which reflowed the flex line and pushed the row/footer/progress bar (re-triggering hover -> flicker). Keep the visual lift but do it with a transform (no layout impact); the override has to be prefixed with .v-application to out-specify Vuetify's own .v-application .mt-n1. Also let the row's .taskAssignee cell overflow (it carries the v-avatar class, so it was clipping the lifted/overlapping avatars). Project List view (TaskViewListItem): the whole row now opens the task drawer (empty gaps were dead before; only the title link / cells were clickable) — the checkbox and assignee avatars keep their own actions via @click.stop. Widened the status column (10% -> 14%, trimmed padding, title 59% -> 55%) so "In Progress" / "Waiting On" no longer truncate; pointer cursor on the row. CSS: removed the now-redundant .taskProject block (a duplicate colour palette plus the orphaned .taskProjectName / .spaceAvatarImg the list rework left behind) — the dot/colours come from the global classes + Vuetify. tasks.less ~2070 lines. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…atch) The bundled frappe-gantt computes its hover-popup position in a mixed coordinate space, so the popup appeared far from the bar and drifted when the timeline was scrolled. Fixed entirely in our own component (TasksViewGantt) — the vendored frappegantt.js is left untouched: - A mouseover listener on the gantt container runs in the bubbling phase, AFTER the library's own bar handler, and repositions the popup synchronously, so the library's wrong position is overwritten before paint (no flicker). - Position is derived by calibration: park the popup at (0,0), read where it lands, then offset to just below the hovered bar. getBoundingClientRect forces layout but not paint, so the (0,0) step is never shown. Robust to the gantt's scroll / offsetParent quirks (constant offset verified across scroll positions). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
.uiTaskNumber (the column-header task-count pill) had a hard width:28px sized for two digits, so a count like 105 clipped to "10" with the last digit spilling below. Switched it to inline-flex + min-width:28px + padding + nowrap so it keeps the same shape for 1-2 digits and expands cleanly for 3+ digit counts. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
bmestrallet
force-pushed
the
feat/project-card-redesign-7.2.x
branch
from
00d3bf6 to
b6d9119
Compare
|
bmestrallet
changed the base branch from
develop
to
feat/task-application-toolbar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description:
What & why
Modernizes the Task project list to match the rest of the platform, mostly by reusing existing components — net result is less CSS despite new UI.
Project cards
ProjectCardReverse.vue+ dead flip/reverse CSS.List toolbars
ProjectListToolbar/TasksListToolbaradopt the sharedapplication-toolbar(flush-left Add button + collapsible full-width search with the advanced filter inside, like Spaces). Symmetric grid gutter aligns cards to both edges.ApplicationToolbarreads$slots.leftnon-reactively, so the slot is always declared and thev-ifmoved to the inner button.Plan view
Tested (live, local 7.2.x)
Cards/colors/avatars/per-status bars; toolbar alignment + full-width search; Favorites filter; pagination (20 + Show more, 25 projects); space chip hidden + Add Project visible inside a space; Plan toolbar button opens the Unscheduled drawer.
CSS
tasks.less3179 → ~2890 lines (~9% smaller).Note
Depends on (stacks on) the not-yet-merged Favorites and Board-toolbar PRs; please merge those first.