mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
fix: change listivew card layouts to the new homepage card layout (#16171)
* initial commit * removing CardStylesOverrides (unused) Co-authored-by: Evan Rusackas <evan@preset.io>
This commit is contained in:
parent
9841c78967
commit
a30d884cfc
@ -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) => (
|
||||
|
@ -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' && (
|
||||
|
@ -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'
|
||||
|
@ -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)
|
||||
|
@ -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;
|
||||
}>`
|
||||
|
Loading…
Reference in New Issue
Block a user