hide and show user avatars (#82)

Co-authored-by: Christy Presler <[email protected]> Co-authored-by: Christy Presler <[email protected]>
FormidableLabs · Apr 17, 2024 · 04c679b · 04c679b
1 parent 5bb1e9b
commit 04c679b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 34 deletions.
diff --git a/widget-src/Widget.tsx b/widget-src/Widget.tsx
@@ -16,6 +16,7 @@ function Widget() {
   const [showVersion, setShowVersion] = useSyncedState('showVersion', false);
   const [showBranding, setShowBranding] = useSyncedState('showBradning', true); // fixing the typo messes with branding state on existing widgets
   const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', true);
+  const [showAvatars, setShowAvatars] = useSyncedState('showAvatars', true);
   const [isLocked, setIsLocked] = useSyncedState('isLocked', false);
   // Meta Data
   const [createdDate, setCreatedDate] = useSyncedState('createdDate', 0);
@@ -107,6 +108,12 @@ function Widget() {
         propertyName: 'logTypes',
         isToggled: showLogTypes,
       },
+      {
+        itemType: 'toggle',
+        tooltip: 'Avatars',
+        propertyName: 'avatars',
+        isToggled: showAvatars,
+      },
       {
         itemType: 'toggle',
         tooltip: 'Branding',
@@ -142,6 +149,9 @@ function Widget() {
         case 'logTypes':
           setShowLogTypes(!showLogTypes);
           break;
+        case 'avatars':
+          setShowAvatars(!showAvatars);
+          break;
         case 'isLocked':
           setIsLocked(!isLocked);
           break;
@@ -191,6 +201,7 @@ function Widget() {
           deleteChange={deleteChange}
           setUpdatedDate={setUpdatedDate}
           showTypes={showLogTypes}
+          showAvatars={showAvatars}
           isLocked={isLocked}
         />
       )}

diff --git a/widget-src/components/ChangeLogList.tsx b/widget-src/components/ChangeLogList.tsx
@@ -12,6 +12,7 @@ interface ChangeLogListProps {
   deleteChange: (changeId: string) => void;
   setUpdatedDate: (updatedDate: number) => void;
   showTypes: boolean;
+  showAvatars: boolean;
   isLocked: boolean;
 }
 
@@ -22,6 +23,7 @@ export const ChangeLogList = ({
   deleteChange,
   setUpdatedDate,
   showTypes,
+  showAvatars,
   isLocked,
 }: ChangeLogListProps) => {
   useEffect(() => {
@@ -58,6 +60,7 @@ export const ChangeLogList = ({
               deleteChange={() => deleteChange(changeLogId)}
               setUpdatedDate={setUpdatedDate}
               showTypes={showTypes}
+              showAvatars={showAvatars}
               locked={isLocked}
             />
           );

diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx
@@ -17,6 +17,7 @@ interface ChangeLogRowProps {
   deleteChange: () => void;
   setUpdatedDate: (updatedDate: number) => void;
   showTypes: boolean;
+  showAvatars: boolean;
   locked: boolean;
 }
 
@@ -30,6 +31,7 @@ export const ChangeLogRow = ({
   deleteChange,
   setUpdatedDate,
   showTypes,
+  showAvatars,
   locked,
 }: ChangeLogRowProps) => {
   return (
@@ -42,7 +44,12 @@ export const ChangeLogRow = ({
       width="fill-parent"
     >
       <AutoLayout name="Wrapper" overflow="visible" spacing={GAP.md} width="fill-parent">
-        <User userName={changeLog.user?.name} userPhotoUrl={changeLog.user?.photoUrl} isLastRow={isLastRow} />
+        <User
+          userName={changeLog.user?.name}
+          userPhotoUrl={changeLog.user?.photoUrl}
+          showAvatars={showAvatars}
+          isLastRow={isLastRow}
+        />
         {!!changeLog.state?.editing && !locked ? (
           <ChangeLogEditing
             changeLog={changeLog}

diff --git a/widget-src/components/log/User.tsx b/widget-src/components/log/User.tsx
@@ -6,10 +6,11 @@ const { AutoLayout, Image, Rectangle, Text } = widget;
 interface UserProps {
   userName: string | undefined;
   userPhotoUrl: string | null | undefined;
+  showAvatars: boolean;
   isLastRow: boolean;
 }
 
-export const User = ({ userName, userPhotoUrl, isLastRow }: UserProps) => {
+export const User = ({ userName, userPhotoUrl, showAvatars, isLastRow }: UserProps) => {
   return (
     <AutoLayout
       name="User"
@@ -18,43 +19,41 @@ export const User = ({ userName, userPhotoUrl, isLastRow }: UserProps) => {
       spacing={GAP.none}
       padding={{
         top: PADDING.xl,
+        right: showAvatars ? PADDING.none : PADDING.sm,
         bottom: isLastRow ? PADDING.xxs : PADDING.xl,
-        horizontal: PADDING.none,
+        left: PADDING.none,
       }}
       height="fill-parent"
       horizontalAlignItems="center"
     >
-      <AutoLayout name="Avatar" overflow="visible" spacing={GAP.md} verticalAlignItems="center">
-        {userPhotoUrl ? (
-          <Image name="UserImage" cornerRadius={RADIUS.lg} width={SPACE.sm} height={SPACE.sm} src={userPhotoUrl} />
-        ) : (
-          <Rectangle name="Placeholder" fill={COLOR.grey} cornerRadius={RADIUS.lg} width={SPACE.sm} height={SPACE.sm} />
-        )}
-        <Text
-          name="UserName"
-          hidden={true}
-          fill={COLOR.black}
-          lineHeight={FONT.lineHeight.sm}
-          fontFamily={FONT.family}
-          fontSize={FONT.size.sm}
-          letterSpacing={FONT.letterSpacing.sm}
-          textCase="upper"
-        >
-          {userName || 'Unknown User'}
-        </Text>
-      </AutoLayout>
-      <Rectangle
-        name="Divider"
-        fill={COLOR.grey}
-        cornerRadius={{
-          topLeft: RADIUS.none,
-          topRight: RADIUS.none,
-          bottomRight: RADIUS.md,
-          bottomLeft: RADIUS.md,
-        }}
-        width={SPACE.one}
-        height="fill-parent"
-      />
+      {showAvatars && (
+        <AutoLayout name="Avatar" overflow="visible" spacing={GAP.md} verticalAlignItems="center">
+          {userPhotoUrl ? (
+            <Image name="UserImage" cornerRadius={RADIUS.lg} width={SPACE.sm} height={SPACE.sm} src={userPhotoUrl} />
+          ) : (
+            <Rectangle
+              name="Placeholder"
+              fill={COLOR.grey}
+              cornerRadius={RADIUS.lg}
+              width={SPACE.sm}
+              height={SPACE.sm}
+            />
+          )}
+          <Text
+            name="UserName"
+            hidden={true}
+            fill={COLOR.black}
+            lineHeight={FONT.lineHeight.sm}
+            fontFamily={FONT.family}
+            fontSize={FONT.size.sm}
+            letterSpacing={FONT.letterSpacing.sm}
+            textCase="upper"
+          >
+            {userName || 'Unknown User'}
+          </Text>
+        </AutoLayout>
+      )}
+      <Rectangle name="Divider" fill={COLOR.grey} cornerRadius={RADIUS.md} width={SPACE.one} height="fill-parent" />
     </AutoLayout>
   );
 };