Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable the subtitle settings panel for the new layout #655

Merged
merged 26 commits into from
Dec 20, 2024
+705 −602
Merged

Enable the subtitle settings panel for the new layout #655

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
5ff17c4
refactor the modern settings panel to add support for subtitle settin…
stonko1994 Dec 6, 2024
ea9fc09
clear hide timeout on mouse move
stonko1994 Dec 6, 2024
0c0e9fd
add a min gap between elements in a settings panel item
stonko1994 Dec 6, 2024
545e680
remove dynamic pages from DOM after navigating back
stonko1994 Dec 6, 2024
64dad45
replace hardcoded back text with localization
stonko1994 Dec 9, 2024
6f21cbf
improve typing for optional settings
stonko1994 Dec 9, 2024
cf3ff8a
cleanup duplicate css for settings panel items
stonko1994 Dec 9, 2024
5530ae4
enable the subtitle settings for the new ui layout
stonko1994 Dec 9, 2024
3461a30
Merge branch 'feature/super-modern-ui-for-web' into feature/super-mod…
stonko1994 Dec 9, 2024
d1ca093
add empty line at EOF
stonko1994 Dec 9, 2024
ebd13e4
remove the ModernSettingsPanel and ModernSettingsPanelPage and merge …
stonko1994 Dec 9, 2024
f2b581b
rename modern settings component to dynamic
stonko1994 Dec 9, 2024
9fb9cc0
improve settingspanelitem initialization and configuration
stonko1994 Dec 9, 2024
0d9e490
improve subtitle example overlay access
stonko1994 Dec 10, 2024
9c6c20f
add documentation
stonko1994 Dec 10, 2024
9626fed
remove outdated todo
stonko1994 Dec 10, 2024
a0497f5
minor code style improvements
stonko1994 Dec 10, 2024
0dff63a
add support to include the SubtitleSettingsPanelPage in the old and n…
stonko1994 Dec 10, 2024
ad708ce
hide the eco mode container behind the ecoMode flag when creating the…
stonko1994 Dec 10, 2024
b2e0324
fix failing tests
stonko1994 Dec 10, 2024
38f83ec
add missing removing from dynamic settings panel pages
stonko1994 Dec 11, 2024
86ff8c6
add line-height to the settings panel item to ensure all have the sam…
stonko1994 Dec 11, 2024
93047fe
Merge branch 'feature/modern-ui-base' into feature/super-modern-subti…
stonko1994 Dec 19, 2024
59a7bf5
rename setting to settingComponent
stonko1994 Dec 20, 2024
ae1838a
Merge branch 'feature/super-modern-subtitle-settings-panel' of github…
stonko1994 Dec 20, 2024
901be17
fix test build after renaming
stonko1994 Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/scss/skin-super-modern/_skin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
@import 'components/label';
@import 'components/settingspanel';
@import 'components/settingspanelpage';
@import 'components/settingspanelitem';
@import 'components/settingspanelpageopenbutton';
@import 'components/settingspanelpagebackbutton';
@import 'components/settingstogglebutton';
Expand Down
81 changes: 81 additions & 0 deletions src/scss/skin-super-modern/components/_settingspanelitem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
@import '../variables';

%ui-settings-panel-item {
padding: .5em .7em;
white-space: nowrap;

cursor: pointer;
* {
cursor: pointer;
}

&:hover {
background-color: transparentize($color-item-hover, .15);
}

&.#{$prefix}-hidden {
display: none;
}

.#{$prefix}-container-wrapper {
align-items: center;
display: flex;
height: 100%;
width: 100%;
}

> .#{$prefix}-container-wrapper {
column-gap: 10px;
}

.#{$prefix}-ui-label {
display: inline-block;
font-size: .8em;
font-weight: 500;
margin: 0;
text-align: justify;
}

.#{$prefix}-ui-label-setting-selected-option {
align-self: center;
font-weight: normal;
margin-left: auto;
width: fit-content;

&::after {
background-image: url('../../assets/skin-super-modern/images/angle-right.svg');
background-repeat: no-repeat;
background-size: 1.5em auto;
content: ' ';
display: inline-block;
height: 1.5em;
vertical-align: -.4em;
width: 1.5em;
}
}

&.#{$prefix}-ui-settings-panel-item-select-option {
&.#{$prefix}-selected {
.#{$prefix}-ui-label {
&::before {
background-image: url('../../assets/skin-super-modern/images/check.svg');
background-repeat: no-repeat;
background-size: 1.5em auto;
content: ' ';
display: inline-block;
height: 1.5em;
vertical-align: -.4em;
width: 1.5em;
}
}
}
}

&.#{$prefix}-title-item {
border-bottom: 1px solid transparentize($color-item-hover, .15);
}
}

.#{$prefix}-ui-settings-panel-item {
@extend %ui-settings-panel-item;
}
86 changes: 0 additions & 86 deletions src/scss/skin-super-modern/components/_settingspanelpage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,92 +6,6 @@
&.#{$prefix}-active {
display: block;
}

// A "line" in the panel: a container holding a label + control
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styling for a settings-panel-item was extracted into a separate file.

