Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-21 03:12:04 +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", "name": "Miru",
"version": "4.2.1", "version": "4.2.2",
"author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>", "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
"description": "Stream anime torrents, real-time with no waiting for downloads.", "description": "Stream anime torrents, real-time with no waiting for downloads.",
"main": "build/main.js", "main": "build/main.js",

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

@ -2,7 +2,7 @@
import { getContext } from 'svelte' import { getContext } from 'svelte'
import { alID } from '@/modules/anilist.js' import { alID } from '@/modules/anilist.js'
import { media } from '../views/Player/MediaHandler.svelte' 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 { toast } from 'svelte-sonner'
import { click } from '@/modules/click.js' import { click } from '@/modules/click.js'
const view = getContext('view') const view = getContext('view')
@ -94,7 +94,7 @@
} }
</script> </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-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'}> <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)} {#each links as { click: _click, icon, text, image, css, page: _page }, i (i)}
@ -201,7 +201,7 @@
overflow-y: unset; overflow-y: unset;
overflow-x: visible overflow-x: visible
} }
.sidebar:hover { .sidebar.animated:hover {
width: 22rem width: 22rem
} }
.sidebar-overlay { .sidebar-overlay {
@ -211,7 +211,7 @@
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
z-index: -1; z-index: -1;
} }
.sidebar:hover .sidebar-overlay { .sidebar.animated:hover .sidebar-overlay {
width: 63rem width: 63rem
} }
</style> </style>

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

@ -24,7 +24,8 @@
toshoURL: decodeURIComponent(atob('aHR0cHM6Ly9mZWVkLmFuaW1ldG9zaG8ub3JnLw==')), toshoURL: decodeURIComponent(atob('aHR0cHM6Ly9mZWVkLmFuaW1ldG9zaG8ub3JnLw==')),
showDetailsInRPC: true, showDetailsInRPC: true,
smoothScroll: true, smoothScroll: true,
cards: 'small' cards: 'small',
expandingSidebar: true
} }
export const set = { ...defaults, ...(JSON.parse(localStorage.getItem('settings')) || {}) } 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' class='custom-switch mb-10 pl-10 font-size-16 w-300'
data-toggle='tooltip' data-toggle='tooltip'
data-placement='bottom' 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} /> <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>
</div> </div>
</Tab> </Tab>
@ -490,9 +491,17 @@
class='custom-switch mb-10 pl-10 font-size-16 w-300' class='custom-switch mb-10 pl-10 font-size-16 w-300'
data-toggle='tooltip' data-toggle='tooltip'
data-placement='bottom' 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} /> <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>
</div> </div>
</Tab> </Tab>