Skip to content

Commit

Permalink
Design fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaryaLari
DaryaLari committed Dec 5, 2024
1 parent 6221dae commit 365047f
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 65 deletions.
7 changes: 4 additions & 3 deletions src/ui/components/DialogTextWidget/DialogTextWidget.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@
margin-block-start: var(--g-spacing-2);
}

&__background-label {
display: inline-block;
margin-inline: 19px var(--g-spacing-2);
&__row {
&:last-child {
margin-bottom: 0;
}
}
}
19 changes: 11 additions & 8 deletions src/ui/components/DialogTextWidget/DialogTextWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
/>
<Dialog.Body className={b()}>
<FormRow
className={b('row')}
fieldId={INPUT_TEXT_ID}
label={i18n('dash.text-dialog.edit', 'label_text')}
>
Expand All @@ -96,8 +97,18 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
text={text}
/>
</FormRow>
<FormRow
className={b('row')}
label={i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
>
<PaletteBackground
color={backgroundColor}
onSelect={this.handleHasBackgroundSelected}
/>
</FormRow>
{enableAutoheight && (
<FormRow
className={b('row')}
fieldId={INPUT_AUTOHEIGHT_ID}
label={i18n(
'dash.dashkit-plugin-common.view',
Expand All @@ -112,14 +123,6 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
/>
</FormRow>
)}
<FormRow
label={i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
>
<PaletteBackground
color={backgroundColor}
onSelect={this.handleHasBackgroundSelected}
/>
</FormRow>
</Dialog.Body>
<Dialog.Footer
onClickButtonApply={this.onApply}
Expand Down
33 changes: 3 additions & 30 deletions src/ui/components/DialogTitleWidget/DialogTitleWidget.scss
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,9 @@
.dialog-title {
width: 700px;

&__size-selector {
margin-block-start: var(--g-spacing-4);
}

&__input {
&.g-text-input .g-text-input__control {
transition: font-size 0.2s ease;
font-weight: 500;
}

&_size {
&_l.g-text-input .g-text-input__control {
font-size: var(--g-text-header-2-font-size);
line-height: var(--g-text-header-2-line-height);
}

&_m.g-text-input .g-text-input__control {
font-size: var(--g-text-header-1-font-size);
line-height: var(--g-text-header-1-line-height);
}

&_s.g-text-input .g-text-input__control {
font-size: var(--g-text-body-3-font-size);
line-height: var(--g-text-body-3-line-height);
}

&_xs.g-text-input .g-text-input__control {
font-size: var(--g-text-body-2-font-size);
line-height: var(--g-text-body-2-line-height);
}
&__row {
&:last-child {
margin-bottom: 0;
}
}

Expand Down
42 changes: 24 additions & 18 deletions src/ui/components/DialogTitleWidget/DialogTitleWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ class DialogTitleWidget extends React.PureComponent<
/>
<Dialog.Body className={b()}>
<FormRow
className={b('row')}
fieldId={INPUT_TITLE_ID}
label={i18n('dash.title-dialog.edit', 'label_title')}
>
Expand All @@ -124,24 +125,45 @@ class DialogTitleWidget extends React.PureComponent<
autoFocus
placeholder={i18n('dash.title-dialog.edit', 'context_fill-title')}
onUpdate={this.onTextUpdate}
className={b('input', {size: this.state.size})}
qa={DialogDashTitleQA.Input}
/>
</FieldWrapper>
</FormRow>
<FormRow label={i18n('dash.title-dialog.edit', 'label_size')}>
<FormRow
className={b('row')}
label={i18n('dash.title-dialog.edit', 'label_size')}
>
<RadioButton value={size} options={SIZES} onUpdate={this.onSizeChange} />
</FormRow>
<FormRow
className={b('row')}
label={i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
>
<PaletteBackground
color={backgroundColor}
onSelect={this.handleHasBackgroundSelected}
/>
</FormRow>
{enableAutoheight && (
<FormRow
className={b('row')}
fieldId={INPUT_AUTOHEIGHT_ID}
label={i18n(
'dash.dashkit-plugin-common.view',
'label_autoheight-checkbox',
)}
>
<Checkbox
className={b('checkbox')}
id={INPUT_AUTOHEIGHT_ID}
checked={Boolean(autoHeight)}
onChange={this.handleAutoHeightChanged}
/>
</FormRow>
)}
{enableShowInTOC && (
<FormRow
className={b('row')}
fieldId={INPUT_SHOW_IN_TOC_ID}
label={i18n('dash.title-dialog.edit', 'field_show-in-toc')}
>
Expand All @@ -157,22 +179,6 @@ class DialogTitleWidget extends React.PureComponent<
/>
</FormRow>
)}
{enableAutoheight && (
<FormRow
fieldId={INPUT_AUTOHEIGHT_ID}
label={i18n(
'dash.dashkit-plugin-common.view',
'label_autoheight-checkbox',
)}
>
<Checkbox
className={b('checkbox')}
id={INPUT_AUTOHEIGHT_ID}
checked={Boolean(autoHeight)}
onChange={this.handleAutoHeightChanged}
/>
</FormRow>
)}
</Dialog.Body>
<Dialog.Footer
onClickButtonApply={this.onApply}
Expand Down
8 changes: 2 additions & 6 deletions src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@

.widget-palette-background {
$class: &;
display: block;
position: relative;
line-height: 0;
width: fit-content;

&__hint {
@include text-body-1();
Expand Down Expand Up @@ -31,12 +33,6 @@
var(--g-color-base-background) 0 50%
);
outline: 1px solid var(--g-color-base-generic-medium);
color: var(--g-color-line-generic-active);
font-size: 10px;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
}

&_widget-bg {
Expand Down

0 comments on commit 365047f

Please sign in to comment.