This is an automated email from the ASF dual-hosted git repository. villebro pushed a commit to branch 1.3 in repository https://gitbox.apache.org/repos/asf/superset.git
commit 9dc44a443e43bfab473ae5bc4fcb55c1471e2a60 Author: Phillip Kelley-Dotson <[email protected]> AuthorDate: Tue Aug 10 20:26:24 2021 -0700 fix: change listivew card layouts to the new homepage card layout (#16171) * initial commit * removing CardStylesOverrides (unused) Co-authored-by: Evan Rusackas <[email protected]> (cherry picked from commit a30d884cfc6186afcecf017ccb56ba8ab6af23f4) --- .../src/components/ListView/CardCollection.tsx | 20 ++++++--- .../src/components/ListView/ListView.tsx | 3 ++ .../src/views/CRUD/chart/ChartList.tsx | 49 ++++++++++++---------- .../src/views/CRUD/dashboard/DashboardList.tsx | 49 ++++++++++++---------- superset-frontend/src/views/CRUD/utils.tsx | 6 --- 5 files changed, 70 insertions(+), 57 deletions(-) diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx index a0a0a98..d91498c 100644 --- a/superset-frontend/src/components/ListView/CardCollection.tsx +++ b/superset-frontend/src/components/ListView/CardCollection.tsx @@ -27,12 +27,21 @@ interface CardCollectionProps { prepareRow: TableInstance['prepareRow']; renderCard?: (row: any) => React.ReactNode; rows: TableInstance['rows']; + showThumbnails?: boolean; } -const CardContainer = styled.div` - display: grid; - grid-template-columns: repeat(auto-fit, minmax(459px, 1fr)); - grid-gap: ${({ theme }) => theme.gridUnit * 8}px; +const CardContainer = styled.div<{ showThumbnails?: boolean }>` + ${({ theme, showThumbnails }) => ` + display: grid; + grid-gap: ${theme.gridUnit * 12}px ${theme.gridUnit * 4}px; + grid-template-columns: repeat(auto-fit, 300px); + margin-top: ${theme.gridUnit * -6}px; + padding: ${ + showThumbnails + ? `${theme.gridUnit * 8 + 3}px ${theme.gridUnit * 9}px` + : `${theme.gridUnit * 8 + 1}px ${theme.gridUnit * 9}px` + }; + `} `; const CardWrapper = styled.div` @@ -51,6 +60,7 @@ export default function CardCollection({ prepareRow, renderCard, rows, + showThumbnails, }: CardCollectionProps) { function handleClick( event: React.MouseEvent<HTMLDivElement, MouseEvent>, @@ -65,7 +75,7 @@ export default function CardCollection({ if (!renderCard) return null; return ( - <CardContainer> + <CardContainer showThumbnails={showThumbnails}> {loading && rows.length === 0 && [...new Array(25)].map((e, i) => ( diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index f74e799..195cae2 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -221,6 +221,7 @@ export interface ListViewProps<T extends object = any> { cardSortSelectOptions?: Array<CardSortSelectOption>; defaultViewMode?: ViewModeType; highlightRowId?: number; + showThumbnails?: boolean; emptyState?: { message?: string; slot?: React.ReactNode; @@ -242,6 +243,7 @@ function ListView<T extends object = any>({ disableBulkSelect = () => {}, renderBulkSelectCopy = selected => t('%s Selected', selected.length), renderCard, + showThumbnails, cardSortSelectOptions, defaultViewMode = 'card', highlightRowId, @@ -376,6 +378,7 @@ function ListView<T extends object = any>({ renderCard={renderCard} rows={rows} loading={loading} + showThumbnails={showThumbnails} /> )} {viewMode === 'table' && ( diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx index d7b5bf1..6393616 100644 --- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx +++ b/superset-frontend/src/views/CRUD/chart/ChartList.tsx @@ -31,7 +31,6 @@ import { createErrorHandler, createFetchRelated, handleChartDelete, - CardStylesOverrides, } from 'src/views/CRUD/utils'; import { useChartEditModal, @@ -161,6 +160,9 @@ function ChartList(props: ChartListProps) { const [passwordFields, setPasswordFields] = useState<string[]>([]); const [preparingExport, setPreparingExport] = useState<boolean>(false); + const { userId } = props.user; + const userKey = getFromLocalStorage(userId.toString(), null); + const openChartImportModal = () => { showImportModal(true); }; @@ -543,29 +545,25 @@ function ChartList(props: ChartListProps) { ]; function renderCard(chart: Chart) { - const { userId } = props.user; - const userKey = getFromLocalStorage(userId.toString(), null); return ( - <CardStylesOverrides> - <ChartCard - chart={chart} - showThumbnails={ - userKey - ? userKey.thumbnails - : isFeatureEnabled(FeatureFlag.THUMBNAILS) - } - hasPerm={hasPerm} - openChartEditModal={openChartEditModal} - bulkSelectEnabled={bulkSelectEnabled} - addDangerToast={addDangerToast} - addSuccessToast={addSuccessToast} - refreshData={refreshData} - loading={loading} - favoriteStatus={favoriteStatus[chart.id]} - saveFavoriteStatus={saveFavoriteStatus} - handleBulkChartExport={handleBulkChartExport} - /> - </CardStylesOverrides> + <ChartCard + chart={chart} + showThumbnails={ + userKey + ? userKey.thumbnails + : isFeatureEnabled(FeatureFlag.THUMBNAILS) + } + hasPerm={hasPerm} + openChartEditModal={openChartEditModal} + bulkSelectEnabled={bulkSelectEnabled} + addDangerToast={addDangerToast} + addSuccessToast={addSuccessToast} + refreshData={refreshData} + loading={loading} + favoriteStatus={favoriteStatus[chart.id]} + saveFavoriteStatus={saveFavoriteStatus} + handleBulkChartExport={handleBulkChartExport} + /> ); } const subMenuButtons: SubMenuProps['buttons'] = []; @@ -655,6 +653,11 @@ function ChartList(props: ChartListProps) { loading={loading} pageSize={PAGE_SIZE} renderCard={renderCard} + showThumbnails={ + userKey + ? userKey.thumbnails + : isFeatureEnabled(FeatureFlag.THUMBNAILS) + } defaultViewMode={ isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW) ? 'card' diff --git a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx b/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx index d89c520..9c2bd84 100644 --- a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx +++ b/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx @@ -25,7 +25,6 @@ import { createFetchRelated, createErrorHandler, handleDashboardDelete, - CardStylesOverrides, } from 'src/views/CRUD/utils'; import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks'; import ConfirmStatusChange from 'src/components/ConfirmStatusChange'; @@ -140,6 +139,9 @@ function DashboardList(props: DashboardListProps) { refreshData(); }; + const { userId } = props.user; + const userKey = getFromLocalStorage(userId.toString(), null); + const canCreate = hasPerm('can_write'); const canEdit = hasPerm('can_write'); const canDelete = hasPerm('can_write'); @@ -499,29 +501,25 @@ function DashboardList(props: DashboardListProps) { ]; function renderCard(dashboard: Dashboard) { - const { userId } = props.user; - const userKey = getFromLocalStorage(userId.toString(), null); return ( - <CardStylesOverrides> - <DashboardCard - dashboard={dashboard} - hasPerm={hasPerm} - bulkSelectEnabled={bulkSelectEnabled} - refreshData={refreshData} - showThumbnails={ - userKey - ? userKey.thumbnails - : isFeatureEnabled(FeatureFlag.THUMBNAILS) - } - loading={loading} - addDangerToast={addDangerToast} - addSuccessToast={addSuccessToast} - openDashboardEditModal={openDashboardEditModal} - saveFavoriteStatus={saveFavoriteStatus} - favoriteStatus={favoriteStatus[dashboard.id]} - handleBulkDashboardExport={handleBulkDashboardExport} - /> - </CardStylesOverrides> + <DashboardCard + dashboard={dashboard} + hasPerm={hasPerm} + bulkSelectEnabled={bulkSelectEnabled} + refreshData={refreshData} + showThumbnails={ + userKey + ? userKey.thumbnails + : isFeatureEnabled(FeatureFlag.THUMBNAILS) + } + loading={loading} + addDangerToast={addDangerToast} + addSuccessToast={addSuccessToast} + openDashboardEditModal={openDashboardEditModal} + saveFavoriteStatus={saveFavoriteStatus} + favoriteStatus={favoriteStatus[dashboard.id]} + handleBulkDashboardExport={handleBulkDashboardExport} + /> ); } @@ -614,6 +612,11 @@ function DashboardList(props: DashboardListProps) { initialSort={initialSort} loading={loading} pageSize={PAGE_SIZE} + showThumbnails={ + userKey + ? userKey.thumbnails + : isFeatureEnabled(FeatureFlag.THUMBNAILS) + } renderCard={renderCard} defaultViewMode={ isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW) diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx index 54d10e7..08535e1 100644 --- a/superset-frontend/src/views/CRUD/utils.tsx +++ b/superset-frontend/src/views/CRUD/utils.tsx @@ -284,12 +284,6 @@ export const loadingCardCount = 5; const breakpoints = [576, 768, 992, 1200]; export const mq = breakpoints.map(bp => `@media (max-width: ${bp}px)`); -export const CardStylesOverrides = styled.div` - .ant-card-cover > div { - height: 264px; - } -`; - export const CardContainer = styled.div<{ showThumbnails?: boolean | undefined; }>`
