Editor style fixes (#426)

gorgeousvlad · web-flow · commit dfdd580aabd9 · 2023-06-23T17:27:46.000+02:00
* fix: design review styles
diff --git a/src/editor/components/AddBlock/AddBlock.scss b/src/editor/components/AddBlock/AddBlock.scss
@@ -10,7 +10,7 @@ $block: '.#{$ns}add-block';
     $buttonWidth: 76px;
     $buttonHeight: 40px;
 
-    position: fixed;
+    position: absolute;
     bottom: $indentM;
     left: calc(50% + var(--editor-left-column-width) / 2);
     transform: translateX(-50%);
diff --git a/src/editor/components/BlockForm/BlockForm.scss b/src/editor/components/BlockForm/BlockForm.scss
@@ -0,0 +1,7 @@
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}block-form';
+
+#{$block}__folded {
+    margin-bottom: 15px;
+}
diff --git a/src/editor/components/BlockForm/BlockForm.tsx b/src/editor/components/BlockForm/BlockForm.tsx
@@ -1,14 +1,17 @@
-import React, {memo, useMemo} from 'react';
+import React, {Fragment, memo, useMemo} from 'react';
 
 import {DynamicField, SimpleVerticalAccordeon, Spec} from '@gravity-ui/dynamic-forms';
 import _ from 'lodash';
 import {Form as FinalForm, FormSpy} from 'react-final-form';
 
 import {Block} from '../../../models';
+import {block} from '../../../utils';
 import {dynamicConfig} from '../../dynamic-forms-custom/config';
 import {CustomSpec} from '../../dynamic-forms-custom/parser/types';
 import usePreviousValue from '../../hooks/usePreviousValue';
 
