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

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

@ -3,6 +3,7 @@
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="header-title">
<div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div> <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
<div class="site-support-info"> <div class="site-support-info">
<div class="site-support-site">{{site}}</div> <div class="site-support-site">{{site}}</div>
@ -40,8 +41,24 @@
<mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" /> <mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
</template> </template>
</div> </div>
</div>
<div><a @click="setPreventClose(!preventClose)">{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a></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>
<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);