0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2025-01-06 23:51:13 +00:00

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

View file

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