Add more styling, choose few quick actions
This commit is contained in:
parent
e2fa4f9cfc
commit
561a1aa5a5
@ -51,8 +51,9 @@
|
||||
</div>
|
||||
<mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
|
||||
</div>
|
||||
<div><a @click="uwWindowFadeOutDisabled = !uwWindowFadeOutDisabled">{{uwWindowFadeOutDisabled ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="tab-main flex flex-row">
|
||||
<div class="tab-row flex flex-column">
|
||||
<div
|
||||
v-for="tab of tabs"
|
||||
@ -64,7 +65,7 @@
|
||||
<div class="icon-container">
|
||||
<mdicon
|
||||
:name="tab.icon"
|
||||
:size="48"
|
||||
:size="32"
|
||||
/>
|
||||
</div>
|
||||
<div class="label">
|
||||
@ -75,19 +76,31 @@
|
||||
<div class="content flex flex-column">
|
||||
<!-- autodetection warning -->
|
||||
|
||||
<div class="warning-area">
|
||||
<div class="warning-box">
|
||||
<div class="icon-container">
|
||||
<mdicon name="alert" :size="32" />
|
||||
</div>
|
||||
<div>
|
||||
DRM warnings will appear in this box<br/>
|
||||
<a>Learn more ...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="ultrawidify?.videoData?.hasDrm" class="warning-area">
|
||||
<div class="warning-box">
|
||||
<div>
|
||||
<mdicon name="alert" :size="42" />
|
||||
</div>
|
||||
<div>
|
||||
This site uses <a href="https://en.wikipedia.org/wiki/Digital_rights_management" target="_blank">digital rights management</a> solutions that prevent this
|
||||
extension from automatically detecting aspect ratio. You will have to adjust aspect ratio manually.
|
||||
This site is blocking automatic aspect ratio detection. You will have to adjust aspect ratio manually.<br/>
|
||||
<a>Learn more ...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row panel-content">
|
||||
<!-- Panel section -->
|
||||
<template v-if="settingsInitialized">
|
||||
<VideoSettings
|
||||
@ -144,6 +157,7 @@ export default {
|
||||
maxHeight: "13.37rem",
|
||||
},
|
||||
|
||||
uwWindowFadeOutDisabled: false,
|
||||
uwWindowFadeOut: false,
|
||||
uwWindowCloseTimeout: undefined,
|
||||
uwWindowVisible: false,
|
||||
@ -335,6 +349,9 @@ export default {
|
||||
},
|
||||
|
||||
hideUwWindow() {
|
||||
if (this.uwWindowFadeOutDisabled) {
|
||||
return;
|
||||
}
|
||||
this.uwWindowCloseTimeout = setTimeout(() => this.uwWindowVisible = false, 1100);
|
||||
this.uwWindowFadeOut = true;
|
||||
},
|
||||
@ -371,6 +388,12 @@ export default {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.tab-main {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-support-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -451,6 +474,45 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
|
||||
.warning-area {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
background: rgb(255, 174, 107);
|
||||
color: #000;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.icon-container {
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0,0,0,0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.uw-hover {
|
||||
position: absolute;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-column tab-root">
|
||||
<!-- ADD ANY OPTION BARS HERE -->
|
||||
|
||||
<!-- The rest of the tab -->
|
||||
@ -88,9 +88,184 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="css-fixes">
|
||||
<div><b>Quick fixes:</b></div>
|
||||
<!-- todo: generate buttons with some of the common css lines I always end up adding -->
|
||||
<div>Width: 100%</div>
|
||||
<div>Height: 100%</div>
|
||||
<div
|
||||
class="ccs-line"
|
||||
:class="{'active': cssStack[index]?.includes('width: 100%')}"
|
||||
@click="toggleCssForElement(index, 'width: 100%;')"
|
||||
>
|
||||
Width: 100%
|
||||
</div>
|
||||
<div
|
||||
class="css-line"
|
||||
:class="{'active': cssStack[index]?.includes('height: 100%')}"
|
||||
@click="toggleCssForElement(index, 'height: 100%')"
|
||||
>
|
||||
Height: 100%
|
||||
</div>
|
||||
<div
|
||||
class="css-line"
|
||||
:class="{'active': cssStack[index]?.includes('display: flex')}"
|
||||
@click="toggleCssForElement(index, 'display: flex')"
|
||||
>
|
||||
Display: flex
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Flex direction:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('flex-direction: row')}"
|
||||
@click="toggleCssForElement(index, 'flex-direction', 'row')"
|
||||
>
|
||||
row
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('flex-direction: column')}"
|
||||
@click="toggleCssForElement(index, 'flex-direction', 'column')"
|
||||
>
|
||||
column
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Justify content:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-content: start')}"
|
||||
@click="toggleCssForElement(index, 'justify-content', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-content: center')}"
|
||||
@click="toggleCssForElement(index, 'justify-content', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-content: end')}"
|
||||
@click="toggleCssForElement(index, 'justify-content', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Align items:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-items: start')}"
|
||||
@click="toggleCssForElement(index, 'align-items', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-items: center')}"
|
||||
@click="toggleCssForElement(index, 'align-items', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-items: end')}"
|
||||
@click="toggleCssForElement(index, 'align-items', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="css-line">
|
||||
Justify self:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-self: start')}"
|
||||
@click="toggleCssForElement(index, 'justify-self', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-self: center')}"
|
||||
@click="toggleCssForElement(index, 'justify-self', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('justify-self: end')}"
|
||||
@click="toggleCssForElement(index, 'justify-self', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Align self:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-self: start')}"
|
||||
@click="toggleCssForElement(index, 'align-self', 'start')"
|
||||
>
|
||||
start
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-self: center')}"
|
||||
@click="toggleCssForElement(index, 'align-self', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('align-self: end')}"
|
||||
@click="toggleCssForElement(index, 'align-self', 'end')"
|
||||
>
|
||||
end
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Text-align:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('text-align: left')}"
|
||||
@click="toggleCssForElement(index, 'align-self', 'start')"
|
||||
>
|
||||
left
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('text-align: center')}"
|
||||
@click="toggleCssForElement(index, 'text-align', 'center')"
|
||||
>
|
||||
center
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('text-align: right')}"
|
||||
@click="toggleCssForElement(index, 'text-align', 'right')"
|
||||
>
|
||||
right
|
||||
</span>
|
||||
</div>
|
||||
<div class="css-line">
|
||||
Position:
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('position: relative')}"
|
||||
@click="toggleCssForElement(index, 'position', 'relative')"
|
||||
>
|
||||
relative
|
||||
</span> |
|
||||
<span
|
||||
class="css-line-suboption"
|
||||
:class="{'active': cssStack[index]?.includes('position: absolute')}"
|
||||
@click="toggleCssForElement(index, 'position', 'absolute')"
|
||||
>
|
||||
absolute
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -111,7 +286,8 @@ export default({
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementStack: []
|
||||
elementStack: [],
|
||||
cssStack: [],
|
||||
};
|
||||
},
|
||||
mixins: [],
|
||||
@ -153,6 +329,43 @@ export default({
|
||||
await this.settings.save();
|
||||
this.eventBus.sendToTunnel('get-player-tree');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Toggles active CSS for element of certain parent index.
|
||||
* cssValue is optional and can be included in cssRule argument
|
||||
*/
|
||||
toggleCssForElement(index, cssRule, cssValue) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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));
|
||||
|
||||
// exception: if cssValue is given separately, we aren't removing it
|
||||
// in that case, we're overwriting it
|
||||
if (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)
|
||||
}
|
||||
}
|
||||
|
||||
//TODO: update settings!
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -220,4 +433,8 @@ export default({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-root {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user