From 3eb626b40348869948e2f58c73e023df296f9ea6 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Thu, 11 Aug 2022 17:59:23 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80?=
 =?UTF-8?q?=20=D0=B4=D0=BE=D0=BF=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B0=D0=B4=D0=BC=D0=B8=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B4=D0=B5=D0=BA=D1=81=D1=82=D0=BE=D0=BF=20?=
 =?UTF-8?q?=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mainScreen/toolbar/buttonContainer.tsx    | 74 +++++++++++++++----
 src/components/mainScreen/toolbar/toolbar.css | 36 ++++++++-
 .../mainScreen/toolbar/toolbarButton.tsx      |  9 ++-
 3 files changed, 102 insertions(+), 17 deletions(-)

diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx
index 6de6f93..97e339d 100644
--- a/src/components/mainScreen/toolbar/buttonContainer.tsx
+++ b/src/components/mainScreen/toolbar/buttonContainer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ToolbarButton } from "./toolbarButton";
 import { BorderLine } from "./toolbarButtonContainerBorderLine";
 import { TypeToolbarButtons } from "./typeButtons";
@@ -15,20 +15,68 @@ type TProps = {
     }>
 }
 
-export const ButtonContainer:React.FC<TProps> = React.memo((props) => {    
+export const ButtonContainer:React.FC<TProps> = React.memo((props) => { 
+    const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
+    
     return <div className="toolbar-button-container">
         <BorderLine />
-        {props.buttons.map((button, index) => 
-            <ToolbarButton
-                key={button.type + index}
-                onClick={button.onClick} 
-                type={button.type} 
-                isNotification={button?.isNotification}
-                caption={CaptionToolbarButtons[button.type]}
-                active={button?.active}
-                isCaption={button.isCaption}
-                isSelected={button?.isSelected}
-            />)}
+        {props.buttons.map((button, index) => {
+            function onClick() {
+                if(openedAddButtons === button.type + index + 'areacont') {
+                    setOpenedAddButtons('');
+                } else {
+                    setOpenedAddButtons(button.type + index + 'areacont')
+                }
+            }
+            return <div className="toolbar-button-area-container" key={button.type + index + 'areacont'}>
+                <ToolbarButton
+                    // key={button.type + index}
+                    onClick={() => {
+                        onClick();
+                        // if(openedAddButtons === button.type + index + 'areacont') {
+                        //     setOpenedAddButtons('');
+                        // } setOpenedAddButtons(button.type + index + 'areacont')
+                        // button.onClick()
+                    }} 
+                    type={button.type} 
+                    isNotification={button?.isNotification}
+                    caption={CaptionToolbarButtons[button.type]}
+                    active={button?.active}
+                    isCaption={button.isCaption}
+                    isSelected={button?.isSelected}
+                />
+                {
+                    button.type.includes('user') ?
+                    <div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' ? 'show' : ''}`}>
+                        <ToolbarButton
+                            // key={button.type + index}
+                            onClick={() => onClick()} 
+                            type={button.type} 
+                            isNotification={button?.isNotification}
+                            caption={CaptionToolbarButtons[button.type]}
+                            active={button?.active}
+                            isCaption={button.isCaption}
+                            isSelected={button?.isSelected}
+                        />
+                        <ToolbarButton
+                            onClick={() => null}
+                            type={"micro"} 
+                            caption={''}
+                            isCaption={false}
+                        />
+                        <ToolbarButton
+                            onClick={() => null}
+                            type={"control"} 
+                            caption={''}
+                            isCaption={false}
+                            isLarge={true}
+                        />
+                    </div>
+                    : null
+                }
+            </div>
+            }
+        )}
         <BorderLine />
     </div>
 })
\ No newline at end of file
diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css
index 03d67da..db52f22 100644
--- a/src/components/mainScreen/toolbar/toolbar.css
+++ b/src/components/mainScreen/toolbar/toolbar.css
@@ -76,11 +76,15 @@
     background: url('closeToolbarIcon.svg') 50% 50% no-repeat;
 }
 
+.toolbar-button-area-container {
+    position: relative;
+}
+
 .toolbar-button-area {
     position: relative;
     display: flex;
-    background-color: #333333;
-    border-top-left-radius: 50px solid #4f4f4f;
+    /* background-color: #333333; */
+    /* border-top-left-radius: 50px solid #4f4f4f; */
 }
 
 .toolbar-button {
@@ -93,10 +97,36 @@
     background-color: #4F4F4F;
     cursor: pointer;
     flex-shrink: 0;
+    z-index: 1;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.toolbar-button.large {
+    width: 196px;
 }
 
 .toolbar-button:hover {
-    opacity: .7;
+    opacity: .7;    
+}
+
+.toolbar-open-add-button-container {
+    visibility: hidden;
+    position: absolute;
+    left: -8px;
+    top: -9px;
+    display: flex;
+    padding: 8px;
+    box-sizing: border-box;
+    border-radius: 28px;
+    background: #333333;
+    border: 1px solid #4F4F4F;
+    gap: 8px;
+}
+
+.toolbar-open-add-button-container.show {
+    visibility: visible;
 }
 
 .toolbar-button-add-buttons {
diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx
index f29498d..5c7aab2 100644
--- a/src/components/mainScreen/toolbar/toolbarButton.tsx
+++ b/src/components/mainScreen/toolbar/toolbarButton.tsx
@@ -10,6 +10,7 @@ type TProps = {
     active?: boolean
     isNotification?: boolean
     isSelected?: boolean
+    isLarge?: boolean
 }
 
 export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
@@ -31,6 +32,7 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
                 ${props.type} ${isActive ? 'on' : ''} 
                 ${props?.isNotification ? 'notification' : ''}
                 ${props?.isSelected ? 'selected' : ''}
+                ${props?.isLarge ? 'large' : ''}
                 `
             } 
             onClick={() => {
@@ -41,7 +43,12 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
                     onClick();
             }}
         >
-        </button>
+            {
+                props?.isLarge
+                ? CaptionToolbarButtons[props.type]
+                : null
+            }
+        </button>        
         {/* {
             showAddButtons && props.type.includes('user')
             &&