fix(GoalForm): button positions via priority

taskany-inc · Jan 23, 2023 · 607b6a8 · 607b6a8
1 parent 2e19882
commit 607b6a8
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 35 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -150,8 +150,7 @@
             "Goal's title must be longer than 10 symbols": "Goal's title must be longer than 10 symbols",
             "Goal's description must be longer than 10 symbols": "Goal's description must be longer than 10 symbols",
             "Goal's project or team are required": "Goal's project or team are required",
-            "Enter project or team title": "Enter project or team title",
-            "Enter owner name or email": "Enter owner name or email",
+            "Enter project or team title": "Team/Project",
             "Goal's description is required": "Goal's description is required",
             "Goal's description must be a string": "Goal's description must be a string",
             "Something went wrong 😿": "Something went wrong 😿",
@@ -163,12 +162,12 @@
             "Pro tip!": "Pro tip!",
             "Press key to create the goal": "Press <key></key> to create the goal.",
             "Assign": "Assign",
-            "Enter name or email": "Enter name or email",
+            "Enter name or email": "Name/Email",
             "Schedule": "Schedule",
             "Date input mask placeholder": "mm/dd/yyyy",
             "Date input mask": "99/99/9999",
             "State": "State",
-            "Enter tag title": "Enter tag title",
+            "Enter tag title": "Tag title",
             "Priority": {
                 "Priority": "Priority",
                 "Highest": "Highest",

diff --git a/i18n/ru.json b/i18n/ru.json
@@ -144,14 +144,13 @@
             "New goal": "Создать цель"
         },
         "new": {
-            "Create new goal": "Создание новой цели",
+            "Create new goal": "Новая цель",
             "Goal's title is required": "Название цели обязательно",
             "Goal's title must be a string": "Название цели должно быть строкой",
             "Goal's title must be longer than 10 symbols": "Название цели должно быть длинее 10х символов",
             "Goal's description must be longer than 10 symbols": "Описание цели должно быть длинее 10х символов",
             "Goal's project or team are required": "Проект или команда обязательны",
-            "Enter project or team title": "Проект или команда",
-            "Enter owner name or email": "Имя или почта владельца",
+            "Enter project or team title": "Команда/Проект",
             "Goal's description is required": "Описание цели обязательно",
             "Goal's description must be a string": "Описание цели должно быть строкой",
             "Something went wrong 😿": "Упс! Что-то пошло не так 😿",
@@ -163,7 +162,7 @@
             "Pro tip!": "Держи совет!",
             "Press key to create the goal": "Нажми <key></key> чтобы создать цель.",
             "Assign": "Ответственный",
-            "Enter name or email": "Имя или почта",
+            "Enter name or email": "Имя/Почта",
             "Schedule": "Срок",
             "Date input mask placeholder": "dd.mm.yyyy",
             "Date input mask": "99.99.9999",

diff --git a/src/components/EstimateComboBox.tsx b/src/components/EstimateComboBox.tsx
@@ -184,6 +184,7 @@ export const EstimateComboBox = React.forwardRef<HTMLDivElement, EstimateComboBo
                     <StyledTriggerContainer>
                         {changed && <StyledCleanButton onClick={onCleanClick}>+</StyledCleanButton>}
                         <Button
+                            ghost
                             ref={props.ref}
                             text={buttonText}
                             iconLeft={<Icon noWrap type="calendarTick" size="xs" />}

diff --git a/src/components/FlowComboBox.tsx b/src/components/FlowComboBox.tsx
@@ -66,6 +66,7 @@ export const FlowComboBox = React.forwardRef<HTMLDivElement, FlowComboBoxProps>(
                 onChange={onChange}
                 renderTrigger={(props) => (
                     <Button
+                        ghost
                         ref={props.ref}
                         text={props.text}
                         disabled={props.disabled}

diff --git a/src/components/GoalForm.tsx b/src/components/GoalForm.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -115,6 +115,10 @@ const StyledTagsContainer = styled.div`
     padding-left: ${gapS};
 `;
 
+const StyledFormActions = styled(FormActions)`
+    padding-top: 50px;
+`;
+
 export const GoalForm: React.FC<GoalFormProps> = ({
     formTitle,
     title,
@@ -132,6 +136,15 @@ export const GoalForm: React.FC<GoalFormProps> = ({
     const t = useTranslations(i18nKeyset);
     const schema = schemaProvider(t);
     const { locale } = usePageContext();
+    const [descriptionFocused, setDescriptionFocused] = useState(false);
+
+    const onDescriptionFocus = useCallback(() => {
+        setDescriptionFocused(true);
+    }, []);
+
+    const onDescriptionCancel = useCallback(() => {
+        setDescriptionFocused(false);
+    }, []);
 
     const {
         control,
@@ -198,6 +211,8 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                                 flat="both"
                                 placeholder={t('And its description')}
                                 error={errorsResolver(field.name)}
+                                onFocus={onDescriptionFocus}
+                                onCancel={onDescriptionCancel}
                                 {...field}
                             />
                         )}
@@ -209,21 +224,8 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                         ))}
                     </StyledTagsContainer>
 
-                    <FormActions flat="top">
+                    <StyledFormActions flat="top" focused={descriptionFocused}>
                         <FormAction left inline>
-                            <Controller
-                                name="owner"
-                                control={control}
-                                render={({ field }) => (
-                                    <UserComboBox
-                                        text={t('Assign')}
-                                        placeholder={t('Enter name or email')}
-                                        error={errorsResolver(field.name)}
-                                        {...field}
-                                    />
-                                )}
-                            />
-
                             <Controller
                                 name="parent"
                                 control={control}
@@ -238,24 +240,24 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                             />
 
                             <Controller
-                                name="state"
+                                name="priority"
                                 control={control}
                                 render={({ field }) => (
-                                    <StateDropdown
-                                        text={t('State')}
-                                        flowId={parentWatcher?.flowId}
+                                    <PriorityDropdown
+                                        text={t('Priority.Priority')}
                                         error={errorsResolver(field.name)}
                                         {...field}
                                     />
                                 )}
                             />
 
                             <Controller
-                                name="priority"
+                                name="owner"
                                 control={control}
                                 render={({ field }) => (
-                                    <PriorityDropdown
-                                        text={t('Priority.Priority')}
+                                    <UserComboBox
+                                        text={t('Assign')}
+                                        placeholder={t('Enter name or email')}
                                         error={errorsResolver(field.name)}
                                         {...field}
                                     />
@@ -277,6 +279,19 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                                 )}
                             />
 
+                            <Controller
+                                name="state"
+                                control={control}
+                                render={({ field }) => (
+                                    <StateDropdown
+                                        text={t('State')}
+                                        flowId={parentWatcher?.flowId}
+                                        error={errorsResolver(field.name)}
+                                        {...field}
+                                    />
+                                )}
+                            />
+
                             <Controller
                                 name="tags"
                                 control={control}
@@ -294,7 +309,7 @@ export const GoalForm: React.FC<GoalFormProps> = ({
                         <FormAction right inline>
                             <Button view="primary" outline={!isValid} type="submit" text={t('Submit')} />
                         </FormAction>
-                    </FormActions>
+                    </StyledFormActions>
                 </Form>
 
                 {children}

diff --git a/src/components/GoalParentComboBox.tsx b/src/components/GoalParentComboBox.tsx
@@ -116,7 +116,7 @@ export const GoalParentComboBox = React.forwardRef<HTMLDivElement, GoalParentCom
                 disabled={disabled}
                 items={items}
                 onChange={onChange}
-                renderTrigger={(props) => <Button ref={props.ref} text={props.text} onClick={props.onClick} />}
+                renderTrigger={(props) => <Button ghost ref={props.ref} text={props.text} onClick={props.onClick} />}
                 renderInput={(props) => (
                     <StyledInput
                         autoFocus

diff --git a/src/components/PriorityDropdown.tsx b/src/components/PriorityDropdown.tsx
@@ -54,7 +54,7 @@ export const PriorityDropdown = React.forwardRef<HTMLDivElement, PriorityDropdow
                 renderTrigger={(props) => (
                     <Button
                         ref={props.ref}
-                        text={props.text}
+                        ghost
                         onClick={props.onClick}
                         disabled={props.disabled}
                         iconLeft={

diff --git a/src/components/StateDot.tsx b/src/components/StateDot.tsx
@@ -29,9 +29,9 @@ const StyledStateDot = styled.div<{
 
     background-color: var(--bkg);
 
-    &:hover {
+    /* &:hover {
         background-color: var(--bkg-hover);
-    }
+    } */
 
     ${({ onClick }) =>
         onClick &&

diff --git a/src/components/StateDropdown.tsx b/src/components/StateDropdown.tsx
@@ -81,6 +81,7 @@ export const StateDropdown = React.forwardRef<HTMLDivElement, StateDropdownProps
                 disabled={!flowId || disabled}
                 renderTrigger={(props) => (
                     <Button
+                        ghost
                         ref={props.ref}
                         text={props.text}
                         onClick={props.onClick}

diff --git a/src/components/TagComboBox.tsx b/src/components/TagComboBox.tsx
@@ -124,6 +124,7 @@ export const TagComboBox = React.forwardRef<HTMLDivElement, TagComboBoxProps>(
                 items={items}
                 renderTrigger={(props) => (
                     <Button
+                        ghost
                         ref={props.ref}
                         text={props.text}
                         disabled={props.disabled}

diff --git a/src/components/UserComboBox.tsx b/src/components/UserComboBox.tsx
@@ -76,6 +76,7 @@ export const UserComboBox = React.forwardRef<HTMLDivElement, UserComboBoxProps>(
                 onChange={onChange}
                 renderTrigger={(props) => (
                     <Button
+                        ghost
                         ref={props.ref}
                         text={props.text}
                         disabled={props.disabled}