dropdown toggle can now show checkbox and does so for non-friendly UI

ForumMagnum · May 15, 2024 · edb9022 · edb9022
1 parent b70207a
commit edb9022
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/packages/lesswrong/components/dropdowns/DropdownItem.tsx b/packages/lesswrong/components/dropdowns/DropdownItem.tsx
@@ -70,6 +70,7 @@ export type DropdownItemProps = DropdownItemAction & {
   sideMessage?: string,
   icon?: ForumIconName | (() => ReactElement),
   iconClassName?: string,
+  menuItemClassName?: string,
   afterIcon?: ForumIconName | (() => ReactElement),
   tooltip?: string,
   disabled?: boolean,
@@ -96,6 +97,7 @@ const DropdownItem = ({
   to,
   icon,
   iconClassName,
+  menuItemClassName,
   afterIcon,
   tooltip,
   disabled,
@@ -112,7 +114,7 @@ const DropdownItem = ({
         <MenuItem
           onClick={onClick}
           disabled={disabled}
-          className={classNames(classes.main, {[classes.noIcon]: !icon})}
+          className={classNames(classes.main, menuItemClassName, {[classes.noIcon]: !icon})}
         >
           {loading &&
             <ListItemIcon>

diff --git a/packages/lesswrong/components/dropdowns/NotifyMeToggleDropdownItem.tsx b/packages/lesswrong/components/dropdowns/NotifyMeToggleDropdownItem.tsx
@@ -3,12 +3,14 @@ import { Components, registerComponent } from "../../lib/vulcan-lib";
 import { NotifyMeDocument, useNotifyMe } from "../hooks/useNotifyMe";
 import { useOptimisticToggle } from "../hooks/useOptimisticToggle";
 import type { SubscriptionType } from "../../lib/collections/subscriptions/schema";
+import Checkbox from "@material-ui/core/Checkbox";
 
 type NotifyMeToggleDropdownItemInternalProps = {
   document: NotifyMeDocument,
   title: string,
   enabled?: boolean,
   subscriptionType: SubscriptionType,
+  useCheckboxIcon?: boolean,
   classes: ClassesType,
 }
 
@@ -23,12 +25,16 @@ const styles = (_theme: ThemeType) => ({
   toggle: {
     marginLeft: 12,
   },
+  menuItemCheckbox: {
+    paddingRight: 8
+  }
 });
 
 export const NotifyMeToggleDropdownItemInternal = ({
   document,
   title,
   subscriptionType,
+  useCheckboxIcon,
   classes,
 }: NotifyMeToggleDropdownItemInternalProps) => {
   const {isSubscribed, onSubscribe, loading, disabled } = useNotifyMe({
@@ -44,8 +50,14 @@ export const NotifyMeToggleDropdownItemInternal = ({
   const {DropdownItem, ToggleSwitch} = Components;
 
   const afterIcon = useCallback(
-    () => <ToggleSwitch value={subscribed} className={classes.toggle} smallVersion />,
-    [subscribed, ToggleSwitch, classes.toggle],
+    () => {
+      if (useCheckboxIcon) {
+        return <Checkbox checked={subscribed} />
+      } 
+
+      return <ToggleSwitch value={subscribed} className={classes.toggle} smallVersion />
+    },
+    [subscribed, useCheckboxIcon, ToggleSwitch, classes.toggle ],
   );
 
   return (
@@ -55,6 +67,7 @@ export const NotifyMeToggleDropdownItemInternal = ({
       afterIcon={afterIcon}
       loading={loading}
       disabled={disabled}
+      menuItemClassName={useCheckboxIcon ? classes.menuItemCheckbox : undefined}
     />
   );
 }

diff --git a/packages/lesswrong/components/notifications/UserNotifyDropdown.tsx b/packages/lesswrong/components/notifications/UserNotifyDropdown.tsx
@@ -4,6 +4,7 @@ import { useTracking } from '../../lib/analyticsEvents';
 import { userHasSubscribeTabFeed } from '../../lib/betas';
 import { useCurrentUser } from '../common/withUser';
 import { PopperPlacementType } from '@material-ui/core/Popper/Popper';
+import { is } from 'cheerio/lib/api/attributes';
 
 const styles = (_theme: ThemeType) => ({
   buttonContent: {
@@ -95,16 +96,19 @@ const UserNotifyDropdown = ({
             {userHasSubscribeTabFeed(currentUser) && <NotifyMeToggleDropdownItem
               document={user}
               title="Include in my feeds"
+              useCheckboxIcon={!isFriendlyUI}
               subscriptionType="newActivityForFeed"
             />}
             <NotifyMeToggleDropdownItem
               document={user}
               title={isFriendlyUI ? "New posts" : "Notify on posts"}
+              useCheckboxIcon={!isFriendlyUI}
               subscriptionType="newPosts"
             />
             <NotifyMeToggleDropdownItem
               document={user}
               title={isFriendlyUI ? "New comments" : "Notify on comments"}
+              useCheckboxIcon={!isFriendlyUI}
               subscriptionType="newUserComments"
             />
           </DropdownMenu>