feat: houskeeping & UI fixes

- Fixes to upgrade view rendering (script is still very crude) - Added scrollbars to everywhere that needed it - Fixed some issues with selections in the editor - Added TODO notes for extra pain and suffering for further development - Cleaned up readme and package.json files
Testausserveri · Aug 15, 2023 · 9f62d8e · 9f62d8e
1 parent 3216646
commit 9f62d8e
Show file tree

Hide file tree

Showing 16 changed files with 99 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,8 @@
-# Matikkaeditori.fi
+# Matikkaeditori.fi-v3
+
+> Project information is available on our project page: [here](https://testausserveri.fi/projects/matikkaeditori-fi)
+
+# Development
 
 ## Available Scripts
 
@@ -14,7 +18,7 @@ You will also see any lint errors in the console.
 
 # License
 ```
-Copyright (C) 2022 Testausserveri ry, Eemil Sinkko, Mikael Hannolainen and contributors
+Copyright (C) 2023 Testausserveri ry, Eemil Sinkko, Mikael Hannolainen and contributors
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by

diff --git a/package.json b/package.json
@@ -1,7 +1,10 @@
 {
-  "name": "matikkaeditori.fi",
-  "version": "0.1.0",
-  "private": true,
+  "name": "matikkaeditori.fi-v3",
+  "version": "1.0.0",
+  "license": "GPLv3",
+  "private": "true",
+  "author": "Eemil Sinkko, Mikael Hannolainen and contributors",
+  "homepage": "https://testausserveri.fi/projects/matikkaeditori-fi",
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",

diff --git a/public/index.html b/public/index.html
@@ -40,6 +40,14 @@
     <script type="text/javascript" src="%PUBLIC_URL%/3rd-party/mathjax/tex-svg.js"></script>
     <script type="text/javascript" src="%PUBLIC_URL%/3rd-party/html2canvas.min.js"></script>
     <script type="text/javascript" src="%PUBLIC_URL%/3rd-party/html2pdf.min.js"></script>
+    <style>
+      #root {
+        height: 100vh;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Document.js b/src/components/Document.js
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react"
 
 import "../css/editor.css"
 import "../css/tooltip.css"
+import "../css/scrollbar.css"
 import "../math-editor/input.css"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faDownload } from "@fortawesome/free-solid-svg-icons"
@@ -168,7 +169,7 @@ export default function Document({
             </div>
             <h1 className="droptext" id="droptext" >Pudota kuva tai gif ja lisää se editoriin!</h1>
             <div className="page" spellCheck={false}>
-                <div autoFocus="true" ref={answerRef} className="editor" id="editor-element" contentEditable="false"></div>
+                <div autoFocus="true" ref={answerRef} className="editor clean-scrollbar add-scrollbar-padding-with-border" id="editor-element" contentEditable="false"></div>
             </div>
         </div>
     )

diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
@@ -37,7 +37,11 @@ export default function Dropdown(props, deconstructable) {
     const hasIcons = !!(props.data.find((item) => item.icon !== undefined))
     const DropdownComponent = (
         <span ref={dropdownRef} className="dropdownContainer">
-            <div className={`dropdown${props.origin === "left" ? " leftOrigin" : ""}${hasIcons ? " hasIcons" : ""}`} style={dropdownOpened ? { transform: "scale(1)", opacity: "1" } : { transform: "scale(0)", opacity: "0" }}>
+            <div
+                // eslint-disable-next-line no-nested-ternary
+                className={`dropdown${props.origin === "left" ? " leftOrigin" : ""}${props.origin === "right" ? " rightOrigin" : ""}${hasIcons ? " hasIcons" : ""}`}
+                style={dropdownOpened ? { transform: "scale(1)", opacity: "1" } : { transform: "scale(0)", opacity: "0" }}
+            >
                 <ul>
                     {props.data.map((option) => (
                         <li key={option.text} onClick={(event) => {

diff --git a/src/components/EquationSidebar.js b/src/components/EquationSidebar.js
@@ -58,7 +58,7 @@ SymbolGroup.propTypes = {
 export function MobileEquationToolbar() {
     return (
         <div className="mobileToolbar">
-            hello
+            Kokeile avata sivu leveämmässä näkymässä!
         </div>
     )
 }

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -4,6 +4,7 @@
 import React, { useRef, useEffect } from "react"
 import PropTypes from "prop-types"
 import "../css/sidebar.css"
+import "../css/scrollbar.css"
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
@@ -66,6 +67,7 @@ function FilesystemItem(props) {
         )
     }
     const dropdownData = [
+        // TODO: Lots of features are missing from here!
         {
             text: "Uudelleennimeä",
             action: () => {
@@ -82,7 +84,7 @@ function FilesystemItem(props) {
                 }
             }
         },
-        {
+        /* {
             text: "Monista",
             action: async () => {
                 await window.internal.workers.api(
@@ -98,11 +100,11 @@ function FilesystemItem(props) {
                 )
                 // TODO: refresh filesystem view
             }
-        },
-        {
+        }, */
+        /* {
             text: "Siirrä",
             action: () => {}
-        },
+        }, */
         {
             text: "Poista",
             action: () => {
@@ -113,10 +115,10 @@ function FilesystemItem(props) {
                 }
             }
         },
-        {
+        /* {
             text: "Eliminoi", // tähä sellane hauska jekku et se tekee saman ku poista mut antaa full screen räjähdyksen äänen kaa
             action: () => {}
-        },
+        }, */
         {
             text: "Näytä ID",
             // eslint-disable-next-line no-alert
@@ -126,7 +128,7 @@ function FilesystemItem(props) {
 
     const [DropdownComponent, toggleDropdown] = dropdown({
         data: dropdownData,
-        origin: "left",
+        origin: "right",
         children: <button className="ellipsis">
             <FontAwesomeIcon icon={faEllipsisH} />
         </button>
@@ -240,7 +242,7 @@ export default function Sidebar(props) {
                     <FontAwesomeIcon icon={faFolder} />
                 </button>
             </div>
-            <div ref={treeRef}>
+            <div ref={treeRef} className="filesystemLevelParent clean-scrollbar">
                 <ul className="filesystemLevel" id="sidebar">
                     {props.fsPath.length > 1 ?
                         <button className="folderUpButton" onClick={() => {

diff --git a/src/configure.js b/src/configure.js
@@ -93,7 +93,7 @@ export default () => new Promise((resolve) => {
         }
     } else {
         localStorage.setItem("version", window.internal.version)
-        consoleComponent()
+        consoleComponent(window)
         resolve(window)
     }
 })
diff --git a/src/css/dropdown.css b/src/css/dropdown.css
@@ -21,6 +21,11 @@
     right: auto;
     left: 0;
 }
+.dropdown.rightOrigin {
+    transform-origin: top right;
+    right: 0;
+    left: auto;
+}
 .dropdown ul {
     list-style-type: none;
     margin: 0; padding: 0;

diff --git a/src/css/equationsidebar.css b/src/css/equationsidebar.css
@@ -1,7 +1,11 @@
 .equationSidebar {
-    position: -webkit-sticky;
-    position: sticky;top: 0;
-    height: 500px;
+    /*position: -webkit-sticky;
+    position: sticky;*/
+    /*top: 0;*/
+    height: 100%;
+    max-height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 .symbolGroup {
     margin-bottom: 1rem;

diff --git a/src/css/main.css b/src/css/main.css
@@ -10,12 +10,13 @@ body {
 
 .app {
     display: flex;
+    height: 100%;
 }
 
 .document {
     flex: 1;
     padding: 0;
-    overflow-x: scroll;
+    overflow: hidden;
 }
 
 .document .head {

diff --git a/src/css/scrollbar.css b/src/css/scrollbar.css
@@ -0,0 +1,18 @@
+.clean-scrollbar::-webkit-scrollbar {
+    border: 0px;
+    padding: 0px;
+    width: 8px;
+    display: block;
+    background-color: white;
+    border-radius: var(--radius);
+    box-shadow: var(--small-shadow);
+}
+
+.clean-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #2FA3CF;
+    border-radius: var(--radius);
+}
+
+.clean-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: #2fa2cfb9;
+}
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
@@ -9,6 +9,9 @@
     top: 0;*/
 }
 
+.sidebar::-webkit-scrollbar {
+    display: none;
+}
 
 @media only screen and (max-width: 1140px) {
     .sidebar {
@@ -28,6 +31,15 @@
     list-style-type: none;
 }
 
+.filesystemLevelParent {
+    height: calc(100% - 6rem - 75px);
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    padding-right: 8px;
+}
+
 @-webkit-keyframes fadeInDown {
     0% {
         opacity: 0;

diff --git a/src/math-editor/editor.js b/src/math-editor/editor.js
@@ -507,8 +507,14 @@ class Editor {
             console.debug("[ EDITOR ] Active line change to", this.activeLine)
         })
 
-        // Shift copied math back
-        this.hook.addEventListener("paste", async () => {
+        // Handle paste event
+        // TODO: Something is wrong with this!
+        this.hook.addEventListener("paste", async (/* event */) => {
+            // Remove styling from pasted data
+            // TODO: Insert the copied data
+            // const clipboardData = event.clipboardData || window.clipboardData
+
+            // Shift copied math back
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     // Fix math elements

diff --git a/src/math-editor/input.js b/src/math-editor/input.js
@@ -43,18 +43,21 @@ export default () => {
     const section1 = createElement(
         "section", "inputSection inputs", container
     )
+    section1.contentEditable = false
     // eslint-disable-next-line no-unused-vars
     const limit = createElement(
         "section", "inputSection limit", container
     )
     const section0 = createElement(
         "section", "inputSection labels", container
     )
+    section0.contentEditable = false
 
     // Notification bar (text)
     const info = createElement(
         "p", "inputSection info", container
     )
+    info.contentEditable = false
 
     // Dynamic latex input field & label
     const dynamicLatex = createElement(

diff --git a/src/upgrade.js b/src/upgrade.js
@@ -22,14 +22,14 @@ async function ui(version) {
     timeSinceRender = new Date().getTime()
     ReactDOM.render(<React.StrictMode>
         <div id="main" style={{
-            padding: "50px", height: "100%", width: "100%", overflow: "hidden"
+            padding: "50px", height: "calc(100% - 100px)", width: "calc(100% - 100px)", overflow: "hidden"
         }}>
-            <div style={{ position: "fixed", background: "#edf9ff", height: "40%" }}>
-                <h1>
-                        Päivitetään &quot;{version}&quot; tallennetta uudempaan versioon. Odota hetki, siirrämme sinut kohta Matikkaeditori.fi-sovellukseen.
+            <div style={{ background: "#edf9ff", height: "40%" }}>
+                <h1 style={{ fontSize: "1.2rem" }}>
+                    Päivitetään &quot;{version}&quot; tallennetta uudempaan versioon. Odota hetki, siirrämme sinut kohta Matikkaeditori.fi-sovellukseen.
                 </h1>
                 <h3>
-                        Jos sivu jäätyy tai saat virheilmoituksen, ota yhteyttä <b>[email protected]</b>.
+                    Jos sivu jäätyy tai saat virheilmoituksen, ota yhteyttä <b>[email protected]</b>.
                 </h3>
                 <p>
                     <i>