fix: button tooltips

nebulabroadcast · Sep 28, 2024 · 0fa04fc · 0fa04fc
1 parent a81b6f5
commit 0fa04fc
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 31 deletions.
diff --git a/frontend/src/components/SelectDialog.jsx b/frontend/src/components/SelectDialog.jsx
@@ -35,10 +35,10 @@ BaseOption.defaultProps = {
 const Option = ({ option, selected, onClick }) => {
   return (
     <BaseOption
-      className={{
-        selected,
-        label: option.role === 'label',
-      }}
+      className={clsx(
+        selected && 'selected',
+        option.role === 'label' && 'label'
+      )}
       style={{ paddingLeft: option.level * 15 }}
       onClick={option.role === 'label' ? undefined : onClick}
       title={option.description}
@@ -84,7 +84,13 @@ function filterHierarchy(array, query, currentSelection) {
   return sortByKey(result, 'value')
 }
 
-const SelectDialog = ({ options, onHide, selectionMode, initialValue }) => {
+const SelectDialog = ({
+  options,
+  onHide,
+  selectionMode,
+  initialValue,
+  title,
+}) => {
   const [filter, setFilter] = useState('')
   const [selection, setSelection] = useState({})
 
@@ -136,20 +142,43 @@ const SelectDialog = ({ options, onHide, selectionMode, initialValue }) => {
   }
 
   const header = (
-    <>
-      <InputText
-        placeholder="Filter"
-        value={filter}
-        onChange={setFilter}
-        ref={filterRef}
-        style={{ flexGrow: 1 }}
-      />
-      <Button
-        onClick={() => setFilter('')}
-        icon="backspace"
-        title="Clear filter"
-      />
-    </>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+      }}
+    >
+      {title && (
+        <div style={{ width: '100%' }}>
+          <h3 style={{ padding: 0, marginTop: 0, marginBottom: 10 }}>
+            {title}
+          </h3>
+        </div>
+      )}
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          flexDirection: 'row',
+        }}
+      >
+        <InputText
+          placeholder="Filter"
+          value={filter}
+          onChange={setFilter}
+          ref={filterRef}
+          style={{ flexGrow: 1 }}
+        />
+        <Button
+          onClick={() => setFilter('')}
+          icon="backspace"
+          title="Clear filter"
+        />
+      </div>
+    </div>
   )
 
   const footer = (

diff --git a/frontend/src/containers/Upload.jsx b/frontend/src/containers/Upload.jsx
@@ -231,7 +231,7 @@ const UploadButton = ({ assetData, disabled }) => {
       )}
       <Button
         icon="upload"
-        title="Upload media file"
+        tooltip="Upload media file"
         onClick={() => setDialogVisible(true)}
         disabled={disabled}
       />

diff --git a/frontend/src/pages/AssetEditor/AssigneesButton.jsx b/frontend/src/pages/AssetEditor/AssigneesButton.jsx
@@ -19,6 +19,7 @@ const AssigneesButton = ({ assignees, setAssignees }) => {
     <>
       {dialogVisible && (
         <SelectDialog
+          title="Assignees"
           options={options}
           selectionMode="multiple"
           initialValue={assignees}
@@ -30,7 +31,7 @@ const AssigneesButton = ({ assignees, setAssignees }) => {
       )}
       <Button
         icon="person"
-        title="Assignees"
+        tooltip="Assignees"
         onClick={() => setDialogVisible(true)}
         active={assignees?.length > 0}
       />

diff --git a/frontend/src/pages/AssetEditor/EditorNav.jsx b/frontend/src/pages/AssetEditor/EditorNav.jsx
@@ -150,7 +150,7 @@ const AssetEditorNav = ({
         value={assetData?.duration}
         fps={fps}
         onChange={(val) => setMeta('duration', val)}
-        title="Asset duration"
+        tooltip="Asset duration"
         readOnly={assetData.status || !enabledActions.edit}
       />
 
@@ -159,13 +159,13 @@ const AssetEditorNav = ({
       <Button
         icon="add"
         onClick={onNewAsset}
-        title="Create new asset"
+        tooltip="Create new asset"
         disabled={!enabledActions.create}
       />
       <Button
         icon="content_copy"
         onClick={onCloneAsset}
-        title="Clone asset"
+        tooltip="Clone asset"
         disabled={!enabledActions.clone}
       />
 
@@ -175,14 +175,15 @@ const AssetEditorNav = ({
         <>
           <Button
             icon="manage_search"
-            title="Show asset details"
+            tooltip="Show asset details"
             onClick={() => setDetailsVisible(true)}
           />
           <Dropdown
             icon="settings"
             align="right"
             options={assetActions}
             disabled={!enabledActions.actions}
+            tooltip="Asset actions"
           />
           <AssigneesButton
             assignees={assetData?.assignees || []}
@@ -196,7 +197,7 @@ const AssetEditorNav = ({
           icon="visibility"
           onClick={() => setPreviewVisible(!previewVisible)}
           active={previewVisible}
-          title="Toggle video preview"
+          tooltip="Toggle video preview"
         />
       )}
 
@@ -205,15 +206,15 @@ const AssetEditorNav = ({
       <Button
         icon="flag"
         style={{ color: 'var(--color-text)' }}
-        title="Revert QC state"
+        tooltip="Revert QC state"
         onClick={() => setMeta('qc/state', 0)}
         className={!(assetData && assetData['qc/state']) ? 'active' : ''}
         disabled={!enabledActions.flag}
       />
       <Button
         icon="flag"
         style={{ color: 'var(--color-red)' }}
-        title="Reject asset"
+        tooltip="Reject asset"
         onClick={() => setMeta('qc/state', 3)}
         className={assetData && assetData['qc/state'] === 3 ? 'active' : ''}
         active={assetData && assetData['qc/state'] === 3}
@@ -222,7 +223,7 @@ const AssetEditorNav = ({
       <Button
         icon="flag"
         style={{ color: 'var(--color-green)' }}
-        title="Approve asset"
+        tooltip="Approve asset"
         onClick={() => setMeta('qc/state', 4)}
         className={assetData && assetData['qc/state'] === 4 ? 'active' : ''}
         active={assetData && assetData['qc/state'] === 4}
@@ -236,13 +237,13 @@ const AssetEditorNav = ({
       )}
       <Button
         icon="backspace"
-        title="Discard changes"
+        tooltip="Discard changes"
         onClick={onRevert}
         disabled={!enabledActions.revert}
       />
       <Button
         icon="check"
-        title="Save asset"
+        tooltip="Save asset"
         onClick={() => onSave()}
         disabled={!enabledActions.save}
       />