witching to UIKit 3

2019-04-30 12:22:09 -04:00
parent 8b6c71247f
commit 595f2be1fb
26 changed files with 774 additions and 499 deletions
--- a/src/components/routes/vault/Entry.tsx
+++ b/src/components/routes/vault/Entry.tsx
@ -22,7 +22,7 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,

   skip_save: boolean = false;

-   loading?: LoadingModal;
+   // loading?: LoadingModal;

   constructor(props) {
      super(props);
@ -38,8 +38,8 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
   async componentWillMount() {
      try {
         this.skip_save = false;
-         this.loading = new LoadingModal();
-         this.loading.show();
+         // this.loading = new LoadingModal();
+         // this.loading.show();

         this.vault = await this.props.vault;
         let note: ViewNote;
@ -66,8 +66,8 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
            }
            let [title] = this.text.split("\n", 1);
            this.setState({ title, changed })
-            if (this.loading)
-               this.loading.close();
+            // if (this.loading)
+            // this.loading.close();
         }
      } catch (err) {
         Notifications.sendError(err);
@ -164,23 +164,28 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
      }

      return <div>
-         <header>
-            <div>
-               <a class="button header_icon_button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
-               {this.state.changed ? <a class="button header_icon_button" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
-            </div>
-            <h1 style="display:inline" class="button header_title">{this.state.title}</h1>
-            <a class="button header_icon_button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
+         <header class="uk-background-primary">
+            {/* <div> */}
+            <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}
+            {/* </div> */}
+            <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">
-            <div class="row">
-               <div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
-                  <textarea autofocus value={this.text} rows={this.rows} class="doc" style="width:100%;" onKeyDown={evt => this.textAreaKeyPress(evt)} onKeyUp={evt => this.textAreaChange(evt)} ref={elm => {
-                     if (elm)
-                        setTimeout(() => elm.focus(), 0)
-                  }} />
-               </div>
-            </div>
+         <div class="uk-container">
+            <textarea
+               autofocus
+               value={this.text}
+               rows={this.rows}
+               class="doc uk-textarea"
+               style="width:100%;"
+               onKeyDown={evt => this.textAreaKeyPress(evt)}
+               onKeyUp={evt => this.textAreaChange(evt)}
+               ref={elm => {
+                  if (elm)
+                     setTimeout(() => elm.focus(), 500)
+               }}
+            />
         </div>
      </div>
   }
--- a/src/components/routes/vault/EntryList.tsx
+++ b/src/components/routes/vault/EntryList.tsx
@ -3,23 +3,34 @@ import Notes, { IVault, BaseNote } from "../../../notes";
 import AddButton from "../../AddButton";
 import Navigation from "../../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg"
-import ContextMenu from "../../modals/context";
+import Search from "feather-icons/dist/icons/search.svg"
+import ContextMenu from "../../context";
 import Notifications from "../../../notifications";
