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

style: update multiple choice input node style #1954

Merged
merged 7 commits into from
Feb 13, 2020
Merged

style: update multiple choice input node style #1954

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d39b9d7
fix ui bug about choice input
alanlong9278 Feb 5, 2020
2cb6099
adjust
alanlong9278 Feb 5, 2020
dec3754
Merge branch 'master' into julong/choiceinput
a-b-r-o-w-n Feb 5, 2020
cee0f8e
Merge branch 'master' into julong/choiceinput
alanlong9278 Feb 7, 2020
9e6c2cb
fix test error
alanlong9278 Feb 10, 2020
a92dfda
Merge branch 'master' into julong/choiceinput
alanlong9278 Feb 12, 2020
a0cad89
Merge branch 'master' into julong/choiceinput
cwhitten Feb 12, 2020
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
4 changes: 2 additions & 2 deletions Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const ChoiceInputChoices = ({ choices }) => {
}

return (
<div data-testid="ChoiceInput" css={{ padding: '0 0 8px 45px' }}>
<div data-testid="ChoiceInput" css={{ padding: '0 0 16px 29px' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

can this value be calculated from some constants?

Copy link

Choose a reason for hiding this comment

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

@yeze322 I'm not sure how to answer that... the goal is that ideally things are all multiples of 4.

I'm not a math guy, but happy to try and help if there is some sort of ratio you want to make that seems like a good idea... or if switching to SVG files makes life easier for you?

Copy link
Contributor

Choose a reason for hiding this comment

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

@DesignPolice Thanks Marc! I think your design has already covered those pixel numbers. Programmatically, we need some code optimization to align to your design.

{choices.map(({ value }, index) => {
if (index < 3) {
return (
Expand Down Expand Up @@ -60,7 +60,7 @@ export const ChoiceInputChoices = ({ choices }) => {
textAlign: 'center',
fontFamily: 'Segoe UI',
fontSize: '12px',
lineHeight: '19px',
lineHeight: '14px',
boxSizing: 'border-box',
}}
>
Expand Down
5 changes: 3 additions & 2 deletions Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,12 @@ export const TriggerSize = InitNodeSize;
export const TerminatorSize = { width: 14, height: 14 };

export const ChoiceInputSize = {
width: 145,
width: 155,
height: 22,
};

export const ChoiceInputMarginTop = 5;
export const ChoiceInputMarginTop = 8;
export const ChoiceInputMarginBottom = 10;

export const EventNodeSize = {
width: 240,
Expand Down
5 changes: 4 additions & 1 deletion Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
LoopIconSize,
ChoiceInputSize,
ChoiceInputMarginTop,
ChoiceInputMarginBottom,
IconBrickSize,
} from '../constants/ElementSizes';
import { transformIfCondtion } from '../transformers/transformIfCondition';
Expand Down Expand Up @@ -64,7 +65,9 @@ export function measureChoiceInputDetailBoundary(data): Boundary {
const height =
InitNodeSize.height +
(data.choices && Array.isArray(data.choices)
? (data.choices.length <= 4 ? data.choices.length : 4) * (ChoiceInputSize.height + ChoiceInputMarginTop)
? data.choices.length < 4
? data.choices.length * (ChoiceInputSize.height + ChoiceInputMarginTop) + ChoiceInputMarginBottom
: 4 * (ChoiceInputSize.height + ChoiceInputMarginTop)
: 0);
return new Boundary(width, height);
}
Expand Down