добавлены иконки в проект, написаны компоненты тулбара
This commit is contained in:
DmitriyB
@@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import { ToolbarButton } from "./toolbarButton";
|
||||
import { BorderLine } from "./toolbarButtonContainerBorderLine";
|
||||
import { TypeToolbarButtons } from "./typeButtons";
|
||||
|
||||
type TProps = {
|
||||
buttons: Array<{type: TypeToolbarButtons, onClick: () => void}>
|
||||
}
|
||||
|
||||
export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
|
||||
return <div className="toolbar-button-container">
|
||||
<BorderLine />
|
||||
{props.buttons.map(button => <ToolbarButton onClick={button.onClick} type={button.type} />)}
|
||||
<BorderLine />
|
||||
</div>
|
||||
})
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="#4F4F4F"/>
|
||||
<path d="M18.5714 13.8125C18.5714 13.4375 18.3238 12.6875 17.3333 12.6875C16.3429 12.6875 16.0952 13.4375 16.0952 13.8125V14.5M18.5714 13.8125V12.125C18.5714 11.75 18.819 11 19.8095 11C20.8 11 21.0476 11.75 21.0476 12.125V13.25M18.5714 13.8125V17M21.0476 13.25C21.0476 12.875 21.2952 12.125 22.2857 12.125C23.2762 12.125 23.5238 12.875 23.5238 13.25V15.5M21.0476 13.25V19.5M23.5238 15.5C23.5238 15.125 23.7714 14.375 24.7619 14.375C25.7524 14.375 26 15.125 26 15.5V23.375C26 23.5659 25.9885 23.7762 25.963 24M23.5238 15.5V21.125M16.0952 20V21.6875C16.0952 21.6875 15.4762 21.125 15.4762 20C15.4762 19.625 15.2286 18.875 14.2381 18.875C13.2476 18.875 13 19.625 13 20C13 21.6875 13 29 20.4286 29C21.881 29 22.9785 28.6018 23.7981 28" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 14L27 28" stroke="#EC1F1F" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1018 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="#4F4F4F"/>
|
||||
<path d="M12 22.5C11.7239 22.5 11.5 22.7239 11.5 23C11.5 23.2761 11.7239 23.5 12 23.5V22.5ZM16.9998 23H17.4998C17.4998 22.7239 17.2759 22.5 16.9998 22.5V23ZM16.4998 27.9998C16.4998 28.2759 16.7236 28.4998 16.9998 28.4998C17.2759 28.4998 17.4998 28.2759 17.4998 27.9998H16.4998ZM11.6464 27.6462C11.4512 27.8415 11.4512 28.1581 11.6464 28.3533C11.8417 28.5486 12.1583 28.5486 12.3536 28.3533L11.6464 27.6462ZM28.3536 12.3538C28.5488 12.1585 28.5488 11.8419 28.3536 11.6466C28.1583 11.4514 27.8417 11.4514 27.6464 11.6466L28.3536 12.3538ZM23 17.0002H22.5C22.5 17.2763 22.7238 17.5002 23 17.5002V17.0002ZM23.5 12.0002C23.5 11.7241 23.2761 11.5002 23 11.5002C22.7238 11.5002 22.5 11.7241 22.5 12.0002H23.5ZM28 17.5002C28.2761 17.5002 28.5 17.2763 28.5 17.0002C28.5 16.7241 28.2761 16.5002 28 16.5002V17.5002ZM12 23.5H16.9998V22.5H12V23.5ZM16.4998 23V27.9998H17.4998V23H16.4998ZM16.6462 22.6464L11.6464 27.6462L12.3536 28.3533L17.3533 23.3535L16.6462 22.6464ZM27.6464 11.6466L22.6464 16.6466L23.3535 17.3538L28.3536 12.3538L27.6464 11.6466ZM22.5 12.0002V17.0002H23.5V12.0002H22.5ZM23 17.5002H28V16.5002H23V17.5002Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="#EB5757"/>
|
||||
<path d="M23.5 28.5734C23.8167 28.5734 24.0734 28.3167 24.0734 28C24.0734 27.6833 23.8167 27.4266 23.5 27.4266V28.5734ZM23.5 12.5734C23.8167 12.5734 24.0734 12.3167 24.0734 12C24.0734 11.6833 23.8167 11.4266 23.5 11.4266V12.5734ZM27 20L27.4086 20.4022C27.6283 20.1791 27.6283 19.8209 27.4086 19.5978L27 20ZM16.5002 19.4263C16.1835 19.4263 15.9268 19.683 15.9268 19.9997C15.9268 20.3164 16.1835 20.5731 16.5002 20.5731L16.5002 19.4263ZM23.0914 23.1533C22.8692 23.379 22.8721 23.742 23.0978 23.9642C23.3234 24.1863 23.6865 24.1835 23.9086 23.9578L23.0914 23.1533ZM23.9086 16.0422C23.6865 15.8165 23.3234 15.8137 23.0978 16.0358C22.8721 16.258 22.8692 16.621 23.0914 16.8467L23.9086 16.0422ZM23.5 27.4266L15 27.4266V28.5734L23.5 28.5734V27.4266ZM13.5734 26L13.5734 14H12.4266L12.4266 26H13.5734ZM15 12.5734L23.5 12.5734V11.4266L15 11.4266V12.5734ZM27 19.4266L16.5002 19.4263L16.5002 20.5731L27 20.5734L27 19.4266ZM26.5914 19.5978L23.0914 23.1533L23.9086 23.9578L27.4086 20.4022L26.5914 19.5978ZM27.4086 19.5978L23.9086 16.0422L23.0914 16.8467L26.5914 20.4022L27.4086 19.5978ZM13.5734 14C13.5734 13.2121 14.2121 12.5734 15 12.5734V11.4266C13.5788 11.4266 12.4266 12.5788 12.4266 14H13.5734ZM15 27.4266C14.2121 27.4266 13.5734 26.7879 13.5734 26H12.4266C12.4266 27.4212 13.5788 28.5734 15 28.5734V27.4266Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="#4F4F4F"/>
|
||||
<path d="M23.5 21.9V13.6C23.5 12.7163 22.7837 12 21.9 12H18.1C17.2163 12 16.5 12.7163 16.5 13.6V14.5M26 22C26 22.5305 25.8967 23.0368 25.7092 23.5M14 22C14 24.2091 15.7909 26 18 26H20M22 26H20M20 26V28.9998M20 28.9998H17.6M20 28.9998H22.4M16.5 20V21.9C16.5 22.7837 17.2163 23.5 18.1 23.5H20" stroke="white" stroke-linecap="round"/>
|
||||
<path d="M13 14L27 28" stroke="#EC1F1F" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 554 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="#4F4F4F"/>
|
||||
<path d="M20 11L20.4055 10.5945C20.1815 10.3706 19.8185 10.3706 19.5945 10.5945L20 11ZM19.4266 20.5C19.4266 20.8167 19.6833 21.0734 20 21.0734C20.3167 21.0734 20.5734 20.8167 20.5734 20.5L19.4266 20.5ZM21.5945 13.4055C21.8185 13.6294 22.1815 13.6294 22.4055 13.4055C22.6294 13.1815 22.6294 12.8185 22.4055 12.5945L21.5945 13.4055ZM17.5945 12.5945C17.3706 12.8185 17.3706 13.1815 17.5945 13.4055C17.8185 13.6294 18.1815 13.6294 18.4055 13.4055L17.5945 12.5945ZM17 16.0734C17.3167 16.0734 17.5734 15.8167 17.5734 15.5C17.5734 15.1833 17.3167 14.9266 17 14.9266L17 16.0734ZM23 14.9266C22.6833 14.9266 22.4266 15.1833 22.4266 15.5C22.4266 15.8167 22.6833 16.0734 23 16.0734L23 14.9266ZM25.4266 17.5L25.4266 25L26.5734 25L26.5734 17.5L25.4266 17.5ZM24 26.4266L16 26.4266L16 27.5734L24 27.5734L24 26.4266ZM14.5734 25L14.5734 17.5L13.4266 17.5L13.4266 25L14.5734 25ZM19.4266 11L19.4266 20.5L20.5734 20.5L20.5734 11L19.4266 11ZM19.5945 11.4055L21.5945 13.4055L22.4055 12.5945L20.4055 10.5945L19.5945 11.4055ZM19.5945 10.5945L17.5945 12.5945L18.4055 13.4055L20.4055 11.4055L19.5945 10.5945ZM16 16.0734L17 16.0734L17 14.9266L16 14.9266L16 16.0734ZM24 14.9266L23 14.9266L23 16.0734L24 16.0734L24 14.9266ZM14.5734 17.5C14.5734 16.7121 15.2121 16.0734 16 16.0734L16 14.9266C14.5788 14.9266 13.4266 16.0788 13.4266 17.5L14.5734 17.5ZM16 26.4266C15.2121 26.4266 14.5734 25.7879 14.5734 25L13.4266 25C13.4266 26.4212 14.5788 27.5734 16 27.5734L16 26.4266ZM25.4266 25C25.4266 25.7879 24.7879 26.4266 24 26.4266L24 27.5734C25.4212 27.5734 26.5734 26.4212 26.5734 25L25.4266 25ZM26.5734 17.5C26.5734 16.0788 25.4212 14.9266 24 14.9266L24 16.0734C24.7879 16.0734 25.4266 16.7121 25.4266 17.5L26.5734 17.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" fill="#2F80ED"/>
|
||||
<path d="M27.2145 28.2667L27.4783 28.6914H27.4783L27.2145 28.2667ZM12.8009 28.2667L13.0647 27.8419H13.0647L12.8009 28.2667ZM12.0075 26.5842L11.5093 26.5415L12.0075 26.5842ZM28.0079 26.5842L27.5097 26.627L27.5097 26.627L28.0079 26.5842ZM27.2779 24.0084L26.8218 24.2132L27.2779 24.0084ZM12.7375 24.0084L12.2814 23.8035L12.7375 24.0084ZM25.9965 21.9271L26.351 21.5745L25.9965 21.9271ZM14.0189 21.9271L14.3734 22.2796L14.0189 21.9271ZM20.0077 22.6252V23.1252V22.6252ZM24.1114 14.6038C24.1114 15.7464 23.6451 16.9349 22.8815 17.836C22.1186 18.7363 21.0975 19.3077 20.0076 19.3077V20.3077C21.4603 20.3077 22.7411 19.5485 23.6445 18.4825C24.5471 17.4173 25.1114 16.0039 25.1114 14.6038H24.1114ZM20.0076 19.3077C18.9177 19.3077 17.8966 18.7363 17.1336 17.836C16.3701 16.9349 15.9038 15.7464 15.9038 14.6038H14.9038C14.9038 16.0039 15.4681 17.4173 16.3707 18.4825C17.274 19.5485 18.5548 20.3077 20.0076 20.3077V19.3077ZM15.9038 14.6038C15.9038 12.3374 17.7411 10.5 20.0076 10.5V9.5C17.1888 9.5 14.9038 11.7851 14.9038 14.6038H15.9038ZM20.0076 10.5C22.2741 10.5 24.1114 12.3374 24.1114 14.6038H25.1114C25.1114 11.7851 22.8264 9.5 20.0076 9.5V10.5ZM26.9506 27.8419C26.4342 28.1628 25.8601 28.3338 24.8232 28.419C23.77 28.5056 22.3003 28.5002 20.0077 28.5002V29.5002C22.2755 29.5002 23.7998 29.5065 24.9052 29.4157C26.0268 29.3234 26.776 29.1277 27.4783 28.6914L26.9506 27.8419ZM20.0077 28.5002C17.715 28.5002 16.2454 28.5056 15.1922 28.419C14.1552 28.3338 13.5812 28.1628 13.0647 27.8419L12.5371 28.6914C13.2394 29.1277 13.9886 29.3234 15.1102 29.4157C16.2156 29.5065 17.7399 29.5002 20.0077 29.5002V28.5002ZM11.5093 26.5415C11.4375 27.3781 11.7853 28.2244 12.5371 28.6914L13.0647 27.8419C12.6758 27.6003 12.4614 27.1419 12.5056 26.627L11.5093 26.5415ZM27.5097 26.627C27.5539 27.1419 27.3396 27.6003 26.9506 27.8419L27.4783 28.6914C28.23 28.2244 28.5779 27.3781 28.5061 26.5415L27.5097 26.627ZM26.8218 24.2132C27.1389 24.9195 27.4373 25.783 27.5097 26.627L28.5061 26.5415C28.4201 25.5396 28.0735 24.5596 27.734 23.8035L26.8218 24.2132ZM12.5056 26.627C12.5781 25.783 12.8765 24.9195 13.1936 24.2132L12.2814 23.8035C11.9419 24.5596 11.5953 25.5396 11.5093 26.5415L12.5056 26.627ZM13.1936 24.2132C13.6265 23.2491 13.7723 22.8841 14.3734 22.2796L13.6643 21.5745C12.9194 22.3236 12.7107 22.8476 12.2814 23.8035L13.1936 24.2132ZM27.734 23.8035C27.3047 22.8476 27.096 22.3236 26.351 21.5745L25.642 22.2796C26.2431 22.8841 26.3888 23.2491 26.8218 24.2132L27.734 23.8035ZM26.351 21.5745C25.8449 21.0656 25.2894 20.8426 24.7027 20.825C24.1434 20.8083 23.592 20.9801 23.0838 21.1778C22.8269 21.2777 22.5642 21.3914 22.3099 21.4995C22.0518 21.6092 21.7975 21.7154 21.5399 21.8091C21.0242 21.9967 20.5197 22.1252 20.0077 22.1252V23.1252C20.6847 23.1252 21.3137 22.9555 21.8818 22.7488C22.1662 22.6453 22.4414 22.5302 22.7011 22.4198C22.9646 22.3078 23.208 22.2025 23.4463 22.1098C23.9284 21.9222 24.3235 21.8141 24.6728 21.8245C24.9946 21.8342 25.3097 21.9455 25.642 22.2796L26.351 21.5745ZM20.0077 22.1252C19.4957 22.1252 18.9912 21.9967 18.4755 21.8091C18.2179 21.7154 17.9636 21.6092 17.7055 21.4995C17.4512 21.3914 17.1884 21.2777 16.9316 21.1778C16.4234 20.9801 15.8719 20.8083 15.3127 20.825C14.726 20.8426 14.1704 21.0656 13.6643 21.5745L14.3734 22.2796C14.7057 21.9455 15.0208 21.8342 15.3426 21.8245C15.6918 21.8141 16.0869 21.9222 16.569 22.1098C16.8074 22.2025 17.0507 22.3078 17.3143 22.4198C17.574 22.5302 17.8492 22.6453 18.1335 22.7488C18.7017 22.9555 19.3307 23.1252 20.0077 23.1252V22.1252Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -2,9 +2,13 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 94px;
|
||||
|
||||
width: 74px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transform: translateX(-70px);
|
||||
|
||||
border-right: 1px solid #4F4F4F;
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
/* .toolbar-container.closed {
|
||||
@@ -18,16 +22,22 @@
|
||||
.toolbar-field {
|
||||
width: 70px;
|
||||
background: #333333;
|
||||
padding: 14px 15px;
|
||||
box-sizing: border-box;
|
||||
/* border-right: 1px solid red; */
|
||||
}
|
||||
|
||||
.toolbar-open-button {
|
||||
position: absolute;
|
||||
top: calc((100% - 128px) / 2);
|
||||
left: calc(100% - 5px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: auto;
|
||||
|
||||
width: 24px;
|
||||
height: 128px;
|
||||
border: none;
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from "react";
|
||||
import { ButtonContainer } from "./buttonContainer";
|
||||
import './toolbar.css';
|
||||
import { ToolbarButton } from "./toolbarButton";
|
||||
|
||||
type TProps = {
|
||||
onClickOpenButton: () => void
|
||||
@@ -9,7 +11,58 @@ type TProps = {
|
||||
export const Toolbar:React.FC<TProps> = React.memo((props) => {
|
||||
return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
|
||||
<div className="toolbar-field">
|
||||
|
||||
<div className="toolbar-field-top-part">
|
||||
<ToolbarButton
|
||||
type="fullscreen"
|
||||
onClick={() => null}
|
||||
/>
|
||||
<ButtonContainer
|
||||
buttons={[
|
||||
{
|
||||
type: "user",
|
||||
onClick: () => console.log('click')
|
||||
},
|
||||
{
|
||||
type: "user",
|
||||
onClick: () => console.log('click')
|
||||
},
|
||||
{
|
||||
type: "user",
|
||||
onClick: () => console.log('click')
|
||||
},
|
||||
{
|
||||
type: "user",
|
||||
onClick: () => console.log('click')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="toolbar-field-bottom-part">
|
||||
<ButtonContainer
|
||||
buttons={[
|
||||
{
|
||||
type: "control",
|
||||
onClick: () => console.log('click')
|
||||
},
|
||||
{
|
||||
type: "micro",
|
||||
onClick: () => console.log('click')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<ButtonContainer
|
||||
buttons={[
|
||||
{
|
||||
type: "share",
|
||||
onClick: () => console.log('click')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<ToolbarButton
|
||||
type="exit"
|
||||
onClick={() => null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
|
||||
<span className="toolbar-open-button-icon"></span>
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import { TypeToolbarButtons } from "./typeButtons";
|
||||
|
||||
type TProps = {
|
||||
onClick: () => void
|
||||
type: TypeToolbarButtons
|
||||
}
|
||||
|
||||
export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
|
||||
return <button className={`toolbar-button ${props.type}`} onClick={() => props.onClick()}></button>
|
||||
})
|
||||
@@ -0,0 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
export const BorderLine:React.FC = React.memo(() => {
|
||||
return <span className="toolbar-button-container-border-line"></span>
|
||||
})
|
||||
@@ -0,0 +1,11 @@
|
||||
export type TypeToolbarButtons =
|
||||
'fullscreen'
|
||||
| 'user'
|
||||
| 'userse'
|
||||
| 'micro'
|
||||
| 'control'
|
||||
| 'other'
|
||||
| 'sound'
|
||||
| 'exit'
|
||||
| 'copy'
|
||||
| 'share'
|
||||
Reference in New Issue
Block a user