etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

stolen libretube rounded interaction buttons instead hehe

This commit is contained in:
Nikita Krupin 2022-07-06 18:47:15 -07:00
parent 0235315765
commit 36eb32d787
1 changed files with 36 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
NUXT/pages/watch.vue
View File

@ -22,7 +22,7 @@
<v-card v-if="loaded" class="background rounded-0" flat>
<div
v-ripple
class="d-flex justify-space-between align-start px-4 pt-4"
class="d-flex justify-space-between align-start pa-4"
@click="showMore = !showMore"
>
<div class="d-flex flex-column">
@ -56,69 +56,47 @@
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
<v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
</div>
<div class="d-flex mt-3">
<v-btn
v-for="(item, index) in interactions.slice(0, 2)"
:key="index"
text
class="mr-0 px-3 my-0"
elevation="0"
style="height: 2.5rem !important; text-transform: none !important"
:class="
<div
class="d-flex px-4"
:class="
$store.state.tweaks.roundWatch && $store.state.tweaks.roundTweak > 0
? $vuetify.theme.dark
? 'background lighten-1'
: 'background darken-1'
: ''
"
:style="{
borderRadius: $store.state.tweaks.roundWatch
? `${$store.state.tweaks.roundTweak / 2}rem`
: '0',
margin:
$store.state.tweaks.roundWatch &&
$store.state.tweaks.roundTweak > 0
? $vuetify.theme.dark
? 'background lighten-1'
: 'background darken-1'
: ''
"
:style="{
borderRadius: $store.state.tweaks.roundWatch
? `${$store.state.tweaks.roundTweak / 2}rem`
? '1rem'
: '0',
margin:
$store.state.tweaks.roundWatch &&
$store.state.tweaks.roundTweak > 0
? '1rem'
: '0',
}"
}"
>
<v-btn
v-for="(item, index) in interactions"
:key="index"
text
fab
class="vertical-button mx-1"
elevation="0"
style="
width: 4.2rem !important;
height: 4.2rem !important;
text-transform: none !important;
"
:disabled="item.disabled"
@click="callMethodByName(item.actionName)"
>
<v-icon class="mr-2" size="0.75rem" v-text="item.icon" />
<div style="font-size: 0.7rem" v-text="item.value || item.name" />
</v-btn>
<v-spacer></v-spacer>
<v-btn
v-for="(item, index) in interactions.slice(2, 4)"
:key="index"
text
class="ml-0 px-3 my-0"
elevation="0"
style="height: 2.5rem !important; text-transform: none !important"
:class="
$store.state.tweaks.roundWatch &&
$store.state.tweaks.roundTweak > 0
? $vuetify.theme.dark
? 'background lighten-1'
: 'background darken-1'
: ''
"
:style="{
borderRadius: $store.state.tweaks.roundWatch
? `${$store.state.tweaks.roundTweak / 2}rem`
: '0',
margin:
$store.state.tweaks.roundWatch &&
$store.state.tweaks.roundTweak > 0
? '1rem'
: '0',
}"
:disabled="item.disabled"
@click="callMethodByName(item.actionName)"
>
<v-icon class="mr-2" size="0.75rem" v-text="item.icon" />
<div style="font-size: 0.7rem" v-text="item.value || item.name" />
<v-icon v-text="item.icon" />
<div
class="mt-1"
style="font-size: 0.6rem"
v-text="item.value || item.name"
/>
</v-btn>
<!-- End Scrolling Div For Interactions --->
<!-- <hr /> -->