(v0.1.5.5-alpha) Notepad App

Shesh this was fast i guess i finally learnt react n css actually. Anyways i completed the notepad application which was the README.txt.

I will however make this generalised so that i can make noteppad i.e. txt files easily in future!

Author: rupnil-codes

README.md

@@ -30,6 +30,7 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [ ] Explorer App. (Started in v0.1.5.1). Sidebar (v0.1.5.2)
 - [X] Tabs v0.1.5.3 BUG: TITLE IS OVERFLOWING (Fixed v0.1.5.4)
 - [X] Universal tab feature (generalised) using `tabs: true` in App.js (Added in v0.1.5.4)
-- [ ] Notepad App
+- [X] Notepad App. (Made in v0.1.5.5)
+- [ ] Notepad Generalised component
 - [ ] CHANGE CHROME TO BRAVE
 - [ ] Terminal

src/apps/README.txt.jsx

@@ -1,5 +1,5 @@
 import "../styles/apps/readme_txt.css"
-import {ChevronRight, House, MoveLeft, MoveRight, MoveUp, RotateCw} from "lucide-react";
+import { Heading1, Bold, Italic, Link2, Settings } from "lucide-react";
 
 function Readme_txt() {
 
@@ -8,9 +8,37 @@ function Readme_txt() {
             <div className={"readme-ribbon"}>
                 <div className={"readme-file-edit-view"}>
                     <div className={"readme-file-edit-view-container"}>
-
+                        <p>File</p>
+                    </div>
+                    <div className={"readme-file-edit-view-container"}>
+                        <p>Edit</p>
+                    </div>
+                    <div className={"readme-file-edit-view-container"}>
+                        <p>View</p>
                     </div>
                 </div>
+                <div className={"readme-functions"}>
+                    <div className={"readme-settings-container"}>
+                        <Heading1 size={18} strokeWidth={1.5} />
+                    </div>
+                    <div className={"readme-settings-container"}>
+                        <Bold size={18} strokeWidth={1.5} />
+                    </div>
+                    <div className={"readme-settings-container"}>
+                        <Italic size={18} strokeWidth={1.5} />
+                    </div>
+                    <div className={"readme-settings-container"}>
+                        <Link2 size={18} strokeWidth={1.5} />
+                    </div>
+                </div>
+                <div className={"readme-settings"}>
+                    <div className={"readme-settings-container"}>
+                        <Settings size={18} strokeWidth={1.5} />
+                    </div>
+                </div>
+            </div>
+            <div className={"readme-body"} contentEditable={true}>
+                Hello this is content editable btw
             </div>
         </div>
     )

src/core/WindowManager.jsx

@@ -67,6 +67,17 @@ export default function AppWindow({
 
     return (
         <Rnd
+            resizeHandleStyles={{
+                top: { cursor: 'ns-resize' },
+                bottom: { cursor: 'ns-resize' },
+                left: { cursor: 'ew-resize' },
+                right: { cursor: 'ew-resize' },
+                topRight: { cursor: 'nesw-resize' },
+                bottomRight: { cursor: 'nwse-resize' },
+                bottomLeft: { cursor: 'nesw-resize' },
+                topLeft: { cursor: 'nwse-resize' },
+            }}
+
             bounds=""
             dragGrid={[1, 1]}
             size={fullscreen ? { width: "100vw", height: window.innerHeight - 48 } : { width: state.width, height: state.height }}

src/styles/apps/readme_txt.css

@@ -7,28 +7,88 @@
     align-items: center;
 
     background-color: #181818;
-    overflow: auto;
+    overflow: hidden;
 
     border-radius: 0 0 8px 8px;
 }
 
 .readme-ribbon {
     width: 100%;
-    height: 2.25rem;
+    height: 2.5rem;
 
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: center;
 
     background-color: #0e0e0e;
-
     border: #0e0e0e solid 1px;
 }
 
 .readme-file-edit-view {
+    position: absolute;
+    left: 0;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    gap: 0.4rem;
+    margin-left: 0.4rem;
+}
+.readme-file-edit-view-container {
+    padding: 0.3rem 0.75rem;
+    font-size: 0.9rem;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    border-radius: 0.3rem;
+
+    transition: background-color var(--hover-animation) var(--hover-animation-type);
+}
+.readme-file-edit-view-container:hover {
+    background-color: var(--border);
+}
+
+.readme-functions {
     display: flex;
     flex-direction: row;
     align-items: center;
+}
+
+.readme-settings {
+    position: absolute;
+    right: 0;
+
+    margin-right: 0.4rem;
+}
+.readme-settings-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    padding: 0.35rem;
+    border-radius: 0.3rem;
+
+    transition: background-color var(--hover-animation) var(--hover-animation-type);
+}
+.readme-settings-container:hover {
+    background-color: var(--border);
+}
+
+.readme-body {
+    height: 100%;
+
+    margin-left: 1rem;
+    margin-top: 1rem;
+
+    width: calc(100% - 1rem);
 
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-y: auto;
 
+    outline: none;
 }