this is how far I got on the train

Jigsaw-Code · Nov 22, 2024 · 4f4ba2a · 4f4ba2a
1 parent 769fc25
commit 4f4ba2a
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 58 deletions.
diff --git a/client/package.json b/client/package.json
@@ -7,6 +7,7 @@
     "codrova-osx": "Version-controlled platform config files at src/cordova/apple/xcode/osx/Outline/config.xml, src/cordova/apple/xcode/osx/osx.json, and src/cordova/apple/xcode/osx/www/cordova_plugins.js as a workaround for https://github.com/apache/cordova-osx/issues/106. Delete these files when the issue is fixed."
   },
   "dependencies": {
+    "@ionic/core": "^8.4.0",
     "@material/mwc-button": "^0.25.3",
     "@material/mwc-circular-progress": "^0.27.0",
     "@material/mwc-formfield": "^0.25.3",
@@ -107,8 +108,8 @@
     "karma-webpack": "^5.0.0",
     "minimist": "^1.2.6",
     "node-fetch": "^3.3.0",
-    "node-loader": "^2.0.0",
     "node-gyp": "^10.0.1",
+    "node-loader": "^2.0.0",
     "postcss": "^7.0.39",
     "postcss-rtl": "^1.7.3",
     "prettier": "^2.8.0",

diff --git a/client/src/www/app/app.ts b/client/src/www/app/app.ts
@@ -402,6 +402,7 @@ export class App {
 
   private showAddServerDialog() {
     this.rootEl.$.addServerView.open = true;
+    this.rootEl.$.addServerView.modal.present();
   }
 
   private showNavigation() {
@@ -441,6 +442,17 @@ export class App {
     const accessKey = event.detail.accessKey;
     this.ignoredAccessKeys[accessKey] = true;
     this.rootEl.$.addServerView.open = false;
+
+    // <ion-modal>, once presented, removes itself from
+    // its parent element and inserts itself into the
+    // root of the document
+
+    // at this point, you cannot rely on lit's "query" selector
+    // because it will return null, so we have to
+    // find it this way
+    (
+      document.getElementById('addAccessKeyDialog') as HTMLIonModalElement
+    ).dismiss();
   }
 
   private requestAddServer(event: CustomEvent) {

diff --git a/client/src/www/style.css b/client/src/www/style.css
@@ -120,3 +120,58 @@
   white-space: nowrap;
   word-wrap: normal;
 }
+
+/* 
+  <ion-modal>, once presented, removes itself from
+  its parent element and inserts itself into the
+  root of the document
+  
+  This makes it impossble to style the modal and
+  its contents from within its parent web component,
+  as it does not live there while it is visible to
+  the user.
+  
+  We have to style it in the root document stylesheet (or equivalent)
+*/
+
+#addAccessKeyDialog {
+  --width: fit-content;
+  --min-width: 250px;
+  --height: fit-content;
+  --border-radius: 6px;
+  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+
+  --md-sys-color-primary: var(--outline-primary);
+  --md-sys-shape-corner-extra-large: 2px;
+  --md-sys-shape-corner-full: 2px;
+
+  padding: 1rem;
+}
+
+#addAccessKeyDialog header {
+  font-family: 'Jigsaw Sans';
+}
+
+#addAccessKeyDialog section {
+  margin-bottom: 12px;
+}
+
+#addAccessKeyDialog section.help-text {
+  color: var(--outline-medium-gray);
+}
+
+#addAccessKeyDialog a {
+  color: var(--outline-primary);
+}
+
+#addAccessKeyDialog md-filled-text-field {
+  --md-filled-text-field-input-text-font: 'Menlo', monospace;
+  --md-filled-text-field-container-color: var(--outline-light-gray);
+
+  width: 100%;
+}
+
+#addAccessKeyDialog fieldset {
+  border: none;
+  text-transform: uppercase;
+}
diff --git a/client/src/www/ui_components/app-root.js b/client/src/www/ui_components/app-root.js
@@ -356,7 +356,7 @@ export class AppRoot extends mixinBehaviors(
         localize="[[localize]]"
       ></add-access-key-dialog>
 
-      <privacy-acknowledgement-dialog
+      <!-- <privacy-acknowledgement-dialog
         id="privacyView"
         localize="[[localize]]"
         privacy-page-url="[[_computeSupportSiteUrl(language, 'https://support.getoutline.org/s/article/Data-collection')]]"
@@ -365,7 +365,7 @@ export class AppRoot extends mixinBehaviors(
       <auto-connect-dialog
         id="autoConnectDialog"
         localize="[[localize]]"
-      ></auto-connect-dialog>
+      ></auto-connect-dialog> -->
 
       <paper-toast id="toast" class="fit-bottom" no-cancel-on-esc-key="">
         <paper-button

diff --git a/client/src/www/views/root_view/add_access_key_dialog/index.ts b/client/src/www/views/root_view/add_access_key_dialog/index.ts
@@ -11,8 +11,10 @@
   limitations under the License.
 */
 
-import {LitElement, html, css} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {initialize} from '@ionic/core/components';
+import {defineCustomElement} from '@ionic/core/components/ion-modal.js';
+import {LitElement, html} from 'lit';
+import {customElement, property, query} from 'lit/decorators.js';
 
 @customElement('add-access-key-dialog')
 export class AddAccessKeyDialog extends LitElement {
@@ -23,60 +25,19 @@ export class AddAccessKeyDialog extends LitElement {
   @property({type: Boolean}) open: boolean;
   @property({type: String}) accessKey: string = '';
   @property({type: Function}) isValidAccessKey: (accessKey: string) => boolean;
-
-  static styles = css`
-    :host {
-      --md-sys-color-primary: var(--outline-primary);
-      --md-sys-shape-corner-extra-large: 2px;
-      --md-sys-shape-corner-full: 2px;
-
-      width: 100%;
-      height: 100%;
-    }
-
-    md-dialog {
-      --md-dialog-container-color: var(
-        --outline-app-dialog-primary-background-color
-      );
-
-      min-width: 300px;
-    }
-
-    section {
-      margin-bottom: 12px;
-    }
-
-    section.help-text {
-      color: var(--outline-medium-gray);
-    }
-
-    a {
-      color: var(--outline-primary);
-    }
-
-    md-filled-text-field {
-      --md-filled-text-field-input-text-font: 'Menlo', monospace;
-      --md-filled-text-field-container-color: var(--outline-light-gray);
-
-      width: 100%;
-    }
-
-    fieldset {
-      border: none;
-      text-transform: uppercase;
-    }
-  `;
+  @query('ion-modal') modal: HTMLIonModalElement;
 
   render() {
-    return html`<md-dialog
-      .open="${this.open}"
-      @cancel=${this.handleCancel}
-      quick
+    initialize();
+    defineCustomElement();
+
+    return html`<ion-modal
+      id="addAccessKeyDialog"
+      .is-open="${this.open}"
+      animated="false"
     >
-      <header slot="headline">
-        ${this.localize('add-access-key-dialog-header')}
-      </header>
-      <article slot="content">
+      <header>${this.localize('add-access-key-dialog-header')}</header>
+      <article>
         <section
           class="help-text"
           .innerHTML=${this.localize(
@@ -99,7 +60,7 @@ export class AddAccessKeyDialog extends LitElement {
           ></md-filled-text-field>
         </section>
       </article>
-      <fieldset slot="actions">
+      <fieldset>
         <md-text-button @click=${this.handleCancel}>
           ${this.localize('cancel')}
         </md-text-button>
@@ -109,7 +70,7 @@ export class AddAccessKeyDialog extends LitElement {
           >${this.localize('confirm')}</md-filled-button
         >
       </fieldset>
-    </md-dialog>`;
+    </ion-modal>`;
   }
 
   private handleEdit(event: InputEvent) {

diff --git a/package-lock.json b/package-lock.json