Skip to content

Commit

Permalink
Refactor SwitchField to Toggle component
Browse files Browse the repository at this point in the history
  • Loading branch information
0-don committed Dec 10, 2023
1 parent febf05c commit ce93f0a
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 23 deletions.
15 changes: 15 additions & 0 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ jobs:
license: ${{ steps.get-package.outputs.license }}
deb-pkg-name: ${{ steps.get-package.outputs.name }}_${{ steps.get-package.outputs.version }}_amd64.deb
deb-pkg-path: ./src-tauri/target/release/bundle/deb/
tag-exists: ${{ steps.get-package.outputs.tag_exists }}
steps:
- uses: actions/checkout@v3
- name: setup node
Expand All @@ -37,12 +38,15 @@ jobs:
echo "name=$(node -p "require('./package.json').name")" >> $GITHUB_OUTPUT
echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
echo "description=$(node -p "require('./package.json').description")" >> $GITHUB_OUTPUT
# - uses: dev-drprasad/delete-tag-and-release@v1.0
# with:
# tag_name: ${{ steps.get-package.outputs.version }}
# github_token: ${{ secrets.GITHUB_TOKEN }}


build-tauri:
if: ${{ needs.setup.outputs.tag-exists }} == 'true'
needs: [setup]
permissions:
contents: write
Expand All @@ -52,6 +56,7 @@ jobs:
platform: [macos-latest, ubuntu-latest, windows-latest]
runs-on: ${{ matrix.platform }}
env:
TAG_EXISTS: ${{ needs.setup.outputs.tag-exists }}
BIN_PATH: ${{ needs.setup.outputs.name-bin }}
DESCRIPTION: ${{ needs.setup.outputs.description }}
LICENSE: ${{ needs.setup.outputs.license }}
Expand All @@ -71,12 +76,22 @@ jobs:
with:
node-version: 20

- uses: mukunku/tag-exists-action@v1.4.0
id: checkTag
with:
tag: '${{ env.PACKAGE_VERSION }}'

- name: stop jobs if tag exist
if: steps.checkTag.outputs.exists == 'true'
run: exit 1

- name: install rust stable
uses: dtolnay/rust-toolchain@stable

- name: install dependencies (ubuntu only)
if: matrix.platform == 'ubuntu-latest'
run: |
echo "${{ steps.checkTag.outputs.exists }}"
sudo apt-get update
wget http://nz2.archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1f-1ubuntu2.20_amd64.deb
sudo dpkg -i libssl1.1_1.1.1f-1ubuntu2.20_amd64.deb
Expand Down
38 changes: 24 additions & 14 deletions src/components/elements/SwitchField.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
import { Switch } from "@kobalte/core";
import { FiCheck } from "solid-icons/fi";
import { VsClose } from "solid-icons/vs";
import { Accessor, Component, Setter } from "solid-js";
import { Component, Setter } from "solid-js";

type SwitchProps = {
checked?: Accessor<boolean> | boolean;
checked?: boolean;
onChange: (val: boolean) => Promise<void> | Setter<boolean> | undefined;
};

