Мелкие UX-улучшения

frontend-park-mail-ru · Nov 30, 2024 · 707ffee · 707ffee
1 parent dbc80a2
commit 707ffee
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 145 deletions.
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -1,6 +1,5 @@
 import { useEffectRefs, useState } from '@/jsxCore/hooks';
 import { ComponentProps } from '@/jsxCore/types';
-import { showToast } from '@/stores/toastNotificationStore';
 
 interface InputProps extends ComponentProps {
   onEnter?: (value: string) => void;
@@ -10,30 +9,18 @@ interface InputProps extends ComponentProps {
   placeholder?: string;
   readOnly?: boolean;
   validationMessage?: string | undefined;
-  copyOnClick?: boolean;
   isPassword?: boolean;
   focusOnInstance?: boolean;
 }
 
-interface Callbacks {
-  onKeyPress: (ev: KeyboardEvent) => void;
-  onClick: (ev: MouseEvent) => void;
-  onChanged: (ev: Event) => void;
-}
-
 //TODO исправить эти баги
 
-let globalUid = 0;
-const instMap: Map<number, Callbacks> = new Map();
-
-let tttt = 0;
-
 export const Input = (props: InputProps) => {
-  const [activated, setIsActivated] = useState(false);
-  const [uid, setUid] = useState(-1);
+  const [init, setInit] = useState(false);
+  const [value, setValue] = useState('');
   useEffectRefs((refs) => {
     const inp = refs.get('input') as HTMLInputElement;
-    if (!activated) {
+    if (!init) {
       if (props.initialValue) {
         inp.value = props.initialValue;
       }
@@ -45,72 +32,38 @@ export const Input = (props: InputProps) => {
           inp.focus();
         }
       }, 200);
-      setIsActivated(true);
-      const myUid = globalUid;
-      globalUid++;
-      setUid(myUid);
-      inp.addEventListener('keyup', (ev: KeyboardEvent) => {
-        const CBs = instMap.get(myUid);
-        if (CBs !== undefined) {
-          CBs.onKeyPress(ev);
-        }
-      });
-      inp.addEventListener('click', (ev: MouseEvent) => {
-        const CBs = instMap.get(myUid);
-        if (CBs !== undefined) {
-          CBs.onClick(ev);
-        }
-      });
-      inp.addEventListener('change', (ev: Event) => {
-        const CBs = instMap.get(myUid);
-        if (CBs !== undefined) {
-          CBs.onChanged(ev);
-        }
-      });
-    } else {
-      instMap.set(uid, {
-        onKeyPress: (ev) => {
-          if (ev.key === 'Enter') {
-            if (props.onEnter) {
-              props.onEnter(inp.value);
-            }
-          }
-          if (ev.key === 'Escape') {
-            if (props.onEscape) {
-              props.onEscape(inp.value);
-            }
-          }
-          if (props.onChanged) {
-            props.onChanged(inp.value);
-          }
-        },
-        onClick: () => {
-          if (props.copyOnClick === true) {
-            navigator.clipboard.writeText(inp.value);
-            showToast('Скопировано в буфер обмена!', 'success');
-            if (props.onChanged) {
-              props.onChanged(inp.value);
-            }
-          }
-        },
-        onChanged: () => {
-          if (props.onChanged) {
-            props.onChanged(inp.value);
-          }
-        },
-      });
+      setInit(true);
     }
   });
-  tttt++;
   return (
     <div className="input__wrapper">
       <input
-        name={tttt.toString()}
         ref="input"
         className="input"
         readonly={props.readOnly === true ? true : undefined}
         placeholder={props.placeholder}
         type={props.isPassword ? 'password' : undefined}
+        ON_keydown={(ev: KeyboardEvent) => {
+          if (ev.key === 'Enter') {
+            if (props.onEnter !== undefined) {
+              props.onEnter(value);
+            }
+          }
+          if (ev.key === 'Escape') {
+            ev.stopPropagation();
+            if (props.onEscape !== undefined) {
+              props.onEscape(value);
+            }
+            (ev.target as HTMLInputElement).blur();
+          }
+        }}
+        ON_input={(ev: InputEvent) => {
+          const newValue = (ev.target as HTMLInputElement).value;
+          setValue(newValue);
+          if (props.onChanged !== undefined) {
+            props.onChanged(newValue);
+          }
+        }}
       />
       {props.validationMessage !== undefined && (
         <div className="input__validation-message">

diff --git a/src/components/ModalDialog.tsx b/src/components/ModalDialog.tsx
@@ -1,5 +1,6 @@
 import { ComponentProps, JsxNode } from '@/jsxCore/types';
 import './modalDialog.scss';
+import { useEscape } from '@/jsxCore/hooks';
 
 interface ModalDialogProps extends ComponentProps {
   title?: string;
@@ -17,10 +18,15 @@ export const ModalDialog = (props: ModalDialogProps) => {
   if (!props.isOpened) {
     return <div style="display:none" />;
   }
-  console.log('I AM OPENED');
+  useEscape(props.closeCallback);
   return (
     <div class="full-screen-dark" ON_click={props.closeCallback}>
-      <div class="modal-dialog">
+      <div
+        class="modal-dialog"
+        ON_click={(ev: Event) => {
+          ev.stopPropagation();
+        }}
+      >
         <div class="modal-dialog__header-block">
           <div className="modal-dialog__title-wrapper">
             <div class="modal-dialog__title">{props.title}</div>

diff --git a/src/containers/LeftPanel.tsx b/src/containers/LeftPanel.tsx
@@ -2,14 +2,14 @@ import { createBoard } from '@/api/boards';
 import { BoardCard } from '@/components/BoardCard';
 import { Button } from '@/components/Button';
 import { Input } from '@/components/Input';
-import { useState } from '@/jsxCore/hooks';
+import { useEscape, useState } from '@/jsxCore/hooks';
 import { ComponentProps } from '@/jsxCore/types';
 import { updateBoards, useBoardsStore } from '@/stores/boardsStore';
 import './leftPanel.scss';
 import { showToast } from '@/stores/toastNotificationStore';
 
 interface LeftPanelProps extends ComponentProps {
-  onClose: () => void;
+  closeCallback: () => void;
 }
 
 /**
@@ -27,6 +27,7 @@ export const LeftPanel = (props: LeftPanelProps) => {
   } else if (newBoardName.length > 30) {
     validationMessage = 'Должно быть не больше 30 символов';
   }
+  useEscape(props.closeCallback);
 
   const submitNewBoard = (boardName: string) => {
     if (boardName.length < 3) {
@@ -47,7 +48,7 @@ export const LeftPanel = (props: LeftPanelProps) => {
 
   return (
     <>
-      <div className="left-panel-dark" ON_click={props.onClose}></div>
+      <div className="left-panel-dark" ON_click={props.closeCallback}></div>
       <aside class="left-menu">
         <div class="left-menu__header">
           <div class="left-menu__left-elements"></div>
@@ -74,7 +75,7 @@ export const LeftPanel = (props: LeftPanelProps) => {
                 />
                 <Button
                   key="confirm_new_board"
-                  variant="positive"
+                  variant="accent"
                   fullWidth
                   icon="bi-plus-square"
                   text="Добавить доску"
@@ -85,9 +86,8 @@ export const LeftPanel = (props: LeftPanelProps) => {
                 <Button
                   key="cancel_new_board"
                   fullWidth
-                  variant="negative"
                   icon="bi-x-lg"
-                  text="Не добавлять"
+                  text="Отмена"
                   callback={() => {
                     setInputOpened(false);
                     setNewBoardName('');
@@ -98,7 +98,7 @@ export const LeftPanel = (props: LeftPanelProps) => {
             {!inputOpened && (
               <Button
                 key="add_board_btn"
-                variant="positive"
+                variant="accent"
                 icon="bi-plus-square"
                 text="Добавить доску"
                 callback={() => {
@@ -119,7 +119,7 @@ export const LeftPanel = (props: LeftPanelProps) => {
                   <BoardCard
                     key={`board_${board.id}`}
                     board={board}
-                    onSelect={props.onClose}
+                    onSelect={props.closeCallback}
                   />
                 );
               })

diff --git a/src/containers/UserPopup.tsx b/src/containers/UserPopup.tsx
@@ -4,6 +4,8 @@ import { updateMe, useMeStore } from '@/stores/meStore';
 import { openUserProfileModalDialog } from '@/stores/modalDialogsStore';
 import { goToUrl } from '@/stores/routerStore';
 import { User } from '@/types/user';
+import './userPopup.scss';
+import { useEscape } from '@/jsxCore/hooks';
 
 interface PopupButtonProps extends ComponentProps {
   icon: string;
@@ -30,14 +32,15 @@ const PopupButton = (props: PopupButtonProps) => {
 };
 
 interface UserPopupProps extends ComponentProps {
-  closeCallback: (event: Event) => void;
+  closeCallback: () => void;
 }
 /**
  * Компонент попапа, который всплывает при нажатии на аватарку текущего пользователя на навбаре.
  */
 
 export const UserPopup = (props: UserPopupProps) => {
   const me = useMeStore() as User;
+  useEscape(props.closeCallback);
   return (
     <>
       <div class="user-popup">
@@ -76,8 +79,8 @@ export const UserPopup = (props: UserPopupProps) => {
           key="account_settings_btn"
           title="Настройки аккаунта"
           icon="bi-gear"
-          callback={(event) => {
-            props.closeCallback(event);
+          callback={() => {
+            props.closeCallback();
             openUserProfileModalDialog();
           }}
         />
@@ -93,14 +96,7 @@ export const UserPopup = (props: UserPopupProps) => {
           }}
         />
       </div>
-      <div
-        class="full-screen-dark"
-        ON_click={(event: PointerEvent) => {
-          if (props.closeCallback !== undefined) {
-            props.closeCallback(event);
-          }
-        }}
-      ></div>
+      <div class="full-screen-dark" ON_click={props.closeCallback}></div>
     </>
   );
 };
diff --git a/src/containers/userPopup.scss b/src/containers/userPopup.scss
@@ -0,0 +1,58 @@
+.user-popup {
+  background-color: white;
+  position: absolute;
+  top: 50px;
+  right: 10px;
+  z-index: 102;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.user-popup__avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  background-color: #b4c0ee;
+  position: relative;
+  align-items: flex-start;
+}
+
+.user-popup__profile-info {
+  margin-top: 20px;
+  margin-left: 15px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: flex-start;
+  column-gap: 8px;
+}
+
+.user-popup__nickname {
+  font-size: 1.3em;
+  font-weight: bold;
+}
+
+.user-popup__button {
+  width: 100%;
+  padding-left: 15px;
+  padding-right: 20px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  display: flex;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+.user-popup__button:hover {
+  background-color: rgba(0, 0, 0, 0.236);
+}
+
+.user-popup__button-icon {
+  margin-top: 1px;
+  margin-right: 8px;
+}
+
+.user-popup__button-text {
+  margin-right: 8px;
+}