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

Fix and use the description on fields #4189

Merged
merged 2 commits into from
Oct 14, 2023
Merged

Fix and use the description on fields #4189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7259b6
Fix the description styling on fields
ivarnakken Oct 13, 2023
591b559
Refactor fields to use `description` prop
ivarnakken Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/components/Form/Field.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@
font-size: var(--font-size-lg);
}

.description {
margin-left: 7px;
}

.required {
color: var(--danger-color);
font-weight: 600;
Expand Down
21 changes: 6 additions & 15 deletions app/components/Form/Field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function createField(Component: ComponentType<any>, options?: Options) {
const inlineLabel = options?.inlineLabel;

const labelComponent = (
<Flex>
<Flex alignItems="center">
{label && (
<div
style={{
Expand All @@ -123,20 +123,11 @@ export function createField(Component: ComponentType<any>, options?: Options) {
</div>
)}
{description && (
<Tooltip
style={{
display: 'inline-block',
}}
content={description}
>
<div
style={{
marginLeft: '10px',
}}
>
<Icon size={32} name="help" />
</div>
</Tooltip>
<Flex className={styles.description}>
<Tooltip content={description}>
<Icon size={18} name="help-circle-outline" />
</Tooltip>
</Flex>
)}
{required && <span className={styles.required}>*</span>}
</Flex>
Expand Down
14 changes: 6 additions & 8 deletions app/components/Form/ObjectPermissions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { SelectInput, CheckBox } from 'app/components/Form';
import Tooltip from 'app/components/Tooltip';
import type { PublicGroup } from 'app/store/models/Group';

/*
Expand Down Expand Up @@ -33,13 +32,12 @@ const ObjectPermissions = ({
}) => {
return [
requireAuth && (
<Tooltip content="Gi alle brukere lesetilgang. Dette inkluderer også brukere som ikke har logget inn.">
<CheckBox.Field
inverted
{...requireAuth}
label="Åpen for alle - offentlig på nettet."
/>
</Tooltip>
<CheckBox.Field
description="Gi alle brukere lesetilgang. Dette inkluderer også brukere som ikke har logget inn."
inverted
{...requireAuth}
label="Åpen for alle - offentlig på nettet"
/>
),
canEditGroups && (
<SelectInput.AutocompleteField
Expand Down
31 changes: 14 additions & 17 deletions app/components/GroupForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
CheckBox,
legoForm,
} from 'app/components/Form';
import Tooltip from 'app/components/Tooltip';
import type { DetailedGroup } from 'app/store/models/Group';
import { createValidator, required } from 'app/utils/validation';
import styles from './index.css';
Expand Down Expand Up @@ -53,22 +52,20 @@ function GroupForm({
name="contactEmail"
component={TextInput.Field}
/>
<Tooltip content="Skal gruppen vises på brukerprofilen til folk?">
<Field
label="Vis badge på brukerprofiler"
name="showBadge"
component={CheckBox.Field}
normalize={(v) => !!v}
/>
</Tooltip>
<Tooltip content="Er dette en aktiv gruppe?">
<Field
label="Aktiv gruppe"
name="active"
component={CheckBox.Field}
normalize={(v) => !!v}
/>
</Tooltip>
<Field
label="Vis badge på brukerprofiler"
description="Skal gruppen vises på brukerprofilen til folk?"
name="showBadge"
component={CheckBox.Field}
normalize={(v) => !!v}
/>
<Field
label="Aktiv gruppe"
description="Er dette en aktiv gruppe?"
name="active"
component={CheckBox.Field}
normalize={(v) => !!v}
/>
<Field
label="Beskrivelse"
placeholder="Vil du strikke din egen lue? Eller har du allerede […]"
Expand Down
35 changes: 16 additions & 19 deletions app/routes/admin/email/components/EmailListEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
handleSubmissionError,
legoForm,
} from 'app/components/Form';
import Tooltip from 'app/components/Tooltip';
import { roleOptions } from 'app/utils/constants';
import { createValidator, required, EMAIL_REGEX } from 'app/utils/validation';

Expand Down Expand Up @@ -62,25 +61,23 @@ const EmailListEditor = ({ submitting, handleSubmit, emailListId }: Props) => (
component={SelectInput.Field}
/>

<Tooltip content="Når denne er aktivert vil kun brukere med aktiv @abakus.no-adresse få e-post fra denne listen">
<Field
label="Kun for for brukere med internmail (@abakus.no)"
name="requireInternalAddress"
component={CheckBox.Field}
normalize={(v) => !!v}
/>
</Tooltip>
<Field
label="Kun for for brukere med internmail (@abakus.no)"
description="Når denne er aktivert vil kun brukere med aktiv @abakus.no-adresse få e-post fra denne listen"
name="requireInternalAddress"
component={CheckBox.Field}
normalize={(v) => !!v}
/>

<Tooltip content="Her kan du legge til e-postene til de som skal ha mailer fra gruppemailen, men ikke er medlem av abakus">
<Field
label="E-poster for medlemmer utenfor abakus"
name="additionalEmails"
placeholder="Skriv inn e-post her"
component={SelectInput.Field}
isMulti
tags
/>
</Tooltip>
<Field
label="E-poster for medlemmer utenfor abakus"
description="Her kan du legge til e-postene til de som skal ha mailer fra gruppemailen, men ikke er medlem av abakus"
name="additionalEmails"
placeholder="Skriv inn e-post her"
component={SelectInput.Field}
isMulti
tags
/>
<Button submit disabled={submitting}>
{emailListId ? 'Oppdater e-postliste' : 'Lag e-postliste'}
</Button>
Expand Down
17 changes: 2 additions & 15 deletions app/routes/articles/components/ArticleEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import Icon from 'app/components/Icon';
import Flex from 'app/components/Layout/Flex';
import { ConfirmModal } from 'app/components/Modal/ConfirmModal';
import NavigationTab from 'app/components/NavigationTab';
import Tooltip from 'app/components/Tooltip';
import type { EditingEvent } from 'app/routes/events/utils';
import type { DetailedArticle } from 'app/store/models/Article';
import type { CurrentUser } from 'app/store/models/User';
Expand Down Expand Up @@ -75,20 +74,8 @@ const ArticleEditor = ({
<Flex>
<Field
name="youtubeUrl"
label={
<Flex>
<div>Erstatt cover-bildet med video fra YouTube</div>
<div
style={{
marginLeft: '5px',
}}
>
<Tooltip content="Valgfritt felt. Videoen erstatter ikke coveret i listen over artikler.">
<Icon name="information-circle-outline" size={20} />
</Tooltip>
</div>
</Flex>
}
label="Erstatt cover-bildet med video fra YouTube"
description="Videoen erstatter ikke coveret i listen over artikler"
placeholder="https://www.youtube.com/watch?v=bLHL75H_VEM&t=5"
component={TextInput.Field}
/>
Expand Down