diff --git a/src/App.css b/src/App.css index e600dea..8b7aa60 100644 --- a/src/App.css +++ b/src/App.css @@ -11,9 +11,4 @@ html, body, #root { div { box-sizing: border-box; } .d-none { display: none; visibility: hidden;} -.d-flex { display: flex; } -.d-block { display: flex; } -.flex-column { flex-direction: column; } -.flex-row { flex-direction: row; } -.align-items-center { align-items: center; } -.justify-center { justify-content: center; } \ No newline at end of file +.d-block { display: flex; } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 119e48c..b3bf0f2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,9 @@ import './App.css' -import VirtualKeyBoard from './Components/virtualKeyBoard' +import VirtualKeyBoard from './Components/VirtualKeyboard/VirtualKeyboard'; function App() { return ( - <> - ) } diff --git a/src/Components/ConvertToPdf.jsx b/src/Components/ConvertToPdf/ConvertToPdf.jsx similarity index 100% rename from src/Components/ConvertToPdf.jsx rename to src/Components/ConvertToPdf/ConvertToPdf.jsx diff --git a/src/Components/EmojiKeyBoard.jsx b/src/Components/EmojiKeyBoard/EmojiKeyBoard.jsx similarity index 87% rename from src/Components/EmojiKeyBoard.jsx rename to src/Components/EmojiKeyBoard/EmojiKeyBoard.jsx index 4ffbf1c..1945c1b 100644 --- a/src/Components/EmojiKeyBoard.jsx +++ b/src/Components/EmojiKeyBoard/EmojiKeyBoard.jsx @@ -1,4 +1,4 @@ -import { useEmojiData } from "../hooks/useEmojiData"; +import { useEmojiData } from "../../hooks/useEmojiData"; function EmojiKeyBoard({ handleInputButtonClick }) { const emojiCategories = useEmojiData(); diff --git a/src/Components/KeyBoard/KeyBoard.css b/src/Components/KeyBoard/KeyBoard.css new file mode 100644 index 0000000..a0c0172 --- /dev/null +++ b/src/Components/KeyBoard/KeyBoard.css @@ -0,0 +1,9 @@ +#vk-board { + background-color: var(--vk-color-board); + height: var(--vk-max-height); + padding: 12px; + user-select: none; +} + +.d-flex { display: flex; } +.justify-center { justify-content: center; } \ No newline at end of file diff --git a/src/Components/KeyBoard.jsx b/src/Components/KeyBoard/KeyBoard.jsx similarity index 99% rename from src/Components/KeyBoard.jsx rename to src/Components/KeyBoard/KeyBoard.jsx index a5ad9e5..3c34468 100644 --- a/src/Components/KeyBoard.jsx +++ b/src/Components/KeyBoard/KeyBoard.jsx @@ -1,4 +1,4 @@ -import './KeyBoardStylee.css'; +import './KeyBoard.css'; function KeyBoard(props) { return ( diff --git a/src/Components/KeyBoardLanguage/KeyBoardLanguage.css b/src/Components/KeyBoardLanguage/KeyBoardLanguage.css new file mode 100644 index 0000000..3626550 --- /dev/null +++ b/src/Components/KeyBoardLanguage/KeyBoardLanguage.css @@ -0,0 +1,37 @@ +.language-and-icons { + display: flex; + align-items: center; + justify-content: space-between; + white-space: nowrap; +} + +.chooseLanguage { + background-color: rgb(255, 255, 255); + border: none; + color: rgb(3, 3, 3); + height: 30px; + direction: ltr; + font-weight: bold; + font-size: 16px; + margin: 16px; + word-wrap: normal; +} + +.icon img { + width: 50px; + height: 50px; + } + + .icon { + background-color: var(--vk-color-key); + border: 1px solid rgb(180, 180, 180); + border-radius: 16px; + margin: 12px; + padding: 12px; + cursor: pointer; + transition: .3s; + } + + .icon:hover { + background-color: var(--vk-color-key-hover); + } \ No newline at end of file diff --git a/src/Components/KeyBoardLanguage.jsx b/src/Components/KeyBoardLanguage/KeyBoardLanguage.jsx similarity index 86% rename from src/Components/KeyBoardLanguage.jsx rename to src/Components/KeyBoardLanguage/KeyBoardLanguage.jsx index ecbf186..397b943 100644 --- a/src/Components/KeyBoardLanguage.jsx +++ b/src/Components/KeyBoardLanguage/KeyBoardLanguage.jsx @@ -1,9 +1,8 @@ import { FaKeyboard } from "react-icons/fa"; -import "./KeyBoardStylee.css"; -import languagesData from "../LanguagesData"; -import emojiButton from "../assets/images/emojiButton.webp"; - +import languagesData from "../../LanguagesData"; +import emojiButton from '../../assets/images/emojiButton.webp'; import React, { useState } from 'react'; +import './KeyBoardLanguage.css'; function KeyBoardLanguage(props) { const setLanguage = props.setLanguage; diff --git a/src/Components/Screen/Screen.css b/src/Components/Screen/Screen.css new file mode 100644 index 0000000..6d375b6 --- /dev/null +++ b/src/Components/Screen/Screen.css @@ -0,0 +1,19 @@ +.DivTextArea { + background: rgb(255, 255, 255); + cursor: text; + display: inline-block; + line-height: 1.15; + outline: none; + padding: 10px 10px 50px; + user-select: text; + width: 100%; + z-index: 3; +} + +.DivTextArea.center { + text-align: center; +} + +.DivTextArea.right { + text-align: right; +} \ No newline at end of file diff --git a/src/Components/Screen.jsx b/src/Components/Screen/Screen.jsx similarity index 91% rename from src/Components/Screen.jsx rename to src/Components/Screen/Screen.jsx index b97b836..a16ec25 100644 --- a/src/Components/Screen.jsx +++ b/src/Components/Screen/Screen.jsx @@ -1,4 +1,4 @@ -import './KeyBoardStylee.css'; +import './Screen.css'; function Screen(props) { const text = props.text; diff --git a/src/Components/SpecialButtons/SpecialButtons.css b/src/Components/SpecialButtons/SpecialButtons.css new file mode 100644 index 0000000..192ddbd --- /dev/null +++ b/src/Components/SpecialButtons/SpecialButtons.css @@ -0,0 +1,71 @@ +#spacial_buttons { + white-space: nowrap; + justify-content: center; + right: 5px; + bottom: 5px; + display: flex; + overflow: auto; + position: absolute; + white-space: nowrap; + justify-content: center; +} + +#spacial_buttons button { + background-color: var(--vk-color-key); + border: 1px solid rgb(180, 180, 180); + border-radius: 4px; + padding: 12px; + cursor: pointer; + transition: .3s; +} + +#spacial_buttons button:hover { + background-color: var(--vk-color-key-hover); +} + +.modal { + font-size: 12px; + } + + .modal > .header { + background-color: rgb(101, 216, 201); + width: 100%; + border-bottom: 1px solid gray; + font-size: 22px; + text-align: center; + } + .modal > .content { + width: 100%; + font-size: 18px; + padding: 10px 5px; + } + .modal > .actions { + width: 100%; + padding: 10px 5px; + margin: auto; + text-align: center; + } + .modal > .close { + cursor: pointer; + position: absolute; + display: block; + padding: 2px 5px; + line-height: 20px; + right: -10px; + top: -10px; + font-size: 24px; + background: #ffffff; + border-radius: 18px; + border: 1px solid #cfcece; + } + + .popup-content { + padding: 0 !important; + max-width: 450px; + } + + .modal > .actions button, + .modal > .actions input[type="button"] { + width: 120px; + height: 40px; + } \ No newline at end of file diff --git a/src/Components/SpecialButtons.jsx b/src/Components/SpecialButtons/SpecialButtons.jsx similarity index 94% rename from src/Components/SpecialButtons.jsx rename to src/Components/SpecialButtons/SpecialButtons.jsx index c4917b4..2e81fc0 100644 --- a/src/Components/SpecialButtons.jsx +++ b/src/Components/SpecialButtons/SpecialButtons.jsx @@ -1,16 +1,13 @@ -import React from "react"; import { FaTrashAlt, FaUndo, FaRedo, FaCopy, FaPaste } from "react-icons/fa"; import Popup from "reactjs-popup"; import "reactjs-popup/dist/index.css"; -import "./KeyBoardStylee.css"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; - -import ConvertToPdf from "./ConvertToPdf"; +import ConvertToPdf from "../ConvertToPdf/ConvertToPdf"; import { Tooltip } from 'react-tooltip'; +import './SpecialButtons.css' - -function SpecialButtons({ handleEvent, isUndo, isRedo,text }) { +export function SpecialButtons({ handleEvent, isUndo, isRedo,text }) { const notify = () => { toast("Text is copied to clipboard!"); handleEvent("copy"); @@ -115,6 +112,4 @@ function SpecialButtons({ handleEvent, isUndo, isRedo,text }) { ); -} - -export default SpecialButtons; +} \ No newline at end of file diff --git a/src/Components/StyleSelector/StyleSelector.css b/src/Components/StyleSelector/StyleSelector.css new file mode 100644 index 0000000..1fc8cda --- /dev/null +++ b/src/Components/StyleSelector/StyleSelector.css @@ -0,0 +1,26 @@ +.d-flex { display: flex; } +.flex-column { flex-direction: column; } + +.style-selector-container { + border-top: 1px solid rgb(180, 180, 180); + background-color: var(--vk-color-board); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + margin-bottom: 16px; + max-width: var(--vk-max-width); + padding: 16px; + width: 100%; + } + + .align-items-center { align-items: center; } + .justify-center { justify-content: center; } + .flex-row { flex-direction: row; } + + .row.style-selector { + margin-top: 16px; + } + + .row.style-selector > * { + margin-right: 5px; + margin-left: 5px; + } diff --git a/src/Components/StyleSelector.jsx b/src/Components/StyleSelector/StyleSelector.jsx similarity index 97% rename from src/Components/StyleSelector.jsx rename to src/Components/StyleSelector/StyleSelector.jsx index 8780a37..498ed57 100644 --- a/src/Components/StyleSelector.jsx +++ b/src/Components/StyleSelector/StyleSelector.jsx @@ -1,9 +1,8 @@ import React, { useState } from "react"; import styled from "styled-components"; import { FaUnderline } from "react-icons/fa"; -import "./KeyBoardStylee.css"; -import { useStyleSelector } from "../hooks/useStyleSelector"; - +import { useStyleSelector } from "../../hooks/useStyleSelector"; +import './StyleSelector.css'; const FontOption = styled.option` font-family: ${(props) => props.fontFamily}; diff --git a/src/Components/KeyBoardStylee.css b/src/Components/VirtualKeyboard/VirtualKeyboard.css similarity index 59% rename from src/Components/KeyBoardStylee.css rename to src/Components/VirtualKeyboard/VirtualKeyboard.css index 9acd6da..4d1f935 100644 --- a/src/Components/KeyBoardStylee.css +++ b/src/Components/VirtualKeyboard/VirtualKeyboard.css @@ -100,56 +100,12 @@ select { padding: 5px; } -.DivTextArea { - background: rgb(255, 255, 255); - cursor: text; - display: inline-block; - line-height: 1.15; - outline: none; - padding: 10px 10px 50px; - user-select: text; - width: 100%; - z-index: 3; -} -.DivTextArea.center { - text-align: center; -} - -.DivTextArea.right { - text-align: right; -} - .screenDiv { position: relative; width: 100%; max-width: var(--vk-max-width); } -#spacial_buttons { - white-space: nowrap; - justify-content: center; - right: 5px; - bottom: 5px; - display: flex; - overflow: auto; - position: absolute; - white-space: nowrap; - justify-content: center; -} - -#spacial_buttons button { - background-color: var(--vk-color-key); - border: 1px solid rgb(180, 180, 180); - border-radius: 4px; - padding: 12px; - cursor: pointer; - transition: .3s; -} - -#spacial_buttons button:hover { - background-color: var(--vk-color-key-hover); -} - .change_layout { background: rgb(101, 216, 201); border-radius: 14px 14px 0px 0px; @@ -159,44 +115,6 @@ select { /* width: 720px; */ } -.chooseLanguage { - background-color: rgb(255, 255, 255); - border: none; - color: rgb(3, 3, 3); - height: 30px; - direction: ltr; - font-weight: bold; - font-size: 16px; - margin: 16px; - word-wrap: normal; -} - -.language-and-icons { - display: flex; - align-items: center; - justify-content: space-between; - white-space: nowrap; -} - -.icon img { - width: 50px; - height: 50px; -} - -.icon { - background-color: var(--vk-color-key); - border: 1px solid rgb(180, 180, 180); - border-radius: 16px; - margin: 12px; - padding: 12px; - cursor: pointer; - transition: .3s; -} - -.icon:hover { - background-color: var(--vk-color-key-hover); -} - .emoji-keyboard { display: flex; flex-direction: column; @@ -246,17 +164,6 @@ select { margin-top: 16px; } -.style-selector-container { - border-top: 1px solid rgb(180, 180, 180); - background-color: var(--vk-color-board); - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - margin-bottom: 16px; - max-width: var(--vk-max-width); - padding: 16px; - width: 100%; -} - .style-selector-container button { border: none; } @@ -270,15 +177,6 @@ select { background-color: var(--vk-color-key-active); } -.row.style-selector { - margin-top: 16px; -} - -.row.style-selector > * { - margin-right: 5px; - margin-left: 5px; -} - .active { background-color: rgb(20, 122, 139) !important; } @@ -288,51 +186,4 @@ select { background-color: transparent; border: none; width: 100%; -} - -.modal { - font-size: 12px; -} - -.modal > .header { - background-color: rgb(101, 216, 201); - width: 100%; - border-bottom: 1px solid gray; - font-size: 22px; - text-align: center; -} -.modal > .content { - width: 100%; - font-size: 18px; - padding: 10px 5px; -} -.modal > .actions { - width: 100%; - padding: 10px 5px; - margin: auto; - text-align: center; -} -.modal > .close { - cursor: pointer; - position: absolute; - display: block; - padding: 2px 5px; - line-height: 20px; - right: -10px; - top: -10px; - font-size: 24px; - background: #ffffff; - border-radius: 18px; - border: 1px solid #cfcece; -} - -.popup-content { - padding: 0 !important; - max-width: 450px; -} - -.modal > .actions button, -.modal > .actions input[type="button"] { - width: 120px; - height: 40px; } \ No newline at end of file diff --git a/src/Components/virtualKeyBoard.jsx b/src/Components/VirtualKeyboard/VirtualKeyboard.jsx similarity index 94% rename from src/Components/virtualKeyBoard.jsx rename to src/Components/VirtualKeyboard/VirtualKeyboard.jsx index 58c0aab..d9b3688 100644 --- a/src/Components/virtualKeyBoard.jsx +++ b/src/Components/VirtualKeyboard/VirtualKeyboard.jsx @@ -1,14 +1,13 @@ import { useState, useEffect, useReducer } from "react"; -import KeyBoardLanguage from "./KeyBoardLanguage"; -import Screen from "./Screen"; -import SpecialButtons from "./SpecialButtons"; -import KeyBoard from "./KeyBoard"; -import LetterStyle from "../letterStyle"; -import { getLanguage } from "../LanguagesData"; -import StyleSelector from "./StyleSelector"; -import "./KeyBoardStylee.css"; -import EmojiKeyBoard from "./EmojiKeyBoard"; - +import KeyBoardLanguage from "../KeyBoardLanguage/KeyBoardLanguage"; +import Screen from "../Screen/Screen"; +import { SpecialButtons } from "../SpecialButtons/SpecialButtons"; +import KeyBoard from "../KeyBoard/KeyBoard"; +import LetterStyle from "../../letterStyle"; +import { getLanguage } from "../../LanguagesData"; +import StyleSelector from "../StyleSelector/StyleSelector"; +import "./VirtualKeyboard.css"; +import EmojiKeyBoard from "../EmojiKeyBoard/EmojiKeyBoard"; const intialLanguage = getLanguage("english"); const initialState = { @@ -51,18 +50,18 @@ const reducer = (state, action) => { }; case "deleteLastChar": - let temp = structuredClone(newStack) + let temp = structuredClone(newStack) temp[temp.length - 1].pop() - + newStack.push(temp[temp.length - 1]) - + return { ...state, isUndo: true, stack: newStack, } case "changeAllText": - + const { itemFunction } = action; const lastItemIndex = state.stack.length - 1; if (lastItemIndex >= 0) { @@ -162,7 +161,7 @@ function VirtualKeyBoard() { navigator.clipboard.readText().then((text) => { if (text) { console.log(text); - const lastState = stack[stack.length-1]; + const lastState = stack[stack.length - 1]; text.split("").forEach((item) => lastState.push({ char: item, style: { ...state.currentStyle } })); console.log(lastState); dispatch({ type: "paste", text: lastState }); // Pass text as a property @@ -328,7 +327,7 @@ function VirtualKeyBoard() { window.removeEventListener("keydown", handleKeyDown); }; }, [handleEvent]); - + return (
@@ -351,7 +350,7 @@ function VirtualKeyBoard() { handleEvent={handleEvent} isUndo={isUndo} isRedo={isRedo} - text={ stack.length && stack[stack.length - 1].length + text={stack.length && stack[stack.length - 1].length ? stack[stack.length - 1] : placeholder} />