imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New theme ui in user settings (#12576)

Browse source 
* Add hook to get the theme

* Adapt subsection settings to new ui

* WIP new theme subsection

* Add theme selection

* Fix test types

* Disabled theme selector when system theme is used

* Update compound to `4.4.1`

* Add custom theme support

* Remove old ThemChoicePanel

* Fix QuickThemeSwitcher-test.tsx

* Fix AppearanceUserSettingsTab-test.tsx

* Update i18n

* Fix ThemeChoicePanel-test.tsx

* Update `@vector-im/compound-web`

* Small tweaks

* Fix CSS comments and use compound variable

* Remove custom theme title

* i18n: update

* test: add tests to theme selection

* test: update AppearanceUserSettingsTab-test snapshot

* test: rework custom theme

* playwright: fix audio-player.spec.ts

* playwright: appearance tab

* test: update snapshot

* playright: add custom theme

* i18n: use correct char for ellipsis

* a11y: add missing aria-label to delete button

* dialog: update close button tooltip

* theme: remove local state and handle custom delete

* theme: don't add twice the same custom theme

* test: update snapshot

* playwright: update snapshot

* custom theme: add background to custom theme list

* update compound web

* Use new destructive property on `IconButton` of theme panel

* test: update snapshots

* rename new ui into legacy

* remove wrong constructor doc

* fix theme selector padding

* theme selector: fix key

* test: fix e2e
This commit is contained in:
Florian Duros 2024-06-26 17:47:01 +02:00 • committed by GitHub
parent 8ede89101a
commit 33a017b528
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 1749 additions and 477 deletions
Download patch file Download diff file Expand all files Collapse all files

14
res/css/_common.pcss
View file

@ -604,7 +604,7 @@ legend {
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
),
):not(.mx_ThemeChoicePanel_CustomTheme button),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@ -624,14 +624,14 @@ legend {
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):last-child {
):not(.mx_ThemeChoicePanel_CustomTheme button):last-child {
margin-right: 0px;
}
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):focus,
):not(.mx_ThemeChoicePanel_CustomTheme button):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
@ -643,7 +643,7 @@ legend {
.mx_Dialog_buttons
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
),
):not(.mx_ThemeChoicePanel_CustomTheme button),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
@ -654,7 +654,9 @@ legend {
.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button),
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
.mx_ThemeChoicePanel_CustomTheme button
),
.mx_Dialog_buttons input[type="submit"].danger {
background-color: var(--cpd-color-bg-critical-primary);
border: solid 1px var(--cpd-color-bg-critical-primary);
@ -670,7 +672,7 @@ legend {
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):disabled,
):not(.mx_ThemeChoicePanel_CustomTheme button):disabled,
.mx_Dialog input[type="submit"]:disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {

10
res/css/components/views/settings/shared/_SettingsSubsection.pcss
View file

@ -17,6 +17,12 @@ limitations under the License.
.mx_SettingsSubsection {
width: 100%;
box-sizing: border-box;
&.mx_SettingsSubsection_newUi {
display: flex;
flex-direction: column;
gap: var(--cpd-space-8x);
}
}
.mx_SettingsSubsection_description {
@ -54,4 +60,8 @@ limitations under the License.
&.mx_SettingsSubsection_noHeading {
margin-top: 0;
}
&.mx_SettingsSubsection_content_newUi {
gap: var(--cpd-space-6x);
margin-top: 0;
}
}

96
res/css/views/settings/_ThemeChoicePanel.pcss
View file

@ -14,48 +14,72 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ThemeChoicePanel_themeSelectors {
color: $primary-content;
.mx_ThemeChoicePanel_ThemeSelectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* Override form default style */
flex-direction: row !important;
gap: var(--cpd-space-4x) !important;
> .mx_StyledRadioButton {
align-items: center;
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
.mx_ThemeChoicePanel_themeSelector {
border: 1px solid var(--cpd-color-border-interactive-secondary);
border-radius: var(--cpd-space-1-5x);
padding: var(--cpd-space-3x) var(--cpd-space-5x) var(--cpd-space-3x) var(--cpd-space-3x);
gap: var(--cpd-space-2x);
background-color: var(--cpd-color-bg-canvas-default);
background: $accent-200;
opacity: 0.4;
flex-shrink: 1;
flex-grow: 0;
margin-right: 15px;
margin-top: 10px;
font-weight: var(--cpd-font-weight-semibold);
> span {
justify-content: center;
}
}
> .mx_StyledRadioButton_enabled {
opacity: 1;
/* These colors need to be hardcoded because they don't change with the theme */
&.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
&.mx_ThemeChoicePanel_themeSelector_enabled {
border-color: var(--cpd-color-border-interactive-primary);
}
&.mx_ThemeSelector_dark {
/* 5% lightened version of 181b21 */
background-color: #25282e;
color: #f3f8fd;
&.mx_ThemeChoicePanel_themeSelector_disabled {
border-color: var(--cpd-color-border-disabled);
}
.mx_ThemeChoicePanel_themeSelector_Label {
color: var(--cpd-color-text-primary);
font: var(--cpd-font-body-md-semibold);
}
}
}
.mx_ThemeChoicePanel_CustomTheme {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
.mx_ThemeChoicePanel_CustomTheme_EditInPlace input:focus {
/*
* When the input is focused, the border is growing
* We need to move it a bit to avoid the left border to be under the left panel
*/
margin-left: var(--cpd-space-0-5x);
}
.mx_ThemeChoicePanel_CustomThemeList {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
/*
* Override the default padding/margin of the list
*/
padding: 0;
margin: 0;
.mx_ThemeChoicePanel_CustomThemeList_theme {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--cpd-color-gray-200);
padding: var(--cpd-space-2x) var(--cpd-space-2x) var(--cpd-space-2x) var(--cpd-space-4x);
.mx_ThemeChoicePanel_CustomThemeList_name {
font: var(--cpd-font-body-sm-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}