Skip to content

feat: update designer to enhance overall view and resize fieldwrapper and other elements #2201

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

Draft
ranisa-gupta16 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat: update designer to enhance overall view and resize fieldwrapper and other elements #2201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 web/src/designer/components/Fields/SimpleFieldWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ export const SimpleFieldWrapper = ({
sx={{
display: 'flex',
flexDirection: 'column',
gap: 0.75,
gap: 0.5,
width: '100%',
minWidth: 0,
}}
>
<Typography
component="h4"
sx={{
fontSize: '1rem',
fontSize: '0.8125rem',
fontWeight: 700,
color: 'text.primary',
lineHeight: 1.25,
Expand Down
22 changes: 11 additions & 11 deletions web/src/designer/components/design-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,15 @@ export const DesignPanel = () => {
borderBottom: 'none',
borderTopLeftRadius: '10px',
borderTopRightRadius: '10px',
marginRight: '0.5em',
minHeight: 48,
minWidth: {xs: 110, sm: 130, md: 150},
maxWidth: {xs: 200, sm: 220, md: 260},
paddingX: {xs: 1, sm: 1.5},
paddingY: 1,
marginRight: '0.35em',
minHeight: 24,
minWidth: {xs: 90, sm: 105, md: 120},
maxWidth: {xs: 170, sm: 185, md: 205},
paddingX: {xs: 0.75, sm: 1.15},
paddingY: 0.25,
textTransform: 'uppercase',
fontWeight: 600,
fontSize: '0.72rem',
fontSize: '0.68rem',
lineHeight: 1.2,
whiteSpace: 'normal',
textAlign: 'center',
Expand Down Expand Up @@ -337,8 +337,8 @@ export const DesignPanel = () => {
<TabContext value={tabIndex}>
<Box
sx={{
mb: 1.25,
mt: 1,
mb: 0,
mt: 0.25,
display: 'flex',
alignItems: 'center',
gap: 1,
Expand Down Expand Up @@ -404,7 +404,7 @@ export const DesignPanel = () => {
ref={setFormToolbarSlot}
sx={{
minHeight: 0,
'&:not(:empty)': {mb: 0.5},
'&:not(:empty)': {mb: 0.25},
}}
/>

Expand All @@ -417,7 +417,7 @@ export const DesignPanel = () => {
variant="scrollable"
scrollButtons={false}
sx={{
minHeight: 48,
minHeight: 24,
ml: 0,
pl: 0,
'& .MuiTabs-scroller': {
Expand Down
31 changes: 24 additions & 7 deletions web/src/designer/components/designer-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import {SxProps, Theme} from '@mui/material';
import {alpha} from '@mui/material/styles';

const DESIGNER_GROUP_HEADING_FONT_SIZE = '1.125rem';
const DESIGNER_CONTROL_FONT_SIZE = '0.8125rem';
const DESIGNER_CONTROL_ICON_SIZE = '1rem';

export const designerHeadingRowSx: SxProps<Theme> = {
display: 'flex',
alignItems: 'center',
Expand All @@ -10,14 +14,15 @@ export const designerHeadingRowSx: SxProps<Theme> = {
export const designerHeadingTextSx: SxProps<Theme> = {
color: 'text.primary',
fontWeight: 700,
fontSize: DESIGNER_GROUP_HEADING_FONT_SIZE,
lineHeight: 1.1,
};

export const designerInfoIconSx: SxProps<Theme> = {
// Shared info-marker style used across Designer.
// Use the icon's native circular glyph (no extra wrapper), to avoid double-ring visuals.
color: '#1FB1FF',
fontSize: '1.7rem',
fontSize: DESIGNER_CONTROL_ICON_SIZE,
ml: 0.28,
verticalAlign: 'middle',
filter: 'drop-shadow(0 4px 8px rgba(31, 177, 255, 0.25))',
Expand Down Expand Up @@ -47,11 +52,11 @@ export const designerControlLabelSx: SxProps<Theme> = {
color: 'text.secondary',
fontWeight: 700,
textTransform: 'none',
fontSize: '1.05rem',
fontSize: DESIGNER_CONTROL_FONT_SIZE,
letterSpacing: '0.01em',
whiteSpace: 'nowrap',
'& .MuiSvgIcon-root': {
fontSize: '1.55rem',
fontSize: DESIGNER_CONTROL_ICON_SIZE,
},
};

Expand All @@ -64,12 +69,15 @@ export const designerScrollableControlRowSx: SxProps<Theme> = {

export const designerControlActionRowSx: SxProps<Theme> = {
...designerScrollableControlRowSx,
mt: 0.5,
mt: 0,
};

export const designerIconControlButtonSx: SxProps<Theme> = {
color: 'text.secondary',
p: 0.5,
p: 0.375,
'& .MuiSvgIcon-root': {
fontSize: DESIGNER_CONTROL_ICON_SIZE,
},
};

export const designerInlineEditFocusOverlaySx: SxProps<Theme> = {
Expand Down Expand Up @@ -108,7 +116,16 @@ export const designerInlineEditActionIconSx: SxProps<Theme> = {
},
};

export const designerPrimaryActionButtonSx: SxProps<Theme> = {};
export const designerPrimaryActionButtonSx: SxProps<Theme> = {
fontSize: DESIGNER_CONTROL_FONT_SIZE,
lineHeight: 1.35,
py: 0.3,
px: 1,
minHeight: 0,
'& .MuiSvgIcon-root': {
fontSize: DESIGNER_CONTROL_ICON_SIZE,
},
};

export const designerControlHeadingSx: SxProps<Theme> = {
color: 'text.primary',
Expand All @@ -121,7 +138,7 @@ export const designerControlHeadingSx: SxProps<Theme> = {
export const designerFieldSubHeadingSx: SxProps<Theme> = {
color: 'text.primary',
fontWeight: 700,
fontSize: '1.25rem',
fontSize: '1rem',
lineHeight: 1.2,
textAlign: 'left',
};
Expand Down
7 changes: 4 additions & 3 deletions web/src/designer/components/field-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -618,7 +618,7 @@ const FieldEditorComponent = ({
sx={{
color: theme => theme.palette.grey[900],
fontWeight: 700,
fontSize: '1.02rem',
fontSize: '0.9375rem',
lineHeight: 1.28,
letterSpacing: '0.005em',
width: '100%',
Expand Down Expand Up @@ -722,6 +722,7 @@ const FieldEditorComponent = ({
p: 0.35,
justifyContent: {sm: 'right', xs: 'left'},
borderRadius: 1,
'& .MuiSvgIcon-root': {fontSize: '1.15rem'},
}}
>
<Tooltip title="Delete Field">
Expand Down Expand Up @@ -869,7 +870,7 @@ const FieldEditorComponent = ({
backgroundColor: theme =>
alpha(theme.palette.secondary.main, 0.1),
},
'& .MuiSvgIcon-root': {fontSize: '1.45rem'},
'& .MuiSvgIcon-root': {fontSize: '1.3rem'},
}}
>
<ArrowDropUpRoundedIcon />
Expand All @@ -892,7 +893,7 @@ const FieldEditorComponent = ({
backgroundColor: theme =>
alpha(theme.palette.secondary.main, 0.1),
},
'& .MuiSvgIcon-root': {fontSize: '1.45rem'},
'& .MuiSvgIcon-root': {fontSize: '1.3rem'},
}}
>
<ArrowDropDownRoundedIcon />
Expand Down
84 changes: 32 additions & 52 deletions web/src/designer/components/field-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* @file Ordered field accordions for a section plus add-field dialog.
*/

import {Alert, Box, Button, Stack, Tooltip, Typography} from '@mui/material';
import {Alert, Box, Button, Stack, Typography} from '@mui/material';
import {
DndContext,
DragEndEvent,
Expand All @@ -29,7 +29,6 @@ import {SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';

import AddRoundedIcon from '@mui/icons-material/AddRounded';
import ExpandCircleDownRoundedIcon from '@mui/icons-material/ExpandCircleDownRounded';
import InfoIcon from '@mui/icons-material/Info';
import {useCallback, useEffect, useMemo, useState} from 'react';
import {useLocation} from 'react-router-dom';
import {useAppDispatch, useAppSelector} from '../state/hooks';
Expand All @@ -40,8 +39,6 @@ import {
designerControlLabelSx,
designerFieldSubHeadingSx,
designerHeadingRowSx,
designerHeadingTextSx,
designerInfoIconSx,
designerPrimaryActionButtonSx,
} from './designer-style';
import {HeadingWithInfo} from './heading-with-info';
Expand Down Expand Up @@ -225,15 +222,18 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
<>
<Stack
direction="row"
spacing={1}
sx={{...designerHeadingRowSx, alignItems: 'center', mt: 2, mb: 1}}
sx={{
...designerHeadingRowSx,
alignItems: 'center',
gap: 1,
mt: 1,
mb: 0.5,
}}
>
<Typography variant="h2" sx={designerHeadingTextSx}>
Fields
</Typography>
<Tooltip title="Fields are the individual inputs that collect data in this section.">
<InfoIcon sx={designerInfoIconSx} />
</Tooltip>
<HeadingWithInfo
title="Fields"
tooltip="Fields are the individual inputs that collect data in this section."
/>
<Button
variant="contained"
size="small"
Expand Down Expand Up @@ -268,8 +268,8 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
<Box
sx={{
width: '100%',
mt: 3,
mb: 1.5,
mt: 1,
mb: 0.75,
ml: 0,
mr: 'auto',
textAlign: 'left',
Expand All @@ -284,11 +284,7 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
title="Visible fields"
variant="subtitle1"
tooltip="Visible fields are shown to users in this section. They will appear in the survey."
titleSx={{
...(designerFieldSubHeadingSx as Record<string, unknown>),
fontSize: '1.1rem',
}}
iconSx={{fontSize: '1.35rem', ml: 0.35}}
titleSx={designerFieldSubHeadingSx as Record<string, unknown>}
containerSx={{
justifyContent: 'flex-start',
alignItems: 'center',
Expand All @@ -301,16 +297,13 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
variant="text"
size="small"
onClick={() => setIsExpanded(allOpen)}
startIcon={
<ExpandCircleDownRoundedIcon sx={{fontSize: '0.95rem'}} />
}
startIcon={<ExpandCircleDownRoundedIcon />}
sx={{
...designerControlLabelSx,
minWidth: 'auto',
px: 0.6,
py: 0.1,
fontSize: '0.72rem',
'& .MuiButton-startIcon': {mr: 0.4},
px: 0.75,
py: 0.25,
'& .MuiButton-startIcon': {mr: 0.5},
}}
>
Expand all
Expand All @@ -320,17 +313,14 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
size="small"
onClick={() => setIsExpanded(allClosed)}
startIcon={
<ExpandCircleDownRoundedIcon
sx={{fontSize: '0.95rem', transform: 'rotate(180deg)'}}
/>
<ExpandCircleDownRoundedIcon sx={{transform: 'rotate(180deg)'}} />
}
sx={{
...designerControlLabelSx,
minWidth: 'auto',
px: 0.6,
py: 0.1,
fontSize: '0.72rem',
'& .MuiButton-startIcon': {mr: 0.4},
px: 0.75,
py: 0.25,
'& .MuiButton-startIcon': {mr: 0.5},
}}
>
Collapse all
Expand Down Expand Up @@ -386,11 +376,7 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
title="Hidden fields"
variant="subtitle1"
tooltip="Hidden fields stay in the schema but are not shown to users. They are available but do not appear in the survey."
titleSx={{
...(designerFieldSubHeadingSx as Record<string, unknown>),
fontSize: '1.1rem',
}}
iconSx={{fontSize: '1.35rem', ml: 0.35}}
titleSx={designerFieldSubHeadingSx as Record<string, unknown>}
containerSx={{
justifyContent: 'flex-start',
alignSelf: 'flex-start',
Expand All @@ -402,16 +388,13 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
variant="text"
size="small"
onClick={() => setIsExpanded(allOpen)}
startIcon={
<ExpandCircleDownRoundedIcon sx={{fontSize: '0.95rem'}} />
}
startIcon={<ExpandCircleDownRoundedIcon />}
sx={{
...designerControlLabelSx,
minWidth: 'auto',
px: 0.6,
py: 0.1,
fontSize: '0.72rem',
'& .MuiButton-startIcon': {mr: 0.4},
px: 0.75,
py: 0.25,
'& .MuiButton-startIcon': {mr: 0.5},
}}
>
Expand all
Expand All @@ -421,17 +404,14 @@ export const FieldList = ({viewSetId, viewId, moveFieldCallback}: Props) => {
size="small"
onClick={() => setIsExpanded(allClosed)}
startIcon={
<ExpandCircleDownRoundedIcon
sx={{fontSize: '0.95rem', transform: 'rotate(180deg)'}}
/>
<ExpandCircleDownRoundedIcon sx={{transform: 'rotate(180deg)'}} />
}
sx={{
...designerControlLabelSx,
minWidth: 'auto',
px: 0.6,
py: 0.1,
fontSize: '0.72rem',
'& .MuiButton-startIcon': {mr: 0.4},
px: 0.75,
py: 0.25,
'& .MuiButton-startIcon': {mr: 0.5},
}}
>
Collapse all
Expand Down
Loading
Loading