Skip to content

Commit d5a35d7

Browse files
rjvelazcorjvelazco
committed
chore(edit-content): Update locale sidebar component to use buttons and overlays for better UI interaction
1 parent 46ae89b commit d5a35d7

File tree

8 files changed

+91
-168
lines changed

8 files changed

+91
-168
lines changed

‎core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-locales/dot-edit-content-sidebar-locales.component.html‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,32 @@
66
<p-skeleton />
77
} @else {
88
@for (locale of $localesToShow(); track locale.id) {
9-
<p-chip
10-
[label]="locale.isoCode | dotIsoCode"
11-
(click)="currentLocale?.id !== locale.id ? switchLocale.emit(locale) : null"
12-
[styleClass]="getStyleClass(locale)" />
9+
@if (locale.id === currentLocale?.id) {
10+
<p-overlaybadge severity="danger">
11+
<p-button
12+
[label]="locale.isoCode | dotIsoCode"
13+
[severity]="getSeverity(locale)"
14+
[outlined]="isOutlined(locale)"
15+
size="small"
16+
(onClick)="
17+
currentLocale?.id !== locale.id ? switchLocale.emit(locale) : null
18+
" />
19+
</p-overlaybadge>
20+
} @else {
21+
<p-button
22+
[label]="locale.isoCode | dotIsoCode"
23+
[severity]="getSeverity(locale)"
24+
[outlined]="isOutlined(locale)"
25+
size="small"
26+
(onClick)="currentLocale?.id !== locale.id ? switchLocale.emit(locale) : null" />
27+
}
1328
}
1429
@if (locales?.length > $maxLocaleChips()) {
15-
<p-chip
30+
<p-button
1631
[label]="$btnLabel()"
17-
styleClass="p-chip-white p-chip-sm"
32+
severity="secondary"
33+
size="small"
1834
data-testid="show-more-button"
19-
(click)="toggleShowAll()" />
35+
(onClick)="toggleShowAll()" />
2036
}
2137
}

‎core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-locales/dot-edit-content-sidebar-locales.component.ts‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,15 @@ import {
88
signal
99
} from '@angular/core';
1010

11-
import { ChipModule } from 'primeng/chip';
11+
import { ButtonModule } from 'primeng/button';
12+
import { OverlayBadgeModule } from 'primeng/overlaybadge';
1213
import { SkeletonModule } from 'primeng/skeleton';
1314

1415
import { DotMessageService } from '@dotcms/data-access';
1516
import { DotLanguage } from '@dotcms/dotcms-models';
1617
import { DotIsoCodePipe } from '@dotcms/ui';
1718

18-
enum LOCALE_STATUS {
19-
BASE = 'p-chip-sm',
20-
DEFAULT = ' default',
21-
CURRENT = ' p-chip-filled',
22-
TRANSLATED = ' p-chip-primary',
23-
UNTRANSLATED = ' p-chip-gray p-chip-dashed'
24-
}
19+
type ButtonSeverity = 'primary' | 'secondary';
2520

