feat: Improve design with ListItem

cozy · Nov 16, 2023 · 938bd89 · 938bd89
1 parent 3d35d03
commit 938bd89
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/packages/cozy-client/src/devtools/Flags/FlagItem.jsx b/packages/cozy-client/src/devtools/Flags/FlagItem.jsx
@@ -5,23 +5,53 @@ import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import flagUtils from 'cozy-flags'
 
 const FlagItem = ({ flag, onEdit, onTrash }) => {
+  const handleCheckboxChange = e => {
+    flagUtils(flag.name, e.target.checked)
+    location.reload()
+  }
+
   return (
-    <div key={flag.name}>
-      {flag.humanName} :
-      {typeof flag.value === 'object' ? (
-        <ObjectInspector data={flag.value} />
-      ) : (
-        flag.humanValue
-      )}
-      <IconButton size="small" onClick={() => onEdit(flag)}>
-        <Icon icon={PenIcon} />
-      </IconButton>
-      <IconButton size="small" onClick={() => onTrash(flag)}>
-        <Icon icon={TrashIcon} />
-      </IconButton>
-    </div>
+    <ListItem size="small">
+      <ListItemIcon>
+        {flag.type === 'boolean' ? (
+          <Checkbox
+            size="small"
+            checked={flag.value}
+            onChange={handleCheckboxChange}
+          />
+        ) : null}
+      </ListItemIcon>
+      <ListItemText
+        primary={flag.humanName}
+        secondary={
+          flag.type === 'object' ? (
+            <ObjectInspector data={flag.value} />
+          ) : flag.type !== 'boolean' ? (
+            flag.humanValue
+          ) : null
+        }
+      />
+      <ListItemSecondaryAction>
+        <IconButton size="small" onClick={() => onEdit(flag)}>
+          <Icon icon={PenIcon} />
+        </IconButton>
+        <IconButton
+          className="u-ml-1"
+          size="small"
+          onClick={() => onTrash(flag)}
+        >
+          <Icon icon={TrashIcon} />
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
   )
 }
 

diff --git a/packages/cozy-client/src/devtools/Flags/Flags.jsx b/packages/cozy-client/src/devtools/Flags/Flags.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import List from 'cozy-ui/transpiled/react/List'
 
 import PanelContent from '../PanelContent'
 import { FlagEdit } from './FlagEdit'
@@ -26,14 +27,16 @@ const Flags = () => {
   return (
     <PanelContent>
       <Typography variant="subtitle1">Flags</Typography>
-      {flags.map(flag => (
-        <FlagItem
-          key={flag.key}
-          flag={flag}
-          onEdit={handleEdit}
-          onTrash={handleTrash}
-        />
-      ))}
+      <List dense className="u-maw-6">
+        {flags.map(flag => (
+          <FlagItem
+            key={flag.key}
+            flag={flag}
+            onEdit={handleEdit}
+            onTrash={handleTrash}
+          />
+        ))}
+      </List>
       <FlagEdit flag={edited} />
     </PanelContent>
   )

diff --git a/packages/cozy-client/src/devtools/Flags/helpers.js b/packages/cozy-client/src/devtools/Flags/helpers.js
@@ -14,6 +14,7 @@ export const computeFlags = () => {
     return {
       key: `flag__${name}`,
       name,
+      type: typeof value,
       humanName: human(name),
       value,
       humanValue: makeHumanValue(value)