From 0fa04fccae42c532b0729ccea08ec79e0cf3ef36 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 28 Sep 2024 11:39:20 +0200
Subject: [PATCH] fix: button tooltips

---
 frontend/src/components/SelectDialog.jsx      | 67 +++++++++++++------
 frontend/src/containers/Upload.jsx            |  2 +-
 .../src/pages/AssetEditor/AssigneesButton.jsx |  3 +-
 frontend/src/pages/AssetEditor/EditorNav.jsx  | 21 +++---
 4 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/SelectDialog.jsx b/frontend/src/components/SelectDialog.jsx
index 99916b4d..b3da70e0 100644
--- 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
index 6485c4a2..09050750 100644
--- 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
index 044ea90d..e025bc1c 100644
--- 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
index 4eafaac7..14ee113d 100644
--- 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,7 +175,7 @@ const AssetEditorNav = ({
         <>
           <Button
             icon="manage_search"
-            title="Show asset details"
+            tooltip="Show asset details"
             onClick={() => setDetailsVisible(true)}
           />
           <Dropdown
@@ -183,6 +183,7 @@ const AssetEditorNav = ({
             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,7 +206,7 @@ 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}
@@ -213,7 +214,7 @@ const AssetEditorNav = ({
       <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}
       />