+import { Observable, Lock } from "@hibas123/utils";
+

 export default class EntryList extends Component<{ vault: Promise<IVault> }, { notes: BaseNote[], context: JSX.Element | undefined }> {
+   rawNotes: BaseNote[];
+
+   private searchObservableServer = new Observable<void>(1000);
+   private searchObservable = this.searchObservableServer.getPublicApi();
+
   constructor(props) {
      super(props)
+      console.log("Creating new Instance of EntryList")
      this.state = { notes: [], context: undefined }
      this.onDragOver = this.onDragOver.bind(this);
      this.onDrop = this.onDrop.bind(this);
      this.reloadNotes = this.reloadNotes.bind(this);
+      this.searchChanged = this.searchChanged.bind(this);
   }
   vault: IVault;

-   reloadNotes(s?: boolean) {
+   async reloadNotes(s?: boolean) {
      if (s)
         return;
-      return new Promise(yes => this.vault.getAllNotes().then(entries => this.setState({ notes: entries }, yes)));
+      this.rawNotes = await this.vault.getAllNotes();
+      await this.applySearch(true);
   }

   async componentWillMount() {
@ -28,6 +39,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
      document.body.addEventListener("dragover", this.onDragOver);
      document.body.addEventListener("drop", this.onDrop);
      Notes.syncObservable.subscribe(this.reloadNotes);
+      this.searchObservable.subscribeCollect(() => this.applySearch());
   }

   componentWillUnmount() {
@ -36,6 +48,11 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
      Notes.syncObservable.unsubscribe(this.reloadNotes);
   }

+   componentDidMount() {
+      console.log("ON Component Did mount", this.search);
+      this.searchInput.value = this.search;
+   }
+
   onDragOver(evt: DragEvent) {
      evt.preventDefault();
   }
@ -60,7 +77,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n

      let share;
      if ((window.navigator as any).share) {
-         share = <button onClick={() => shareNote()}>
+         share = <button class="uk-button" onClick={() => shareNote()}>
            share
         </button>
         let context = <ContextMenu event={evt} >
@ -140,6 +157,74 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
      }
   }

+   searchLock = new Lock();
+   oldSearch = "";
+   async applySearch(force = false) {
+      const search = this.search.toLowerCase();
+      if (!force && search === this.oldSearch) {
+         return;
+      }
+
+      if (this.searchLock.locked)
+         return;
+      const lock = await this.searchLock.getLock();
+      console.time("SearchOP");
+
+      let notes: BaseNote[] = [];
+
+      if (search === "") {
+         notes = this.rawNotes;
+      } else {
+         const parts = search.split(" ");
+         const match = (note: BaseNote) => {
+            return parts.every(function (el) {
+               return note.preview.toLowerCase().indexOf(el) > -1;
+            });
+         }
+
+         let elements: BaseNote[];
+         if (!force && this.oldSearch && search.startsWith(this.oldSearch)) {
+            elements = [...this.state.notes];
+         } else {
+            elements = [...this.rawNotes];
+         }
+
+
+         await new Promise(yes => {
+            const idle = () => {
+               window.requestIdleCallback(deadline => {
+                  let invTR = deadline.timeRemaining() <= 0;
+                  while ((deadline.timeRemaining() > 0 || invTR) && elements.length > 0) {
+                     let element = elements.shift();
+                     if (match(element)) {
+                        notes.push(element);
+                     }
+                  }
+                  if (elements.length > 0)
+                     idle();
+                  else
+                     yes();
+               }, { timeout: 100 });
+            }
+            idle();
+         })
+         // notes = elements.filter(note => match(note));
+      }
+
+      await new Promise(yes => this.setState({ notes }, yes));
+      this.oldSearch = search;
+      lock.release();
+      console.timeEnd("SearchOP");
+   }
+
+   search = "";
+   searchChanged(evt: Event) {
+      let input = evt.target as HTMLInputElement;
+      this.search = input.value;
+      this.searchObservableServer.send();
+   }
+
+   searchInput: HTMLInputElement;
   render() {
      const open_entry = (id: string | null) => {
         Navigation.setPage("/vault", { id: this.vault.id }, { id, entry: "true" })
@ -147,36 +232,37 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n

      let elms = this.state.notes.map(note => {
         let [first, second] = note.preview.split("\n", 2);
-         return <div class="vault_vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
+         return <li class="vault-vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
            open_entry(note._id)
         }}>
-            <span>{first}</span><br />
-            <span>{second}</span>
-         </div>
+            <div>{first}</div>
+            <div>{second}</div>
+         </li>
      })

+
      return <div>
         {this.state.context}
-         <header>
-            <div>
-               <a class="button header_icon_button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
-            </div>
-            <h1 style="display:inline" class="button header_title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h1>
+         <header class="uk-background-primary">
+            {/* <div> */}
+            <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
+            {/* </div> */}
+            <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h3>
            <span></span>
            {/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
         </header>
         <AddButton onClick={() => open_entry(null)} />
-         <div class="container">
-            <div class="row">
-               <div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
-                  <div class="card fluid">
-                     <div class="section">
-                        {elms}
-                     </div>
-                  </div>
-               </div>
+         <div class="uk-container">
+            <div style="display:flex;">
+               <input class="uk-input" type="text" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
+               <button class="uk-button" style="padding: 0 10px;">
+                  <Search />
+               </button>
            </div>
+            <ul class="uk-list uk-list-divider">
+               {elms}
+            </ul>
         </div>
-      </div>
+      </div>;
   }
 }
