Fix style issues

package-lock.json

@@ -5245,6 +5245,15 @@
          "resolved": "https://npm.hibas123.de/safer-buffer/-/safer-buffer-2.1.2.tgz",
          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
       },
+      "sass": {
+         "version": "1.29.0",
+         "resolved": "https://npm.hibas123.de/sass/-/sass-1.29.0.tgz",
+         "integrity": "sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA==",
+         "dev": true,
+         "requires": {
+            "chokidar": ">=2.0.0 <4.0.0"
+         }
+      },
       "sax": {
          "version": "1.2.4",
          "resolved": "https://npm.hibas123.de/sax/-/sax-1.2.4.tgz",

package.json

@@ -32,6 +32,7 @@
       "@types/codemirror": "0.0.99",
       "@types/lodash.clonedeep": "^4.5.6",
       "@types/uuid": "^8.3.0",
+      "sass": "^1.29.0",
       "typescript": "^4.1.2"
    }
 }

src/components/routes/settings/Settings.tsx

@@ -15,16 +15,10 @@ export default class SettingsPage extends Page<
       return (
          <div>
             <header class="header">
-               <a class="header-icon-button" onClick={() => history.back()}>
+               <div class="header-icon-button" onClick={() => history.back()}>
                   <ArrowLeft height={undefined} width={undefined} />
-               </a>
+               </div>
-               <h3
+               <span onClick={() => Navigation.setPage("/")}>Settings</span>
-                  style="display:inline"
-                  class="header-title"
-                  onClick={() => Navigation.setPage("/")}
-               >
-                  Settings
-               </h3>
                <span></span>
             </header>
             <div class="container">

src/components/routes/vault/Entry copy.tsx

@@ -1,209 +0,0 @@
-import { h, Component } from "preact";
-import { IVault, ViewNote } from "../../../notes";
-import { Trash2 as Trash, X, Save } from "preact-feather";
-
-import Navigation from "../../../navigation";
-import { YesNoModal } from "../../modals/YesNoModal";
-import Notifications, { MessageType } from "../../../notifications";
-
-const minRows = 3;
-export default class EntryComponent extends Component<
-   { vault: Promise<IVault>; id: string | undefined; note: string | undefined },
-   { title: string; changed: boolean }
-> {
-   private text: string = "";
-   private vault: IVault;
-   // private lineHeight: number = 24;
-   private note: ViewNote;
-
-   private rows: number = minRows;
-
-   private skip_save: boolean = false;
-
-   private inputElm: HTMLInputElement;
-
-   constructor(props) {
-      super(props);
-      this.state = { changed: false, title: "" };
-      this.textAreaChange = this.textAreaChange.bind(this);
-      this.textAreaKeyPress = this.textAreaKeyPress.bind(this);
-   }
-
-   private toVault() {
-      history.back();
-   }
-
-   componentDidMount() {
-      this.inputElm.focus();
-   }
-
-   async componentWillMount() {
-      this.text = "";
-      this.vault = undefined;
-      this.note = undefined;
-      this.rows = minRows;
-      this.skip_save = false;
-      this.setState({ changed: false, title: "" });
-      try {
-         this.skip_save = false;
-
-         this.vault = await this.props.vault;
-         let note: ViewNote;
-         let changed = false;
-         if (this.props.id) note = await this.vault.getNote(this.props.id);
-         else {
-            note = this.vault.newNote();
-            if (this.props.note) {
-               note.__value = this.props.note;
-               changed = true;
-            }
-         }
-
-         if (!note) {
-            Notifications.sendNotification(
-               "Note not found!",
-               MessageType.ERROR
-            );
-         } else {
-            this.note = note;
-            this.text = note.__value;
-            let rows = this.getRows(this.text);
-            if (rows !== this.rows) {
-               this.rows = rows;
-            }
-            let [title] = this.text.split("\n", 1);
-            this.setState({ title, changed });
-         }
-      } catch (err) {
-         Notifications.sendError(err);
-      }
-   }
-
-   private async save() {
-      try {
-         if (this.state.changed) {
-            this.note.__value = this.text;
-            await this.vault.saveNote(this.note);
-            this.setState({ changed: false });
-         }
-      } catch (err) {
-         Notifications.sendError(err);
-      }
-   }
-
-   componentWillUnmount() {
-      if (!this.skip_save) this.save();
-   }
-
-   strToNr(value: string) {
-      let match = value.match(/\d/g);
-      return Number(match.join(""));
-   }
-
-   getRows(value: string) {
-      const lines = (value.match(/\r?\n/g) || "").length + 1;
-      return Math.max(lines + 1, minRows);
-   }
-
-   textAreaChange(evt: KeyboardEvent) {
-      if (evt.keyCode === 17 || evt.keyCode === 27) return; //No character, so not relevant for this function
-      if (!this.state.changed && this.textAreaKeyPress(evt))
-         this.setState({ changed: true });
-
-      let target = evt.target as HTMLTextAreaElement;
-      let value = target.value;
-
-      this.text = value;
-
-      let [title] = value.split("\n", 1);
-      if (title !== this.state.title) this.setState({ title });
-
-      let rows = this.getRows(value);
-      if (rows !== this.rows) {
-         target.rows = rows;
-         this.rows = rows;
-      }
-   }
-
-   async exitHandler() {
-      if (this.state.changed) {
-         let modal = new YesNoModal("Really want to quit?");
-         let res = await modal.getResult();
-         if (res === true) {
-            this.skip_save = true;
-            this.toVault();
-         }
-      } else this.toVault();
-   }
-
-   textAreaKeyPress(evt: KeyboardEvent) {
-      console.log(evt);
-      if ((evt.keyCode === 83 || evt.keyCode === 13) && evt.ctrlKey) {
-         evt.preventDefault();
-         this.save();
-         return false;
-      } else if (evt.keyCode === 27) {
-         evt.preventDefault();
-         this.exitHandler();
-         return false;
-      }
-      return true;
-   }
-
-   render() {
-      const save_handler = async () => {
-         await this.save();
-         Navigation.setPage(
-            "/vault",
-            { id: this.vault.id },
-            { entry: "false" },
-            true
-         );
-         this.toVault();
-      };
-
-      const delete_handler = async () => {
-         await this.vault.deleteNote(this.props.id);
-         this.toVault();
-      };
-
-      console.log("Rerender");
-
-      return (
-         <div>
-            <header class="header">
-               <a class="header-icon-button" onClick={() => this.exitHandler()}>
-                  <X height={undefined} width={undefined} />
-               </a>
-               {this.state.changed ? (
-                  <a
-                     class="header-icon-button"
-                     style="margin-left: 0.5em;"
-                     onClick={() => save_handler()}
-                  >
-                     <Save height={undefined} width={undefined} />
-                  </a>
-               ) : undefined}
-               <h3 style="display:inline" class="button header-title">
-                  {this.state.title}
-               </h3>
-               <a class="header-icon-button" onClick={() => delete_handler()}>
-                  <Trash height={undefined} width={undefined} />
-               </a>
-            </header>
-            <div class="container">
-               <textarea
-                  value={this.text}
-                  rows={this.rows}
-                  class="inp"
-                  style="width:100%;"
-                  onInput={this.textAreaChange}
-                  onKeyDown={this.textAreaKeyPress}
-                  onChange={this.textAreaChange}
-                  ref={(elm) => (this.inputElm = elm)}
-               />
-            </div>
-         </div>
-      );
-   }
-}

src/components/routes/vault/Entry.tsx

@@ -96,24 +96,22 @@ export default function Entry(props: IEntryProps) {
       return (
          <div>
             <header class="header" style="margin-bottom: 0;">
-               <a class="header-icon-button" onClick={close}>
+               <div class="header-icon-button" onClick={close}>
                   <X height={undefined} width={undefined} />
-               </a>
+               </div>
                {changed && (
-                  <a
+                  <div
                      class="header-icon-button"
                      style="margin-left: 0.5em;"
                      onClick={save}
                   >
                      <Save height={undefined} width={undefined} />
-                  </a>
+                  </div>
                )}
-               <h3 style="display:inline" class="button header-title">
+               <span>{title}</span>
-                  {title}
+               <div class="header-icon-button" onClick={del}>
-               </h3>
-               <a class="header-icon-button" onClick={del}>
                   <Trash height={undefined} width={undefined} />
-               </a>
+               </div>
             </header>
             <div class="container" style="padding: 0">
                <CodeMirror

src/components/routes/vault/EntryList.tsx

@@ -300,22 +300,18 @@ export default class EntryList extends Component<
          <div>
             {this.state.context}
             <header class="header">
-               <a class="header-icon-button" onClick={() => history.back()}>
+               <div class="header-icon-button" onClick={() => history.back()}>
                   <ArrowLeft height={undefined} width={undefined} />
-               </a>
+               </div>
-               <h3
+               <span onClick={() => Navigation.setPage("/")}>
-                  style="display:inline"
-                  class="header-title"
-                  onClick={() => Navigation.setPage("/")}
-               >
                   {this.vault ? this.vault.name : ""}
-               </h3>
+               </span>
                <span></span>
                {/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
             </header>
             <AddButton onClick={() => open_entry(null)} />
             <div class="container">
-               <div style="display:flex;">
+               <div style="display:flex; margin-top: .5rem;">
                   <input
                      class="inp"
                      type="text"

src/components/routes/vaults/Vaults.tsx

@@ -268,20 +268,20 @@ export default class VaultsPage extends Page<
             {this.state.context}
             <header class="header">
                <span></span>
-               <h3
+               <span
                   style="display:inline"
                   onClick={() => Navigation.setPage("/")}
                >
                   {this.props.selectVault
                      ? "Select Vault for share"
                      : "Your vaults:"}
-               </h3>
+               </span>
-               <a
+               <div
                   class="header-icon-button"
                   onClick={() => Navigation.setPage("/settings")}
                >
                   <Settings height={undefined} width={undefined} />
-               </a>
+               </div>
             </header>
             <AddButton onClick={() => this.addButtonClick()} />
             <div class="container">

src/index.scss

@@ -4,64 +4,14 @@ body {
    overscroll-behavior-y: contain;
 }
 
-// html {
+header {
-//    min-height: 100%;
+   justify-content: space-between;
-//    display: flex;
-// }
-
-// $header-margin: .5em;
-// $header-icon-size: calc(1.5rem * 1);
-// $header-icon-size: 100%;
-
-// header {
-//    display: flex;
-//    justify-content: space-between;
-//    margin-bottom: $header-margin;
-//    align-content: center;
-//    padding: 0.75em;
-//    border-bottom: solid var(--border-color) 1px;
-//    background-color: var(--primary);
-
-//    >* {
-//       margin: 0;
-//       color: white;
-//       background: var(--primary);
-//    }
-
-//    >.header-title {
-//       overflow: hidden;
-//       text-overflow: ellipsis;
-//       text-overflow: ellipsis;
-//       white-space: nowrap;
-//       overflow: hidden;
-//       flex-grow: 1;
-//       margin: 0 1em;
-//    }
-
-//    .header-icon-button {
-//       display: block;
-//       margin-top: auto;
-//       margin-bottom: auto;
-//       min-width: $header-icon-size;
-
-//       >svg {
-//          height: $header-icon-size;
-//          width: $header-icon-size;
-//       }
-//    }
-
-// }
-
-
-body {
-  overscroll-behavior-y: contain;
 }
 
 .def-shadow {
    box-shadow: 0px 5px 8px 2px rgba(66, 66, 66, 0.53);
 }
 
-
 .ccontainer {
    margin: 0 1rem;
    max-width: 100%;

src/index.tsx

@@ -1,6 +1,12 @@
 declare global {
    interface Window {
-      requestIdleCallback: (callback: (deadline: { didTimeout: boolean, timeRemaining: () => number }) => void, options?: { timeout: number }) => number | NodeJS.Timeout;
+      requestIdleCallback: (
+         callback: (deadline: {
+            didTimeout: boolean;
+            timeRemaining: () => number;
+         }) => void,
+         options?: { timeout: number }
+      ) => number | NodeJS.Timeout;
       cancelIdleCallback: (id: number | NodeJS.Timeout) => void;
       debug: any;
    }
@@ -42,7 +48,7 @@ window.requestIdleCallback =
             didTimeout: false,
             timeRemaining: function () {
                return Math.max(0, 50 - (Date.now() - start));
-            }
+            },
          });
       }, 1);
    };
@@ -57,34 +63,23 @@ console.log(window.requestIdleCallback);
 
 window.debug = {};
 
-
+import { h, render } from "preact";
-
+import App from "./components/App";
-
+import "@hibas123/theme/out/base.css";
-import { h, render } from 'preact';
-import App from './components/App';
-
-
-// import "uikit";
-// import "uikit/dist/css/uikit.css"
-import "@hibas123/theme/out/base.css"
-// import "@hibas123/theme/out/light.css"
-// import "@hibas123/theme/out/dark.css"
-
 import "./index.scss";
-import Navigation from './navigation';
+import Navigation from "./navigation";
-import VaultsPage from './components/routes/vaults/Vaults';
+import VaultsPage from "./components/routes/vaults/Vaults";
-import { Page } from './page';
+import { Page } from "./page";
 
-import Notes from "./notes"
+import Notes from "./notes";
-import DemoPage from './components/demo';
+import DemoPage from "./components/demo";
-import VaultPage from './components/routes/vault/Vault';
+import VaultPage from "./components/routes/vault/Vault";
-import SharePage from './components/routes/share/Share';
+import SharePage from "./components/routes/share/Share";
-import Notifications from './notifications';
+import Notifications from "./notifications";
-import Error404Page from './components/routes/404';
+import Error404Page from "./components/routes/404";
-import SettingsPage from './components/routes/settings/Settings';
+import SettingsPage from "./components/routes/settings/Settings";
 window.debug.notes = Notes;
 
-
 import Theme from "./theme";
 
 console.log("Dark mode:", Theme.active);
@@ -92,46 +87,53 @@ console.log("Dark mode:", Theme.active);
 (async () => {
    // Initialize notes provider
    if (Notes.loginRequired()) {
-      let url = new URL(location.href)
+      let url = new URL(location.href);
       let code = url.searchParams.get("code");
 
       if (code) {
-         let err = await Notes.getToken(code)
+         let err = await Notes.getToken(code);
          if (err) {
-            Notifications.sendError("Login failed: " + err)
+            Notifications.sendError("Login failed: " + err);
-            return Notes.login()
+            return Notes.login();
          } else {
-            window.history.replaceState(null, document.title, "/" + window.location.hash);
+            window.history.replaceState(
+               null,
+               document.title,
+               "/" + window.location.hash
+            );
          }
       } else {
-         return Notes.login()
+         return Notes.login();
       }
    }
 
    await Notes.start();
 
    if (window.navigator.storage && navigator.storage.persist) {
-      navigator.storage.persisted()
+      navigator.storage
-         .then(has => has ? true : navigator.storage.persist())
+         .persisted()
-         .then(is => {
+         .then((has) => (has ? true : navigator.storage.persist()))
+         .then((is) => {
             console.log("Persistant Storage:", is);
-         })
+         });
    }
 
    Navigation.default = VaultsPage as typeof Page;
-   Navigation.addPage("/vault", VaultPage as typeof Page)
+   Navigation.addPage("/vault", VaultPage as typeof Page);
-   Navigation.addPage("/demo", DemoPage as typeof Page)
+   Navigation.addPage("/demo", DemoPage as typeof Page);
-   Navigation.addPage("/share", SharePage as typeof Page)
+   Navigation.addPage("/share", SharePage as typeof Page);
-   Navigation.addPage("/settings", SettingsPage as typeof Page)
+   Navigation.addPage("/settings", SettingsPage as typeof Page);
    Navigation.addPage("/404", Error404Page);
    const trad = window.location.pathname;
    if (trad && trad !== "/" && trad !== "") {
       let p: any = {};
-      new URL(window.location.href).searchParams.forEach((val, key) => p[key] = val);
+      new URL(window.location.href).searchParams.forEach(
+         (val, key) => (p[key] = val)
+      );
       Navigation.setPage(trad, p, undefined, true);
       // window.location.href = "/#/" + trad;
    }
    Navigation.start();
 
-   render(<App />, document.body, document.getElementById('app'));
+   render(<App />, document.body, document.getElementById("app"));
-})()
+})();