добавлены иконки, прописаны типы кнопок, добавлены подсказки кнопок но без оформления
This commit is contained in:
DmitriyB
@@ -2,12 +2,17 @@ import React from "react";
|
||||
import { ToolbarButton } from "./toolbarButton";
|
||||
import { BorderLine } from "./toolbarButtonContainerBorderLine";
|
||||
import { TypeToolbarButtons } from "./typeButtons";
|
||||
import { CaptionToolbarButtons } from "./typeCaptionButtons";
|
||||
|
||||
type TProps = {
|
||||
buttons: Array<{type: TypeToolbarButtons, isNotification?: boolean, onClick: () => void}>
|
||||
buttons: Array<{
|
||||
type: TypeToolbarButtons,
|
||||
isNotification?: boolean,
|
||||
onClick: () => void
|
||||
}>
|
||||
}
|
||||
|
||||
export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
|
||||
export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
|
||||
return <div className="toolbar-button-container">
|
||||
<BorderLine />
|
||||
{props.buttons.map((button, index) =>
|
||||
@@ -16,6 +21,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
|
||||
onClick={button.onClick}
|
||||
type={button.type}
|
||||
isNotification={button?.isNotification}
|
||||
caption={CaptionToolbarButtons[button.type]}
|
||||
/>)}
|
||||
<BorderLine />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 14.5C3.72386 14.5 3.5 14.7238 3.5 15C3.5 15.2761 3.72386 15.5 4 15.5V14.5ZM8.99977 15H9.49977C9.49977 14.7238 9.27592 14.5 8.99977 14.5V15ZM8.49977 19.9998C8.49977 20.2759 8.72363 20.4998 8.99977 20.4998C9.27592 20.4998 9.49977 20.2759 9.49977 19.9998H8.49977ZM3.64645 19.6462C3.45118 19.8415 3.45118 20.158 3.64645 20.3533C3.84171 20.5486 4.15829 20.5486 4.35355 20.3533L3.64645 19.6462ZM20.3536 4.35374C20.5488 4.15848 20.5488 3.84189 20.3536 3.64663C20.1583 3.45137 19.8417 3.45137 19.6464 3.64663L20.3536 4.35374ZM15 9.00018H14.5C14.5 9.27633 14.7238 9.50018 15 9.50018V9.00018ZM15.5 4.00018C15.5 3.72404 15.2761 3.50018 15 3.50018C14.7238 3.50018 14.5 3.72404 14.5 4.00018H15.5ZM20 9.50018C20.2761 9.50018 20.5 9.27633 20.5 9.00018C20.5 8.72404 20.2761 8.50018 20 8.50018V9.50018ZM4 15.5H8.99977V14.5H4V15.5ZM8.49977 15V19.9998H9.49977V15H8.49977ZM8.64622 14.6464L3.64645 19.6462L4.35355 20.3533L9.35333 15.3535L8.64622 14.6464ZM19.6464 3.64663L14.6464 8.64663L15.3535 9.35374L20.3536 4.35374L19.6464 3.64663ZM14.5 4.00018V9.00018H15.5V4.00018H14.5ZM15 9.50018H20V8.50018H15V9.50018Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 233 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5714 5.8125C10.5714 5.4375 10.3238 4.6875 9.33333 4.6875C8.34286 4.6875 8.09524 5.4375 8.09524 5.8125V6.5M10.5714 5.8125V4.125C10.5714 3.75 10.819 3 11.8095 3C12.8 3 13.0476 3.75 13.0476 4.125V5.25M10.5714 5.8125V9M13.0476 5.25C13.0476 4.875 13.2952 4.125 14.2857 4.125C15.2762 4.125 15.5238 4.875 15.5238 5.25V7.5M13.0476 5.25V11.5M15.5238 7.5C15.5238 7.125 15.7714 6.375 16.7619 6.375C17.7524 6.375 18 7.125 18 7.5V15.375C18 15.5659 17.9885 15.7762 17.963 16M15.5238 7.5V13.125M8.09524 12V13.6875C8.09524 13.6875 7.47619 13.125 7.47619 12C7.47619 11.625 7.22857 10.875 6.2381 10.875C5.24762 10.875 5 11.625 5 12C5 13.6875 5 21 12.4286 21C13.881 21 14.9785 20.6018 15.7981 20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 6L19 20" stroke="#EC1F1F" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 921 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5714 5.8125C10.5714 5.4375 10.3238 4.6875 9.33333 4.6875C8.34286 4.6875 8.09524 5.4375 8.09524 5.8125V13.6875C8.09524 13.6875 7.47619 13.125 7.47619 12C7.47619 11.625 7.22857 10.875 6.2381 10.875C5.24762 10.875 5 11.625 5 12C5 13.6875 5 21 12.4286 21C16.8857 21 18 17.25 18 15.375V7.5C18 7.125 17.7524 6.375 16.7619 6.375C15.7714 6.375 15.5238 7.125 15.5238 7.5M10.5714 5.8125V4.125C10.5714 3.75 10.819 3 11.8095 3C12.8 3 13.0476 3.75 13.0476 4.125V5.25M10.5714 5.8125V12.5625M13.0476 5.25C13.0476 4.875 13.2952 4.125 14.2857 4.125C15.2762 4.125 15.5238 4.875 15.5238 5.25V7.5M13.0476 5.25V12M15.5238 7.5V13.125" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 8.22609C8 6.99665 9.02335 6 10.2857 6H15.7143C16.9767 6 18 6.99665 18 8.22609V17.7739C18 19.0033 16.9767 20 15.7143 20H10.2857C9.02335 20 8 19.0033 8 17.7739V8.22609Z" stroke="white" stroke-linecap="round"/>
|
||||
<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="white" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 430 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="19" height="26" viewBox="0 0 19 26" preserveAspectRatio='none' fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.5 1C18.5 0.815602 18.3985 0.646172 18.2359 0.559163C18.0734 0.472153 17.8761 0.481689 17.7227 0.583975L2.2188 10.9199C0.734468 11.9094 0.734468 14.0906 2.2188 15.0801L17.7227 25.416C17.8761 25.5183 18.0734 25.5278 18.2359 25.4408C18.3985 25.3538 18.5 25.1844 18.5 25V1Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 495 B |
@@ -0,0 +1,9 @@
|
||||
<svg width="65" height="26" viewBox="0 0 65 26" preserveAspectRatio='none' fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.5 1C19.5 0.815602 19.3985 0.646172 19.2359 0.559163C19.0734 0.472153 18.8761 0.481689 18.7227 0.583975L3.2188 10.9199C1.73447 11.9094 1.73447 14.0906 3.2188 15.0801L18.7227 25.416C18.8761 25.5183 19.0734 25.5278 19.2359 25.4408C19.3985 25.3538 19.5 25.1844 19.5 25V1Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<mask id="path-2-outside-1_180_736" maskUnits="userSpaceOnUse" x="19" y="0" width="46" height="26" fill="black">
|
||||
<rect fill="white" x="19" width="46" height="26"/>
|
||||
<path d="M19 1H52C58.6274 1 64 6.37258 64 13C64 19.6274 58.6274 25 52 25H19V1Z"/>
|
||||
</mask>
|
||||
<path d="M19 1H52C58.6274 1 64 6.37258 64 13C64 19.6274 58.6274 25 52 25H19V1Z" fill="#333333"/>
|
||||
<path d="M19 0H52C59.1797 0 65 5.8203 65 13H63C63 6.92487 58.0751 2 52 2H19V0ZM65 13C65 20.1797 59.1797 26 52 26H19V24H52C58.0751 24 63 19.0751 63 13H65ZM19 25V1V25ZM52 0C59.1797 0 65 5.8203 65 13C65 20.1797 59.1797 26 52 26V24C58.0751 24 63 19.0751 63 13C63 6.92487 58.0751 2 52 2V0Z" fill="#4F4F4F" mask="url(#path-2-outside-1_180_736)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -1,4 +1,3 @@
|
||||
<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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.5 20.5734C15.8167 20.5734 16.0734 20.3167 16.0734 20C16.0734 19.6833 15.8167 19.4266 15.5 19.4266V20.5734ZM15.5 4.57339C15.8167 4.57339 16.0734 4.31668 16.0734 4C16.0734 3.68332 15.8167 3.42661 15.5 3.42661V4.57339ZM19 12L19.4086 12.4022C19.6283 12.1791 19.6283 11.8209 19.4086 11.5978L19 12ZM8.50018 11.4263C8.1835 11.4263 7.92678 11.683 7.92677 11.9997C7.92676 12.3164 8.18347 12.5731 8.50015 12.5731L8.50018 11.4263ZM15.0914 15.1533C14.8692 15.379 14.8721 15.742 15.0978 15.9642C15.3234 16.1863 15.6865 16.1835 15.9086 15.9578L15.0914 15.1533ZM15.9086 8.0422C15.6865 7.81652 15.3234 7.81366 15.0978 8.03581C14.8721 8.25797 14.8692 8.62101 15.0914 8.84669L15.9086 8.0422ZM15.5 19.4266L7 19.4266V20.5734L15.5 20.5734V19.4266ZM5.57339 18L5.57339 6H4.42661L4.42661 18H5.57339ZM7 4.57339L15.5 4.57339V3.42661L7 3.42661V4.57339ZM19 11.4266L8.50018 11.4263L8.50015 12.5731L19 12.5734L19 11.4266ZM18.5914 11.5978L15.0914 15.1533L15.9086 15.9578L19.4086 12.4022L18.5914 11.5978ZM19.4086 11.5978L15.9086 8.0422L15.0914 8.84669L18.5914 12.4022L19.4086 11.5978ZM5.57339 6C5.57339 5.21211 6.21211 4.57339 7 4.57339V3.42661C5.57875 3.42661 4.42661 4.57875 4.42661 6H5.57339ZM7 19.4266C6.21211 19.4266 5.57339 18.7879 5.57339 18H4.42661C4.42661 19.4212 5.57875 20.5734 7 20.5734V19.4266Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.5 6.5C11.5 6.16667 11.3 5.5 10.5 5.5C9.7 5.5 9.5 6.16667 9.5 6.5V13.5C9.5 13.5 9 13 9 12C9 11.6667 8.8 11 8 11C7.2 11 7 11.6667 7 12C7 13.5 7 20 13 20C16.6 20 17.5 16.6667 17.5 15V8C17.5 7.66667 17.3 7 16.5 7C15.7 7 15.5 7.66667 15.5 8M11.5 6.5V5C11.5 4.66667 11.7 4 12.5 4C13.3 4 13.5 4.66667 13.5 5V6M11.5 6.5V12.5M13.5 6C13.5 5.66667 13.7 5 14.5 5C15.3 5 15.5 5.66667 15.5 6V8M13.5 6V12M15.5 8V13" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 581 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.5 13.9V5.6C15.5 4.71634 14.7837 4 13.9 4H10.1C9.21634 4 8.5 4.71634 8.5 5.6V6.5M18 14C18 14.5305 17.8967 15.0368 17.7092 15.5M6 14C6 16.2091 7.79086 18 10 18H12M14 18H12M12 18V20.9998M12 20.9998H9.6M12 20.9998H14.4M8.5 12V13.9C8.5 14.7837 9.21634 15.5 10.1 15.5H12" stroke="white" stroke-linecap="round"/>
|
||||
<path d="M5 6L19 20" stroke="#EC1F1F" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 485 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 14C18 16.2091 16.2091 18 14 18H12M6 14C6 16.2091 7.79086 18 10 18H12M12 18V20.9998M12 20.9998H9.6M12 20.9998H14.4M10.1 15.5H13.9C14.7837 15.5 15.5 14.7837 15.5 13.9V5.6C15.5 4.71634 14.7837 4 13.9 4H10.1C9.21634 4 8.5 4.71634 8.5 5.6V13.9C8.5 14.7837 9.21634 15.5 10.1 15.5Z" stroke="white" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 432 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 20.5C9.27614 20.5 9.5 20.2761 9.5 20C9.5 19.7239 9.27614 19.5 9 19.5V20.5ZM4 20H3.5C3.5 20.2761 3.72386 20.5 4 20.5V20ZM4.5 15C4.5 14.7239 4.27614 14.5 4 14.5C3.72386 14.5 3.5 14.7239 3.5 15H4.5ZM9.35355 15.3536C9.54882 15.1583 9.54882 14.8417 9.35355 14.6464C9.15829 14.4512 8.84171 14.4512 8.64645 14.6464L9.35355 15.3536ZM14.6464 8.64645C14.4512 8.84171 14.4512 9.15829 14.6464 9.35355C14.8417 9.54882 15.1583 9.54882 15.3536 9.35355L14.6464 8.64645ZM20.3536 4.35355C20.5488 4.15829 20.5488 3.84171 20.3536 3.64645C20.1583 3.45118 19.8417 3.45118 19.6464 3.64645L20.3536 4.35355ZM19.497 9C19.497 9.27614 19.7208 9.5 19.997 9.5C20.2731 9.5 20.497 9.27614 20.497 9H19.497ZM19.997 4H20.497C20.497 3.8674 20.4443 3.74022 20.3505 3.64645C20.2567 3.55268 20.1296 3.5 19.997 3.5V4ZM15 3.5C14.7239 3.5 14.5 3.72386 14.5 4C14.5 4.27615 14.7239 4.5 15 4.5V3.5ZM9 19.5H4V20.5H9V19.5ZM4.5 20V15H3.5V20H4.5ZM4.35355 20.3536L9.35355 15.3536L8.64645 14.6464L3.64645 19.6464L4.35355 20.3536ZM15.3536 9.35355L20.3536 4.35355L19.6464 3.64645L14.6464 8.64645L15.3536 9.35355ZM20.497 9V4H19.497V9H20.497ZM19.997 3.5L15 3.5V4.5L19.997 4.5V3.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12Z" fill="white"/>
|
||||
<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="white"/>
|
||||
<path d="M22 12C22 13.1046 21.1046 14 20 14C18.8954 14 18 13.1046 18 12C18 10.8954 18.8954 10 20 10C21.1046 10 22 10.8954 22 12Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 529 B |
@@ -1,4 +1,3 @@
|
||||
<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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3L12.4055 2.59455C12.1815 2.37063 11.8185 2.37063 11.5945 2.59455L12 3ZM11.4266 12.5C11.4266 12.8167 11.6833 13.0734 12 13.0734C12.3167 13.0734 12.5734 12.8167 12.5734 12.5L11.4266 12.5ZM13.5945 5.40545C13.8185 5.62937 14.1815 5.62937 14.4055 5.40545C14.6294 5.18153 14.6294 4.81847 14.4055 4.59455L13.5945 5.40545ZM9.59455 4.59455C9.37063 4.81847 9.37063 5.18153 9.59455 5.40545C9.81847 5.62937 10.1815 5.62937 10.4055 5.40545L9.59455 4.59455ZM9 8.07339C9.31668 8.07339 9.57339 7.81668 9.57339 7.5C9.57339 7.18332 9.31668 6.92661 9 6.92661L9 8.07339ZM15 6.92661C14.6833 6.92661 14.4266 7.18332 14.4266 7.5C14.4266 7.81668 14.6833 8.07339 15 8.07339L15 6.92661ZM17.4266 9.5L17.4266 17L18.5734 17L18.5734 9.5L17.4266 9.5ZM16 18.4266L8 18.4266L8 19.5734L16 19.5734L16 18.4266ZM6.57339 17L6.57339 9.5L5.42661 9.5L5.42661 17L6.57339 17ZM11.4266 3L11.4266 12.5L12.5734 12.5L12.5734 3L11.4266 3ZM11.5945 3.40545L13.5945 5.40545L14.4055 4.59455L12.4055 2.59455L11.5945 3.40545ZM11.5945 2.59455L9.59455 4.59455L10.4055 5.40545L12.4055 3.40545L11.5945 2.59455ZM8 8.07339L9 8.07339L9 6.92661L8 6.92661L8 8.07339ZM16 6.92661L15 6.92661L15 8.07339L16 8.07339L16 6.92661ZM6.57339 9.5C6.57339 8.71211 7.21211 8.07339 8 8.07339L8 6.92661C6.57875 6.92661 5.42661 8.07875 5.42661 9.5L6.57339 9.5ZM8 18.4266C7.21211 18.4266 6.57339 17.7879 6.57339 17L5.42661 17C5.42661 18.4212 6.57875 19.5734 8 19.5734L8 18.4266ZM17.4266 17C17.4266 17.7879 16.7879 18.4266 16 18.4266L16 19.5734C17.4212 19.5734 18.5734 18.4212 18.5734 17L17.4266 17ZM18.5734 9.5C18.5734 8.07875 17.4212 6.92661 16 6.92661L16 8.07339C16.7879 8.07339 17.4266 8.71211 17.4266 9.5L18.5734 9.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.4375 10.8182H4.9375H5.4375ZM16.6404 5.997L17.0006 5.65027L16.6404 5.997ZM18.5 17.9881C18.5 18.2643 18.7239 18.4881 19 18.4881C19.2761 18.4881 19.5 18.2643 19.5 17.9881H18.5ZM15 13.6482C15 13.9244 15.2239 14.1482 15.5 14.1482C15.7761 14.1482 16 13.9244 16 13.6482H15ZM6.05253 9.59318C6.10399 9.32187 5.92577 9.06022 5.65446 9.00876C5.38316 8.9573 5.1215 9.13552 5.07004 9.40682L6.05253 9.59318ZM7.37755 5.28509C7.17199 5.46949 7.15484 5.78561 7.33923 5.99116C7.52363 6.19672 7.83975 6.21387 8.0453 6.02948L7.37755 5.28509ZM12 4.5C13.6016 4.5 15.1416 5.16083 16.2801 6.34373L17.0006 5.65027C15.6778 4.27585 13.8794 3.5 12 3.5V4.5ZM16.2801 6.34373C17.4193 7.52728 18.0625 9.13646 18.0625 10.8182H19.0625C19.0625 8.88332 18.3229 7.02403 17.0006 5.65027L16.2801 6.34373ZM4.9375 10.8182L4.9375 12.8115H5.9375L5.9375 10.8182H4.9375ZM18.0625 10.8182V12.8115H19.0625V10.8182H18.0625ZM6 13.1364H7.5V12.1364H6V13.1364ZM8 13.6482V17.9881H9V13.6482H8ZM7.5 18.5H6V19.5H7.5V18.5ZM5.5 17.9881V13.6482H4.5V17.9881H5.5ZM6 18.5C5.7294 18.5 5.5 18.2764 5.5 17.9881H4.5C4.5 18.8175 5.16603 19.5 6 19.5V18.5ZM8 17.9881C8 18.2764 7.7706 18.5 7.5 18.5V19.5C8.33397 19.5 9 18.8175 9 17.9881H8ZM7.5 13.1364C7.7706 13.1364 8 13.36 8 13.6482H9C9 12.8188 8.33397 12.1364 7.5 12.1364V13.1364ZM6 12.1364C5.16603 12.1364 4.5 12.8188 4.5 13.6482H5.5C5.5 13.36 5.7294 13.1364 6 13.1364V12.1364ZM16.5 13.1364H18V12.1364H16.5V13.1364ZM18.5 13.6482V17.9881H19.5V13.6482H18.5ZM18 13.1364C18.2706 13.1364 18.5 13.36 18.5 13.6482H19.5C19.5 12.8188 18.834 12.1364 18 12.1364V13.1364ZM16.5 12.1364C15.666 12.1364 15 12.8188 15 13.6482H16C16 13.36 16.2294 13.1364 16.5 13.1364V12.1364ZM5.9375 10.8182C5.9375 10.4038 5.97656 9.9937 6.05253 9.59318L5.07004 9.40682C4.98248 9.86847 4.9375 10.341 4.9375 10.8182H5.9375ZM8.0453 6.02948C9.14331 5.0445 10.5461 4.5 12 4.5V3.5C10.2943 3.5 8.655 4.13914 7.37755 5.28509L8.0453 6.02948Z" fill="white"/>
|
||||
<path d="M5 6L19 20" stroke="#EC1F1F" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.4375 12.8115L5.4375 10.8182C5.4375 9.00989 6.1289 7.27566 7.35961 5.997C8.59032 4.71834 10.2595 4 12 4C13.7405 4 15.4097 4.71834 16.6404 5.997C17.8711 7.27566 18.5625 9.00989 18.5625 10.8182V12.8115M6 19H7.5C8.05228 19 8.5 18.547 8.5 17.9881V13.6482C8.5 13.0894 8.05228 12.6364 7.5 12.6364H6C5.44772 12.6364 5 13.0894 5 13.6482V17.9881C5 18.547 5.44772 19 6 19ZM16.5 19H18C18.5523 19 19 18.547 19 17.9881V13.6482C19 13.0894 18.5523 12.6364 18 12.6364H16.5C15.9477 12.6364 15.5 13.0894 15.5 13.6482V17.9881C15.5 18.547 15.9477 19 16.5 19Z" stroke="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 671 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.2145 20.2667L19.4783 20.6914H19.4783L19.2145 20.2667ZM4.80091 20.2667L5.06475 19.8419H5.06475L4.80091 20.2667ZM4.00747 18.5842L3.5093 18.5415L4.00747 18.5842ZM20.0079 18.5842L19.5097 18.627L19.5097 18.627L20.0079 18.5842ZM19.2779 16.0084L18.8218 16.2132L19.2779 16.0084ZM4.7375 16.0084L4.28138 15.8035L4.7375 16.0084ZM17.9965 13.9271L18.351 13.5745L17.9965 13.9271ZM6.01888 13.9271L6.37342 14.2796L6.01888 13.9271ZM12.0077 14.6252V15.1252V14.6252ZM16.1114 6.60385C16.1114 7.74638 15.6451 8.93493 14.8815 9.836C14.1186 10.7363 13.0975 11.3077 12.0076 11.3077V12.3077C13.4603 12.3077 14.7411 11.5485 15.6445 10.4825C16.5471 9.41732 17.1114 8.00394 17.1114 6.60385H16.1114ZM12.0076 11.3077C10.9177 11.3077 9.89659 10.7363 9.13364 9.836C8.37005 8.93493 7.90376 7.74638 7.90376 6.60385H6.90376C6.90376 8.00394 7.46806 9.41732 8.37073 10.4825C9.27404 11.5485 10.5548 12.3077 12.0076 12.3077V11.3077ZM7.90376 6.60385C7.90376 4.33735 9.7411 2.5 12.0076 2.5V1.5C9.18881 1.5 6.90376 3.78507 6.90376 6.60385H7.90376ZM12.0076 2.5C14.2741 2.5 16.1114 4.33735 16.1114 6.60385H17.1114C17.1114 3.78507 14.8264 1.5 12.0076 1.5V2.5ZM18.9506 19.8419C18.4342 20.1628 17.8601 20.3338 16.8232 20.419C15.77 20.5056 14.3003 20.5002 12.0077 20.5002V21.5002C14.2755 21.5002 15.7998 21.5065 16.9052 21.4157C18.0268 21.3234 18.776 21.1277 19.4783 20.6914L18.9506 19.8419ZM12.0077 20.5002C9.71505 20.5002 8.24536 20.5056 7.19216 20.419C6.15524 20.3338 5.58123 20.1628 5.06475 19.8419L4.53707 20.6914C5.23943 21.1277 5.98857 21.3234 7.11022 21.4157C8.21558 21.5065 9.73986 21.5002 12.0077 21.5002V20.5002ZM3.5093 18.5415C3.4375 19.3781 3.78534 20.2244 4.53707 20.6914L5.06475 19.8419C4.67581 19.6003 4.46144 19.1419 4.50564 18.627L3.5093 18.5415ZM19.5097 18.627C19.5539 19.1419 19.3396 19.6003 18.9506 19.8419L19.4783 20.6914C20.23 20.2244 20.5779 19.3781 20.5061 18.5415L19.5097 18.627ZM18.8218 16.2132C19.1389 16.9195 19.4373 17.783 19.5097 18.627L20.5061 18.5415C20.4201 17.5396 20.0735 16.5596 19.734 15.8035L18.8218 16.2132ZM4.50564 18.627C4.57808 17.783 4.87646 16.9195 5.19362 16.2132L4.28138 15.8035C3.94187 16.5596 3.5953 17.5396 3.5093 18.5415L4.50564 18.627ZM5.19362 16.2132C5.62655 15.2491 5.77231 14.8841 6.37342 14.2796L5.66434 13.5745C4.91939 14.3236 4.71065 14.8476 4.28138 15.8035L5.19362 16.2132ZM19.734 15.8035C19.3047 14.8476 19.096 14.3236 18.351 13.5745L17.642 14.2796C18.2431 14.8841 18.3888 15.2491 18.8218 16.2132L19.734 15.8035ZM18.351 13.5745C17.8449 13.0656 17.2894 12.8426 16.7027 12.825C16.1434 12.8083 15.592 12.9801 15.0838 13.1778C14.8269 13.2777 14.5642 13.3914 14.3099 13.4995C14.0518 13.6092 13.7975 13.7154 13.5399 13.8091C13.0242 13.9967 12.5197 14.1252 12.0077 14.1252V15.1252C12.6847 15.1252 13.3137 14.9555 13.8818 14.7488C14.1662 14.6453 14.4414 14.5302 14.7011 14.4198C14.9646 14.3078 15.208 14.2025 15.4463 14.1098C15.9284 13.9222 16.3235 13.8141 16.6728 13.8245C16.9946 13.8342 17.3097 13.9455 17.642 14.2796L18.351 13.5745ZM12.0077 14.1252C11.4957 14.1252 10.9912 13.9967 10.4755 13.8091C10.2179 13.7154 9.96362 13.6092 9.7055 13.4995C9.4512 13.3914 9.18845 13.2777 8.93161 13.1778C8.42336 12.9801 7.87195 12.8083 7.31266 12.825C6.72595 12.8426 6.17045 13.0656 5.66434 13.5745L6.37342 14.2796C6.70572 13.9455 7.02076 13.8342 7.34258 13.8245C7.69184 13.8141 8.08695 13.9222 8.56904 14.1098C8.80738 14.2025 9.05075 14.3078 9.31427 14.4198C9.57397 14.5302 9.84918 14.6453 10.1335 14.7488C10.7017 14.9555 11.3307 15.1252 12.0077 15.1252V14.1252Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.3999 19.4209L19.6737 19.8392L19.3999 19.4209ZM8.6001 19.4209L8.87393 19.0025H8.87393L8.6001 19.4209ZM8.0056 18.0927L7.50725 18.0521L8.0056 18.0927ZM19.9944 18.0927L19.4961 18.1333V18.1333L19.9944 18.0927ZM19.4474 16.0591L18.9874 16.2551V16.2551L19.4474 16.0591ZM8.55259 16.0591L8.09263 15.8631H8.09263L8.55259 16.0591ZM18.4873 14.416L18.8509 14.0728L18.4873 14.416ZM9.51271 14.416L9.87633 14.7592L9.51271 14.416ZM16.9495 8.63457C16.9495 9.51685 16.6071 10.4348 16.0495 11.1281C15.4914 11.822 14.7604 12.2428 13.9999 12.2428V13.2428C15.1446 13.2428 16.1384 12.6131 16.8288 11.7548C17.5197 10.8958 17.9495 9.75961 17.9495 8.63457H16.9495ZM13.9999 12.2428C13.2394 12.2428 12.5085 11.822 11.9503 11.1281C11.3927 10.4348 11.0504 9.51685 11.0504 8.63457H10.0504C10.0504 9.75961 10.4802 10.8958 11.1711 11.7548C11.8615 12.6131 12.8553 13.2428 13.9999 13.2428V12.2428ZM11.0504 8.63457C11.0504 6.87846 12.3952 5.5 13.9999 5.5V4.5C11.7943 4.5 10.0504 6.37605 10.0504 8.63457H11.0504ZM13.9999 5.5C15.6046 5.5 16.9495 6.87846 16.9495 8.63457H17.9495C17.9495 6.37604 16.2055 4.5 13.9999 4.5V5.5ZM19.1261 19.0025C18.764 19.2395 18.359 19.3703 17.5957 19.4364C16.8145 19.5041 15.7216 19.4999 14 19.4999V20.4999C15.6955 20.4999 16.8459 20.5051 17.682 20.4327C18.5361 20.3587 19.1225 20.2 19.6737 19.8392L19.1261 19.0025ZM14 19.4999C12.2784 19.4999 11.1855 19.5041 10.4043 19.4364C9.64101 19.3703 9.23596 19.2395 8.87393 19.0025L8.32628 19.8392C8.8775 20.2 9.46387 20.3587 10.318 20.4327C11.1541 20.5051 12.3045 20.4999 14 20.4999V19.4999ZM7.50725 18.0521C7.45173 18.7336 7.71871 19.4416 8.32628 19.8392L8.87393 19.0025C8.62682 18.8408 8.47254 18.5188 8.50395 18.1333L7.50725 18.0521ZM19.4961 18.1333C19.5275 18.5188 19.3732 18.8408 19.1261 19.0025L19.6737 19.8392C20.2813 19.4416 20.5483 18.7336 20.4928 18.0521L19.4961 18.1333ZM18.9874 16.2551C19.223 16.8079 19.4428 17.4798 19.4961 18.1333L20.4928 18.0521C20.4273 17.2483 20.1638 16.4648 19.9074 15.8631L18.9874 16.2551ZM8.50395 18.1333C8.55718 17.4798 8.77698 16.8079 9.01256 16.2551L8.09263 15.8631C7.83617 16.4648 7.57272 17.2483 7.50725 18.0521L8.50395 18.1333ZM9.01256 16.2551C9.33773 15.4922 9.44099 15.2204 9.87633 14.7592L9.14908 14.0728C8.57585 14.6802 8.41348 15.1102 8.09263 15.8631L9.01256 16.2551ZM19.9074 15.8631C19.5865 15.1102 19.4242 14.6802 18.8509 14.0728L18.1237 14.7592C18.559 15.2205 18.6623 15.4922 18.9874 16.2551L19.9074 15.8631ZM18.8509 14.0728C18.4523 13.6504 18.0036 13.4559 17.5224 13.4407C17.0715 13.4265 16.635 13.5723 16.251 13.7297C16.056 13.8097 15.8564 13.9006 15.6672 13.9854C15.474 14.0719 15.2864 14.1544 15.0972 14.2269C14.718 14.3723 14.3586 14.4671 14 14.4671V15.4671C14.5323 15.4671 15.0223 15.3266 15.4551 15.1607C15.672 15.0775 15.8812 14.9853 16.0759 14.898C16.2747 14.809 16.4543 14.7271 16.6303 14.655C16.9884 14.5082 17.2611 14.433 17.4909 14.4403C17.6905 14.4465 17.8941 14.516 18.1237 14.7592L18.8509 14.0728ZM14 14.4671C13.6414 14.4671 13.282 14.3723 12.9028 14.2269C12.7136 14.1544 12.526 14.0719 12.3328 13.9854C12.1436 13.9006 11.944 13.8097 11.749 13.7297C11.365 13.5723 10.9285 13.4265 10.4776 13.4407C9.99642 13.4559 9.54775 13.6504 9.14908 14.0728L9.87633 14.7592C10.1059 14.516 10.3095 14.4465 10.5091 14.4403C10.7389 14.433 11.0116 14.5082 11.3697 14.655C11.5457 14.7271 11.7253 14.809 11.9241 14.898C12.1188 14.9853 12.328 15.0775 12.5449 15.1607C12.9777 15.3266 13.4677 15.4671 14 15.4671V14.4671Z" fill="white"/>
|
||||
<path d="M4.50009 17.4981L4.78144 17.0848H4.78144L4.50009 17.4981ZM4.00467 16.347L3.50619 16.3079L4.00467 16.347ZM4.4605 14.5845L3.99784 14.3949H3.99784L4.4605 14.5845ZM5.26059 13.1605L5.63085 13.4965L5.26059 13.1605ZM9.40562 5.53851C9.6768 5.59063 9.93889 5.41305 9.99101 5.14187C10.0431 4.87069 9.86556 4.6086 9.59438 4.55648L9.40562 5.53851ZM9.61866 12.1355C9.88691 12.0699 10.0512 11.7994 9.98572 11.5311C9.92018 11.2628 9.6496 11.0985 9.38134 11.164L9.61866 12.1355ZM6.08951 18.4547C6.36495 18.4745 6.60426 18.2672 6.62402 17.9918C6.64379 17.7164 6.43653 17.477 6.1611 17.4573L6.08951 18.4547ZM7.58938 13.7986C7.84316 13.9075 8.13714 13.79 8.246 13.5362C8.35487 13.2824 8.23739 12.9885 7.98361 12.8796L7.58938 13.7986ZM8.99994 11.2104C8.4065 11.2104 7.82021 10.8682 7.36279 10.2767C6.90694 9.68726 6.62531 8.9037 6.62531 8.14996H5.62531C5.62531 9.1359 5.98718 10.1326 6.57174 10.8885C7.15473 11.6423 8.00575 12.2104 8.99994 12.2104V11.2104ZM6.62531 8.14996C6.62531 6.6424 7.73052 5.5 8.99994 5.5V4.5C7.09412 4.5 5.62531 6.17817 5.62531 8.14996H6.62531ZM3.50619 16.3079C3.4591 16.9092 3.68396 17.5474 4.21873 17.9114L4.78144 17.0848C4.60398 16.964 4.4778 16.7095 4.50314 16.386L3.50619 16.3079ZM4.50314 16.386C4.54693 15.8269 4.72803 15.2503 4.92315 14.7742L3.99784 14.3949C3.78293 14.9194 3.56132 15.6041 3.50619 16.3079L4.50314 16.386ZM4.92315 14.7742C5.19469 14.1116 5.27724 13.8862 5.63085 13.4965L4.89032 12.8245C4.40345 13.361 4.26466 13.7439 3.99784 14.3949L4.92315 14.7742ZM8.99994 5.5C9.1386 5.5 9.27409 5.51322 9.40562 5.53851L9.59438 4.55648C9.4011 4.51933 9.20241 4.5 8.99994 4.5V5.5ZM9.38134 11.164C9.25642 11.1946 9.12915 11.2104 8.99994 11.2104V12.2104C9.21186 12.2104 9.41877 12.1843 9.61866 12.1355L9.38134 11.164ZM6.1611 17.4573C5.43358 17.4051 5.0871 17.2928 4.78144 17.0848L4.21873 17.9114C4.73175 18.2606 5.27933 18.3966 6.08951 18.4547L6.1611 17.4573ZM7.98361 12.8796C7.74328 12.7765 7.55289 12.6806 7.29998 12.5671C7.06993 12.4639 6.81755 12.3606 6.55856 12.301C6.29528 12.2405 6.00464 12.2201 5.70503 12.3016C5.40147 12.3842 5.13038 12.56 4.89032 12.8245L5.63085 13.4965C5.76395 13.3499 5.87621 13.2914 5.96751 13.2666C6.06277 13.2406 6.17851 13.2397 6.33445 13.2756C6.49468 13.3125 6.67437 13.3825 6.89055 13.4795C7.08386 13.5662 7.35385 13.6976 7.58938 13.7986L7.98361 12.8796Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
@@ -65,6 +65,8 @@
|
||||
border: none;
|
||||
background: url('openToolbarIcon.svg') 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-open-button-icon {
|
||||
@@ -78,6 +80,10 @@
|
||||
background: url('closeToolbarIcon.svg') 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
.toolbar-button-area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
@@ -85,6 +91,45 @@
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
background-size: 100% 100%;
|
||||
background-color: #4F4F4F;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.toolbar-button-description-container {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
height: 24px;
|
||||
top: calc(50% - 12px);
|
||||
background-color: #27AE60;
|
||||
transition: .3s;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* width: auto; */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.toolbar-button-area:hover .toolbar-button-description-container {
|
||||
opacity: 1;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.toolbar-button-description-rectangle {
|
||||
/* display: inline-block; */
|
||||
white-space: nowrap;
|
||||
/* flex-shrink: 0; */
|
||||
}
|
||||
|
||||
.toolbar-button-description-triangle {
|
||||
display: flex;
|
||||
width: 18px;
|
||||
height: 24px;
|
||||
background-color: #EB5757;
|
||||
}
|
||||
|
||||
.toolbar-button.notification::after {
|
||||
@@ -98,52 +143,84 @@
|
||||
background-color: #F2994A;
|
||||
}
|
||||
|
||||
.toolbar-button.fullscreen {
|
||||
background: url('./icons/disableFullscreenIcon.svg');
|
||||
.toolbar-button.fullscreenOn {
|
||||
background: url('./icons/openFullscreenIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.fullscreenOff {
|
||||
background: url('./icons/closeFullscreenIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.user {
|
||||
background: url('icons/userIcon.svg') 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
.toolbar-button.admin {
|
||||
background: url('./icons/adminIcon.svg');
|
||||
background-color: #2F80ED;
|
||||
}
|
||||
|
||||
.toolbar-button.self {
|
||||
background: url('./icons/selfIcon.svg');
|
||||
background-color: #27AE60;
|
||||
}
|
||||
|
||||
.toolbar-button.guest {
|
||||
background: url('./icons/guestIcon.svg');
|
||||
background-color: #9B51E0;
|
||||
}
|
||||
|
||||
.toolbar-button.users {
|
||||
background: url('./icons/disableFullscreenIcon.svg');
|
||||
}
|
||||
|
||||
.toolbar-button.micro {
|
||||
background: url('./icons/microDisabledIcon.svg');
|
||||
.toolbar-button.microOff {
|
||||
background: url('./icons/microOffIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.control {
|
||||
background: url('./icons/controlDisabledIcon.svg');
|
||||
.toolbar-button.microOn {
|
||||
background: url('./icons/microOnIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.controlOff {
|
||||
background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.controlOn {
|
||||
background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.other {
|
||||
background: url('./icons/disableFullscreenIcon.svg');
|
||||
background: url('./icons/othertIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.sound {
|
||||
background: url('./icons/disableFullscreenIcon.svg');
|
||||
.toolbar-button.soundOff {
|
||||
background: url('./icons/soundOffIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.soundOn {
|
||||
background: url('./icons/soundOnIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.exit {
|
||||
background: url('./icons/exitIcon.svg');
|
||||
background: url('./icons/exitIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #EB5757;
|
||||
}
|
||||
|
||||
.toolbar-button.copy {
|
||||
background: url('./icons/disableFullscreenIcon.svg');
|
||||
background: url('./icons/copyIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
.toolbar-button.share {
|
||||
background: url('./icons/shareIcon.svg');
|
||||
background: url('./icons/shareIcon.svg') 50% 50% no-repeat;
|
||||
background-color: #4F4F4F;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ButtonContainer } from "./buttonContainer";
|
||||
import './toolbar.css';
|
||||
import { ToolbarButton } from "./toolbarButton";
|
||||
import { BorderLine } from "./toolbarButtonContainerBorderLine";
|
||||
import { CaptionToolbarButtons } from "./typeCaptionButtons";
|
||||
|
||||
type TProps = {
|
||||
onClickOpenButton: () => void
|
||||
@@ -14,25 +15,26 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
|
||||
<div className="toolbar-field">
|
||||
<div className="toolbar-field-part">
|
||||
<ToolbarButton
|
||||
type="fullscreen"
|
||||
type="fullscreenOn"
|
||||
onClick={() => null}
|
||||
caption={CaptionToolbarButtons["fullscreenOn"]}
|
||||
/>
|
||||
<ButtonContainer
|
||||
buttons={[
|
||||
{
|
||||
type: "admin",
|
||||
type: "user admin",
|
||||
onClick: () => console.log('click'),
|
||||
},
|
||||
{
|
||||
type: "self",
|
||||
type: "user self",
|
||||
onClick: () => console.log('click')
|
||||
},
|
||||
{
|
||||
type: "guest",
|
||||
type: "user guest",
|
||||
onClick: () => console.log('click')
|
||||
},
|
||||
{
|
||||
type: "guest",
|
||||
type: "user guest",
|
||||
onClick: () => console.log('click'),
|
||||
isNotification: true
|
||||
}
|
||||
@@ -43,11 +45,11 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
|
||||
<ButtonContainer
|
||||
buttons={[
|
||||
{
|
||||
type: "control",
|
||||
type: "controlOff",
|
||||
onClick: () => console.log('click')
|
||||
},
|
||||
{
|
||||
type: "micro",
|
||||
type: "microOff",
|
||||
onClick: () => console.log('click')
|
||||
}
|
||||
]}
|
||||
@@ -55,11 +57,13 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
|
||||
<ToolbarButton
|
||||
type="share"
|
||||
onClick={() => console.log('click')}
|
||||
caption={CaptionToolbarButtons["share"]}
|
||||
/>
|
||||
<BorderLine />
|
||||
<ToolbarButton
|
||||
type="exit"
|
||||
onClick={() => null}
|
||||
caption={CaptionToolbarButtons["exit"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,11 +5,19 @@ type TProps = {
|
||||
onClick: () => void
|
||||
type: TypeToolbarButtons
|
||||
isNotification?: boolean
|
||||
caption: string
|
||||
}
|
||||
|
||||
export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
|
||||
return <button
|
||||
className={`toolbar-button ${props.type} ${props?.isNotification ? 'notification' : ''}`}
|
||||
onClick={() => props.onClick()}>
|
||||
return <div className="toolbar-button-area">
|
||||
<button
|
||||
className={`toolbar-button ${props.type} ${props?.isNotification ? 'notification' : ''}`}
|
||||
onClick={() => props.onClick()}
|
||||
>
|
||||
</button>
|
||||
<div className="toolbar-button-description-container">
|
||||
<span className="toolbar-button-description-triangle"></span>
|
||||
<span className="toolbar-button-description-rectangle">{props.caption}</span>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
@@ -1,13 +1,17 @@
|
||||
export type TypeToolbarButtons =
|
||||
'fullscreen'
|
||||
| 'admin'
|
||||
| 'guest'
|
||||
| 'self'
|
||||
'fullscreenOn'
|
||||
| 'fullscreenOff'
|
||||
| 'user admin'
|
||||
| 'user guest'
|
||||
| 'user self'
|
||||
| 'users'
|
||||
| 'micro'
|
||||
| 'control'
|
||||
| 'microOn'
|
||||
| 'microOff'
|
||||
| 'controlOn'
|
||||
| 'controlOff'
|
||||
| 'other'
|
||||
| 'sound'
|
||||
| 'soundOn'
|
||||
| 'soundOff'
|
||||
| 'exit'
|
||||
| 'copy'
|
||||
| 'share'
|
||||
@@ -0,0 +1,18 @@
|
||||
export const CaptionToolbarButtons = {
|
||||
fullscreenOn: 'Развернуть',
|
||||
fullscreenOff: 'Свернуть',
|
||||
'user admin': 'Администратор',
|
||||
'user guest': 'Гость',
|
||||
'user self': 'Вы',
|
||||
'users': 'Пользователи',
|
||||
'microOff': 'Включить микрофон',
|
||||
'microOn': 'Выключить микрофон',
|
||||
'controlOn': '',
|
||||
'controlOff': 'Запрос управления',
|
||||
'other': '',
|
||||
'soundOn': '',
|
||||
'soundOff': '',
|
||||
'exit': 'Завершить презентацию',
|
||||
'copy': '',
|
||||
'share': 'Поделиться'
|
||||
}
|
||||
Reference in New Issue
Block a user