From 4f4ba2a4ce71b88976368d06b11bd962d6322640 Mon Sep 17 00:00:00 2001 From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com> Date: Thu, 21 Nov 2024 21:55:00 -0500 Subject: [PATCH] this is how far I got on the train --- client/package.json | 3 +- client/src/www/app/app.ts | 12 ++++ client/src/www/style.css | 55 ++++++++++++++ client/src/www/ui_components/app-root.js | 4 +- .../root_view/add_access_key_dialog/index.ts | 71 +++++-------------- package-lock.json | 55 ++++++++++++++ 6 files changed, 142 insertions(+), 58 deletions(-) diff --git a/client/package.json b/client/package.json index df837687e2..9a9b44f69e 100644 --- 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 index ddfe2b7fdc..dae903439f 100644 --- 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; + + // , 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 index f7da00f035..d98c05b904 100644 --- a/client/src/www/style.css +++ b/client/src/www/style.css @@ -120,3 +120,58 @@ white-space: nowrap; word-wrap: normal; } + +/* + , 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; +} \ No newline at end of file diff --git a/client/src/www/ui_components/app-root.js b/client/src/www/ui_components/app-root.js index 5f8745d700..1dbb83680d 100644 --- 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]]" > - + > --> 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` -
- ${this.localize('add-access-key-dialog-header')} -
-
+
${this.localize('add-access-key-dialog-header')}
+
-
+
${this.localize('cancel')} @@ -109,7 +70,7 @@ export class AddAccessKeyDialog extends LitElement { >${this.localize('confirm')}
- `; + `; } private handleEdit(event: InputEvent) { diff --git a/package-lock.json b/package-lock.json index 90fad9edfc..88bb1797ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,6 +42,7 @@ "name": "@outline/client", "version": "0.0.0-debug", "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", @@ -3313,6 +3314,16 @@ "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", "dev": true }, + "node_modules/@ionic/core": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.0.tgz", + "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==", + "dependencies": { + "@stencil/core": "4.20.0", + "ionicons": "^7.2.2", + "tslib": "^2.1.0" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -6736,6 +6747,18 @@ "integrity": "sha512-dzJtaDAAoXx4GCOJpbB2eG/Qj8VDpdwkLsWGzGm+0L7E8/434RyMbAHmk9ubXWVAb9nXmc44jUf8GKqVDiKezg==", "dev": true }, + "node_modules/@stencil/core": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz", + "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + } + }, "node_modules/@storybook/addon-actions": { "version": "8.2.6", "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.2.6.tgz", @@ -21515,6 +21538,14 @@ "node": ">=0.10.0" } }, + "node_modules/ionicons": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz", + "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==", + "dependencies": { + "@stencil/core": "^4.0.3" + } + }, "node_modules/ios-deploy": { "version": "1.11.4", "hasInstallScript": true, @@ -38527,6 +38558,16 @@ "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", "dev": true }, + "@ionic/core": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.0.tgz", + "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==", + "requires": { + "@stencil/core": "4.20.0", + "ionicons": "^7.2.2", + "tslib": "^2.1.0" + } + }, "@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -40769,6 +40810,7 @@ "@babel/polyfill": "^7.12.1", "@babel/preset-env": "^7.12.11", "@commitlint/config-conventional": "^16.2.4", + "@ionic/core": "^8.4.0", "@jsdevtools/coverage-istanbul-loader": "^3.0.5", "@material/mwc-button": "^0.25.3", "@material/mwc-circular-progress": "^0.27.0", @@ -43089,6 +43131,11 @@ "integrity": "sha512-dzJtaDAAoXx4GCOJpbB2eG/Qj8VDpdwkLsWGzGm+0L7E8/434RyMbAHmk9ubXWVAb9nXmc44jUf8GKqVDiKezg==", "dev": true }, + "@stencil/core": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz", + "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==" + }, "@storybook/addon-actions": { "version": "8.2.6", "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.2.6.tgz", @@ -54062,6 +54109,14 @@ "version": "1.0.0", "dev": true }, + "ionicons": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz", + "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==", + "requires": { + "@stencil/core": "^4.0.3" + } + }, "ios-deploy": { "version": "1.11.4", "optional": true