mirror of https://github.com/VueTubeApp/VueTube
navbar icon sets closes #584
This commit is contained in:
Nikita Krupin
parent
3f7323266c
commit
3487c21e63
|
|
@ -19,8 +19,58 @@
|
|||
plain
|
||||
>
|
||||
<span v-if="$store.state.tweaks.navigationText" v-text="item.name" />
|
||||
<!-- v-if="$store.state.tweaks.navigationIcons === 0" -->
|
||||
<div
|
||||
v-if="$store.state.tweaks.navigationIcons !== 0"
|
||||
class="px-3"
|
||||
:style="{
|
||||
color:
|
||||
tabSelection == i
|
||||
? 'var(--v-primary-base)'
|
||||
: $vuetify.theme.dark
|
||||
? 'var(--v-background-lighten4)'
|
||||
: 'var(--v-background-darken4)',
|
||||
}"
|
||||
:class="
|
||||
tabSelection == i
|
||||
? $vuetify.theme.dark
|
||||
? 'tab primary darken-4'
|
||||
: 'tab primary lighten-4'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<svg
|
||||
v-if="$store.state.tweaks.navigationIcons === 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 52 52"
|
||||
height="1.5rem"
|
||||
width="1.5rem"
|
||||
>
|
||||
<use :href="`/${item.svg}.svg#main`" />
|
||||
</svg>
|
||||
<svg
|
||||
v-if="$store.state.tweaks.navigationIcons === 2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 22"
|
||||
height="1.5rem"
|
||||
width="1.5rem"
|
||||
>
|
||||
<use :href="`/${item.svg2}.svg#main`" />
|
||||
</svg>
|
||||
<svg
|
||||
v-if="$store.state.tweaks.navigationIcons === 3"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 34 34"
|
||||
height="1.5rem"
|
||||
width="1.5rem"
|
||||
>
|
||||
<use :href="`/${item.svg3}.svg#main`" />
|
||||
</svg>
|
||||
</div>
|
||||
<v-icon
|
||||
v-if="$store.state.tweaks.navigationIcons === 0"
|
||||
:color="
|
||||
tabSelection == i
|
||||
? 'primary'
|
||||
|
|
@ -38,12 +88,6 @@
|
|||
v-text="item.icon"
|
||||
/>
|
||||
<!-- + (tabSelection == i ? '' : '-outline') -->
|
||||
<!-- <v-img
|
||||
v-if="$store.state.tweaks.navigationIcons === 1"
|
||||
:src="`/${item.img}.svg`"
|
||||
:height="24"
|
||||
:width="24"
|
||||
/> -->
|
||||
</v-btn>
|
||||
<!-- <v-btn
|
||||
text
|
||||
|
|
@ -66,7 +110,9 @@ export default {
|
|||
{
|
||||
name: "",
|
||||
icon: "mdi-home",
|
||||
img: "home",
|
||||
svg: "home",
|
||||
svg2: "fhome",
|
||||
svg3: "chome",
|
||||
link: "/home",
|
||||
},
|
||||
// { name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
|
||||
|
|
@ -74,13 +120,17 @@ export default {
|
|||
{
|
||||
name: "",
|
||||
icon: "mdi-youtube-subscription",
|
||||
img: "subs",
|
||||
svg: "subs",
|
||||
svg2: "fsubs",
|
||||
svg3: "csubs",
|
||||
link: "/subscriptions",
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
icon: "mdi-view-list",
|
||||
img: "list",
|
||||
svg: "list",
|
||||
svg2: "flist",
|
||||
svg3: "clist",
|
||||
link: "/library",
|
||||
},
|
||||
// { name: "Settings", icon: "mdi-menu", link: "/settings" },
|
||||
|
|
@ -114,6 +164,6 @@ export default {
|
|||
}
|
||||
.tab {
|
||||
padding: 0.1em 0.5em 0.1em 0.5em;
|
||||
border-radius: 1em;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -131,7 +131,6 @@
|
|||
v-model="roundTweak"
|
||||
class="pr-8 pl-4 pt-3 pb-0 background"
|
||||
:max="4"
|
||||
:label="lang.radius"
|
||||
step=".25"
|
||||
thumb-size="64"
|
||||
:class="
|
||||
|
|
@ -142,6 +141,12 @@
|
|||
}"
|
||||
@input="$vuetube.haptics.hapticsImpactLight(0)"
|
||||
>
|
||||
<template #label>
|
||||
<div :class="roundTweak > 0 ? 'primary--text' : ''">
|
||||
{{ lang.radius }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #thumb-label="{ value }">
|
||||
<div
|
||||
class="pa-4 background"
|
||||
|
|
@ -305,7 +310,7 @@
|
|||
borderRadius: `${roundTweak / 12}rem`,
|
||||
}"
|
||||
@click="
|
||||
(navigationShift = !navigationShift),
|
||||
navigationIcons < 1 ? (navigationShift = !navigationShift) : '',
|
||||
$vuetube.haptics.hapticsImpactLight(1)
|
||||
"
|
||||
>
|
||||
|
|
@ -347,14 +352,99 @@
|
|||
inset
|
||||
/>
|
||||
</v-card>
|
||||
<div
|
||||
style="width: 100%; font-weight: bold"
|
||||
class="primary my-1 background--text text-center"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 12}rem`,
|
||||
}"
|
||||
>
|
||||
icon sets coming soon
|
||||
<div class="mb-1 d-flex flex-row">
|
||||
<v-card
|
||||
flat
|
||||
class="mr-1 pa-4 d-flex flex-row align-center background"
|
||||
:class="
|
||||
roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
style="width: 100%"
|
||||
:style="{
|
||||
color: navigationIcons === 0 ? 'var(--v-primary-base)' : '',
|
||||
borderRadius: `${roundTweak / 12}rem`,
|
||||
}"
|
||||
@click="(navigationIcons = 0), $vuetube.haptics.hapticsImpactLight(1)"
|
||||
>
|
||||
<div>MDI</div>
|
||||
<v-spacer></v-spacer>
|
||||
<v-icon
|
||||
:class="navigationIcons === 0 ? 'primary--text' : ''"
|
||||
class="ma-1"
|
||||
>
|
||||
mdi-home
|
||||
</v-icon>
|
||||
<v-icon
|
||||
:class="navigationIcons === 0 ? 'primary--text' : ''"
|
||||
class="ma-1"
|
||||
>
|
||||
mdi-youtube-subscription
|
||||
</v-icon>
|
||||
<v-icon
|
||||
:class="navigationIcons === 0 ? 'primary--text' : ''"
|
||||
class="ma-1"
|
||||
>
|
||||
mdi-view-list
|
||||
</v-icon>
|
||||
</v-card>
|
||||
<v-card
|
||||
flat
|
||||
class="pa-4 d-flex flex-row align-center background"
|
||||
:class="
|
||||
roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
style="width: 100%"
|
||||
:style="{
|
||||
color: navigationIcons === 1 ? 'var(--v-primary-base)' : '',
|
||||
borderRadius: `${roundTweak / 12}rem`,
|
||||
}"
|
||||
@click="
|
||||
(navigationIcons = 1),
|
||||
(navigationShift = false),
|
||||
$vuetube.haptics.hapticsImpactLight(1)
|
||||
"
|
||||
>
|
||||
<div>Material Symbols</div>
|
||||
<v-spacer></v-spacer>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 48 48"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/home.svg#main" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 48 48"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/subs.svg#main" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 48 48"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/list.svg#main" />
|
||||
</svg>
|
||||
</v-card>
|
||||
</div>
|
||||
<div class="d-flex flex-row">
|
||||
<v-card
|
||||
|
|
@ -363,22 +453,53 @@
|
|||
:class="
|
||||
roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-2'
|
||||
: 'darken-2'
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
style="width: 100%"
|
||||
:style="{
|
||||
color: navigationIcons === 0 ? 'var(--v-primary-base)' : '',
|
||||
color: navigationIcons === 2 ? 'var(--v-primary-base)' : '',
|
||||
borderRadius: `${roundTweak / 12}rem`,
|
||||
}"
|
||||
@click="
|
||||
(navigationIcons = 2),
|
||||
(navigationShift = false),
|
||||
$vuetube.haptics.hapticsImpactLight(1)
|
||||
"
|
||||
>
|
||||
<!-- @click="(navigationIcons = 0), $vuetube.haptics.hapticsImpactLight(1)" -->
|
||||
<div>MDI</div>
|
||||
<v-spacer />
|
||||
<v-icon class="ma-2">mdi-home</v-icon>
|
||||
<v-icon class="ma-2">mdi-youtube-subscription</v-icon>
|
||||
<v-icon class="ma-2">mdi-view-list</v-icon>
|
||||
<div>FluentUI Icons</div>
|
||||
<v-spacer></v-spacer>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/fhome.svg#main" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/fsubs.svg#main" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/flist.svg#main" />
|
||||
</svg>
|
||||
</v-card>
|
||||
<v-card
|
||||
flat
|
||||
|
|
@ -386,40 +507,53 @@
|
|||
:class="
|
||||
roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-2'
|
||||
: 'darken-2'
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
style="width: 100%"
|
||||
:style="{
|
||||
color: navigationIcons === 1 ? 'var(--v-primary-base)' : '',
|
||||
color: navigationIcons === 3 ? 'var(--v-primary-base)' : '',
|
||||
borderRadius: `${roundTweak / 12}rem`,
|
||||
}"
|
||||
@click="
|
||||
(navigationIcons = 3),
|
||||
(navigationShift = false),
|
||||
$vuetube.haptics.hapticsImpactLight(1)
|
||||
"
|
||||
>
|
||||
<!-- @click="(navigationIcons = 1), $vuetube.haptics.hapticsImpactLight(1)" -->
|
||||
<div>Material Symbols</div>
|
||||
<v-spacer />
|
||||
<v-img
|
||||
:class="$vuetify.theme.dark ? 'invert' : ''"
|
||||
class="ma-2"
|
||||
src="/home.svg"
|
||||
height="22"
|
||||
width="22"
|
||||
/>
|
||||
<v-img
|
||||
:class="$vuetify.theme.dark ? 'invert' : ''"
|
||||
class="ma-2"
|
||||
src="/subs.svg"
|
||||
height="22"
|
||||
width="22"
|
||||
/>
|
||||
<v-img
|
||||
:class="$vuetify.theme.dark ? 'invert' : ''"
|
||||
class="ma-2"
|
||||
src="/list.svg"
|
||||
height="22"
|
||||
width="22"
|
||||
/>
|
||||
<div>IBM Carbon Icons</div>
|
||||
<v-spacer></v-spacer>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/chome.svg#main" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/csubs.svg#main" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32"
|
||||
height="2rem"
|
||||
width="2rem"
|
||||
class="ma-1"
|
||||
>
|
||||
<use href="/clist.svg#main" />
|
||||
</svg>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-card>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><symbol id="main"><path fill="currentColor" d="M16.612 2.214a1.01 1.01 0 0 0-1.242 0L1 13.419l1.243 1.572L4 13.621V26a2.004 2.004 0 0 0 2 2h20a2.004 2.004 0 0 0 2-2V13.63L29.757 15L31 13.428ZM18 26h-4v-8h4Zm2 0v-8a2.002 2.002 0 0 0-2-2h-4a2.002 2.002 0 0 0-2 2v8H6V12.062l10-7.79l10 7.8V26Z"/></symbol><use href="#main"/></svg>
|
||||
|
After Width: | Height: | Size: 410 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><symbol id="main"><path d="M28 30H4a2.002 2.002 0 0 1-2-2v-8a2.002 2.002 0 0 1 2-2h24a2.002 2.002 0 0 1 2 2v8a2.002 2.002 0 0 1-2 2zM4 20h-.002L4 28h24v-8zm24-6H4a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h24a2.002 2.002 0 0 1 2 2v8a2.002 2.002 0 0 1-2 2zM4 4h-.002L4 12h24V4z"/></symbol><use href="#main"/></svg>
|
||||
|
After Width: | Height: | Size: 399 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><symbol id="main"><path d="M13 15v8l7-4l-7-4z"/><path d="M26 28H6a2.002 2.002 0 0 1-2-2V12a2.002 2.002 0 0 1 2-2h20a2.002 2.002 0 0 1 2 2v14a2.002 2.002 0 0 1-2 2zM6 12v14h20V12zm0-6h20v2H6zm2-4h16v2H8z"/></symbol><use href="#main"/></svg>
|
||||
|
After Width: | Height: | Size: 322 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><symbol id="main"><path d="M11.002 2.388a1.5 1.5 0 0 0-2.005 0l-5.5 4.942A1.5 1.5 0 0 0 3 8.445V15.5A1.5 1.5 0 0 0 4.5 17h2A1.5 1.5 0 0 0 8 15.5v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5V8.445a1.5 1.5 0 0 0-.497-1.115l-5.5-4.942Z"/></symbol><use href="#main"/></svg>
|
||||
|
After Width: | Height: | Size: 393 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><symbol id="main"><path d="M2.249 2C1.559 2 1 2.56 1 3.25v9.495c0 .69.56 1.25 1.249 1.25h.5c.69 0 1.249-.56 1.249-1.25V3.249c0-.69-.56-1.249-1.25-1.249H2.25Zm3.997 0c-.69 0-1.25.56-1.25 1.25v9.495c0 .69.56 1.25 1.25 1.25h.5a1.25 1.25 0 0 0 1.248-1.25V3.249A1.25 1.25 0 0 0 6.745 2h-.5Zm5.726 2.777a1.249 1.249 0 0 0-1.571-.713l-.582.204a1.25 1.25 0 0 0-.746 1.645l2.937 7.304c.249.62.94.933 1.571.713l.582-.204a1.25 1.25 0 0 0 .746-1.646l-2.937-7.303Z"/></symbol><use href="#main"/></svg>
|
||||
|
After Width: | Height: | Size: 571 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><symbol id="main"><path d="M7 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7ZM2 6a2 2 0 0 1 2-2v12a2 2 0 0 1-2-2V6Zm14 10V4a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z"/></symbol><use href="#main"/></svg>
|
||||
|
After Width: | Height: | Size: 294 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><symbol id="main"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></symbol><use href="#main" /></svg>
|
||||
|
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 331 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M9 22.5q-1.25 0-2.125-.875T6 19.5V13q0-1.25.875-2.125T9 10h30q1.25 0 2.125.875T42 13v6.5q0 1.25-.875 2.125T39 22.5ZM9 38q-1.25 0-2.125-.875T6 35v-6.5q0-1.25.875-2.125T9 25.5h30q1.25 0 2.125.875T42 28.5V35q0 1.25-.875 2.125T39 38Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><symbol id="main"><path d="M9 22.5q-1.25 0-2.125-.875T6 19.5V13q0-1.25.875-2.125T9 10h30q1.25 0 2.125.875T42 13v6.5q0 1.25-.875 2.125T39 22.5ZM9 38q-1.25 0-2.125-.875T6 35v-6.5q0-1.25.875-2.125T9 25.5h30q1.25 0 2.125.875T42 28.5V35q0 1.25-.875 2.125T39 38Z"/></symbol><use href="#main"/></svg>
|
||||
|
Before Width: | Height: | Size: 310 B After Width: | Height: | Size: 356 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M15.5 7q-.65 0-1.075-.425Q14 6.15 14 5.5q0-.65.425-1.075Q14.85 4 15.5 4h17q.65 0 1.075.425Q34 4.85 34 5.5q0 .65-.425 1.075Q33.15 7 32.5 7Zm-6.55 6q-.65 0-1.075-.425-.425-.425-.425-1.075 0-.65.425-1.075Q8.3 10 8.95 10h30.1q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075Q39.7 13 39.05 13ZM7 44q-1.2 0-2.1-.9Q4 42.2 4 41V19q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.2-.9 2.1-.9.9-2.1.9Zm15.7-8.15 6.85-4.6q.7-.45.7-1.25t-.7-1.25l-6.85-4.6q-.75-.5-1.55-.075t-.8 1.325v9.25q0 .9.8 1.325.8.425 1.55-.125Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><symbol id="main"><path d="M15.5 7q-.65 0-1.075-.425Q14 6.15 14 5.5q0-.65.425-1.075Q14.85 4 15.5 4h17q.65 0 1.075.425Q34 4.85 34 5.5q0 .65-.425 1.075Q33.15 7 32.5 7Zm-6.55 6q-.65 0-1.075-.425-.425-.425-.425-1.075 0-.65.425-1.075Q8.3 10 8.95 10h30.1q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075Q39.7 13 39.05 13ZM7 44q-1.2 0-2.1-.9Q4 42.2 4 41V19q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.2-.9 2.1-.9.9-2.1.9Zm15.7-8.15 6.85-4.6q.7-.45.7-1.25t-.7-1.25l-6.85-4.6q-.75-.5-1.55-.075t-.8 1.325v9.25q0 .9.8 1.325.8.425 1.55-.125Z"/></symbol><use href="#main" /></svg>
|
||||
|
Before Width: | Height: | Size: 597 B After Width: | Height: | Size: 644 B |
Loading…
Reference in New Issue