const SwitchField: Component<SwitchProps> = (props) => {
const getChecked = () => (typeof props.checked === "function" ? props.checked() : props.checked);

const Toggle: Component<SwitchProps> = (props) => {

return (
<Switch.Root class="mx-1 inline-flex cursor-pointer items-center" checked={getChecked()} onChange={props.onChange}>
<Switch.Input />
<Switch.Control class="inline-flex h-4 w-11 items-center rounded-xl bg-red-600 bg-opacity-20 transition-colors kb-checked:bg-indigo-600">
<Switch.Thumb class="inline-flex h-4 w-4 items-center justify-center rounded-lg bg-white p-0.5 transition-all kb-checked:translate-x-[calc(172%)] dark:bg-zinc-700">
{getChecked() ? <FiCheck /> : <VsClose />}
</Switch.Thumb>
</Switch.Control>
</Switch.Root>
<>
<label class="relative inline-flex cursor-pointer items-center">
<input
type="checkbox"
checked={props.checked}
onChange={() => props.onChange(!props.checked)}
class="peer sr-only"
/>
<div class="peer h-5 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:dark:bg-zinc-700 after:transition-all after:content-[''] peer-checked:bg-indigo-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></div>
</label>
<Switch.Root class="mx-1 inline-flex cursor-pointer items-center" checked={props.checked} onChange={props.onChange}>
<Switch.Input />
<Switch.Control class="inline-flex h-4 w-11 items-center rounded-xl bg-red-600 bg-opacity-20 transition-colors kb-checked:bg-indigo-600">
<Switch.Thumb class="inline-flex h-4 w-4 items-center justify-center rounded-lg bg-white p-0.5 transition-all kb-checked:translate-x-[calc(172%)] dark:bg-zinc-700">
{props.checked ? <FiCheck /> : <VsClose />}
</Switch.Thumb>
</Switch.Control>
</Switch.Root>
</>
);
};

export default SwitchField;
export default Toggle;
4 changes: 2 additions & 2 deletions src/components/pages/app/ViewMore.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import SettingsStore from "../../../store/SettingsStore";

import { ViewMoreName } from "../../../utils/constants";
import { createAboutWindow, createSettingsWindow } from "../../../utils/helpers";
import SwitchField from "../../elements/SwitchField";
import Toggle from "../../elements/SwitchField";

interface ViewMoreProps {}

Expand Down Expand Up @@ -36,7 +36,7 @@ export const ViewMore: Component<ViewMoreProps> = ({}) => {
<p class="px-4 text-base font-semibold">{name}</p>
</div>
{name === "Sync Clipboard History" && (
<SwitchField checked={settings()?.synchronize} onChange={async () => {}} />
<Toggle checked={settings()?.synchronize} onChange={async () => {}} />
)}
</div>
<hr class="border-zinc-700" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/settings/SettingsBackup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { RiDeviceSave3Fill } from "solid-icons/ri";
import { TbDatabaseStar } from "solid-icons/tb";
import { Component, Show, createEffect, createSignal, on } from "solid-js";
import SettingsStore from "../../../store/SettingsStore";
import SwitchField from "../../elements/SwitchField";
import Toggle from "../../elements/SwitchField";
import { TextBlock } from "../../elements/TextBlock";

interface SettingsBackupProps {}
Expand All @@ -30,7 +30,7 @@ export const SettingsBackup: Component<SettingsBackupProps> = ({}) => {
<h6 class="text-sm">Synchronize clipboard history</h6>
</div>
<div>
<SwitchField checked={settings()?.synchronize || false} onChange={() => syncClipboard()} />
<Toggle checked={settings()?.synchronize || false} onChange={() => syncClipboard()} />
</div>
</div>
</TextBlock>
Expand Down
6 changes: 3 additions & 3 deletions src/components/pages/settings/SettingsGeneral.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { VsRocket } from "solid-icons/vs";
import { Component, Show } from "solid-js";
import HotkeyStore from "../../../store/HotkeyStore";
import SettingsStore from "../../../store/SettingsStore";
import SwitchField from "../../elements/SwitchField";
import Toggle from "../../elements/SwitchField";
import { TextBlock } from "../../elements/TextBlock";
import { DarkMode } from "../../utils/DarkMode";
import { Shortcut } from "../../utils/Shortcut";
Expand Down Expand Up @@ -34,7 +34,7 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
<h6 class="text-sm">Start Clippy on system startup.</h6>
</div>
<div>
<SwitchField
<Toggle
checked={settings()?.startup}
onChange={async (check: boolean) => updateSettings({ ...settings()!, startup: check })}
/>
Expand All @@ -47,7 +47,7 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
<h6 class="text-sm">Show desktop notifications.</h6>
</div>
<div>
<SwitchField
<Toggle
checked={settings()?.notification}
onChange={(check: boolean) => updateSettings({ ...settings()!, notification: check })}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/utils/DarkMode.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, createEffect } from "solid-js";
import AppStore from "../../store/AppStore";
import SettingsStore from "../../store/SettingsStore";
import SwitchField from "../elements/SwitchField";
import Toggle from "../elements/SwitchField";

interface DarkModeProps {}

Expand All @@ -12,7 +12,7 @@ export const DarkMode: Component<DarkModeProps> = ({}) => {
createEffect(darkMode);

return (
<SwitchField
<Toggle
checked={settings()?.dark_mode}
onChange={(dark_mode) =>
updateSettings({
Expand Down

0 comments on commit ce93f0a

Please sign in to comment.