Remove CSS override in favor of tooltip wrapper

kobotoolbox · Sep 2, 2023 · 67cf25f · 67cf25f
1 parent 3ca2238
commit 67cf25f
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 141 deletions.
diff --git a/jsapp/js/projects/projectsTable/projectActions.module.scss b/jsapp/js/projects/projectsTable/projectActions.module.scss
@@ -5,19 +5,4 @@
 .root {
   @include mixins.centerRowFlex;
   gap: sizes.$x10;
-
-  // Override .k-button[disabled] styles to allow tooltips on disabled buttons
-  :global .k-button[disabled] {
-    pointer-events: auto; // Allow tooltips on disabled buttons
-    opacity: 1; // Make the tooltips fully opaque
-
-    // Make the button appear non-pressable
-    .k-icon {
-      opacity: 0.5;
-    }
-    cursor: default;
-    &:active {
-      transform: translateY(0); // Don't depress button when clicked
-    }
-  }
 }
diff --git a/jsapp/js/projects/projectsTable/projectBulkActions.tsx b/jsapp/js/projects/projectsTable/projectBulkActions.tsx
@@ -31,38 +31,38 @@ export default function ProjectBulkActions(props: ProjectBulkActionsProps) {
   return (
     <div className={actionsStyles.root}>
       {/* Archive / Unarchive - Bulk action not supported yet */}
-      <Button
-        isDisabled
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='archived'
-        tooltip={t('Archive/Unarchive')}
-        classNames={['right-tooltip']}
-      />
+      <span data-tip={t('Archive/Unarchive')} className='right-tooltip'>
+        <Button
+          isDisabled
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='archived'
+        />
+      </span>
 
       {/* Share - Bulk action not supported yet */}
-      <Button
-        isDisabled
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='user-share'
-        tooltip={t('Share projects')}
-        classNames={['right-tooltip']}
-      />
+      <span data-tip={t('Share projects')} className='right-tooltip'>
+        <Button
+          isDisabled
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='user-share'
+        />
+      </span>
 
       {/* Delete */}
-      <Button
-        isDisabled={!canBulkDelete}
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='trash'
-        tooltip={tooltipForDelete}
-        classNames={['right-tooltip']}
-        onClick={() => setIsDeletePromptOpen(true)}
-      />
+      <span data-tip={tooltipForDelete} className='right-tooltip'>
+        <Button
+          isDisabled={!canBulkDelete}
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='trash'
+          onClick={() => setIsDeletePromptOpen(true)}
+        />
+      </span>
 
       {isDeletePromptOpen && (
         <BulkDeletePrompt

diff --git a/jsapp/js/projects/projectsTable/projectQuickActions.tsx b/jsapp/js/projects/projectsTable/projectQuickActions.tsx
@@ -36,92 +36,95 @@ export default function ProjectQuickActions(props: ProjectQuickActionsProps) {
       {/* Archive / Unarchive */}
       {/* Archive a deployed project */}
       {props.asset.deployment_status === 'deployed' && (
-        <Button
-          isDisabled={
-            !isChangingPossible ||
-            props.asset.asset_type !== ASSET_TYPES.survey.id ||
-            !props.asset.has_deployment
-          }
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='archived'
-          tooltip={t('Archive project')}
-          onClick={() =>
-            archiveAsset(props.asset, (response: DeploymentResponse) => {
-              customViewStore.handleAssetChanged(response.asset);
-            })
-          }
-          classNames={['right-tooltip']}
-        />
+        <span data-tip={t('Archive project')} className='right-tooltip'>
+          <Button
+            isDisabled={
+              !isChangingPossible ||
+              props.asset.asset_type !== ASSET_TYPES.survey.id ||
+              !props.asset.has_deployment
+            }
+            type='bare'
+            color='storm'
+            size='s'
+            startIcon='archived'
+            onClick={() =>
+              archiveAsset(props.asset, (response: DeploymentResponse) => {
+                customViewStore.handleAssetChanged(response.asset);
+              })
+            }
+          />
+        </span>
       )}
       {/* Un-archive a deployed project */}
       {props.asset.deployment_status === 'archived' && (
-        <Button
-          isDisabled={
-            !isChangingPossible ||
-            props.asset.asset_type !== ASSET_TYPES.survey.id ||
-            !props.asset.has_deployment
-          }
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='archived'
-          tooltip={t('Unarchive project')}
-          onClick={() =>
-            unarchiveAsset(props.asset, (response: DeploymentResponse) => {
-              customViewStore.handleAssetChanged(response.asset);
-            })
-          }
-          classNames={['right-tooltip']}
-        />
+        <span data-tip={t('Unarchive project')} className='right-tooltip'>
+          <Button
+            isDisabled={
+              !isChangingPossible ||
+              props.asset.asset_type !== ASSET_TYPES.survey.id ||
+              !props.asset.has_deployment
+            }
+            type='bare'
+            color='storm'
+            size='s'
+            startIcon='archived'
+            onClick={() =>
+              unarchiveAsset(props.asset, (response: DeploymentResponse) => {
+                customViewStore.handleAssetChanged(response.asset);
+              })
+            }
+          />
+        </span>
       )}
       {/* Show tooltip, since drafts can't be archived/unarchived */}
       {props.asset.deployment_status === 'draft' && (
+        <span data-tip={t('Draft project selected')} className='right-tooltip'>
+          <Button
+            isDisabled
+            type='bare'
+            color='storm'
+            size='s'
+            startIcon='archived'
+          />
+        </span>
+      )}
+
+      {/* Share */}
+      <span data-tip={t('Share project')} className='right-tooltip'>
         <Button
-          isDisabled
+          isDisabled={!isManagingPossible}
           type='bare'
           color='storm'
           size='s'
-          startIcon='archived'
-          tooltip={t('Draft project selected')}
-          classNames={['right-tooltip']}
+          startIcon='user-share'
+          onClick={() => manageAssetSharing(props.asset.uid)}
         />
-      )}
-
-      {/* Share */}
-      <Button
-        isDisabled={!isManagingPossible}
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='user-share'
-        tooltip={t('Share project')}
-        onClick={() => manageAssetSharing(props.asset.uid)}
-        classNames={['right-tooltip']}
-      />
+      </span>
 
       {/* Delete */}
-      <Button
-        isDisabled={!isChangingPossible}
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='trash'
-        tooltip={
+      <span
+        data-tip={
           isChangingPossible ? t('Delete 1 project') : t('Delete project')
         }
-        onClick={() =>
-          deleteAsset(
-            props.asset,
-            getAssetDisplayName(props.asset).final,
-            (deletedAssetUid: string) => {
-              customViewStore.handleAssetsDeleted([deletedAssetUid]);
-            }
-          )
-        }
-        classNames={['right-tooltip']}
-      />
+        className='right-tooltip'
+      >
+        <Button
+          isDisabled={!isChangingPossible}
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='trash'
+          onClick={() =>
+            deleteAsset(
+              props.asset,
+              getAssetDisplayName(props.asset).final,
+              (deletedAssetUid: string) => {
+                customViewStore.handleAssetsDeleted([deletedAssetUid]);
+              }
+            )
+          }
+        />
+      </span>
     </div>
   );
 }
diff --git a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx
@@ -10,37 +10,46 @@ export default function ProjectQuickActionsEmpty() {
   return (
     <div className={styles.root}>
       {/* Archive / Unarchive */}
-      <Button
-        isDisabled
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='archived'
-        tooltip={t('Archive/Unarchive') + ' – ' + NO_PROJECT_SELECTED}
-        classNames={['right-tooltip']}
-      />
+      <span
+        data-tip={t('Archive/Unarchive') + ' – ' + NO_PROJECT_SELECTED}
+        className='right-tooltip'
+      >
+        <Button
+          isDisabled
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='archived'
+        />
+      </span>
 
       {/* Share */}
-      <Button
-        isDisabled
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='user-share'
-        tooltip={t('Share project') + ' – ' + NO_PROJECT_SELECTED}
-        classNames={['right-tooltip']}
-      />
+      <span
+        data-tip={t('Share project') + ' – ' + NO_PROJECT_SELECTED}
+        className='right-tooltip'
+      >
+        <Button
+          isDisabled
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='user-share'
+        />
+      </span>
 
       {/* Delete */}
-      <Button
-        isDisabled
-        type='bare'
-        color='storm'
-        size='s'
-        startIcon='trash'
-        tooltip={t('Delete') + ' – ' + NO_PROJECT_SELECTED}
-        classNames={['right-tooltip']}
-      />
+      <span
+        data-tip={t('Delete') + ' – ' + NO_PROJECT_SELECTED}
+        className='right-tooltip'
+      >
+        <Button
+          isDisabled
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='trash'
+        />
+      </span>
     </div>
   );
 }