tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pin and close buttons

Browse Source
This commit is contained in:
Tamius Han 2024-06-05 23:52:50 +02:00
parent e0bb25466d
commit 81f3e62446
1 changed files with 91 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/csui/src/PlayerUIWindow.vue
View File

@ -3,45 +3,62 @@
class="popup-panel flex flex-column uw-clickable h-full" class="popup-panel flex flex-column uw-clickable h-full"
> >
<div class="popup-window-header"> <div class="popup-window-header">
<div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div> <div class="header-title">
<div class="site-support-info"> <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
<div class="site-support-site">{{site}}</div> <div class="site-support-info">
<template v-if="inPlayer"> <div class="site-support-site">{{site}}</div>
<div v-if="siteSupportLevel === 'official'" class="site-support official"> <template v-if="inPlayer">
<mdicon name="check-decagram" /> <div v-if="siteSupportLevel === 'official'" class="site-support official">
<div>Verified</div> <mdicon name="check-decagram" />
<div class="tooltip">The extension is being tested and should work on this site.</div> <div>Verified</div>
</div> <div class="tooltip">The extension is being tested and should work on this site.</div>
<div v-if="siteSupportLevel === 'community'" class="site-support community">
<mdicon name="handshake" />
<div>Community</div>
<div class="tooltip">
People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
is geoblocked.
</div> </div>
</div> <div v-if="siteSupportLevel === 'community'" class="site-support community">
<div v-if="siteSupportLevel === 'no-support'" class="site-support no-support"> <mdicon name="handshake" />
<mdicon name="help-circle-outline" /> <div>Community</div>
<div>Unknown</div> <div class="tooltip">
<div class="tooltip"> People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
Not officially supported. Extension will try to fix things, but no promises.<br/><br/> Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
Tamius (the dev) does not test the extension on this site for various reasons is geoblocked.
(unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use). </div>
</div> </div>
</div> <div v-if="siteSupportLevel === 'no-support'" class="site-support no-support">
<div v-if="siteSupportLevel === 'user-added'" class="site-support user-added"> <mdicon name="help-circle-outline" />
<mdicon name="account" /> <div>Unknown</div>
<div>Custom</div> <div class="tooltip">
<div class="tooltip"> Not officially supported. Extension will try to fix things, but no promises.<br/><br/>
You have manually changed settings for this site. The extension is doing what you told it to do. Tamius (the dev) does not test the extension on this site for various reasons
(unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use).
</div>
</div> </div>
</div> <div v-if="siteSupportLevel === 'user-added'" class="site-support user-added">
<mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" /> <mdicon name="account" />
</template> <div>Custom</div>
<div class="tooltip">
You have manually changed settings for this site. The extension is doing what you told it to do.
</div>
</div>
<mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
</template>
</div>
</div>
<div class="header-buttons">
<div
class="header-button"
:class="{'button-active': preventClose}"
@click="setPreventClose(!preventClose)"
>
<mdicon v-if="!preventClose" name="pin-outline" :size="32" />
<mdicon v-else name="pin" :size="32" />
</div>
<dv
class="header-button close-button"
@click="$emit('close')"
>
<mdicon name="close" :size="36"></mdicon>
</dv>
<!-- <a >{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a> -->
</div> </div>
<div><a @click="setPreventClose(!preventClose)">{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
</div> </div>
<div class="tab-main flex flex-row"> <div class="tab-main flex flex-row">
@ -353,6 +370,45 @@ export default {
.popup-window-header { .popup-window-header {
padding: 1rem; padding: 1rem;
background-color: rgba(5,5,5, 0.75); background-color: rgba(5,5,5, 0.75);
display: flex;
flex-direction: row;
.header-title {
flex: 1 1;
}
.header-buttons {
flex: 0 0;
display: flex;
flex-direction: row;
.header-button {
cursor: pointer;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
&.button-active {
background-color: #fa6;
color: #000;
&:hover {
color: #ccc;
}
}
&.close-button {
color: #f00;
}
&:hover {
color: #fa6;
}
}
}
} }
.tab-row { .tab-row {
background-color: rgba(11,11,11, 0.75); background-color: rgba(11,11,11, 0.75);