jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui: make date selection smaller in assist stats (#2121)

Browse source
This commit is contained in:
Delirium 2024-04-23 12:00:38 +02:00 • committed by GitHub
parent 7a7ecf8e56
commit 398041de16
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/AssistStats/AssistStats.tsx
View file

@ -214,7 +214,7 @@ function AssistStats() {
<div className={'ml-auto flex items-center gap-2'}>
<UserSearch onUserSelect={onUserSelect} />
<SelectDateRange period={period} onChange={onChangePeriod} right={true} isAnt />
<SelectDateRange period={period} onChange={onChangePeriod} right={true} isAnt small />
<Tooltip title={!sessions || sessions.total === 0 ? 'No data at the moment to export.' : 'Export PDF'}>
<Button
onClick={getPdf2}

9
frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { Button, Space, Typography, Select as AntSelect } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { Select as AntSelect } from 'antd';
import { DATE_RANGE_OPTIONS, CUSTOM_RANGE } from 'App/dateRange';
import Select from 'Shared/Select';
import Period from 'Types/app/period';
@ -17,13 +16,14 @@ interface Props {
right?: boolean;
timezone?: string;
isAnt?: boolean;
small?: boolean;
[x: string]: any;
}
function SelectDateRange(props: Props) {
const [isCustom, setIsCustom] = React.useState(false);
const { right = false, period, disableCustom = false, timezone, ...rest } = props;
const { right = false, period, disableCustom = false, timezone } = props;
let selectedValue = DATE_RANGE_OPTIONS.find((obj: any) => obj.value === period.rangeName);
const options = DATE_RANGE_OPTIONS.filter((obj: any) =>
disableCustom ? obj.value !== CUSTOM_RANGE : true
@ -51,12 +51,13 @@ function SelectDateRange(props: Props) {
const customRange = isCustomRange ? period.rangeFormatted() : '';
if (props.isAnt) {
const onAntUpdate = (val) => {
const onAntUpdate = (val: any) => {
onChange(val);
};
return (
<div className={'relative'}>
<AntSelect
size={props.small ? 'small' : undefined}
options={options}
onChange={onAntUpdate}
style={{ width: 170 }}