refactor: adjust date filter position and display

This commit is contained in:
moonrailgun 2023-11-08 00:07:58 +08:00
parent b6846b0419
commit 9d9cdb7354
4 changed files with 13 additions and 7 deletions

View File

@ -105,7 +105,7 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
open={showDropdown}
onOpenChange={(open) => setShowDropdown(open)}
>
<Button size="large">
<Button className="min-w-[150px] text-right" size="large">
<Space>
{label}
<DownOutlined

View File

@ -26,9 +26,10 @@ import { useNavigate } from 'react-router';
export const WebsiteOverview: React.FC<{
website: WebsiteInfo;
showDateFilter?: boolean;
actions?: React.ReactNode;
}> = React.memo((props) => {
const { website, actions } = props;
const { website, showDateFilter = false, actions } = props;
const { startDate, endDate, unit, refresh } = useGlobalRangeDate();
const navigate = useNavigate();
@ -115,9 +116,11 @@ export const WebsiteOverview: React.FC<{
onClick={handleRefresh}
/>
<div>
<DateFilter />
</div>
{showDateFilter && (
<div>
<DateFilter />
</div>
)}
</div>
</div>

View File

@ -12,6 +12,7 @@ import arrayMove from 'array-move';
import SortableList, { SortableItem } from 'react-easy-sort';
import { defaultErrorHandler, defaultSuccessHandler, trpc } from '../api/trpc';
import { Link } from 'react-router-dom';
import { DateFilter } from '../components/DateFilter';
export const Dashboard: React.FC = React.memo(() => {
const workspace = useCurrentWorkspace();
@ -31,7 +32,9 @@ export const Dashboard: React.FC = React.memo(() => {
<div className="py-4">
<div className="h-20 flex items-center">
<div className="text-2xl flex-1">Dashboard</div>
<div>
<div className="flex gap-4">
{!isEditLayout && <DateFilter />}
{websiteList.length !== 0 && (
<Button
icon={<EditOutlined />}

View File

@ -38,7 +38,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
<div className="py-6">
<Card>
<Card.Grid hoverable={false} className="!w-full">
<WebsiteOverview website={website} />
<WebsiteOverview website={website} showDateFilter={true} />
</Card.Grid>
<Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
<MetricsTable