From 830e1906257956188c6db38b7ea8941a8a18d6ef Mon Sep 17 00:00:00 2001 From: Philip Edwards Date: Thu, 10 Aug 2023 16:40:38 -0400 Subject: [PATCH 01/11] Wrap to show quick actions on narrow screens --- jsapp/js/projects/projectViews.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jsapp/js/projects/projectViews.module.scss b/jsapp/js/projects/projectViews.module.scss index 70aa0a175b..6945b4a817 100644 --- a/jsapp/js/projects/projectViews.module.scss +++ b/jsapp/js/projects/projectViews.module.scss @@ -9,8 +9,9 @@ .header { @include mixins.centerRowFlex; - gap: sizes.$x30; padding: sizes.$x30 sizes.$x30 sizes.$x40; + gap: sizes.$x10 sizes.$x30; + flex-wrap: wrap; } .actions { From cc85a1ff1b6b1e9042cb34534240f097c1076323 Mon Sep 17 00:00:00 2001 From: Philip Edwards Date: Mon, 21 Aug 2023 18:36:31 -0400 Subject: [PATCH 02/11] Show disabled quick action buttons and tooltips when selection is empty --- jsapp/js/projects/customViewRoute.tsx | 9 +++- jsapp/js/projects/myProjectsRoute.tsx | 7 ++++ .../projectsTable/projectActions.module.scss | 15 +++++++ .../projectQuickActionsEmpty.tsx | 41 +++++++++++++++++++ 4 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx diff --git a/jsapp/js/projects/customViewRoute.tsx b/jsapp/js/projects/customViewRoute.tsx index a2aa37e6e7..43386583df 100644 --- a/jsapp/js/projects/customViewRoute.tsx +++ b/jsapp/js/projects/customViewRoute.tsx @@ -22,6 +22,7 @@ import {toJS} from 'mobx'; import {ROOT_URL} from 'js/constants'; import {fetchPostUrl} from 'js/api'; import ProjectQuickActions from './projectsTable/projectQuickActions'; +import ProjectQuickActionsEmpty from './projectsTable/projectQuickActionsEmpty'; function CustomViewRoute() { const {viewUid} = useParams(); @@ -100,8 +101,14 @@ function CustomViewRoute() { onClick={exportAllData} /> + {selectedAssets.length === 0 && ( +
+ +
+ )} + {selectedAssets.length === 1 && ( -
+
)} diff --git a/jsapp/js/projects/myProjectsRoute.tsx b/jsapp/js/projects/myProjectsRoute.tsx index 4b80cd6a21..ebc8e54f02 100644 --- a/jsapp/js/projects/myProjectsRoute.tsx +++ b/jsapp/js/projects/myProjectsRoute.tsx @@ -19,6 +19,7 @@ import styles from './projectViews.module.scss'; import routeStyles from './myProjectsRoute.module.scss'; import {toJS} from 'mobx'; import {COMMON_QUERIES, ROOT_URL} from 'js/constants'; +import ProjectQuickActionsEmpty from './projectsTable/projectQuickActionsEmpty'; import ProjectQuickActions from './projectsTable/projectQuickActions'; import ProjectBulkActions from './projectsTable/projectBulkActions'; import Dropzone from 'react-dropzone'; @@ -125,6 +126,12 @@ function MyProjectsRoute() { excludedFields={HOME_EXCLUDED_FIELDS} /> + {selectedAssets.length === 0 && ( +
+ +
+ )} + {selectedAssets.length === 1 && (
diff --git a/jsapp/js/projects/projectsTable/projectActions.module.scss b/jsapp/js/projects/projectsTable/projectActions.module.scss index 8c65c8f8cf..22b8dd931f 100644 --- a/jsapp/js/projects/projectsTable/projectActions.module.scss +++ b/jsapp/js/projects/projectsTable/projectActions.module.scss @@ -5,6 +5,21 @@ .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 + } + } } .menu { diff --git a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx new file mode 100644 index 0000000000..c81deac890 --- /dev/null +++ b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import Button from 'js/components/common/button'; +import styles from './projectActions.module.scss'; + +const NO_PROJECT_SELECTED = t('No project selected'); + +export default function ProjectQuickActions() { + return ( +
+
+ ); +} From f8d84e6e49d9ae56a861264f6a2bbbb44558384c Mon Sep 17 00:00:00 2001 From: Philip Edwards Date: Mon, 21 Aug 2023 17:02:43 -0400 Subject: [PATCH 03/11] Remove 'Edit project' and dropdown menu from Quick Actions --- .../projectsTable/projectActions.module.scss | 12 -- .../projectsTable/projectQuickActions.tsx | 134 ------------------ 2 files changed, 146 deletions(-) diff --git a/jsapp/js/projects/projectsTable/projectActions.module.scss b/jsapp/js/projects/projectsTable/projectActions.module.scss index 22b8dd931f..0fc48dbf4b 100644 --- a/jsapp/js/projects/projectsTable/projectActions.module.scss +++ b/jsapp/js/projects/projectsTable/projectActions.module.scss @@ -21,15 +21,3 @@ } } } - -.menu { - @include mixins.floatingRoundedBox; - padding: sizes.$x6; - min-width: sizes.$x180; - - // There is a `isFullWidth` property on Button component, but it also has text - // centering styles on it, so we can't use it. - :global .k-button { - width: 100%; - } -} diff --git a/jsapp/js/projects/projectsTable/projectQuickActions.tsx b/jsapp/js/projects/projectsTable/projectQuickActions.tsx index 4f85ab04c5..b2e64340d2 100644 --- a/jsapp/js/projects/projectsTable/projectQuickActions.tsx +++ b/jsapp/js/projects/projectsTable/projectQuickActions.tsx @@ -6,24 +6,14 @@ import type { } from 'js/dataInterface'; import {ASSET_TYPES} from 'js/constants'; import Button from 'js/components/common/button'; -import KoboDropdown from 'jsapp/js/components/common/koboDropdown'; import styles from './projectActions.module.scss'; import {getAssetDisplayName} from 'jsapp/js/assetUtils'; import { archiveAsset, unarchiveAsset, deleteAsset, - openInFormBuilder, manageAssetSharing, - cloneAsset, - deployAsset, - replaceAssetForm, - manageAssetLanguages, - cloneAssetAsTemplate, - cloneAssetAsSurvey, } from 'jsapp/js/assetQuickActions'; -import {downloadUrl} from 'jsapp/js/utils'; -import type {IconName} from 'jsapp/fonts/k-icons'; import {userCan} from 'js/components/permissions/utils'; import customViewStore from 'js/projects/customViewStore'; @@ -41,19 +31,6 @@ export default function ProjectQuickActions(props: ProjectQuickActionsProps) { return (
-
- } - />
); } From 321d31f0e4226abc5d3da2d352dd8ae394869a68 Mon Sep 17 00:00:00 2001 From: Philip Edwards Date: Mon, 21 Aug 2023 17:56:34 -0400 Subject: [PATCH 04/11] Show an archive tooltip when a draft is selected --- .../projectsTable/projectQuickActions.tsx | 26 ++++++++++++++++--- .../projectQuickActionsEmpty.tsx | 3 +++ 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/jsapp/js/projects/projectsTable/projectQuickActions.tsx b/jsapp/js/projects/projectsTable/projectQuickActions.tsx index b2e64340d2..9aef619d2a 100644 --- a/jsapp/js/projects/projectsTable/projectQuickActions.tsx +++ b/jsapp/js/projects/projectsTable/projectQuickActions.tsx @@ -31,7 +31,9 @@ export default function ProjectQuickActions(props: ProjectQuickActionsProps) { return (
- {props.asset.deployment__active && ( + {/* Archive / Unarchive */} + {/* Archive a deployed project */} + {props.asset.deployment_status === 'deployed' && (
); diff --git a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx index c81deac890..5391a5d59e 100644 --- a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx +++ b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx @@ -7,6 +7,7 @@ const NO_PROJECT_SELECTED = t('No project selected'); export default function ProjectQuickActions() { return (
+ {/* Archive / Unarchive */}
)} + + {selectedAssets.length > 1 && ( +
+ +
+ )} Date: Mon, 21 Aug 2023 19:12:04 -0400 Subject: [PATCH 06/11] Show placeholder bulk actions for Archive and Share Use 'Delete 1 project' for consistency with bulk delete --- .../projectsTable/projectBulkActions.tsx | 23 +++++++++++++++++++ .../projectsTable/projectQuickActions.tsx | 2 +- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/jsapp/js/projects/projectsTable/projectBulkActions.tsx b/jsapp/js/projects/projectsTable/projectBulkActions.tsx index d202f070fe..dd800aab20 100644 --- a/jsapp/js/projects/projectsTable/projectBulkActions.tsx +++ b/jsapp/js/projects/projectsTable/projectBulkActions.tsx @@ -14,6 +14,29 @@ export default function ProjectBulkActions(props: ProjectBulkActionsProps) { return (
+ {/* Archive / Unarchive - Bulk action not supported yet */} +
); } diff --git a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx index 8ccc4eef66..b4062b43dc 100644 --- a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx +++ b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx @@ -10,37 +10,46 @@ export default function ProjectQuickActionsEmpty() { return (
{/* Archive / Unarchive */} -
); } From abd25367cf24638c667928ff3a7b71223415f1e1 Mon Sep 17 00:00:00 2001 From: Leszek Date: Mon, 4 Sep 2023 21:40:24 +0200 Subject: [PATCH 11/11] Fix comments --- jsapp/js/projects/projectsTable/projectBulkActions.tsx | 6 ++++-- jsapp/js/projects/projectsTable/projectQuickActions.tsx | 6 ++++-- .../js/projects/projectsTable/projectQuickActionsEmpty.tsx | 6 ++++-- jsapp/js/projects/projectsTable/projectsTable.tsx | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/jsapp/js/projects/projectsTable/projectBulkActions.tsx b/jsapp/js/projects/projectsTable/projectBulkActions.tsx index d80b3637d4..192b82d52f 100644 --- a/jsapp/js/projects/projectsTable/projectBulkActions.tsx +++ b/jsapp/js/projects/projectsTable/projectBulkActions.tsx @@ -14,8 +14,10 @@ function userCanDeleteAssets(assets: Array) { return assets.every((asset) => userCan('manage_asset', asset)); } -/** "Bulk" Quick Actions buttons. Use these when two or more projects are - * selected in the Project Table. */ +/** + * "Bulk" Quick Actions buttons. Use these when two or more projects are + * selected in the Project Table. + */ export default function ProjectBulkActions(props: ProjectBulkActionsProps) { const [isDeletePromptOpen, setIsDeletePromptOpen] = useState(false); const canBulkDelete = userCanDeleteAssets(props.assets); diff --git a/jsapp/js/projects/projectsTable/projectQuickActions.tsx b/jsapp/js/projects/projectsTable/projectQuickActions.tsx index e48571a142..5ba4d77852 100644 --- a/jsapp/js/projects/projectsTable/projectQuickActions.tsx +++ b/jsapp/js/projects/projectsTable/projectQuickActions.tsx @@ -21,8 +21,10 @@ interface ProjectQuickActionsProps { asset: AssetResponse | ProjectViewAsset; } -/** Quick Actions (Archive, Share, Delete) buttons. Use these when a single - * project is selected in the Project Table. */ +/** + * Quick Actions (Archive, Share, Delete) buttons. Use these when a single + * project is selected in the Project Table. + */ export default function ProjectQuickActions(props: ProjectQuickActionsProps) { // The `userCan` method requires `permissions` property to be present in the // `asset` object. For performance reasons `ProjectViewAsset` doesn't have diff --git a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx index b4062b43dc..224f80bb6d 100644 --- a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx +++ b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx @@ -4,8 +4,10 @@ import styles from './projectActions.module.scss'; const NO_PROJECT_SELECTED = t('No project selected'); -/** Inactive Quick Actions buttons. Show these when zero projects are selected - * in the Project Table. */ +/** + * Inactive Quick Actions buttons. Show these when zero projects are selected + * in the Project Table. + */ export default function ProjectQuickActionsEmpty() { return (
diff --git a/jsapp/js/projects/projectsTable/projectsTable.tsx b/jsapp/js/projects/projectsTable/projectsTable.tsx index 6aeed14dd4..4f309676f5 100644 --- a/jsapp/js/projects/projectsTable/projectsTable.tsx +++ b/jsapp/js/projects/projectsTable/projectsTable.tsx @@ -44,7 +44,7 @@ interface ProjectsTableProps { } /** - * Displays a table of assets. + * Displays a table of assets. Works with `survey` type. */ export default function ProjectsTable(props: ProjectsTableProps) { // We ensure name is always visible: