Use a toggle on mobile transaction's Cleared flag

actualbudget · Oct 8, 2024 · 439b0f9 · 439b0f9
1 parent 23de23b
commit 439b0f9
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 148 deletions.
diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
@@ -207,15 +207,20 @@ export function Menu<const NameType = string>({
                 <View style={{ flex: 1 }} />
               </>
             ) : (
-              <>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  flex: 1,
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
                 <label htmlFor={String(item.name)} title={item.tooltip}>
                   {item.text}
                 </label>
-                <View style={{ flex: 1 }} />
                 <Toggle
                   id={String(item.name)}
                   checked={item.toggle}
-                  onColor={theme.pageTextPositive}
                   style={{ marginLeft: 5 }}
                   onToggle={() =>
                     !item.disabled &&
@@ -224,7 +229,7 @@ export function Menu<const NameType = string>({
                     onMenuSelect?.(item.name)
                   }
                 />
-              </>
+              </View>
             )}
             {item.key && <Keybinding keyName={item.key} />}
           </View>

diff --git a/packages/desktop-client/src/components/common/Toggle.tsx b/packages/desktop-client/src/components/common/Toggle.tsx
@@ -2,29 +2,34 @@ import React from 'react';
 
 import { css } from 'glamor';
 
-import { theme, type CSSProperties } from '../../style';
+import { type CSSProperties, theme } from '../../style';
+
+import { View } from './View';
 
 type ToggleProps = {
   id: string;
   checked: boolean;
-  onToggle?: () => void;
-  onColor?: string;
+  disabled?: boolean;
+  onToggle?: (on: boolean) => void;
+  className?: string;
   style?: CSSProperties;
 };
 
 export const Toggle = ({
   id,
   checked,
+  disabled,
   onToggle,
-  onColor,
+  className,
   style,
 }: ToggleProps) => {
   return (
-    <div style={{ marginTop: -20, ...style }}>
+    <View style={style} className={className}>
       <input
         id={id}
         checked={checked}
-        onChange={onToggle}
+        disabled={disabled}
+        onChange={e => onToggle?.(e.target.checked)}
         className={`${css({
           height: 0,
           width: 0,
@@ -33,9 +38,8 @@ export const Toggle = ({
         type="checkbox"
       />
       <label
-        style={{
-          background: checked ? onColor : theme.checkboxToggleBackground,
-        }}
+        data-toggle-container
+        data-on={checked}
         className={`${css({
           display: 'flex',
           alignItems: 'center',
@@ -46,22 +50,27 @@ export const Toggle = ({
           borderRadius: '100px',
           position: 'relative',
           transition: 'background-color .2s',
+          background: checked
+            ? theme.checkboxToggleBackgroundSelected
+            : theme.checkboxToggleBackground,
         })}`}
         htmlFor={id}
       >
         <span
+          data-toggle
+          data-on={checked}
           className={`${css(
             {
-              content: '',
+              content: ' ',
               position: 'absolute',
               top: '2px',
               left: '2px',
               width: '12px',
               height: '12px',
               borderRadius: '100px',
               transition: '0.2s',
-              background: '#fff',
               boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
+              background: disabled ? theme.checkboxToggleDisabled : '#fff',
             },
             checked && {
               left: 'calc(100% - 2px)',
@@ -70,6 +79,6 @@ export const Toggle = ({
           )}`}
         />
       </label>
-    </div>
+    </View>
   );
 };