2621
/**
2722
* The maximum number of locales to display without truncation.
@@ -35,7 +30,7 @@ const MAX_LOCALES = 9;
3530
*/
3631
@Component({
3732
selector: 'dot-edit-content-sidebar-locales',
38-
imports: [ChipModule, SkeletonModule, DotIsoCodePipe],
33+
imports: [ButtonModule, OverlayBadgeModule, SkeletonModule, DotIsoCodePipe],
3934
templateUrl: './dot-edit-content-sidebar-locales.component.html',
4035
styleUrl: './dot-edit-content-sidebar-locales.component.scss',
4136
changeDetection: ChangeDetectionStrategy.OnPush
@@ -109,27 +104,27 @@ export class DotEditContentSidebarLocalesComponent {
109104
});
110105

111106
/**
112-
* Determines the appropriate style class for a given locale.
107+
* Determines the appropriate button severity for a given locale.
113108
*
114109
* @param {DotLanguage} locale - The locale object containing its id and translation status.
115-
* @returns {string} The computed style class based on the locale's properties.
110+
* @returns {ButtonSeverity} The button severity based on the locale's properties.
116111
*/
117-
getStyleClass({ id, translated }: DotLanguage): string {
118-
let styleClass: string = LOCALE_STATUS.BASE;
119-
112+
getSeverity({ id }: DotLanguage): ButtonSeverity {
120113
if (id === this.$currentLocale().id) {
121-
styleClass += LOCALE_STATUS.CURRENT;
122-
} else if (translated) {
123-
styleClass += LOCALE_STATUS.TRANSLATED;
114+
return 'primary';
124115
} else {
125-
styleClass += LOCALE_STATUS.UNTRANSLATED;
126-
}
127-
128-
if (id === this.$defaultLocale().id) {
129-
styleClass += LOCALE_STATUS.DEFAULT;
116+
return 'secondary';
130117
}
118+
}
131119

132-
return styleClass;
120+
/**
121+
* Determines if a locale button should be outlined (for untranslated locales).
122+
*
123+
* @param {DotLanguage} locale - The locale object containing its translation status.
124+
* @returns {boolean} True if the locale is not translated and not current.
125+
*/
126+
isOutlined({ id, translated }: DotLanguage): boolean {
127+
return id !== this.$currentLocale().id && !translated;
133128
}
134129

135130
toggleShowAll(): void {

‎core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html‎

Lines changed: 32 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,57 +12,50 @@
1212
[value]="data"
1313
[columns]="store.columns()"
1414
data-testid="relationship-field-table"
15-
styleClass="dotTable p-datatable-relationship"
16-
[paginator]="data.length > pagination.rowsPerPage"
15+
class="dot-relationship-field-table"
16+
[paginator]="false"
1717
[first]="pagination.offset"
1818
[rows]="pagination.rowsPerPage"
1919
[scrollable]="true"
2020
[reorderableColumns]="false"
2121
(onRowReorder)="onRowReorder($event)">
22-
<ng-template pTemplate="header" styleClass="relative" let-columns>
22+
<ng-template pTemplate="header" let-columns>
2323
<p-menu #menu [model]="$menuItems()" [popup]="true" appendTo="body" />
2424

25-
<tr class="relationship-field__table_header">
26-
<!-- Drag handle column - fixed width -->
27-
<th scope="col" class="drag-handle-column"></th>
25+
<tr class="font-bold bg-[var(--gray-100)]">
26+
<th scope="col" class="w-12 min-w-12"></th>
2827

2928
@for (column of columns; track $index) {
3029
@switch (column.type) {
3130
@case ('title') {
32-
<th scope="col" [class.title-column]="!isEmpty">
31+
<th scope="col" [class.w-48]="!isEmpty" [class.min-w-48]="!isEmpty">
3332
{{ 'dot.file.relationship.field.table.title' | dm }}
3433
</th>
3534
}
3635
@case ('language') {
37-
<th scope="col" [class.dynamic-column]="!isEmpty">
36+
<th scope="col" [class.min-w-32]="!isEmpty">
3837
{{ 'dot.file.relationship.field.table.language' | dm }}
3938
</th>
4039
}
4140
@case ('status') {
42-
<th scope="col" [class.dynamic-column]="!isEmpty">
41+
<th scope="col" [class.min-w-32]="!isEmpty">
4342
{{ 'dot.file.relationship.field.table.status' | dm }}
4443
</th>
4544
}
4645
@case ('image') {
47-
<th scope="col" [class.image-column]="!isEmpty">
48-
<p class="truncate-text capitalize">{{ column.header }}</p>
46+
<th scope="col" [class.w-24]="!isEmpty" [class.min-w-24]="!isEmpty">
47+
<p class="truncate capitalize">{{ column.header }}</p>
4948
</th>
5049
}
5150
@default {
52-
<th scope="col" [class.dynamic-column]="!isEmpty">
51+
<th scope="col" [class.min-w-32]="!isEmpty">
5352
<span class="capitalize">{{ column.header }}</span>
5453
</th>
5554
}
5655
}
5756
}
5857

59-
<!-- Add button column - fixed width -->
60-
<th
61-
scope="col"
62-
class="actions-column"
63-
alignFrozen="right"
64-
pFrozenColumn
65-
[frozen]="true">
58+
<th scope="col" class="w-16 min-w-16" alignFrozen="right" pFrozenColumn [frozen]="true">
6659
<p-button
6760
(onClick)="menu.toggle($event)"
6861
size="small"
@@ -76,9 +69,9 @@
7669
<ng-template pTemplate="emptymessage">
7770
<tr>
7871
<td [colSpan]="$totalColumns()">
79-
<div class="flex p-2 gap-2 justify-center">
72+
<div class="flex p-2 gap-2 justify-center items-center">
8073
<i class="pi pi-folder-open"></i>
81-
<p class="text-surface-500 dark:text-surface-300">
74+
<p class="text-[var(--gray-600)]">
8275
{{ 'dot.file.relationship.field.empty.message' | dm }}
8376
</p>
8477
</div>
@@ -91,39 +84,37 @@
9184
[pReorderableRow]="index"
9285
[class.opacity-50]="isDisabled"
9386
[class.cursor-not-allowed]="isDisabled">
94-
<!-- Drag handle column - fixed width -->
95-
96-
<td class="drag-handle-column">
87+
<td class="w-12 min-w-12">
9788
@if (!isDisabled) {
98-
<span class="pi pi-bars text-gray-500" pReorderableRowHandle></span>
89+
<span class="pi pi-bars text-[var(--gray-600)]" pReorderableRowHandle></span>
9990
} @else {
100-
<span class="pi pi-bars text-gray-500 cursor-not-allowed"></span>
91+
<span class="pi pi-bars text-[var(--gray-600)] cursor-not-allowed"></span>
10192
}
10293
</td>
10394

10495
@for (column of columns; track $index) {
10596
@switch (column.type) {
10697
@case ('title') {
107-
<td class="title-column" [class.cursor-not-allowed]="isDisabled">
108-
<p class="truncate-text">{{ item.title }}</p>
98+
<td class="w-48 min-w-48" [class.cursor-not-allowed]="isDisabled">
99+
<p class="truncate">{{ item.title }}</p>
109100
</td>
110101
}
111102
@case ('language') {
112-
<td class="dynamic-column" [class.cursor-not-allowed]="isDisabled">
103+
<td class="min-w-32" [class.cursor-not-allowed]="isDisabled">
113104
{{ item.language | language }}
114105
</td>
115106
}
116107
@case ('status') {
117-
<td class="dynamic-column" [class.cursor-not-allowed]="isDisabled">
108+
<td class="min-w-32" [class.cursor-not-allowed]="isDisabled">
118109
@let status = item | contentletStatus;
119110
<p-chip
120-
[styleClass]="'p-chip-sm ' + status.classes"
111+
[class]="'p-chip-sm ' + status.classes"
121112
[label]="status.label" />
122113
</td>
123114
}
124115
@case ('image') {
125-
<td class="image-column" [class.cursor-not-allowed]="isDisabled">
126-
<div class="container-thumbnail">
116+
<td class="w-24 min-w-24" [class.cursor-not-allowed]="isDisabled">
117+
<div class="flex items-center justify-center">
127118
<dot-contentlet-thumbnail
128119
[iconSize]="'30px'"
129120
[contentlet]="item"
@@ -133,16 +124,15 @@
133124
</td>
134125
}
135126
@default {
136-
<td class="dynamic-column">
137-
<p class="truncate-text">{{ item[column.nameField] }}</p>
127+
<td class="min-w-32">
128+
<p class="truncate">{{ item[column.nameField] }}</p>
138129
</td>
139130
}
140131
}
141132
}
142133

143-
<!-- Delete button column - fixed width -->
144134
<td
145-
class="actions-column"
135+
class="w-16 min-w-16"
146136
pFrozenColumn
147137
alignFrozen="right"
148138
[frozen]="true"
@@ -161,18 +151,18 @@
161151
<ng-template pTemplate="summary">
162152
@if (hintText || showPagination || hasError) {
163153
<div
164-
class="flex items-center"
165-
[class.justify-content-between]="hintText || hasError"
166-
[class.justify-content-center]="!hintText && !hasError">
154+
class="flex items-center pt-2"
155+
[class.justify-between]="hintText || hasError"
156+
[class.justify-center]="!hintText && !hasError">
167157
@if (hasError) {
168-
<div class="error-message">
158+
<div class="text-[var(--color-palette-red)]">
169159
@if (isRequired) {
170160
<small>{{ 'dot.edit.content.form.field.required' | dm }}</small>
171161
}
172162
</div>
173163
}
174164
@if (!hasError && hintText) {
175-
<div class="hint-message">
165+
<div class="text-[var(--gray-600)]">
176166
<small [attr.data-testId]="'hint-' + field.variable">
177167
{{ hintText }}
178168
</small>

‎core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.scss‎

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,2 @@
1-
@use "../../../../../../../dotcms-scss/shared/colors";
2-
@use "../../../../../../../dotcms-scss/shared/common";
3-
@use "../../../../../../../dotcms-scss/shared/fonts";
4-
@use "../../../../../../../dotcms-scss/shared/spacing";
5-
6-
@use "variables" as *;
7-
8-
::ng-deep {
9-
p-table {
10-
.dotTable.p-datatable.p-datatable-relationship {
11-
.p-datatable-header {
12-
background-color: colors.$color-palette-gray-100;
13-
}
14-
.p-datatable-footer {
15-
padding: spacing.$spacing-1 0 0 0;
16-
}
17-
.p-datatable-wrapper {
18-
border: 1px solid colors.$color-palette-gray-300;
19-
border-radius: common.$border-radius-md;
20-
}
21-
.p-paginator {
22-
display: none;
23-
}
24-
.p-datatable-footer {
25-
border: 0;
26-
padding-left: 0;
27-
padding-right: 0;
28-
font-weight: lighter;
29-
}
30-
}
31-
}
32-
}
33-
34-
.add-item-btn {
35-
position: absolute;
36-
top: 0.4rem;
37-
right: 0.4rem;
38-
}
39-
40-
.relationship-field__table_header {
41-
th {
42-
font-weight: fonts.$font-weight-bold;
43-
background-color: colors.$color-palette-gray-100;
44-
}
45-
}
46-
47-
.drag-handle-column {
48-
width: 3rem;
49-
min-width: 3rem;
50-
}
51-
52-
.title-column {
53-
width: 12rem;
54-
min-width: 12rem;
55-
}
56-
57-
.dynamic-column {
58-
min-width: 8rem;
59-
}
60-
61-
.image-column {
62-
width: 6rem;
63-
min-width: 6rem;
64-
}
65-
66-
.actions-column {
67-
width: 4rem;
68-
}
1+
// Layout and typography use Tailwind in the template.
2+
// No PrimeNG overrides (no ::ng-deep) to keep styling pure PrimeNG.

0 commit comments

Comments
 (0)