Fix style issues

2020-11-24 22:21:21 +01:00 · 2020-11-24 22:21:21 +01:00 · b00c97d100
parent 73fcc340f2
commit b00c97d100
9 changed files with 77 additions and 336 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
   }
 }
--- a/src/components/routes/settings/Settings.tsx
+++ b/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>
-               <h3
-                  style="display:inline"
-                  class="header-title"
-                  onClick={() => Navigation.setPage("/")}
-               >
-                  Settings
-               </h3>
+               </div>
+               <span onClick={() => Navigation.setPage("/")}>Settings</span>
               <span></span>
            </header>
            <div class="container">
--- a/src/components/routes/vault/Entry
+++ b/src/components/routes/vault/Entry
@ -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>
-      );
-   }
-}
--- a/src/components/routes/vault/Entry.tsx
+++ b/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">
-                  {title}
-               </h3>
-               <a class="header-icon-button" onClick={del}>
+               <span>{title}</span>
+               <div class="header-icon-button" onClick={del}>
                  <Trash height={undefined} width={undefined} />
-               </a>
+               </div>
            </header>
            <div class="container" style="padding: 0">
               <CodeMirror
--- a/src/components/routes/vault/EntryList.tsx
+++ b/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>
-               <h3
-                  style="display:inline"
-                  class="header-title"
-                  onClick={() => Navigation.setPage("/")}
-               >
+               </div>
+               <span 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"
--- a/src/components/routes/vaults/Vaults.tsx
+++ b/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>
-               <a
+               </span>
+               <div
                  class="header-icon-button"
                  onClick={() => Navigation.setPage("/settings")}
               >
                  <Settings height={undefined} width={undefined} />
-               </a>
+               </div>
            </header>
            <AddButton onClick={() => this.addButtonClick()} />
            <div class="container">
--- a/src/index.scss
+++ b/src/index.scss
@ -4,64 +4,14 @@ body {
   overscroll-behavior-y: contain;
 }

-// html {
-//    min-height: 100%;
-//    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;
+header {
+   justify-content: space-between;
 }

 .def-shadow {
   box-shadow: 0px 5px 8px 2px rgba(66, 66, 66, 0.53);
 }

-
 .ccontainer {
   margin: 0 1rem;
   max-width: 100%;
@ -72,4 +22,4 @@ body {
      max-width: 50rem;
      margin: 0 auto;
   }
-}
+}
--- a/src/index.tsx
+++ b/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 "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 { h, render } from "preact";
+import App from "./components/App";
+import "@hibas123/theme/out/base.css";
 import "./index.scss";
-import Navigation from './navigation';
-import VaultsPage from './components/routes/vaults/Vaults';
-import { Page } from './page';
+import Navigation from "./navigation";
+import VaultsPage from "./components/routes/vaults/Vaults";
+import { Page } from "./page";

-import Notes from "./notes"
-import DemoPage from './components/demo';
-import VaultPage from './components/routes/vault/Vault';
-import SharePage from './components/routes/share/Share';
-import Notifications from './notifications';
-import Error404Page from './components/routes/404';
-import SettingsPage from './components/routes/settings/Settings';
+import Notes from "./notes";
+import DemoPage from "./components/demo";
+import VaultPage from "./components/routes/vault/Vault";
+import SharePage from "./components/routes/share/Share";
+import Notifications from "./notifications";
+import Error404Page from "./components/routes/404";
+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)
-            return Notes.login()
+            Notifications.sendError("Login failed: " + err);
+            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()
-         .then(has => has ? true : navigator.storage.persist())
-         .then(is => {
+      navigator.storage
+         .persisted()
+         .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("/demo", DemoPage as typeof Page)
-   Navigation.addPage("/share", SharePage as typeof Page)
-   Navigation.addPage("/settings", SettingsPage as typeof Page)
+   Navigation.addPage("/vault", VaultPage as typeof Page);
+   Navigation.addPage("/demo", DemoPage as typeof Page);
+   Navigation.addPage("/share", SharePage 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"));
+})();