diff --git a/cypress/e2e/Admin.TagOverview.feature b/cypress/e2e/Admin.TagOverview.feature index fcec638ec..fe751b297 100644 --- a/cypress/e2e/Admin.TagOverview.feature +++ b/cypress/e2e/Admin.TagOverview.feature @@ -25,7 +25,7 @@ Feature: Admin tag overview Scenario: See an overview of tags When I navigate to page "/admin/hashtags" Then I can see the following table: - | No. | Hashtags | Users | Posts | + | No. | Name | Users | Posts | | 1 | #Democracy | 3 | 3 | | 2 | #Nature | 2 | 2 | | 3 | #Ecology | 1 | 1 | \ No newline at end of file diff --git a/packages/ui/KATALOG.md b/packages/ui/KATALOG.md index 832edfd85..2b402bfa0 100644 --- a/packages/ui/KATALOG.md +++ b/packages/ui/KATALOG.md @@ -14,7 +14,7 @@ Phase 3: OsButton ██████████ 100% (133/133 Buttons) ✅ Phase 4: Tier 1 ██████████ 100% (OsButton, OsIcon, OsSpinner, OsCard) ✅ Phase 4: Tier A → HTML ██████████ 100% (10 ds-* Wrapper → Plain HTML) ✅ Phase 4: Tier B ██████░░░░ 60% (ds-chip→OsBadge✅, ds-tag→OsBadge✅, ds-grid✅, ds-number⬜, ds-radio⬜) -Phase 4: Tier 2-4 ░░░░░░░░░░ 0% (OsModal, OsInput, OsMenu, OsSelect, OsTable) +Phase 4: Tier B+ ████████░░ 75% (ds-table→HTML✅) | Tier 2-3 ausstehend (OsModal, OsInput, OsMenu, OsSelect) ``` ### Statistiken @@ -24,10 +24,10 @@ Phase 4: Tier 2-4 ░░░░░░░░░░ 0% (OsModal, OsInput, Os | Styleguide Komponenten | 38 (23 in Webapp genutzt) | | **Gesamt** | **177** | | ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard, OsBadge (5) | -| ✅ → Plain HTML | Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem, Grid, GridItem (12) | +| ✅ → Plain HTML | Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem, Grid, GridItem, Table (13) | | ✅ → OsBadge | Chip (20 Nutzungen → OsBadge), Tag (3 → OsBadge shape="square") | | ⬜ → Plain HTML | Number, Radio (2) — Tier B Rest | -| ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select, Table (6) — Tier 2-4 | +| ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select (5) — Tier 2-3 | | ⬜ Offen | Form (18 Dateien — HTML oder OsForm?) | | ⬜ Nicht in Webapp | Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11) | @@ -60,9 +60,9 @@ Phase 4: Tier 2-4 ░░░░░░░░░░ 0% (OsModal, OsInput, Os | 6 | Number | ⬜ Tier B | 5 Dateien → Plain HTML `
` | | 7 | Placeholder | ✅ → HTML | Tier A: `
` | | 8 | Spinner | ✅ UI-Library | → OsSpinner (LoadingSpinner gelöscht) | -| 9 | Table | ⬜ Tier 4 | 7 Dateien → OsTable | -| 10 | TableCol | ⬜ Tier 4 | Intern von Table genutzt | -| 11 | TableHeadCol | ⬜ Tier 4 | Intern von Table genutzt | +| 9 | Table | ✅ → HTML | 7 Dateien → Plain HTML `` + CSS-Klassen (kein OsTable nötig) | +| 10 | TableCol | ✅ → HTML | Ersetzt durch native `
` | +| 11 | TableHeadCol | ✅ → HTML | Ersetzt durch native `` | | 12 | Tag | ✅ UI-Library | → OsBadge shape="square" (3 Nutzungen in 3 Dateien) | ### Data Input diff --git a/packages/ui/PROJEKT.md b/packages/ui/PROJEKT.md index 35ffc4827..9cf99d18d 100644 --- a/packages/ui/PROJEKT.md +++ b/packages/ui/PROJEKT.md @@ -81,10 +81,10 @@ Phase 0: ██████████ 100% (6/6 Aufgaben) ✅ Phase 1: ██████████ 100% (6/6 Aufgaben) ✅ Phase 2: ██████████ 100% (26/26 Aufgaben) ✅ Phase 3: ██████████ 100% (24/24 Aufgaben) ✅ - Webapp-Integration komplett -Phase 4: ██████░░░░ 54% (14/26 Aufgaben) - Tier 1 ✅, Tier A ✅, Infra ✅, OsBadge ✅ | Tier B (rest), Tier 2-4 ausstehend +Phase 4: ██████░░░░ 59% (16/27 Aufgaben) - Tier 1 ✅, Tier A ✅, Infra ✅, OsBadge ✅, ds-grid ✅, ds-table→HTML ✅ | Tier B (rest), Tier 2-3 ausstehend Phase 5: ░░░░░░░░░░ 0% (0/7 Aufgaben) ─────────────────────────────────────── -Gesamt: ████████░░ 80% (76/95 Aufgaben) +Gesamt: ████████░░ 81% (78/96 Aufgaben) ``` ### Katalogisierung (Details in KATALOG.md) @@ -205,11 +205,24 @@ ds-chip + ds-tag → OsBadge (UI-Library): ✅ ## Aktueller Stand -**Letzte Aktualisierung:** 2026-02-20 (Session 30) +**Letzte Aktualisierung:** 2026-02-20 (Session 31) -**Aktuelle Phase:** Phase 4 - Tier 1 ✅, Tier A ✅, OsBadge ✅ (ds-chip + ds-tag → UI-Library) | Tier B, Tier 2-4 ausstehend +**Aktuelle Phase:** Phase 4 - Tier 1 ✅, Tier A ✅, OsBadge ✅, ds-grid ✅, ds-table→HTML ✅ | Tier B (rest), Tier 2-3 ausstehend -**Zuletzt abgeschlossen (Session 30 - OsBadge Code-Review Fixes):** +**Zuletzt abgeschlossen (Session 31 - ds-table → Plain HTML):** +- [x] ds-table (7 Nutzungen) → native `` + CSS-Klassen (kein OsTable nötig) +- [x] Table-CSS in `_ds-compat.scss`: .ds-table-wrap, .ds-table, .ds-table-col, .ds-table-head-col, .ds-table-bordered, .ds-table-condensed, Alignment-Klassen +- [x] `pages/admin/hashtags.vue`: 4 Spalten (index, id-Link, taggedCountUnique, taggedCount) +- [x] `pages/admin/categories.vue`: 3 Spalten (icon, name, postCount) +- [x] `pages/admin/users/index.vue`: 9-10 Spalten (conditional badges), komplexeste Tabelle +- [x] `pages/settings/blocked-users.vue`: 4 Spalten, unblockUser() auf direktes User-Objekt umgestellt +- [x] `pages/settings/muted-users.vue`: 4 Spalten, unmuteUser() auf direktes User-Objekt umgestellt +- [x] `components/Group/GroupMember.vue`: 5 Spalten (avatar, name, slug, roleInGroup, edit) +- [x] `components/features/FiledReportsTable/FiledReportsTable.vue`: 4 Spalten mit colgroup widths +- [x] `fields()` / `tableFields()` Computed Properties aus allen 7 Dateien entfernt (Labels direkt in `
`) +- [x] Alle 16 Tests bestanden (3 Test-Suites: admin/users Snapshots aktualisiert, FiledReportsTable ✅, ReportsTable ✅) + +**Zuvor abgeschlossen (Session 30 - OsBadge Code-Review Fixes):** - [x] `--color-default-contrast` zu `requiredCssVariables` in tailwind.preset.ts hinzugefügt - [x] Doppelte `--color-default`-Deklaration in ocelot-ui-variables.scss entfernt (softest → softer konsolidiert) - [x] Redundante Ternär-Ausdrücke entfernt: GroupTeaser.vue + groups/_slug.vue (`group ? group.about : ''` → `group.about`) @@ -248,9 +261,9 @@ ds-chip + ds-tag → OsBadge (UI-Library): ✅ - [x] Test-Fix: Empty.spec.js `attributes().margin` → `classes().toContain('ds-my-xxx-small')` - [x] 0 Tier-A `ds-*` Komponenten-Tags verbleibend -**Verbleibende ds-* Komponenten (9 Typen):** +**Verbleibende ds-* Komponenten (8 Typen):** - Tier B Rest (→ Plain HTML): ds-number (5), ds-radio (1) -- Tier C (→ UI-Library): ds-input (23), ds-form (18), ds-modal (7), ds-menu/ds-menu-item (17), ds-table (7), ds-select (3) +- Tier C (→ UI-Library): ds-input (23), ds-form (18), ds-modal (7), ds-menu/ds-menu-item (17), ds-select (3) **Zuvor abgeschlossen (Session 26 - CodeRabbit Review Fixes):** - [x] Cypress: `.os-card .title` → `.os-card > .title` (Kind-Kombinator statt Nachfahren) @@ -644,7 +657,7 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ - [x] ds-chip (5 Dateien) → OsBadge (UI-Library) ✅ - [x] ds-tag (3 Dateien) → OsBadge shape="square" (UI-Library) ✅ - [ ] ds-number (5 Dateien) → `
` -- [ ] ds-grid / ds-grid-item (10 Dateien) → CSS Grid +- [x] ds-grid / ds-grid-item (10 Dateien) → CSS Grid ✅ - [ ] ds-radio (1 Datei) → native `` **Tier 2: Layout & Feedback (UI-Library)** @@ -659,7 +672,7 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ **Tier 4: Spezial-Komponenten** - [ ] OsSelect (3 Dateien) -- [ ] OsTable (7 Dateien) +- [x] ds-table (7 Dateien) → Plain HTML `` + CSS-Klassen ✅ (kein OsTable nötig) - [ ] ds-form → Plain HTML `` oder OsForm (18 Dateien) **Infrastruktur** @@ -1788,6 +1801,11 @@ Bei der Migration werden: | 2026-02-20 | **Type Safety** | BadgeVariant Typ exportiert, PlaygroundArgs typisiert, redundante Ternäre entfernt | | 2026-02-20 | **Layout-Konsistenz** | GroupForm float:right → Flexbox align-self:flex-end, Inline-Style → Tailwind in Stories | | 2026-02-20 | **ARIA Live Regions** | role="status"/aria-live="polite" auf 11 Form-Badges (WCAG 4.1.3), live Prop → Standard-Attribute | +| 2026-02-20 | **ds-grid → CSS Grid** | 10 Dateien migriert: ds-grid/ds-grid-item → native CSS Grid + Klassen | +| 2026-02-20 | **ds-table → Plain HTML (Session 31)** | 7 Dateien: `` → native `
` + CSS-Klassen (.ds-table, .ds-table-col, etc.) | +| 2026-02-20 | **Table-CSS** | _ds-compat.scss erweitert: .ds-table-wrap, .ds-table, .ds-table-col, .ds-table-head-col, bordered, condensed, alignment | +| 2026-02-20 | **fields() entfernt** | Computed Properties `fields()`/`tableFields()` aus 7 Dateien entfernt — Labels direkt in `
` | +| 2026-02-20 | **Scope-Objekte entfernt** | `scope.row` Zugriffe → direkte Iteration-Variable (user, tag, member, report) | --- @@ -1806,10 +1824,10 @@ Bei der Migration werden: | Status | Komponenten | |--------|------------| | ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard, OsBadge (5) | -| ✅ → Plain HTML | Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem (10) — Tier A | +| ✅ → Plain HTML | Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem, Grid, GridItem, Table (13) — Tier A/B | | ✅ → UI-Library | Chip, Tag → OsBadge (2) — Tier B | -| ⬜ → Plain HTML | Number, Grid, GridItem, Radio (4) — Tier B | -| ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select, Table (6) — Tier 2-4 | +| ⬜ → Plain HTML | Number, Radio (2) — Tier B | +| ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select (5) — Tier 2-3 | | ⬜ Nicht genutzt | Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11) | | ⬜ Offen | Form (18 Dateien — HTML `` oder OsForm?) | diff --git a/webapp/assets/_new/styles/_ds-compat.scss b/webapp/assets/_new/styles/_ds-compat.scss index 5859de180..386ddf190 100644 --- a/webapp/assets/_new/styles/_ds-compat.scss +++ b/webapp/assets/_new/styles/_ds-compat.scss @@ -68,3 +68,29 @@ .ds-flex-gap-small { gap: $space-small; } .ds-flex-gap-base { gap: $space-base; } .ds-flex-gap-large { gap: $space-large; } + +// ds-table Ersatz +.ds-table-wrap { width: 100%; overflow: auto; } +.ds-table { width: 100%; border-collapse: collapse; } +.ds-table-col { + vertical-align: middle; + padding: $space-small $space-xx-small; + &:last-child { padding-right: 0; } +} +.ds-table-head-col { + border-bottom: $border-size-base solid $border-color-softer; + padding: $space-small $space-xx-small; + text-align: left; + font-weight: $font-weight-bold; +} +.ds-table-bordered { + .ds-table-col, .ds-table-head-col { border-bottom: $border-size-base dotted $border-color-softer; } + tr:last-child .ds-table-col { border-bottom: none; } +} +.ds-table-condensed { + .ds-table-col, .ds-table-head-col { padding-top: $space-x-small; padding-bottom: $space-x-small; } +} +.ds-table-col, .ds-table-head-col { + &.ds-table-col-right, &.ds-table-head-col-right { text-align: right; } + &.ds-table-col-center, &.ds-table-head-col-center { text-align: center; } +} diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue index 108e5ce73..c8ee57417 100644 --- a/webapp/components/Group/GroupMember.vue +++ b/webapp/components/Group/GroupMember.vue @@ -2,74 +2,96 @@

{{ $t('group.membersListTitle') }}

- - - - - - - +
+ + + + + + + + + + + + + + + + + + + +
+ {{ $t('group.membersAdministrationList.avatar') }} + + {{ $t('group.membersAdministrationList.name') }} + + {{ $t('group.membersAdministrationList.slug') }} + + {{ $t('group.membersAdministrationList.roleInGroup') }} +
+ + + + + +

+ {{ member.user.name | truncate(20) }} +

+ + 		+ +

+ {{ `@${member.user.slug}` | truncate(20) }} +

+ + 		+ + + {{ $t(`group.roles.${member.membership.role}`) }} + + + + + {{ $t('group.removeMemberButton') }} + +
+
[], }, }, created() { this.icons = iconRegistry + this.groupRoles = GROUP_ROLES }, data() { return { @@ -119,32 +145,6 @@ export default { userId: null, } }, - computed: { - tableFields() { - return { - avatar: { - label: this.$t('group.membersAdministrationList.avatar'), - align: 'left', - }, - name: { - label: this.$t('group.membersAdministrationList.name'), - align: 'left', - }, - slug: { - label: this.$t('group.membersAdministrationList.slug'), - align: 'left', - }, - roleInGroup: { - label: this.$t('group.membersAdministrationList.roleInGroup'), - align: 'left', - }, - edit: { - label: '', - align: 'left', - }, - } - }, - }, methods: { async changeMemberRole(id, event) { const newRole = event.target.value diff --git a/webapp/components/features/FiledReportsTable/FiledReportsTable.vue b/webapp/components/features/FiledReportsTable/FiledReportsTable.vue index 22d383c3c..e0e0c3a0d 100644 --- a/webapp/components/features/FiledReportsTable/FiledReportsTable.vue +++ b/webapp/components/features/FiledReportsTable/FiledReportsTable.vue @@ -1,31 +1,53 @@ diff --git a/webapp/components/features/ReportsTable/ReportsTable.vue b/webapp/components/features/ReportsTable/ReportsTable.vue index 3892c0b12..3b2f1a64c 100644 --- a/webapp/components/features/ReportsTable/ReportsTable.vue +++ b/webapp/components/features/ReportsTable/ReportsTable.vue @@ -2,8 +2,6 @@ @@ -14,13 +12,13 @@ - - - - - - - + + + + + + +
{{ $t('moderation.reports.submitter') }}{{ $t('moderation.reports.content') }}{{ $t('moderation.reports.author') }}{{ $t('moderation.reports.status') }}{{ $t('moderation.reports.decision') }}
{{ $t('moderation.reports.submitter') }}{{ $t('moderation.reports.content') }}{{ $t('moderation.reports.author') }}{{ $t('moderation.reports.status') }}{{ $t('moderation.reports.decision') }}