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:
parent
0235315765
commit
36eb32d787
1 changed files with 36 additions and 58 deletions
|
@ -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 /> -->
|
||||||
|
|
Loading…
Reference in a new issue