Skip to content

Commit 490516b

Browse files
Amantini1997Amantini1997
committed
ISSUE #5188 - reduce buttons widths
1 parent 8562142 commit 490516b

File tree

6 files changed

+85
-66
lines changed

6 files changed

+85
-66
lines changed

‎frontend/src/v5/ui/components/viewer/cards/cardAction/cardAction.styles.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,13 @@
1616
*/
1717

1818
import styled from 'styled-components';
19-
import { CircleButton } from '@controls/circleButton';
2019

21-
export const CardAction = styled(CircleButton)`
20+
export const CardAction = styled.button`
21+
cursor: pointer;
22+
background-color: transparent;
23+
color: ${({ theme }) => theme.palette.secondary.main};
2224
margin: 0;
25+
height: 32px;
2326
2427
svg {
2528
height: 13px;

‎frontend/src/v5/ui/components/viewer/cards/cardFilters/filterEllipsisMenu/filterEllipsisMenu.component.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/**
2+
* Copyright (C) 2025 3D Repo Ltd
3+
*
4+
* This program is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU Affero General Public License as
6+
* published by the Free Software Foundation, either version 3 of the
7+
* License, or (at your option) any later version.
8+
*
9+
* This program is distributed in the hope that it will be useful,
10+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
* GNU Affero General Public License for more details.
13+
*
14+
* You should have received a copy of the GNU Affero General Public License
15+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
*/
17+
18+
import EllipsisIcon from '@assets/icons/outlined/ellipsis-outlined.svg';
19+
import { CardAction } from '../../cardAction/cardAction.styles';
20+
import { MenuList, Tooltip } from '@mui/material';
21+
import { formatMessage } from '@/v5/services/intl';
22+
import PinIcon from '@assets/icons/filled/ticket_pin-filled.svg';
23+
import { TicketsCardHooksSelectors } from '@/v5/services/selectorsHooks';
24+
import { TicketsCardActionsDispatchers } from '@/v5/services/actionsDispatchers';
25+
import { ActionMenu } from '@controls/actionMenu';
26+
import { SwitchContainer } from './filterEllipsisMenu.styles';
27+
import { EllipsisMenuItem } from '@controls/ellipsisMenu/ellipsisMenuItem';
28+
import TickIcon from '@assets/icons/outlined/tick-outlined.svg';
29+
30+
export const FilterEllipsisMenu = () => {
31+
const isShowingPins = TicketsCardHooksSelectors.selectIsShowingPins();
32+
const onClickShowPins = () => TicketsCardActionsDispatchers.setIsShowingPins(!isShowingPins);
33+
34+
return (
35+
<ActionMenu
36+
TriggerButton={(
37+
<Tooltip title={formatMessage({ id: 'viewer.cards.tickets.moreOptions', defaultMessage: 'More options' })}>
38+
<CardAction>
39+
<EllipsisIcon />
40+
</CardAction>
41+
</Tooltip>
42+
)}
43+
>
44+
<MenuList>
45+
<EllipsisMenuItem
46+
onClick={onClickShowPins}
47+
title={
48+
<SwitchContainer>
49+
<PinIcon />
50+
{formatMessage({ id: 'viewer.cards.tickets.showPins', defaultMessage: 'Show Pins' })}
51+
{isShowingPins && <TickIcon />}
52+
</SwitchContainer>
53+
}
54+
/>
55+
</MenuList>
56+
</ActionMenu>
57+
);
58+
};

‎frontend/src/v5/ui/controls/ellipsisMenu/ellipsisMenuItem/ellipsisMenuItemSwitch.component.tsx renamed to ‎frontend/src/v5/ui/components/viewer/cards/cardFilters/filterEllipsisMenu/filterEllipsisMenu.styles.ts

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright (C) 2024 3D Repo Ltd
2+
* Copyright (C) 2025 3D Repo Ltd
33
*
44
* This program is free software: you can redistribute it and/or modify
55
* it under the terms of the GNU Affero General Public License as
@@ -15,23 +15,17 @@
1515
* along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
*/
1717

18-
import TickIcon from '@assets/icons/outlined/tick-outlined.svg';
19-
import { EllipsisMenuItem, EllipsisMenuItemProps } from './ellipsisMenutItem.component';
20-
import { ReactNode } from 'react';
21-
import { SwitchContainer } from './ellipsisMenuItem.styles';
18+
import styled from 'styled-components';
2219

23-
type EllipsisMenuItemSwitchProps = Omit<EllipsisMenuItemProps, 'to'> & {
24-
icon?: ReactNode,
25-
active: boolean,
26-
};
27-
export const EllipsisMenuItemSwitch = ({ icon, title, active, ...props }: EllipsisMenuItemSwitchProps) => (
28-
<EllipsisMenuItem
29-
title={
30-
<SwitchContainer>
31-
{icon}
32-
{title}
33-
{active && <TickIcon />}
34-
</SwitchContainer>}
35-
{...props}
36-
/>
37-
);
20+
export const SwitchContainer = styled.span`
21+
width: 100%;
22+
height: 32px;
23+
align-content: center;
24+
text-align: left;
25+
display: grid;
26+
grid-template-columns: 26px auto 16px;
27+
svg {
28+
height: 16px;
29+
width: 16px;
30+
}
31+
`;

‎frontend/src/v5/ui/components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.component.tsx

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,33 +30,24 @@ import { CardFilterActionMenu } from '../../filterForm/filterForm.styles';
3030
import { TicketsCardActionsDispatchers } from '@/v5/services/actionsDispatchers';
3131

3232
export const FilterSelection = () => {
33-
const [open, setOpen] = useState(false);
3433
const [selectedFilter, setSelectedFilter] = useState<CardFilter>(null);
3534
const tickets = TicketsCardHooksSelectors.selectCurrentTickets();
3635
const unusedFilters = TicketsCardHooksSelectors.selectAvailableTemplatesFilters();
3736
const showFiltersList = !selectedFilter?.property;
3837
const disabled = !unusedFilters.length || !tickets.length;
3938

40-
const onOpen = () => setOpen(true);
41-
const onClose = () => {
42-
setOpen(false);
43-
setSelectedFilter(null);
44-
};
45-
const onCancel = () => setSelectedFilter(null);
39+
const clearFilter = () => setSelectedFilter(null);
4640

4741
return (
4842
<CardFilterActionMenu
4943
TriggerButton={(
5044
<Tooltip title={formatMessage({ id: 'viewer.card.tickets.addFilter', defaultMessage: 'Add Filter' })}>
51-
<div>
52-
<CardAction disabled={disabled} selected={open}>
53-
<FunnelIcon />
54-
</CardAction>
55-
</div>
45+
<CardAction disabled={disabled}>
46+
<FunnelIcon />
47+
</CardAction>
5648
</Tooltip>
5749
)}
58-
onOpen={onOpen}
59-
onClose={onClose}
50+
onClose={clearFilter}
6051
disabled={disabled}
6152
>
6253
<SearchContextComponent items={unusedFilters}>
@@ -74,7 +65,7 @@ export const FilterSelection = () => {
7465
<FilterForm
7566
{...(selectedFilter || {} as any)}
7667
onSubmit={TicketsCardActionsDispatchers.upsertFilter}
77-
onCancel={onCancel}
68+
onCancel={clearFilter}
7869
/>
7970
</TicketsFiltersModalItem>
8071
</TicketsFiltersModal>

‎frontend/src/v5/ui/controls/ellipsisMenu/ellipsisMenuItem/ellipsisMenuItem.styles.ts

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,3 @@ export const MenuItem = styled(MenuItemComponent)<React.ComponentProps<typeof Li
3939
background-color: ${({ theme }) => theme.palette.base.light};
4040
}
4141
`;
42-
43-
export const SwitchContainer = styled.span`
44-
width: 100%;
45-
height: 32px;
46-
align-content: center;
47-
text-align: left;
48-
display: grid;
49-
grid-template-columns: 26px auto 16px;
50-
svg {
51-
height: 16px;
52-
width: 16px;
53-
}
54-
`;

‎frontend/src/v5/ui/routes/viewer/tickets/ticketsList/ticketsListCard.component.tsx

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,15 @@ import { TicketsList } from './ticketsList.component';
2525
import { NewTicketMenu } from './newTicketMenu/newTicketMenu.component';
2626
import { ViewerParams } from '../../../routes.constants';
2727
import { TicketsCardActionsDispatchers } from '@/v5/services/actionsDispatchers';
28-
import { EllipsisMenu } from '@controls/ellipsisMenu';
2928
import { formatMessage } from '@/v5/services/intl';
30-
import PinIcon from '@assets/icons/filled/ticket_pin-filled.svg';
31-
import { EllipsisMenuItemSwitch } from '@controls/ellipsisMenu/ellipsisMenuItem/ellipsisMenuItemSwitch.component';
3229
import { CardHeader } from '@components/viewer/cards/cardHeader.component';
3330
import { FilterSelection } from '@components/viewer/cards/cardFilters/filtersSelection/tickets/ticketFiltersSelection.component';
31+
import { FilterEllipsisMenu } from '@components/viewer/cards/cardFilters/filterEllipsisMenu/filterEllipsisMenu.component';
3432

3533
export const TicketsListCard = () => {
3634
const { containerOrFederation } = useParams<ViewerParams>();
3735
const tickets = TicketsHooksSelectors.selectTickets(containerOrFederation);
3836
const readOnly = TicketsCardHooksSelectors.selectReadOnly();
39-
const isShowingPins = TicketsCardHooksSelectors.selectIsShowingPins();
40-
41-
const onClickShowPins = () => {
42-
TicketsCardActionsDispatchers.setIsShowingPins(!isShowingPins);
43-
};
4437

4538
return (
4639
<CardContainer>
@@ -51,14 +44,7 @@ export const TicketsListCard = () => {
5144
<>
5245
{!readOnly && (<NewTicketMenu />)}
5346
<FilterSelection />
54-
<EllipsisMenu>
55-
<EllipsisMenuItemSwitch
56-
icon={<PinIcon />}
57-
title={formatMessage({ id: 'viewer.cards.tickets.showPins', defaultMessage: 'Show Pins' })}
58-
active={isShowingPins}
59-
onClick={onClickShowPins}
60-
/>
61-
</EllipsisMenu>
47+
<FilterEllipsisMenu />
6248
</>
6349
)}
6450
/>

0 commit comments

Comments
 (0)