Skip to content

Commit 9f72a04

Browse files
benjaminkottbnf
benjaminkott
authored and
bnf
committed
[BUGFIX] Refine category menu behavior and improve settings ui
The category menu now dynamically adjusts to use available viewport space and becomes scrollable when necessary. This ensures smoother interaction with overflowing categories, independent of the document's flow. On smaller viewports, the category menu is hidden to preserve usability. To address the reduced navigation options, the search bar is now persistent and affixed to the top of the document for better accessibility and streamlined navigation. Users can now quickly locate desired settings. Category icons, when set, are also displayed in the main body, making section switches more visually noticeable while scrolling. The previous dots have been replaced with chevrons for a cleaner and more cohesive look. Resolves: #106385 Releases: main, 13.4 Change-Id: I906e9f1391cba08e50621895a193d6ae7f567070 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/88580 Tested-by: Andreas Kienast <akienast@scripting-base.de> Tested-by: Benjamin Franzke <ben@bnf.dev> Reviewed-by: Andreas Kienast <akienast@scripting-base.de> Tested-by: core-ci <typo3@b13.com> Reviewed-by: Benjamin Franzke <ben@bnf.dev>
1 parent 3a5eb7b commit 9f72a04

File tree

10 files changed

+269
-111
lines changed

10 files changed

+269
-111
lines changed

‎Build/Sources/Sass/component/_settings.scss‎

Lines changed: 99 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,61 +10,77 @@
1010
--settings-indicator-bg: transparent;
1111
--settings-item-color: var(--settings-color);
1212
--settings-item-bg: var(--settings-bg);
13+
--settings-search-height: 80px;
14+
--settings-nav-height-correction: 100px;
15+
--settings-nav-item-padding-x: var(--typo3-list-item-padding-x);
16+
--settings-nav-item-padding-y: var(--typo3-list-item-padding-y);
1317
}
1418

1519
.settings-container {
1620
container-type: inline-size;
17-
margin-top: 1.5rem;
1821
}
1922

