From 9f4ec2cfde0e7047918520f54b594bddbbf31053 Mon Sep 17 00:00:00 2001 From: "Bhajneet S.K" Date: Wed, 8 May 2024 23:43:14 -0400 Subject: [PATCH] feat: add toggling of larivar and vishraman --- src/components/app/controls/controls.css | 7 +++ src/components/app/controls/controls.tsx | 54 ++++++++++++++++++++++++ src/components/icons/ui/continuous.tsx | 38 +++++++++++++++++ src/components/icons/ui/pause.tsx | 35 +++++++++++++++ src/components/switch/switch.css | 23 +++------- src/components/switch/switch.tsx | 11 ++++- src/global.css | 45 ++++++++------------ src/root.tsx | 2 + src/routes/app.css | 13 ++++++ src/routes/layout-app.tsx | 8 ++++ 10 files changed, 191 insertions(+), 45 deletions(-) create mode 100644 src/components/icons/ui/continuous.tsx create mode 100644 src/components/icons/ui/pause.tsx diff --git a/src/components/app/controls/controls.css b/src/components/app/controls/controls.css index cf44d67..679a18a 100644 --- a/src/components/app/controls/controls.css +++ b/src/components/app/controls/controls.css @@ -161,11 +161,18 @@ a.controls__option:hover { -webkit-tap-highlight-color: transparent; } +.controls__option.clickable.disabled { + cursor: not-allowed; +} + :global(.controls__option.clickable:hover .switch) { --track-color-inactive: var(--toner) !important; outline: 2.25px solid var(--ui); outline-offset: 2.25px; } +:global(.controls__option.clickable.disabled:hover .switch) { + outline: 0; +} .controls__option.clickable:hover .controls__icon { background-color: var(--toner); diff --git a/src/components/app/controls/controls.tsx b/src/components/app/controls/controls.tsx index dcab8c7..9793725 100644 --- a/src/components/app/controls/controls.tsx +++ b/src/components/app/controls/controls.tsx @@ -28,6 +28,8 @@ import Instagram from '~/components/icons/ui/instagram'; import Youtube from '~/components/icons/ui/youtube'; import Slack from '~/components/icons/ui/slack'; import Github from '~/components/icons/ui/github'; +import Pause from '~/components/icons/ui/pause'; +import Continuous from '~/components/icons/ui/continuous'; export default component$(() => { useStylesScoped$(styles); @@ -378,6 +380,58 @@ export default component$(() => {
+
{ + controlsStore.larivar = isNaN(controlsStore.larivar) + ? 0 + : 1 - controlsStore.larivar; + setLocalStorage( + 'controlsLarivar', + controlsStore.larivar.toString(), + ); + document.documentElement.setAttribute( + 'data-larivar', + String(controlsStore.larivar), + ); + }} + > +
+ + Continuous +
+ +
+
{ + if (controlsStore.larivar) { + return; + } + controlsStore.vishraman = isNaN(controlsStore.vishraman) + ? 0 + : 1 - controlsStore.vishraman; + setLocalStorage( + 'controlsVishraman', + controlsStore.vishraman.toString(), + ); + document.documentElement.setAttribute( + 'data-vishraman', + String(controlsStore.vishraman), + ); + }} + > +
+ + Pauses +
+ +
{ diff --git a/src/components/icons/ui/continuous.tsx b/src/components/icons/ui/continuous.tsx new file mode 100644 index 0000000..8e4b9e7 --- /dev/null +++ b/src/components/icons/ui/continuous.tsx @@ -0,0 +1,38 @@ +// ISC License + +// Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022. + +// Permission to use, copy, modify, and/or distribute this software for any +// purpose with or without fee is hereby granted, provided that the above +// copyright notice and this permission notice appear in all copies. + +// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR +// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES +// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN +// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF +// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + +import { component$ } from '@builder.io/qwik'; + +export default component$(() => ( + + + + + + + +)); diff --git a/src/components/icons/ui/pause.tsx b/src/components/icons/ui/pause.tsx new file mode 100644 index 0000000..be5317f --- /dev/null +++ b/src/components/icons/ui/pause.tsx @@ -0,0 +1,35 @@ +// ISC License + +// Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022. + +// Permission to use, copy, modify, and/or distribute this software for any +// purpose with or without fee is hereby granted, provided that the above +// copyright notice and this permission notice appear in all copies. + +// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR +// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES +// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN +// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF +// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + +import { component$ } from '@builder.io/qwik'; + +export default component$(() => ( + + + + +)); diff --git a/src/components/switch/switch.css b/src/components/switch/switch.css index 2b40893..e61f593 100644 --- a/src/components/switch/switch.css +++ b/src/components/switch/switch.css @@ -1,7 +1,7 @@ .switch { - --thumb-size: 24px; + --thumb-size: 20px; --track-size: calc(var(--thumb-size) * 1.8); - --track-padding: 0px; + --track-padding: 2px; --thumb-color: #ffffff; --track-color-inactive: var(--toner); --track-color-active: var(--ui); @@ -43,27 +43,18 @@ background: var(--track-color-active); --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR)); --thumb-color: #ffffff; - border-color: transparent; -} -.switch:checked::before { - border-color: transparent; } .switch:disabled { cursor: not-allowed; - --thumb-color: transparent; -} -.switch:disabled::before { - cursor: not-allowed; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); + opacity: 0.4; } -@media (prefers-color-scheme: dark) { - .switch:disabled::before { - box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5); - } + +.switch:disabled:hover { + outline: none; } @media (pointer: coarse) { .switch { - --thumb-size: 35px; + --thumb-size: 31px; } } diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 9e46c59..4dee2d9 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -2,13 +2,20 @@ import { component$, useStylesScoped$ } from '@builder.io/qwik'; import styles from './switch.css?inline'; interface Props { + disabled?: boolean; toggled: boolean; } -export default component$(({ toggled }: Props) => { +export default component$(({ disabled = false, toggled }: Props) => { useStylesScoped$(styles); return ( - + ); }); diff --git a/src/global.css b/src/global.css index 0895c35..8e20f86 100644 --- a/src/global.css +++ b/src/global.css @@ -368,50 +368,41 @@ input[type='range']:focus { } input[type='range']::-webkit-slider-runnable-track { - /* background-color: var(--bg); */ - height: 100%; transition: background-color 0.25s ease; } input[type='range']::-moz-range-track { - /* background-color: var(--bg); */ - height: 100%; transition: background-color 0.25s ease; } -input[type='range']:hover::-webkit-slider-runnable-track { - background-color: var(--toner); -} -input[type='range']:hover::-moz-range-track { - background-color: var(--toner); -} - input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background-color: #fff; - height: 24px; - width: 24px; - border-radius: 24px; + height: 20px; + width: 20px; + border-radius: 20px; + border: 2px solid var(--toner); box-shadow: -412px 0 0 400px var(--ui); + box-sizing: content-box; } input[type='range']::-moz-range-thumb { -webkit-appearance: none; appearance: none; background-color: #fff; - height: 24px; - width: 24px; - border-radius: 24px; + height: 20px; + width: 20px; + border-radius: 20px; + border: 2px solid var(--toner); box-shadow: -412px 0 0 400px var(--ui); + box-sizing: content-box; } input[type='range']:focus::-webkit-slider-thumb { - outline: 2.25px solid var(--toner); - outline-offset: -2.25px; + outline: 0; } input[type='range']:focus::-moz-range-thumb { - outline: 8px solid #fff; - outline-offset: -16px; + outline: 0; } @media (pointer: coarse) { @@ -473,15 +464,15 @@ input[type='range']:focus::-moz-range-thumb { height: 35px; } input[type='range']::-webkit-slider-thumb { - width: 35px; - height: 35px; - border-radius: 35px; + width: 31px; + height: 31px; + border-radius: 31px; box-shadow: -419px 0 0 400px var(--ui); } input[type='range']::-moz-range-thumb { - width: 35px; - height: 35px; - border-radius: 35px; + width: 31px; + height: 31px; + border-radius: 31px; box-shadow: -419px 0 0 400px var(--ui); } } diff --git a/src/root.tsx b/src/root.tsx index 77c40c1..5c63289 100644 --- a/src/root.tsx +++ b/src/root.tsx @@ -56,6 +56,8 @@ export default component$(() => { if (path == 'app') { document.documentElement.setAttribute('data-mode', localStorage.controlsMode || 'classic'); document.documentElement.setAttribute('data-width', localStorage.controlsWidth || 'wider'); + document.documentElement.setAttribute('data-vishraman', localStorage.controlsVishraman || '1'); + document.documentElement.setAttribute('data-larivar', localStorage.controlsLarivar || '0'); document.documentElement.style.fontSize = localStorage.controlsZoom + 'em' || '1.5em'; } `} diff --git a/src/routes/app.css b/src/routes/app.css index 2eb26e0..6dcbd87 100644 --- a/src/routes/app.css +++ b/src/routes/app.css @@ -220,3 +220,16 @@ html[data-mode='presenter'] header > div, html[data-mode='presenter'] .notes-pane { width: 100%; } + +html[data-larivar='1'] p.bold { + word-spacing: -0.2em; +} + +html[data-larivar='1'] .heavy, +html[data-larivar='1'] .medium, +html[data-larivar='1'] .light, +html[data-vishraman='0'] .heavy, +html[data-vishraman='0'] .medium, +html[data-vishraman='0'] .light { + color: inherit; +} diff --git a/src/routes/layout-app.tsx b/src/routes/layout-app.tsx index 77dfc77..cddfc3d 100644 --- a/src/routes/layout-app.tsx +++ b/src/routes/layout-app.tsx @@ -32,6 +32,8 @@ export type Controls = { slideshowType: string; notes: number; notesContent: string; + larivar: number; + vishraman: number; pronunciationField: number; translationField: number; }; @@ -66,6 +68,8 @@ export default component$(() => { slideshowType: 'blank', notes: 0, notesContent: '', + larivar: 1, + vishraman: 1, pronunciationField: 0, translationField: 1, }); @@ -87,6 +91,10 @@ export default component$(() => { getLocalStorage('controlsSlideshowType') ?? 'blank'; controlsStore.notes = parseInt(getLocalStorage('controlsNotes') ?? '0'); controlsStore.notesContent = getLocalStorage('controlsNotesContent') ?? ''; + controlsStore.larivar = parseInt(getLocalStorage('controlsLarivar') ?? '0'); + controlsStore.vishraman = parseInt( + getLocalStorage('controlsVishraman') ?? '1', + ); controlsStore.pronunciationField = parseInt( getLocalStorage('controlsPronunciationField') ?? '0', );