Custom reports: hide "show ..." checkboxes in menu

packages/desktop-client/src/components/common/Menu.tsx

@@ -10,6 +10,7 @@ import {
 import { type CSSProperties, theme } from '../../style';
 
 import { Text } from './Text';
+import { Toggle } from './Toggle';
 import { View } from './View';
 
 type KeybindingProps = {
@@ -33,6 +34,8 @@ type MenuItem = {
   text: string;
   key?: string;
   style?: CSSProperties;
+  toggle?: boolean;
+  tooltip?: string;
 };
 
 type MenuProps<T extends MenuItem = MenuItem> = {
@@ -164,23 +167,48 @@ export function Menu<T extends MenuItem>({
             onMouseEnter={() => setHoveredIndex(idx)}
             onMouseLeave={() => setHoveredIndex(null)}
             onClick={() =>
-              !item.disabled && onMenuSelect && onMenuSelect(item.name)
+              !item.disabled &&
+              onMenuSelect &&
+              item.toggle === undefined &&
+              onMenuSelect(item.name)
             }
           >
             {/* Force it to line up evenly */}
-            <Text style={{ lineHeight: 0 }}>
-              {item.icon &&
-                createElement(item.icon, {
-                  width: item.iconSize || 10,
-                  height: item.iconSize || 10,
-                  style: {
-                    marginRight: 7,
-                    width: item.iconSize || 10,
-                  },
-                })}
-            </Text>
-            <Text>{item.text}</Text>
-            <View style={{ flex: 1 }} />
+            {item.toggle === undefined ? (
+              <>
+                <Text style={{ lineHeight: 0 }}>
+                  {item.icon &&
+                    createElement(item.icon, {
+                      width: item.iconSize || 10,
+                      height: item.iconSize || 10,
+                      style: {
+                        marginRight: 7,
+                        width: item.iconSize || 10,
+                      },
+                    })}
+                </Text>
+                <Text title={item.tooltip}>{item.text}</Text>
+                <View style={{ flex: 1 }} />
+              </>
+            ) : (
+              <>
+                <label htmlFor={item.name} title={item.tooltip}>
+                  {item.text}
+                </label>
+                <View style={{ flex: 1 }} />
+                <Toggle
+                  id={item.name}
+                  checked={item.toggle}
+                  onColor={theme.pageTextPositive}
+                  style={{ marginLeft: 5, ...item.style }}
+                  onToggle={() =>
+                    !item.disabled &&
+                    item.toggle !== undefined &&
+                    onMenuSelect(item.name)
+                  }
+                />
+              </>
+            )}
             {item.key && <Keybinding keyName={item.key} />}
           </View>
         );

packages/desktop-client/src/components/common/Toggle.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { css } from 'glamor';
+
+import { theme, type CSSProperties } from '../../style';
+
+type ToggleProps = {
+  id: string;
+  checked: boolean;
+  onToggle?: () => void;
+  onColor?: string;
+  style?: CSSProperties;
+};
+
+export const Toggle = ({
+  id,
+  checked,
+  onToggle,
+  onColor,
+  style,
+}: ToggleProps) => {
+  return (
+    <div style={{ marginTop: -20, ...style }}>
+      <input
+        id={id}
+        checked={checked}
+        onChange={onToggle}
+        className={`${css({
+          height: 0,
+          width: 0,
+          visibility: 'hidden',
+        })}`}
+        type="checkbox"
+      />
+      <label
+        style={{
+          background: checked ? onColor : theme.checkboxToggleBackground,
+        }}
+        className={`${css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          cursor: 'pointer',
+          width: '32px',
+          height: '16px',
+          borderRadius: '100px',
+          position: 'relative',
+          transition: 'background-color .2s',
+        })}`}
+        htmlFor={id}
+      >
+        <span
+          className={`${css(
+            {
+              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)',
+            },
+            checked && {
+              left: 'calc(100% - 2px)',
+              transform: 'translateX(-100%)',
+            },
+          )}`}
+        />
+      </label>
+    </div>
+  );
+};

packages/desktop-client/src/components/reports/ReportSidebar.jsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { theme } from '../../style';
+import { Button } from '../common/Button';
+import { Menu } from '../common/Menu';
 import { Select } from '../common/Select';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
-import { Checkbox } from '../forms';
+import { Tooltip } from '../tooltips';
 
 import { CategorySelector } from './CategorySelector';
 import {
@@ -39,6 +41,7 @@ export function ReportSidebar({
   onChangeDates,
   onChangeViews,
 }) {
+  const [menuOpen, setMenuOpen] = useState(false);
   const onSelectRange = cond => {
     setDateRange(cond);
     switch (cond) {
@@ -242,70 +245,62 @@ export function ReportSidebar({
           }}
         >
           <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }} />
-
-          <Checkbox
-            id="show-empty-columns"
-            checked={customReportItems.showEmpty}
-            value={customReportItems.showEmpty}
-            onChange={() => setShowEmpty(!customReportItems.showEmpty)}
-          />
-          <label
-            htmlFor="show-empty-columns"
-            title="Show rows that are zero or blank"
-            style={{ fontSize: 12 }}
-          >
-            Show Empty Rows
-          </label>
-        </View>
-        <View
-          style={{
-            flexDirection: 'row',
-            padding: 5,
-            alignItems: 'center',
-          }}
-        >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }} />
-
-          <Checkbox
-            id="show-hidden-columns"
-            checked={customReportItems.showOffBudgetHidden}
-            value={customReportItems.showOffBudgetHidden}
-            onChange={() =>
-              setShowOffBudgetHidden(!customReportItems.showOffBudgetHidden)
-            }
-          />
-          <label
-            htmlFor="show-hidden-columns"
-            title="Show off budget accounts and hidden categories"
-            style={{ fontSize: 12 }}
-          >
-            Off Budget Items
-          </label>
-        </View>
-        <View
-          style={{
-            flexDirection: 'row',
-            padding: 5,
-            alignItems: 'center',
-          }}
-        >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }} />
-
-          <Checkbox
-            id="show-uncategorized"
-            checked={customReportItems.showUncategorized}
-            value={customReportItems.showUncategorized}
-            onChange={() =>
-              setShowUncategorized(!customReportItems.showUncategorized)
-            }
-          />
-          <label
-            htmlFor="show-uncategorized"
-            title="Show uncategorized transactions"
-            style={{ fontSize: 12 }}
+          <Button
+            onClick={() => {
+              setMenuOpen(true);
+            }}
+            style={{
+              color: 'currentColor',
+              padding: '5px 10px',
+            }}
           >
-            Uncategorized
-          </label>
+            Options
+            {menuOpen && (
+              <Tooltip
+                position="bottom-left"
+                style={{ padding: 0 }}
+                onClose={() => {
+                  setMenuOpen(false);
+                }}
+              >
+                <Menu
+                  onMenuSelect={type => {
+                    if (type === 'show-hidden-categories') {
+                      setShowOffBudgetHidden(
+                        !customReportItems.showOffBudgetHidden,
+                      );
+                    } else if (type === 'show-empty-rows') {
+                      setShowEmpty(!customReportItems.showEmpty);
+                    } else if (type === 'show-uncategorized') {
+                      setShowUncategorized(
+                        !customReportItems.showUncategorized,
+                      );
+                    }
+                  }}
+                  items={[
+                    {
+                      name: 'show-empty-rows',
+                      text: 'Show Empty Rows',
+                      tooltip: 'Show rows that are zero or blank',
+                      toggle: customReportItems.showEmpty,
+                    },
+                    {
+                      name: 'show-hidden-categories',
+                      text: 'Show Off Budget',
+                      tooltip: 'Show off budget accounts and hidden categories',
+                      toggle: customReportItems.showOffBudgetHidden,
+                    },
+                    {
+                      name: 'show-uncategorized',
+                      text: 'Show Uncategorized',
+                      tooltip: 'Show uncategorized transactions',
+                      toggle: customReportItems.showUncategorized,
+                    },
+                  ]}
+                />
+              </Tooltip>
+            )}
+          </Button>
         </View>
         <View
           style={{

packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts

@@ -7,7 +7,7 @@ export const adjustTextSize = (
   let source;
   switch (type) {
     case 'variable':
-      source = variableLookup.find(({ value }) => values > value).arr;
+      source = variableLookup.find(({ value }) => values >= value).arr;
       break;
     case 'donut':
       source = donutLookup;

packages/desktop-client/src/style/themes/dark.ts

@@ -174,6 +174,7 @@ export const checkboxText = tableText;
 export const checkboxBackgroundSelected = colorPalette.purple300;
 export const checkboxBorderSelected = colorPalette.purple300;
 export const checkboxShadowSelected = colorPalette.purple500;
+export const checkboxToggleBackground = colorPalette.gray700;
 
 export const pillBackground = colorPalette.navy800;
 export const pillBackgroundLight = colorPalette.navy900;

packages/desktop-client/src/style/themes/light.ts

@@ -174,6 +174,7 @@ export const checkboxText = tableBackground;
 export const checkboxBackgroundSelected = colorPalette.blue500;
 export const checkboxBorderSelected = colorPalette.blue500;
 export const checkboxShadowSelected = colorPalette.blue300;
+export const checkboxToggleBackground = colorPalette.gray400;
 
 export const pillBackground = colorPalette.navy150;
 export const pillBackgroundLight = colorPalette.navy100;

upcoming-release-notes/2174.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Hide "show ..." checkboxes within menu for custom reports page. Introduce toggle switches.