You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by pk...@apache.org on 2021/08/11 03:27:11 UTC
[superset] branch master updated: fix: change listivew card layouts
to the new homepage card layout (#16171)
This is an automated email from the ASF dual-hosted git repository.
pkdotson pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new a30d884 fix: change listivew card layouts to the new homepage card layout (#16171)
a30d884 is described below
commit a30d884cfc6186afcecf017ccb56ba8ab6af23f4
Author: Phillip Kelley-Dotson <pk...@yahoo.com>
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 <ev...@preset.io>
---
.../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;
}>`