--- a/src/components/routes/vault/vault.scss
+++ b/src/components/routes/vault/vault.scss
@ -1,27 +1,43 @@
-.vault_vault>span:nth-of-type(1) {
-   font-size: 1.3rem;
-   margin-left: 0;
+
+
+.vault-vault {
+   width: 100%;
+   >div {
+      width: 100%;
+      font-size: 1rem;
+      margin-left: 1rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+   }
+
+   >div:nth-of-type(1) {
+      font-size: 1.3rem;
+      margin-left: 0;
+   }
+
+   >div:empty {
+      &::before{
+         content: " ";
+         white-space: pre;
+      }
+   }
 }

-.vault_vault>span {
-   font-size: 1rem;
-   margin-left: 1rem;
-}
+// .vault_vault {
+//    padding: 0.5rem;
+//    border-bottom: solid 1px var(--card-border-color);
+// }

-.vault_vault {
-   padding: 0.5rem;
-   border-bottom: solid 1px var(--card-border-color);
-}
+// .vault_vault:hover {
+//    background: var(--nav-hover-back-color);
+// }

-.vault_vault:hover {
-   background: var(--nav-hover-back-color);
-}
+// .vault_vault>svg {
+//    height: 2rem;
+//    margin-right: 1rem;
+// }

-.vault_vault>svg {
-   height: 2rem;
-   margin-right: 1rem;
-}
-
-.vault_vault:last-child {
-   border-bottom: none;
-}
+// .vault_vault:last-child {
+//    border-bottom: none;
+// }
--- a/src/components/routes/vaults/Vaults.tsx
+++ b/src/components/routes/vaults/Vaults.tsx
@ -8,7 +8,7 @@ import Navigation from "../../../navigation";
 import { InputModal } from "../../modals/InputModal";
 import { YesNoModal } from "../../modals/YesNoModal";
 import AddButton from "../../AddButton";
-import ContextMenu from "../../modals/context";
+import ContextMenu from "../../context";
 import Notifications from "../../../notifications";

 export interface VaultsProps {
@ -134,7 +134,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
      }
      window.addEventListener("click", close);

-      let deleteb = <button onClick={async () => {
+      let deleteb = <button class="uk-button" onClick={async () => {
         let delete_modal = new YesNoModal("Delete Vault? Cannot be undone!");
         let result = await delete_modal.getResult();
         if (result) {
@ -151,7 +151,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m

      let delete_key;
      if (Notes.getVaultKey(vault.id)) {
-         delete_key = <button onClick={() => {
+         delete_key = <button class="uk-button" onClick={() => {
            Notes.forgetVaultKey(vault.id);
            Notifications.sendSuccess("Forgot key!")
         }}>
@ -159,7 +159,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
         </button>;
      }

-      let exportb = <button onClick={async () => {
+      let exportb = <button class="uk-button" onClick={async () => {
         let key: Uint8Array;
         if (vault.encrypted) {
            await this.getKey(vault, false)
@ -205,33 +205,27 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m

   render() {
      let elms = this.state.vaults.map(vault => {
-         return <div class="vaults_vault" onClick={() => this.openVault(vault)} onContextMenu={(evt) => this.onContext(evt, vault)}>
+         return <li class="vaults_vault" onClick={() => this.openVault(vault)} onContextMenu={(evt) => this.onContext(evt, vault)}>
            {vault.encrypted ? <Lock height={undefined} width={undefined} /> : <Unlock height={undefined} width={undefined} />}
            <span>
               {vault.name}
            </span>
-         </div>
+         </li>
      })

      return <div style={{ marginTop: "-12px", paddingTop: "12px" }} >
-         {this.state.modal}
+         {/* {this.state.modal} */}
         {this.state.context}
-         <header>
+         <header class="uk-background-primary">
            <span></span>
-            <h1 style="display:inline" class="button header_title" onClick={() => Navigation.setPage("/")}>Your vaults:</h1>
+            <h3 style="display:inline" class="header_title" onClick={() => Navigation.setPage("/")}>Your vaults:</h3>
            <span></span>
         </header>
         <AddButton onClick={() => this.addButtonClick()} />
-         <div class="container">
-            <div class="row">
-               <div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
-                  <div class="card fluid">
-                     <div class="section">
-                        {elms}
-                     </div>
-                  </div>
-               </div>
-            </div>
+         <div class="uk-container">
+            <ul class="uk-list uk-list-divider">
+               {elms}
+            </ul>
         </div>
      </div>
   }
--- a/src/components/routes/vaults/vaults.scss
+++ b/src/components/routes/vaults/vaults.scss
@ -1,21 +1,23 @@
-.vaults_vault>span {
-   font-size: 2rem !important;
-}
+@import "../../../vars.scss";

 .vaults_vault {
   padding: 0.5rem;
-   border-bottom: solid 1px var(--card-border-color);
-}
+   margin-top: 0 !important;

-.vaults_vault:hover {
-   background: var(--nav-hover-back-color);
-}
+   // >span {
+   //    font-size: 2rem !important;
+   // }

-.vaults_vault>svg {
-   height: 2rem;
-   margin-right: 1rem;
-}
+   // &:not(:last-child) { 
+   //    border-bottom: 1px $border_color solid;
+   // }

-.vaults_vault:last-child {
-   border-bottom: none;
+   >svg {
+      height: 2rem;
+      margin-right: 1rem;
+   }
+
+   &:hover {
+      background: $hover-background;
+   }
 }