+import './BlockForm.scss';
+
 interface BlockFormProps {
     data: Block;
     spec: CustomSpec;
@@ -17,6 +20,8 @@ interface BlockFormProps {
     active?: boolean;
 }
 
+const b = block('block-form');
+
 export const BlockForm = memo(
     ({data: {type, ...content}, onChange, onSelect, active, spec: specRaw}: BlockFormProps) => {
         const initialValues = useMemo(() => ({content}), [content]);
@@ -39,17 +44,17 @@ export const BlockForm = memo(
                     name={type}
                     title={spec.viewSpec.layoutTitle || type}
                     onOpenChange={onSelect}
+                    className={b('folded')}
                 >
-                    {/* SimpleVerticalAccordeon requires children, put dummy value*/}
-                    {1}
+                    {/* SimpleVerticalAccordeon requires children, put dummy value*/}{' '}
                 </SimpleVerticalAccordeon>
             );
         }
 
         return (
             <FinalForm initialValues={initialValues} onSubmit={_.noop}>
                 {() => (
-                    <div>
+                    <Fragment>
                         <FormSpy
                             onChange={({values}) => {
                                 // fix for FormSpy onChange called twice without content changes
@@ -65,7 +70,7 @@ export const BlockForm = memo(
                             config={dynamicConfig}
                             withoutInsertFFDebounce
                         />
-                    </div>
+                    </Fragment>
                 )}
             </FinalForm>
         );
diff --git a/src/editor/components/ControlPanel/ControlPanel.scss b/src/editor/components/ControlPanel/ControlPanel.scss
@@ -12,7 +12,8 @@ $block: '.#{$ns}control-panel';
     height: var(--editor-header-height);
     padding: $indentXXXS $indentS;
     background-color: var(--yc-color-base-background);
-    border-bottom: 1px solid var(--yc-color-line-generic);
+    border: 1px var(--yc-color-line-generic);
+    border-style: solid none;
 
     &__icon {
         display: flex;
diff --git a/src/editor/components/EditBlock/EditBlock.scss b/src/editor/components/EditBlock/EditBlock.scss
@@ -6,7 +6,8 @@
 $block: '.#{$ns}edit-block';
 
 #{$block} {
-    $controlIconHeight: 24px;
+    $controlIconWidth: 48px;
+    $controlIconHeight: 32px;
     $controlsIndent: $indentS;
     $controlColor: var(--yc-color-promo-base-neon);
 
@@ -19,7 +20,7 @@ $block: '.#{$ns}edit-block';
         height: calc(100% + $controlsIndent * 2);
         top: -#{$controlsIndent};
         left: -#{$controlsIndent};
-        border-radius: $editorControlBorderRadius;
+        border-radius: $borderRadius;
         z-index: $editorBlockControlZIndex;
 
         &_isHeader {
@@ -36,21 +37,21 @@ $block: '.#{$ns}edit-block';
     &__controls-content {
         display: flex;
         position: absolute;
-        bottom: calc(($controlsIndent + $controlIconHeight) * -1);
+        bottom: -40px;
         left: 50%;
         transform: translateX(-50%);
     }
 
     &__control {
         @include control($hoverScale: 1.1);
 
-        width: $controlIconHeight;
+        width: $controlIconWidth;
         height: $controlIconHeight;
-        border-radius: calc(#{$editorControlBorderRadius} / 2);
+        border-radius: $editorControlBorderRadius;
         background-color: var(--yc-color-promo-highlight-neon);
 
         &:not(:first-child) {
-            margin-left: $indentXXS;
+            margin-left: 4px;
         }
     }
 }
diff --git a/src/editor/components/Layout/Layout.scss b/src/editor/components/Layout/Layout.scss
@@ -36,13 +36,17 @@ $block: '.#{$ns}editor-layout';
 
     &__left {
         flex: 0 0 auto;
-        padding: $indentXXXS $indentS $indentS;
+        padding: $indentSM $indentXS;
         width: var(--editor-left-column-width);
         border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
         overflow-x: auto;
     }
 
     &__right {
         width: 100%;
+
+        &_editing {
+            padding-bottom: 200px;
+        }
     }
 }
diff --git a/src/editor/components/Layout/Layout.tsx b/src/editor/components/Layout/Layout.tsx
@@ -18,6 +18,7 @@ export interface LayoutProps {
 
 const Layout = ({children, mode, onModeChange}: PropsWithChildren<LayoutProps>) => {
     let left, right;
+    const isEditingMode = mode === ViewModeItem.Edititng;
 
     function handleChild(child: ReactElement) {
         switch (child?.type) {
@@ -40,7 +41,7 @@ const Layout = ({children, mode, onModeChange}: PropsWithChildren<LayoutProps>)
             <div className={b('container')}>
                 <Fragment>
                     {left && <div className={b('left')}>{left}</div>}
-                    {right && <div className={b('right')}>{right}</div>}
+                    {right && <div className={b('right', {editing: isEditingMode})}>{right}</div>}
                 </Fragment>
             </div>
         </div>
diff --git a/src/editor/containers/Form/dynamic-form-custom.scss b/src/editor/containers/Form/dynamic-form-custom.scss
@@ -3,15 +3,15 @@
 @mixin dynamic-form-custom {
     --top-level-font-size: var(--yc-text-display-2-font-size);
     --top-level-line-height: var(--yc-text-display-2-line-height);
-    --block-propery-font-size: var(--yc-text-body-3-font-size);
-    --block-property-line-height: var(--yc-text-body-3-line-height);
-    --nested-property-font-size: var(--yc-text-body-1-font-size);
-    --nested-property-line-height: var(--yc-text-body-1-line-height);
-    --complex-nested-property-font-size: var(--yc-text-body-2-font-size);
-    --complex-nested-property-line-height: var(--yc-text-body-2-line-height);
+    --block-level-complex-propery-font-size: var(--yc-text-body-3-font-size);
+    --block-level-complex-property-line-height: var(--yc-text-body-3-line-height);
+    --complex-property-font-size: var(--yc-text-body-2-font-size);
+    --complex-property-line-height: var(--yc-text-body-2-line-height);
+    --property-font-size: var(--yc-text-body-1-font-size);
+    --property-line-height: var(--yc-text-body-1-line-height);
 
     --input-min-width: 150px;
-    --property-title-width: 140px;
+    --property-title-width: 96px;
 
     // blocks list level definitons
     --button-height: 48px;
@@ -30,10 +30,11 @@
         --icon-size: 20px;
         --icon-margin: 30px;
 
-        --header-text-size: var(--block-propery-font-size);
-        --header-line-height: var(--block-property-line-height);
-        --text-size: var(--block-propery-font-size);
-        --line-height: var(--block-property-line-height);
+        --header-text-size: var(--block-level-complex-propery-font-size);
+        --header-line-height: var(--block-level-complex-property-line-height);
+        --text-size: var(--property-font-size);
+        --line-height: var(--property-line-height);
+        --property-font-weight: 400;
     }
 
     // block nested properties level definitons
@@ -43,10 +44,13 @@
         --icon-margin: 25px;
         --property-font-weight: 400;
 
-        --header-text-size: var(--complex-nested-property-font-size);
-        --header-line-height: var(--complex-nested-property-line-height);
-        --text-size: var(--nested-property-font-size);
-        --line-height: var(--nested-property-line-height);
+        --header-text-size: var(--complex-property-font-size);
+        --header-line-height: var(--complex-property-line-height);
+        --text-size: var(--property-font-size);
+        --line-height: var(--property-line-height);
+
+        --oneof-text-size: var(--complex-propery-font-size);
+        --oneof-line-height: var(--complex-property-line-height);
     }
 
     .df-row {
@@ -97,19 +101,32 @@
         }
     }
 
+    .df-simple-vertical-accordeon__body {
+        margin-top: 0px;
+        padding-top: $indentXXS;
+    }
+
+    .df-use-search {
+        margin: 4px 0;
+    }
+
     .df-simple-vertical-accordeon__body,
     .df-group-indent > .df-use-search {
         margin-top: 0;
         margin-left: 1px;
-
-        padding-top: $indentXXS;
-        padding-left: $indentXS;
-
+        padding-top: 4px;
+        padding-bottom: 4px;
+        padding-left: $indentXXS;
         border-left: 1px solid var(--yc-color-line-generic-accent);
     }
 
+    .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
+        padding-left: $indentXXS;
+    }
+
     .g-select,
     .yc-text-input {
-        width: var(--input-min-width);
+        min-width: var(--input-min-width);
+        width: 100%;
     }
 }
diff --git a/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.scss b/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.scss
@@ -21,7 +21,7 @@ $block: '.#{$ns}one-of-custom';
 
         & > .#{$df-ns}use-search {
             padding-top: 11px;
-            padding-left: $normalOffset;
+            padding-left: $indentXXS;
             margin-top: 4px;
             margin-bottom: $normalOffset;
             margin-left: 5px;

Original file line number	Diff line number	Diff line change
`@@ -36,13 +36,17 @@ $block: '.#{$ns}editor-layout';`
`36`	`36`
`37`	`37`	`&__left {`
`38`	`38`	`flex: 0 0 auto;`
`39`		`- padding: $indentXXXS $indentS $indentS;`
	`39`	`+ padding: $indentSM $indentXS;`
`40`	`40`	`width: var(--editor-left-column-width);`
`41`	`41`	`border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);`
`42`	`42`	`overflow-x: auto;`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`&__right {`
`46`	`46`	`width: 100%;`
	`47`	`+`
	`48`	`+ &_editing {`
	`49`	`+ padding-bottom: 200px;`
	`50`	`+ }`
`47`	`51`	`}`
`48`	`52`	`}`