From 78f350b72b55b514558c2842f50f1b9d68bfa750 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 16 Jun 2022 00:07:03 +0200 Subject: [PATCH] UI design for player selection is mostly done --- .../PlayerUiPanels/PlayerDetectionPanel.vue | 726 ++++++++++-------- src/popup/App.vue | 2 +- 2 files changed, 414 insertions(+), 314 deletions(-) diff --git a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue index ea1f18b..371b8bb 100644 --- a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue +++ b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue @@ -20,258 +20,316 @@ should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.

-
- Symbols:
- Element of invalid dimensions
- Ultrawidify's player detection thinks this should be the player
- Site settings say this should be the player (based on counting parents)
- Site settings say this should be the player (based on query selectors)
- Element that is actually the player -
+

+ + + + +

-
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
- -
-
-
- {{element.tagName}} {{element.id ? `#`:''}}{{element.id}} @ {{element.width}}x{{element.height}} - -
-
-
- {{cls}} -
-
-
-
-
Quick fixes:
- -
- Width: 100% -
-
- Height: 100% -
-
- Display: flex -
-
- Flex direction: - - row - | - - column - -
-
- Justify content: - - start - | - - center - | - - end - -
-
- Align items: - - start - | - - center - | - - end - -
- -
- Justify self: - - start - | - - center - | - - end - -
-
- Align self: - - start - | - - center - | - - end - -
-
- Text-align: - - left - | - - center - | - - right - -
-
- Position: - - relative - | - - absolute - -
+
+
+
+ +
+ Use CSS selector for player
+ If defining multiple selectors, separate them with commas.
+
Selector
+
-
+
+ Custom CSS for site +
+ +
+
+ + + + + + + + + + + + + + + +
+
+ Status + +
+ Symbols:
+ Element of invalid dimensions
+ Ultrawidify's player detection thinks this should be the player
+ Site settings say this should be the player (based on counting parents)
+ Site settings say this should be the player (based on query selectors)
+ Element that is actually the player +
+
+ 		ElementQuick fixes
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ 		+
+
+ {{element.tagName}} {{element.id ? `#`:''}}{{element.id}} @ {{element.width}}x{{element.height}} + +
+
+
+ {{cls}} +
+
+
+ 		+
+
Quick fixes:
+
+ Width: 100% +
+
+ Height: 100% +
+
+ Display: flex +
+
+ Flex direction: + + row + | + + column + +
+
+ Justify content: + + start + | + + center + | + + end + +
+
+ Align items: + + start + | + + center + | + + end + +
+ +
+ Justify self: + + start + | + + center + | + + end + +
+
+ Align self: + + start + | + + center + | + + end + +
+
+ Text-align: + + left + | + + center + | + + right + +
+
+ Position: + + relative + | + + absolute + +
+
+
+
+
+
+ + +
@@ -288,6 +346,8 @@ export default({ return { elementStack: [], cssStack: [], + showLegend: false, + showAdvancedOptions: false, }; }, mixins: [], @@ -335,102 +395,142 @@ export default({ * cssValue is optional and can be included in cssRule argument */ toggleCssForElement(index, cssRule, cssValue) { + // we will handle elements that put cssValue as a separate argument elsewhere if (cssValue) { - // this is "toggle off" case for calls that put cssRule and cssValue as separate arguments - if (this.cssStack[index]?.includes(cssRule) && this.cssStack[index]?.includes(cssValue)) { - this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule)); - - //TODO: update settings! - return; - } + return this.toggleCssForElement_3arg(index,cssRule, cssValue); } // this rule applies to current element — remove it! if (this.cssStack[index]?.includes(cssRule)) { this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule)); + } else { + if (!this.cssStack[index]) { + this.cssStack[index] = []; + } + this.cssStack[index].push(cssRule) + } - // exception: if cssValue is given separately, we aren't removing it - // in that case, we're overwriting it - if (cssValue) { + //TODO: update settings! + }, + toggleCssForElement_3arg(index, cssRule, cssValue) { + const matching = this.cssStack[index]?.find(x => x.includes(cssRule)) + if (matching) { + this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule)); + if (!matching.includes(cssValue)) { this.cssStack[index].push(`${cssRule}: ${cssValue};`); } } else { if (!this.cssStack[index]) { this.cssStack[index] = []; } - if (cssValue) { - this.cssStack[index].push(`${cssRule}: ${cssValue};`); - } else { - this.cssStack[index].push(cssRule) - } + this.cssStack[index].push(`${cssRule}: ${cssValue};`); } //TODO: update settings! } + } })