Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI/improvements #4036

Merged
merged 9 commits into from
May 27, 2024
Merged

UI/improvements #4036

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2784ebe
Removed repeated styles and improved padding
FuriousLlama May 22, 2024
201c4d6
Updated input to match styled mocups and icons
FuriousLlama May 22, 2024
f304ced
Updated Styling for multiselect and contact input
FuriousLlama May 22, 2024
14b5cfb
linting
FuriousLlama May 22, 2024
ea5901b
Regenerated snaps
FuriousLlama May 22, 2024
30e6e8c
Updated remove button alignment on project subform
FuriousLlama May 22, 2024
d71ffa3
Merge branch 'dev' into ui/improvements
FuriousLlama May 22, 2024
b321ffb
merge
FuriousLlama May 23, 2024
358edd7
Merge branch 'dev' into ui/improvements
FuriousLlama May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 40 additions & 18 deletions source/frontend/src/components/common/form/ContactInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import styled from 'styled-components';
import { Button } from '@/components/common/buttons/Button';
import { Input } from '@/components/common/form';
import { IContactSearchResult } from '@/interfaces';
import { isValidId } from '@/utils';
import { exists, isValidId } from '@/utils';
import { formatNames } from '@/utils/personUtils';

import { LinkButton } from '../buttons';
Expand Down Expand Up @@ -66,17 +66,26 @@ export const ContactInput: React.FC<React.PropsWithChildren<ContactInputProps>>
<TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
<Row>
<Col>
<StyledDiv className={error ? 'is-invalid' : ''}>
<StyledInputLikeDiv
className={error ? 'is-invalid' : ''}
$hasContact={exists(contactInfo)}
onClick={() => {
if (!exists(contactInfo)) {
setShowContactManager(true);
}
}}
>
{text}
<StyledRemoveLinkButton
onClick={() => {
onClear();
}}
disabled={contactInfo === undefined}
>
<MdClose size="2rem" title="remove" />
</StyledRemoveLinkButton>
</StyledDiv>
{exists(contactInfo) && (
<StyledRemoveLinkButton
onClick={() => {
onClear();
}}
>
<MdClose size="2rem" title="remove" />
</StyledRemoveLinkButton>
)}
</StyledInputLikeDiv>
<Input
field={field + '.id'}
placeholder="Select from Contacts"
Expand All @@ -100,31 +109,44 @@ export const ContactInput: React.FC<React.PropsWithChildren<ContactInputProps>>
);
};

const StyledDiv = styled.div`
const StyledInputLikeDiv = styled.div<{ $hasContact: boolean }>`
position: relative;
border-radius: 0.3rem;
padding: 0.6rem;
padding-right: 2.1rem;
min-height: 2.5em;
border-radius: 0.4rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-left: 1.2rem;
padding-right: 2.8rem;

background-image: none;
color: ${props => props.theme.bcTokens.typographyColorSecondary};
color: ${props =>
props.$hasContact
? props.theme.bcTokens.typographyColorSecondary
: props.theme.bcTokens.typographyColorPlaceholder};
border: ${props => props.theme.css.borderOutlineColor} solid 0.1rem;
&.is-invalid {
border: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault} solid 0.1rem;
}

cursor: ${props => (props.$hasContact ? 'default' : 'pointer')};
`;

export const StyledRemoveLinkButton = styled(LinkButton)`
&&.btn {
position: absolute;
top: calc(50% - 1.4rem);
right: 0.4rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-right: 1.2rem;
height: 1.6rem;
right: 0rem;

color: ${props => props.theme.bcTokens.iconsColorDisabled};
text-decoration: none;
line-height: unset;
.text {
display: none;
}

&:hover,
&:active,
&:focus {
Expand Down
60 changes: 42 additions & 18 deletions source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
} from '@/components/contact/ContactManagerModal';
import { formatContactSearchResult } from '@/features/contacts/contactUtils';
import { IContactSearchResult } from '@/interfaces';
import { isValidString } from '@/utils';

import { DisplayError } from '../DisplayError';
import { Input } from '../Input';
Expand Down Expand Up @@ -59,18 +60,27 @@ const ContactInputView: React.FunctionComponent<IContactInputViewProps> = ({
<TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
<Row>
<Col>
<StyledDiv className={!!error && !!touch ? 'is-invalid' : ''}>
<StyledInputLikeDiv
className={!!error && !!touch ? 'is-invalid' : ''}
$hasContact={isValidString(contactInfo?.id)}
onClick={() => {
if (!isValidString(contactInfo?.id)) {
setShowContactManager(true);
}
}}
>
{text}
<StyledRemoveLinkButton
onClick={() => {
onClear();
}}
disabled={contactInfo === undefined}
title="remove"
>
<MdClose size="2rem" />
</StyledRemoveLinkButton>
</StyledDiv>
{isValidString(contactInfo?.id) && (
<StyledRemoveLinkButton
onClick={() => {
onClear();
}}
title="remove"
>
<MdClose size="2rem" title="remove" />
</StyledRemoveLinkButton>
)}
</StyledInputLikeDiv>
<Input
field={field + '.id'}
placeholder="Select from Contacts"
Expand Down Expand Up @@ -109,30 +119,44 @@ const ContactInputView: React.FunctionComponent<IContactInputViewProps> = ({

export default ContactInputView;

const StyledDiv = styled.div`
background: none;
const StyledInputLikeDiv = styled.div<{ $hasContact: boolean }>`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I get this name, isn't this just a div with a classname pointing to a styled components class? why is this "like" a div?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes it clear that that div is imitiating the look of an input.

position: relative;
border-radius: 0.3rem;
padding: 0.6rem;
padding-right: 2.1rem;
color: ${props => props.theme.bcTokens.typographyColorSecondary};
border-radius: 0.4rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-left: 1.2rem;
padding-right: 2.8rem;

background-image: none;
color: ${props =>
props.$hasContact
? props.theme.bcTokens.typographyColorSecondary
: props.theme.bcTokens.typographyColorPlaceholder};
border: ${props => props.theme.css.borderOutlineColor} solid 0.1rem;
&.is-invalid {
border: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault} solid 0.1rem;
}

cursor: ${props => (props.$hasContact ? 'default' : 'pointer')};
`;

const StyledRemoveLinkButton = styled(LinkButton)`
&&.btn {
position: absolute;
top: calc(50% - 1.4rem);
right: 0.4rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-right: 1.2rem;
height: 1.6rem;
right: 0rem;

color: ${props => props.theme.bcTokens.iconsColorDisabled};
text-decoration: none;
line-height: unset;
.text {
display: none;
}

&:hover,
&:active,
&:focus {
Expand Down
3 changes: 3 additions & 0 deletions source/frontend/src/components/common/form/Multiselect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,9 @@ const defaultStyle = {
searchBox: {
background: 'white',
border: '1px solid #606060',
paddingTop: '0.8rem',
paddingBottom: '0.8rem',
paddingLeft: '1.2rem',
},
};

Expand Down
3 changes: 3 additions & 0 deletions ...e/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,9 @@ const UpdateSummaryForm: React.FunctionComponent<IUpdateSummaryFormProps> = prop
searchBox: {
background: 'white',
border: '1px solid #606060',
paddingTop: '0.8rem',
paddingBottom: '0.8rem',
paddingLeft: '1.2rem',
},
}}
/>
Expand Down