From 302353f4484d5838c58a216bed35f01a8922e694 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 13 Apr 2022 23:03:55 +0200 Subject: [PATCH] Style dropdowns --- src/csui/src/PlayerUiPanels/VideoSettings.vue | 293 +++++++++++++----- src/csui/src/res-common/common.scss | 14 + 2 files changed, 225 insertions(+), 82 deletions(-) diff --git a/src/csui/src/PlayerUiPanels/VideoSettings.vue b/src/csui/src/PlayerUiPanels/VideoSettings.vue index 2139b23..19d7a47 100644 --- a/src/csui/src/PlayerUiPanels/VideoSettings.vue +++ b/src/csui/src/PlayerUiPanels/VideoSettings.vue @@ -147,43 +147,44 @@ -
-
Default for this site
-
- - {{command.label}} - - + + +
- -
-
Extension default
-
- - {{command.label}} - - + + +
-
@@ -191,12 +192,14 @@

Stretch video:

- @@ -205,44 +208,154 @@ v-if="editMode" class="button b3" label="Add new" - @click="execAction()" + @click="editAction( + {action: 'set-stretch', label: 'Stretch to ...', arguments: {type: StretchType.FixedSource}}, + null, + 'stretch' + )" >
-
-
Default for this site
-
- + Delete +
+
+
Cancel
+
+ +   + + +
+
+
+
+
+
Default for this site:
+
+
+ +
+
+
-
-
Extension default
-
- - {{command.label}} - - + + +
@@ -518,23 +631,6 @@ export default { // this.settings.saveWithoutReload(); }, - /** - * Sets default stretching mode, for either site or global - */ - setDefaultStretchingMode($event, globalOrSite) { - const commandArguments = JSON.parse($event.target.value); - - if (globalOrSite === 'site') { - if (!this.settings.active.sites[window.location.hostname]) { - this.setting.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration(); - } - this.setting.active.sites[window.location.hostname].defaultStretch = commandArguments; - } else { - this.settings.active.stretch.default = commandArguments; - } - this.settings.saveWithoutReload(); - }, - /** * Determines whether a given crop command is the currently active one */ @@ -561,8 +657,41 @@ export default { // only legacy options (fitw, fith) left to handle: return cropCommand.arguments.type === this.resizerConfig.crop.type; }, + //#endregion cropping + //#region stretch + /** + * Sets default stretching mode, for either site or global + */ + setDefaultStretchingMode($event, globalOrSite) { + const commandArguments = JSON.parse($event.target.value); + if (globalOrSite === 'site') { + if (!this.settings.active.sites[window.location.hostname]) { + this.setting.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration(); + } + this.setting.active.sites[window.location.hostname].defaultStretch = commandArguments; + } else { + this.settings.active.stretch.default = commandArguments; + } + this.settings.saveWithoutReload(); + }, + + /** + * Determines whether a given stretch command is the currently active one + */ + isActiveStretch(stretchCommand) { + if (! this.resizerConfig.stretch) { + return false; + } + + // const defaultCrop = this.settings.getDefaultStretch(this.site); + + if ([StretchType.NoStretch, StretchType.Basic, StretchType.Hybrid, StretchType.Conditional, StretchType.Default].includes(stretchCommand.arguments.type)) { + return this.resizerConfig.stretch.type === stretchCommand.arguments.type; + } + return this.resizerConfig.crop.type === stretchCommand.arguments.type && this.resizerConfig.crop.ratio === stretchCommand.arguments.ratio; + }, //#endregion cropping //#region edit mode diff --git a/src/csui/src/res-common/common.scss b/src/csui/src/res-common/common.scss index d1abdc5..1f54e41 100644 --- a/src/csui/src/res-common/common.scss +++ b/src/csui/src/res-common/common.scss @@ -99,4 +99,18 @@ h1, h2, h3 { opacity: 0.7; margin-top: 0.25rem; } + .select { + + select { + background: rgba($blackBg, $hoverTransparentOpacity); + color: #fff; + border: 0px solid transparent; + + padding: 0.5rem 1rem 0.25rem; + outline: none; + + font: inherit; + font-size: inherit; + } + } }