2023
.settings {
21-
display: flex;
22-
align-items: flex-start;
23-
flex-wrap: wrap;
24+
display: grid;
25+
grid-template-columns: 1fr;
2426
color: var(--settings-color);
2527
box-shadow: var(--settings-box-shadow);
28+
border: var(--settings-border-width) solid var(--settings-border-color);
29+
background-color: var(--settings-bg);
30+
gap: var(--settings-border-width);
31+
padding: var(--settings-border-width);
32+
border-radius: var(--settings-border-radius);
33+
34+
&-search {
35+
position: sticky;
36+
top: calc(var(--module-body-padding-y) * -1);
37+
z-index: 2;
38+
height: var(--settings-search-height);
39+
display: flex;
40+
align-items: center;
41+
border-start-start-radius: calc(var(--settings-border-radius) - var(--settings-border-width));
42+
border-start-end-radius: calc(var(--settings-border-radius) - var(--settings-border-width));
43+
background-color: color-mix(in srgb, var(--settings-bg), currentColor 1%);
44+
padding-inline: calc(var(--settings-padding) - .3rem);
2645

27-
&-navigation,
28-
&-body {
29-
padding: var(--settings-padding);
46+
&:has(+ :not([hidden])) {
47+
border-bottom: var(--settings-border-width) solid var(--settings-border-color);
48+
}
3049
}
3150

32-
&-body {
33-
background: var(--settings-bg);
34-
border: var(--settings-border-width) solid var(--settings-border-color);
35-
border-radius: var(--settings-border-radius);
51+
&-navigation {
52+
display: none;
53+
position: relative;
3654
}
3755

38-
&-navigation {
39-
border-inline-start: var(--settings-border-width) solid var(--settings-border-color);
40-
border-inline-end: var(--settings-border-width) solid var(--settings-border-color);
41-
border-top: var(--settings-border-width) solid var(--settings-border-color);
42-
border-bottom: 0;
43-
flex: 1 1 auto;
56+
&-navigation-inner {
57+
padding: calc(var(--settings-padding) - .3rem);
58+
}
59+
60+
&-body-inner {
61+
padding: var(--settings-padding);
4462
}
4563
}
4664

4765
@container (min-width: 780px) {
4866
.settings {
49-
flex-wrap: nowrap;
50-
box-shadow: none;
51-
52-
&-body {
53-
flex: 1 1 auto;
54-
border-inline-start: var(--settings-border-width) solid var(--settings-border-color);
55-
border-start-start-radius: 0;
56-
box-shadow: var(--settings-box-shadow);
67+
grid-template-columns: 300px 1fr;
68+
69+
&-search {
70+
grid-column: span 2;
5771
}
5872

5973
&-navigation {
60-
box-shadow: var(--settings-box-shadow);
61-
flex: 0 0 300px;
62-
position: sticky;
63-
top: 0;
64-
border-inline-end: 0;
65-
border-inline-start: var(--settings-border-width) solid var(--settings-border-color);
66-
border-top: var(--settings-border-width) solid var(--settings-border-color);
67-
border-bottom: var(--settings-border-width) solid var(--settings-border-color);
74+
display: flex;
75+
flex-direction: column;
76+
77+
&-inner {
78+
position: sticky;
79+
top: calc(var(--settings-search-height) - var(--module-body-padding-y));
80+
overflow-y: auto;
81+
scrollbar-gutter: stable;
82+
flex-grow: 1;
83+
}
6884
}
6985
}
7086
}
@@ -75,27 +91,45 @@
7591
margin: 0;
7692
padding: 0;
7793

94+
li {
95+
margin-top: 1px;
96+
}
97+
7898
ul {
7999
padding-inline-start: 1rem;
80100
}
81101
}
102+
103+
> ul:first-child > li:first-child {
104+
margin-top: 0;
105+
}
106+
107+
[identifier="actions-chevron-left"],
108+
[identifier="actions-chevron-right"] {
109+
opacity: .5;
110+
}
82111
}
83112

84113
.settings-navigation-item {
85114
color: var(--typo3-component-color);
86115
position: relative;
87116
display: flex;
117+
width: 100%;
118+
background-color: transparent;
88119
border-radius: calc(var(--typo3-component-border-radius) - var(--typo3-component-border-width));
89120
gap: .5em;
90-
padding: var(--typo3-list-item-padding-y) var(--typo3-list-item-padding-x);
121+
padding: var(--settings-nav-item-padding-y) var(--settings-nav-item-padding-x);
91122
cursor: pointer;
92123
text-decoration: none;
124+
border: none;
125+
text-align: start;
93126

94127
&.active,
95128
&:hover,
96129
&:focus {
97130
z-index: 1;
98131
outline-offset: -1px;
132+
text-decoration: none;
99133
}
100134

101135
&:hover {
@@ -104,8 +138,11 @@
104138
outline: 1px solid var(--typo3-component-hover-border-color);
105139
}
106140

107-
&.active,
108-
&:focus {
141+
&:focus-visible {
142+
outline: 1px solid var(--typo3-component-focus-border-color);
143+
}
144+
145+
&.active {
109146
color: var(--typo3-component-focus-color);
110147
background-color: var(--typo3-component-focus-bg);
111148
outline: 1px solid var(--typo3-component-focus-border-color);
@@ -125,8 +162,23 @@
125162
}
126163

127164
.settings-category {
128-
max-width: 600px;
129165
text-wrap: balance;
166+
z-index: 10;
167+
168+
&-headline {
169+
display: flex;
170+
align-items: center;
171+
gap: .5em;
172+
173+
> typo3-backend-icon {
174+
color: var(--typo3-text-color-primary);
175+
}
176+
}
177+
178+
&-headline,
179+
&-description {
180+
max-width: 600px;
181+
}
130182

131183
&-list + &-list {
132184
margin-top: calc(var(--typo3-spacing) * 2);
@@ -135,9 +187,10 @@
135187

136188
.settings-item {
137189
position: relative;
190+
contain: inline-size;
138191
color: var(--settings-item-color);
139192
background: var(--settings-item-bg);
140-
border-radius: calc(var(--settings-border-radius) / 2);
193+
border-radius: var(--settings-border-radius);
141194
padding-block: var(--typo3-component-padding-y);
142195
padding-inline-start: calc(var(--typo3-component-padding-x) + 4px);
143196
padding-inline-end: calc(var(--typo3-component-padding-x) + 3rem);
@@ -166,21 +219,22 @@
166219
&-indicator {
167220
position: absolute;
168221
background: var(--settings-indicator-bg);
169-
inset-inline-start: 1px;
170-
inset-block-start: 1px;
171-
inset-block-end: 1px;
172-
width: 4px;
173-
border-radius: 0;
222+
inset-inline-start: var(--settings-border-width);
223+
inset-block-start: var(--settings-border-width);
224+
inset-block-end: var(--settings-border-width);
225+
border-start-start-radius: calc(var(--settings-border-radius) - var(--settings-border-width));
226+
border-end-start-radius: calc(var(--settings-border-radius) - var(--settings-border-width));
227+
width: .3rem;
174228
}
175229

176230
&[data-status="modified"],
177231
&[data-status="modified"] * {
178-
--settings-indicator-bg: #{$info};
232+
--settings-indicator-bg: var(--typo3-state-info-bg);
179233
}
180234

181235
&[data-status="error"],
182236
&[data-status="error"] * {
183-
--settings-indicator-bg: #{$danger};
237+
--settings-indicator-bg: var(--typo3-state-danger-bg);
184238
}
185239

186240
&-actions {

‎Build/Sources/TypeScript/backend/color-picker.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export class Typo3BackendColorPicker extends LitElement {
3131
height: 1.25rem;
3232
top: 50%;
3333
inset-inline-start: var(--typo3-input-sm-padding-x);
34-
z-index: 10;
34+
z-index: 1;
3535
transform: translate(0, -50%);
3636
background: var(--alwan-pattern);
3737
border-radius: 3px !important;

0 commit comments

Comments
 (0)