.#{$prefix}-container-wrapper > * {
&.#{$prefix}-ui-label {
display: inline-block;
font-size: .8em;
font-weight: 500;
margin: 0;
text-align: justify;
width: 45%;
}

&.#{$prefix}-ui-label-setting-selected-option {
align-self: center;
font-weight: normal;
margin-left: auto;
width: fit-content;

&::after {
background-image: url('../../assets/skin-super-modern/images/angle-right.svg');
background-repeat: no-repeat;
background-size: 1.5em auto;
content: ' ';
display: inline-block;
height: 1.5em;
vertical-align: -.4em;
width: 1.5em;
}
}

&.#{$prefix}-option {
font-weight: normal;
}

&.#{$prefix}-heading {
&::before {
background-image: url('../../assets/skin-super-modern/images/angle-left.svg');
background-repeat: no-repeat;
background-size: 1.5em auto;
content: ' ';
display: inline-block;
height: 1.5em;
vertical-align: -.4em;
width: 1.5em;
}
}

&.#{$prefix}-selected {
&::before {
background-image: url('../../assets/skin-super-modern/images/check.svg');
background-repeat: no-repeat;
background-size: 1.5em auto;
content: ' ';
display: inline-block;
height: 1.5em;
vertical-align: -.4em;
width: 1.5em;
}
}

// Controls (e.g. selectbox)
&.#{$prefix}-ui-selectbox {
margin-left: 10%;
width: 45%;
}
}

.#{$prefix}-ui-settings-panel-item {
padding: .5em .7em;
white-space: nowrap;

&:hover {
background-color: transparentize($color-item-hover, .15);
}

&.#{$prefix}-hidden {
display: none;
}

.#{$prefix}-container-wrapper {
align-items: center;
display: flex;
height: 100%;
width: 100%;
}
}
}

.#{$prefix}-ui-settings-panel-page {
Expand Down
32 changes: 20 additions & 12 deletions src/scss/skin-super-modern/components/_settingspanelpagebackbutton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,31 @@
%ui-settingspanelpagebackbutton {
@extend %ui-button;

font-size: .8em;
position: relative;
width: 8em;
border-collapse: collapse;
padding: unset;
flex: 1;
text-align: left;

&:active {
transform: unset;
}

.#{$prefix}-label {
display: inline-block;
font-size: .8em;
font-weight: 500;
margin: 0;
text-align: justify;

&::before {
border-bottom: .2em solid $color-primary;
border-left: .2em solid $color-primary;
content: '';
height: .6em;
margin-left: -.8em;
position: absolute;
top: .6em;
transform: rotate(45deg);
width: .6em;
background-image: url('../../assets/skin-super-modern/images/angle-left.svg');
background-repeat: no-repeat;
background-size: 1.5em auto;
content: ' ';
display: inline-block;
height: 1.5em;
vertical-align: -.4em;
width: 1.5em;
}
}
}
Expand Down
4 changes: 1 addition & 3 deletions src/scss/skin-super-modern/components/_settingspanelpageopenbutton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,13 @@

background-image: url('../../assets/skin-super-modern/images/setting.svg');
max-height: .8em;
padding: .5em 0;
vertical-align: bottom;

&:hover {
@include svg-icon-shadow;
}

&.#{$prefix}-on {
background-image: url('../../assets/skin-super-modern/images/setting.svg');
transform: rotate(30deg);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/scss/skin-super-modern/components/_settingstogglebutton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
background-image: url('../../assets/skin-super-modern/images/setting.svg');

&.#{$prefix}-on {
background-image: url('../../assets/skin-super-modern/images/setting.svg');
transform: rotate(30deg);
}
}
2 changes: 1 addition & 1 deletion src/scss/skin-super-modern/components/subtitlesettings/_subtitlesettingsresetbutton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@extend %ui-button;

font-size: .8em;
width: 12em;
font-weight: 500;

.#{$prefix}-label {
display: inline-block;
Expand Down
3 changes: 2 additions & 1 deletion src/ts/components/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
}).html(i18n.performLocalization(this.config.text)));

// Listen for the click event on the button element and trigger the corresponding event on the button component
buttonElement.on('click', () => {
buttonElement.on('click', (e) => {
e.stopPropagation();
Comment on lines +74 to +75
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed to prevent the event from bubbling up to the parent element.

Example: In the new design, the whole SettingsPanelItem is clickable. The subtitle customization item also contains a button to a different page. Without this change, both would trigger when clicking the button.

this.onClickEvent();
});

Expand Down
2 changes: 1 addition & 1 deletion src/ts/components/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ export class Component<Config extends ComponentConfig> {
* @param base configuration inherited from a superclass
* @returns {Config}
*/
protected mergeConfig<Config>(config: Config, defaults: Config, base: Config): Config {
protected mergeConfig<Config>(config: Config, defaults: Partial<Config>, base: Config): Config {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not every component can fill all of its default config values. It does not need to fill out all as others are required anyway on initialization. To improve the type handling I decided to make this Partial here. The alternative (which was used before) was a cast to the Config type.

// Extend default config with supplied config
let merged = Object.assign({}, base, defaults, config);

Expand Down
Loading
Loading