0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-12-22 16:30:20 +00:00

navbar icon sets closes #584

This commit is contained in:
Nikita Krupin 2022-12-26 23:32:48 -05:00
parent 3f7323266c
commit 3487c21e63
11 changed files with 250 additions and 60 deletions

View file

@ -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>

View file

@ -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>

1
NUXT/static/chome.svg Normal file
View file

@ -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

1
NUXT/static/clist.svg Normal file
View file

@ -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

1
NUXT/static/csubs.svg Normal file
View file

@ -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

1
NUXT/static/fhome.svg Normal file
View file

@ -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

1
NUXT/static/flist.svg Normal file
View file

@ -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

1
NUXT/static/fsubs.svg Normal file
View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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