Skip to content

Commit 4b22692

Browse files
oidacraoidacra
authored
style(edit-content): improve actions layout and single tab mode (dotCMS#31841)
- Organize action buttons into left/right groups to prevent layout jumps - Fix single tab mode border and padding styles - Add consistent spacing and alignment for action items This pull request includes several changes to the `dot-edit-content-form` component in both its HTML and SCSS files. The changes focus on improving the layout and organization of the content actions and tab view. ### Improvements to HTML structure: * Added a `scrollable="false"` attribute to the `dot-edit-content-tabview` element to disable scrolling. * Reorganized the content actions by introducing `dot-edit-content-actions__left` and `dot-edit-content-actions__right` divs to better separate lock controls from other actions. * Closed an unclosed div and added a new div to properly structure the content actions. ### Enhancements to SCSS styling: * Updated `.dot-edit-content-actions` to align items center, set width to 100%, and define a minimum height. * Added styles for `.dot-edit-content-actions__left` and `.dot-edit-content-actions__right` to properly align and space elements within these sections. * Modified the `p-tabview-nav` and `p-tabview-nav-content` classes to ensure proper alignment and border styling within the tab view. [[1]](diffhunk://#diff-1a3e657016880498977ce74202425946ae817683630dd29a8b673b2dd4672e5aR93-R95) [[2]](diffhunk://#diff-1a3e657016880498977ce74202425946ae817683630dd29a8b673b2dd4672e5aR116) [[3]](diffhunk://#diff-1a3e657016880498977ce74202425946ae817683630dd29a8b673b2dd4672e5aL114-R152) ### Screenshots https://github.com/user-attachments/assets/a40c0d44-b4be-4e51-b2ce-fa49c3bbcb20
1 parent 4bd41c0 commit 4b22692

File tree

2 files changed

+105
-74
lines changed

2 files changed

+105
-74
lines changed

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

Lines changed: 74 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
[class.dot-edit-content-tabview--single-tab]="$hasSingleTab()"
3030
(onChange)="onActiveIndexChange($event)"
3131
[activeIndex]="activeIndex"
32+
scrollable="false"
3233
class="dot-edit-content-tabview">
3334
<!-- Add prepend and append areas to the tabs -->
3435
<ng-template
@@ -94,82 +95,87 @@
9495
<!-- Append template to add to the tabs -->
9596
<ng-template #appendContent>
9697
<div
97-
class="dot-edit-content-actions"
98+
class="dot-edit-content-actions flex align-items-center w-full"
9899
data-testId="edit-content-actions"
99100
[class.dot-edit-content-actions--sidebar-open]="showSidebar">
100-
<!-- Add Content Lock Toggle here -->
101-
<div
102-
class="dot-edit-content-actions__lock flex align-items-center gap-2"
103-
[class.locked]="isContentLocked">
101+
<!-- Left group for lock controls -->
102+
<div class="dot-edit-content-actions__left flex align-items-center">
104103
@if (canLock) {
105-
<p-inputSwitch
106-
[ngModel]="isContentLocked"
107-
[disabled]="!canLock"
108-
(onChange)="onContentLockChange($event)"
109-
inputId="lockSwitch"
110-
data-testId="content-lock-switch"></p-inputSwitch>
111-
<label for="lockSwitch" class="text-sm">{{ lockSwitchLabel | dm }}</label>
104+
<div
105+
class="dot-edit-content-actions__lock flex align-items-center gap-2"
106+
[class.locked]="isContentLocked">
107+
<p-inputSwitch
108+
[ngModel]="isContentLocked"
109+
[disabled]="!canLock"
110+
(onChange)="onContentLockChange($event)"
111+
inputId="lockSwitch"
112+
data-testId="content-lock-switch"></p-inputSwitch>
113+
<label for="lockSwitch" class="text-sm">{{ lockSwitchLabel | dm }}</label>
114+
</div>
112115
}
113116
</div>
114117

115-
@if ($showPreviewLink()) {
116-
<button
117-
pButton
118-
icon="pi pi-external-link"
119-
class="p-button-link p-button-md"
120-
data-testId="preview-button"
121-
(click)="showPreview()">
122-
{{ 'edit.content.preview-link' | dm }}
123-
</button>
124-
}
118+
<!-- Right group for all other actions -->
119+
<div class="dot-edit-content-actions__right flex align-items-center">
120+
@if ($showPreviewLink()) {
121+
<button
122+
pButton
123+
icon="pi pi-external-link"
124+
class="p-button-link p-button-md"
125+
data-testId="preview-button"
126+
(click)="showPreview()">
127+
{{ 'edit.content.preview-link' | dm }}
128+
</button>
129+
}
125130

126-
@if (showWorkflowActions) {
127-
<dot-workflow-actions
128-
data-testId="workflow-actions"
129-
(actionFired)="
130-
fireWorkflowAction({
131-
workflow: $event,
132-
inode: contentlet?.inode,
133-
contentType: contentType.variable,
134-
languageId: currentLocaleId,
135-
identifier: currentIdentifier
136-
})
137-
"
138-
[actions]="actions"
139-
[groupActions]="true" />
140-
}
131+
@if (showWorkflowActions) {
132+
<dot-workflow-actions
133+
data-testId="workflow-actions"
134+
(actionFired)="
135+
fireWorkflowAction({
136+
workflow: $event,
137+
inode: contentlet?.inode,
138+
contentType: contentType.variable,
139+
languageId: currentLocaleId,
140+
identifier: currentIdentifier
141+
})
142+
"
143+
[actions]="actions"
144+
[groupActions]="true" />
145+
}
141146

142-
<div
143-
class="dot-edit-content-actions__sidebar-toggle"
144-
data-testId="sidebar-toggle"
145-
[class.dot-edit-content-actions__sidebar-toggle--hidden]="showSidebar">
146-
<button
147-
class="dot-edit-content-actions__sidebar-btn p-button p-button-sm p-button-text p-button-rounded p-button-icon-only"
148-
(click)="$store.toggleSidebar()"
149-
data-testId="sidebar-toggle-button">
150-
<svg
151-
width="20"
152-
height="20"
153-
viewBox="0 0 20 20"
154-
fill="none"
155-
xmlns="http://www.w3.org/2000/svg">
156-
<rect
157-
x="2.70588"
158-
y="3.17659"
159-
width="14.5882"
160-
height="13.6471"
161-
rx="1.17647"
162-
stroke="#426BF0"
163-
stroke-width="1.41176" />
164-
<line
165-
x1="12.3528"
166-
y1="16.1223"
167-
x2="12.3528"
168-
y2="3.87797"
169-
stroke="#426BF0"
170-
stroke-width="1.88235" />
171-
</svg>
172-
</button>
147+
<div
148+
class="dot-edit-content-actions__sidebar-toggle flex align-items-center"
149+
data-testId="sidebar-toggle"
150+
[class.dot-edit-content-actions__sidebar-toggle--hidden]="showSidebar">
151+
<button
152+
class="dot-edit-content-actions__sidebar-btn p-button p-button-sm p-button-text p-button-rounded p-button-icon-only"
153+
(click)="$store.toggleSidebar()"
154+
data-testId="sidebar-toggle-button">
155+
<svg
156+
width="20"
157+
height="20"
158+
viewBox="0 0 20 20"
159+
fill="none"
160+
xmlns="http://www.w3.org/2000/svg">
161+
<rect
162+
x="2.70588"
163+
y="3.17659"
164+
width="14.5882"
165+
height="13.6471"
166+
rx="1.17647"
167+
stroke="#426BF0"
168+
stroke-width="1.41176" />
169+
<line
170+
x1="12.3528"
171+
y1="16.1223"
172+
x2="12.3528"
173+
y2="3.87797"
174+
stroke="#426BF0"
175+
stroke-width="1.88235" />
176+
</svg>
177+
</button>
178+
</div>
173179
</div>
174180
</div>
175181
</ng-template>

‎core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.scss‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,16 @@ $tab-min-height: 52px;
3636

3737
// Edit Content Actions
3838
.dot-edit-content-actions {
39-
display: flex;
40-
flex-wrap: wrap;
41-
align-items: center;
39+
min-height: $tab-min-height;
40+
}
41+
42+
.dot-edit-content-actions__left {
43+
gap: $spacing-4;
44+
}
45+
46+
.dot-edit-content-actions__right {
4247
gap: $spacing-4;
48+
margin-left: auto;
4349
}
4450

4551
.dot-edit-content-actions__sidebar-toggle {
@@ -50,8 +56,6 @@ $tab-min-height: 52px;
5056
transform: translateX(0);
5157
overflow: hidden;
5258
min-height: $tab-min-height;
53-
display: flex;
54-
align-items: center;
5559
}
5660

5761
.dot-edit-content-actions__sidebar-toggle--hidden {
@@ -76,6 +80,9 @@ $tab-min-height: 52px;
7680

7781
// PrimeNG Tabview Overrides
7882
::ng-deep {
83+
.p-tabview-nav {
84+
flex: none;
85+
}
7986
.tabview-append-content {
8087
min-height: $tab-min-height;
8188
display: flex;
@@ -96,6 +103,7 @@ $tab-min-height: 52px;
96103
.p-tabview-nav-content .p-tabview-nav {
97104
border: none;
98105
border-left: solid 1px $color-palette-gray-300;
106+
border-right: solid 1px $color-palette-gray-300;
99107
padding-left: $spacing-3;
100108
min-height: $tab-min-height;
101109
min-width: auto;
@@ -111,9 +119,26 @@ $tab-min-height: 52px;
111119
}
112120

113121
&.dot-edit-content-tabview--single-tab {
114-
.p-tabview-nav li:first-child {
122+
ul.p-tabview-nav {
115123
display: none;
116124
}
125+
126+
.tabview-append-content {
127+
border-left: solid 1px $color-palette-gray-300;
128+
padding-left: $spacing-3;
129+
}
117130
}
118131
}
132+
133+
.p-tabview-nav-content {
134+
display: flex;
135+
align-items: center;
136+
width: 100%;
137+
}
138+
139+
.tabview-append-content {
140+
flex: 1;
141+
display: flex;
142+
align-items: center;
143+
}
119144
}

0 commit comments

Comments
 (0)