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.

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

Add motion dot #4210

Open
wants to merge 10 commits into
base: feature/4188-linked-motions
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,14 @@ const displayName = `dashboard.Incorporation.IncorporationForm.LockedIncorporati
export interface Props {
formValues: ValuesType;
activeStageId: Stages;
pendingMotion?: boolean;
}

const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
const LockedIncorporationForm = ({
formValues,
activeStageId,
pendingMotion,
}: Props) => {
const { alternativeName1: altName1, alternativeName2: altName2 } = formValues;
const alternativeNames = useMemo(
() => [
Expand Down Expand Up @@ -136,7 +141,7 @@ const LockedIncorporationForm = ({ formValues, activeStageId }: Props) => {
<div className={styles.description}>{formValues.purpose}</div>
</div>
</FormSection>
<LockedProtectors formValues={formValues} />
<LockedProtectors formValues={formValues} pendingMotion={pendingMotion} />
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,21 @@
animation-name: fadeIn;
animation-duration: 500ms;
}

.dot {
height: 9px;
width: 9px;
border-radius: 50%;
background-color: var(--golden);
}

.labelDotWrapper {
display: flex;
align-items: center;
justify-content: space-between;
}

/* targets toolitp */
.labelDotWrapper > div:last-of-type {
max-width: 220px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,5 @@ export const signOptionWrapper: string;
export const signing: string;
export const mianContactWrapper: string;
export const fadeIn: string;
export const dot: string;
export const labelDotWrapper: string;
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import UserAvatar from '~core/UserAvatar';
import UserMention from '~core/UserMention';
import Tag from '~core/Tag';
import Link from '~core/Link';
import { Tooltip } from '~core/Popover';

import { SignOption, VerificationStatus } from '../constants';

Expand Down Expand Up @@ -54,15 +55,20 @@ export const MSG = defineMessages({
id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.multiple`,
defaultMessage: 'All need to sign',
},
motionTooltip: {
id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.motionTooltip`,
defaultMessage: `There is an active Motion to change this application.`,
},
});

const displayName = `dashboard.Incorporation.IncorporationForm.LockedProtectors`;

export interface Props {
formValues: ValuesType;
pendingMotion?: boolean;
}

const LockedProtectors = ({ formValues }: Props) => {
const LockedProtectors = ({ formValues, pendingMotion }: Props) => {
const signLabel = useMemo(() => {
return formValues.signOption === SignOption.Individual
? MSG.individual
Expand All @@ -73,17 +79,38 @@ const LockedProtectors = ({ formValues }: Props) => {
<>
<FormSection>
<div className={styles.wrapper}>
<div className={styles.protectorsLabelWrapper}>
<div className={styles.label}>
<FormattedMessage {...MSG.protectors} />
<div className={styles.labelDotWrapper}>
<div className={styles.protectorsLabelWrapper}>
<div className={styles.label}>
<FormattedMessage {...MSG.protectors} />
</div>
<QuestionMarkTooltip
tooltipText={MSG.protectorsTooltip}
tooltipTextValues={{
a: (chunks) => <Link to="/">{chunks}</Link>, // link is a mock, add redirection to the correct page
}}
interactive
/>
</div>
<QuestionMarkTooltip
tooltipText={MSG.protectorsTooltip}
tooltipTextValues={{
a: (chunks) => <Link to="/">{chunks}</Link>, // link is a mock, add redirection to the correct page
}}
interactive
/>
{pendingMotion && (
<Tooltip
placement="top-start"
trigger="hover"
content={<FormattedMessage {...MSG.motionTooltip} />}
popperOptions={{
modifiers: [
{
name: 'offset',
options: {
offset: [-2, 6],
},
},
],
}}
>
<div className={styles.dot} />
</Tooltip>
)}
</div>
</div>
</FormSection>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useParams } from 'react-router';
import { Formik } from 'formik';
import classNames from 'classnames';
import { isEmpty } from 'lodash';

import { useColonyFromNameQuery } from '~data/generated';
import { getMainClasses } from '~utils/css';
Expand Down Expand Up @@ -53,7 +54,7 @@ const IncorporationPage = () => {
const notVerified = true; // temporary valule

const openPayDialog = useDialog(IncorporationPaymentDialog);
const [motion, setMotions] = useState<Motion[]>([]);
const [motions, setMotions] = useState<Motion[]>([]);

const handleSubmit = useCallback((values) => {
setFormValues(values);
Expand Down Expand Up @@ -169,6 +170,12 @@ const IncorporationPage = () => {
);
}, [colonyData, openCancelIncorporationDialog]);

const pendingMotion = useMemo(
() =>
motions?.find((motionItem) => motionItem.status === MotionStatus.Pending),
[motions],
);

return isFormEditable ? (
<Formik
initialValues={initialValues} // mock values are used here to fill in the form
Expand Down Expand Up @@ -230,6 +237,7 @@ const IncorporationPage = () => {
<LockedIncorporationForm
formValues={formValues}
activeStageId={activeStageId}
pendingMotion={!isEmpty(pendingMotion)}
/>
)
)}
Expand Down Expand Up @@ -257,7 +265,7 @@ const IncorporationPage = () => {
colony={colonyData?.processedColony}
viewFor={ViewFor.INCORPORATION}
handleCancel={handleCancelIncorporation}
motion={motion}
motion={motions}
/>
)}
</main>
Expand Down