Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-03-11 17:45:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: toggle for sidebar expanding animation

Browse source
This commit is contained in:
ThaUnknown 2023-07-15 22:03:19 +02:00
parent 4ca90751e6
commit bbe220bab1
3 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "Miru",
"version": "4.2.1",
"version": "4.2.2",
"author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
"description": "Stream anime torrents, real-time with no waiting for downloads.",
"main": "build/main.js",

8
src/renderer/components/Sidebar.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from 'svelte'
import { alID } from '@/modules/anilist.js'
import { media } from '../views/Player/MediaHandler.svelte'
import { platformMap } from '../views/Settings.svelte'
import { platformMap, set } from '../views/Settings.svelte'
import { toast } from 'svelte-sonner'
import { click } from '@/modules/click.js'
const view = getContext('view')
@ -94,7 +94,7 @@
}
</script>
<div class='sidebar z-30'>
<div class='sidebar z-30' class:animated={set.expandingSidebar}>
<div class='sidebar-overlay pointer-events-none h-full position-absolute' />
<div class='sidebar-menu h-full d-flex flex-column justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
{#each links as { click: _click, icon, text, image, css, page: _page }, i (i)}
@ -201,7 +201,7 @@
overflow-y: unset;
overflow-x: visible
}
.sidebar:hover {
.sidebar.animated:hover {
width: 22rem
}
.sidebar-overlay {
@ -211,7 +211,7 @@
backdrop-filter: blur(2px);
z-index: -1;
}
.sidebar:hover .sidebar-overlay {
.sidebar.animated:hover .sidebar-overlay {
width: 63rem
}
</style>

19
src/renderer/views/Settings.svelte
View file

@ -24,7 +24,8 @@
toshoURL: decodeURIComponent(atob('aHR0cHM6Ly9mZWVkLmFuaW1ldG9zaG8ub3JnLw==')),
showDetailsInRPC: true,
smoothScroll: true,
cards: 'small'
cards: 'small',
expandingSidebar: true
}
export const set = { ...defaults, ...(JSON.parse(localStorage.getItem('settings')) || {}) }
@ -478,9 +479,9 @@
class='custom-switch mb-10 pl-10 font-size-16 w-300'
data-toggle='tooltip'
data-placement='bottom'
data-title='Shows currently played anime and episode in Discord Rich Presence.'>
data-title='Shows Currently Played Anime And Episode in Discord Rich Presence.'>
<input type='checkbox' id='rpc-details' bind:checked={settings.showDetailsInRPC} />
<label for='rpc-details'>Show details in Discord Rich Presence</label>
<label for='rpc-details'>Show Details in Discord Rich Presence</label>
</div>
</div>
</Tab>
@ -490,9 +491,17 @@
class='custom-switch mb-10 pl-10 font-size-16 w-300'
data-toggle='tooltip'
data-placement='bottom'
data-title='Enables smooth scrolling for long vertical containers. Impacts performance.'>
data-title='Enables Smooth Scrolling For Long Vertical Containers. Impacts Performance.'>
<input type='checkbox' id='smooth-scroll' bind:checked={settings.smoothScroll} />
<label for='smooth-scroll'>Enable smooth scrolling</label>
<label for='smooth-scroll'>Enable Smooth Scrolling</label>
</div>
<div
class='custom-switch mb-10 pl-10 font-size-16 w-300'
data-toggle='tooltip'
data-placement='bottom'
data-title='Enables Sidebar Hover Animations'>
<input type='checkbox' id='disable-sidebar' bind:checked={settings.expandingSidebar} />
<label for='disable-sidebar'>Enable Sidebar Animations</label>
</div>
</div>
</Tab>