From 54217ea5135a5215210dc0e2d7028a85bda703f4 Mon Sep 17 00:00:00 2001
From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:10:01 -0400
Subject: [PATCH 01/12] i think i need to migrate the server card first
---
client/src/www/app/app.ts | 6 +-
client/src/www/ui_components/app-root.js | 11 ---
.../www/ui_components/server-rename-dialog.js | 69 -----------------
.../server_card/server_rename_dialog/index.ts | 77 +++++++++++++++++++
.../server_rename_dialog/stories.ts | 38 +++++++++
.../server_list_item/server_card/stories.ts | 27 +++----
6 files changed, 130 insertions(+), 98 deletions(-)
delete mode 100644 client/src/www/ui_components/server-rename-dialog.js
create mode 100644 client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts
create mode 100644 client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/stories.ts
diff --git a/client/src/www/app/app.ts b/client/src/www/app/app.ts
index c39f1a25dd..f69436e3f1 100644
--- a/client/src/www/app/app.ts
+++ b/client/src/www/app/app.ts
@@ -152,11 +152,7 @@ export class App {
'DisconnectPressed',
this.disconnectServer.bind(this)
);
- this.rootEl.addEventListener('ForgetPressed', this.forgetServer.bind(this));
- this.rootEl.addEventListener(
- 'RenameRequested',
- this.renameServer.bind(this)
- );
+ this.rootEl.addEventListener('ForgetPressed', this.forgetServer.bind(this));s
this.rootEl.addEventListener(
'QuitPressed',
this.quitApplication.bind(this)
diff --git a/client/src/www/ui_components/app-root.js b/client/src/www/ui_components/app-root.js
index 992c60813d..018af55782 100644
--- a/client/src/www/ui_components/app-root.js
+++ b/client/src/www/ui_components/app-root.js
@@ -53,7 +53,6 @@ import '../views/licenses_view';
// eslint-disable-next-line n/no-missing-import
import '../views/servers_view';
-import './server-rename-dialog.js';
import './user-comms-dialog.js';
import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
@@ -546,12 +545,6 @@ export class AppRoot extends mixinBehaviors(
https://github.com/PolymerElements/paper-dialog/issues/152 and
https://github.com/PolymerElements/app-layout/issues/295
Once those are fixed we can consider moving this into server-card.html -->
-
-
- mwc-textfield {
- margin-top: 0;
- }
-
-
- [[localize('server-rename')]]
-
-
-
- `,
-
- is: 'server-rename-dialog',
-
- properties: {
- // Need to declare localize function passed in from parent, or else
- // localize() calls within the template won't be updated.
- localize: Function,
- rootPath: String,
- __serverName: String,
- __serverId: String,
- },
-
- open: function (serverName, serverId) {
- // Store the initial serverName so we can know if it changed, and
- // store the serverId so we can emit the rename request event.
- this.__serverName = serverName;
- this.__serverId = serverId;
- this.$.serverNameInput.value = serverName;
- this.$.renameDialog.open();
- // Focus on serverNameInput, only after the dialog has been displayed.
- afterNextRender(this, () => {
- this.$.serverNameInput.focus();
- });
- },
-
- _saveRename: function () {
- const newName = this.$.serverNameInput.value;
- if (newName !== this.__serverName) {
- this.fire('RenameRequested', {serverId: this.__serverId, newName: newName});
- }
- },
-});
diff --git a/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts b/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts
new file mode 100644
index 0000000000..c7c3713cd3
--- /dev/null
+++ b/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts
@@ -0,0 +1,77 @@
+/*
+ Copyright 2024 The Outline Authors
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import {LitElement, html} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import '@material/web/all.js';
+
+@customElement('server-rename-dialog')
+export class ServerRenameDialog extends LitElement {
+ @property({type: Boolean}) open: boolean = false;
+ @property({type: Function}) localize!: (key: string) => string;
+ @property({type: String}) serverId!: string;
+ @property({type: String}) serverName!: string;
+
+ @state() private editedServerName: string | null = null;
+
+ render() {
+ if (this.editedServerName === null) {
+ this.editedServerName = this.serverName;
+ }
+
+ return html`
+
+
+ ${this.localize('server-rename')}
+
+
+
+ ${this.localize('cancel')}
+ ${this.localize('save')}
+
+
+ `;
+ }
+
+ private handleCancel() {
+ this.dispatchEvent(
+ new CustomEvent('CancelRenameRequested', {bubbles: true, composed: true})
+ );
+
+ this.editedServerName = null;
+ }
+
+ private handleRename() {
+ if (this.editedServerName === this.serverName) {
+ return;
+ }
+
+ this.dispatchEvent(
+ new CustomEvent('RenameRequested', {
+ detail: {serverId: this.serverId, newName: this.editedServerName},
+ bubbles: true,
+ composed: true,
+ })
+ );
+
+ this.editedServerName = null;
+ }
+}
diff --git a/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/stories.ts b/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/stories.ts
new file mode 100644
index 0000000000..8405e6a583
--- /dev/null
+++ b/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/stories.ts
@@ -0,0 +1,38 @@
+/*
+ Copyright 2024 The Outline Authors
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import {html} from 'lit';
+
+import './index';
+import {ServerRenameDialog} from './index';
+import {localize} from '../../../../../testing/localize';
+
+export default {
+ title: 'Client/Servers View/Server List Item/Server Rename Dialog',
+ args: {
+ open: true,
+ serverId: 'my-server-id',
+ serverName: 'My Server',
+ },
+};
+
+export const Example = ({open, serverId, serverName}: ServerRenameDialog) => {
+ return html`
+
+ `;
+};
diff --git a/client/src/www/views/servers_view/server_list_item/server_card/stories.ts b/client/src/www/views/servers_view/server_list_item/server_card/stories.ts
index ec34aea793..ef9187d143 100644
--- a/client/src/www/views/servers_view/server_list_item/server_card/stories.ts
+++ b/client/src/www/views/servers_view/server_list_item/server_card/stories.ts
@@ -39,16 +39,17 @@ export default {
},
};
-export const ServerRowCard = ({server}: ServerListItemElement) =>
- html`
-
-
-
- `;
-
-export const ServerHeroCard = ({server}: ServerListItemElement) =>
- html`
-
-
-
- `;
+export const ServerRowCard = ({server}: ServerListItemElement) => html`
+
+
+
+`;
+
+export const ServerHeroCard = ({server}: ServerListItemElement) => html`
+
+
+
+`;
From b819ae52c249d2f4d5bae71eccc8184f3dfd1772 Mon Sep 17 00:00:00 2001
From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com>
Date: Tue, 20 Aug 2024 19:08:19 -0400
Subject: [PATCH 02/12] token adjustments
---
client/resources/original_messages.json | 2 +-
client/src/www/messages/en.json | 2 +-
.../server_card/server_rename_dialog/index.ts | 9 ++++++++-
3 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/client/resources/original_messages.json b/client/resources/original_messages.json
index 014bedab41..668c4c312e 100644
--- a/client/resources/original_messages.json
+++ b/client/resources/original_messages.json
@@ -335,7 +335,7 @@
},
"save": {
"description": "The text on a button to save application settings.",
- "message": "save"
+ "message": "Save"
},
"server_access_key_detected": {
"description": "A message indicating the application has detected a valid access key to be used to connect to a server.",
diff --git a/client/src/www/messages/en.json b/client/src/www/messages/en.json
index 313dc47094..5dfebcced4 100644
--- a/client/src/www/messages/en.json
+++ b/client/src/www/messages/en.json
@@ -68,7 +68,7 @@
"privacy-title": "Outline will never collect your personal information",
"quit": "Quit",
"reconnecting-server-state": "Reconnecting...",
- "save": "save",
+ "save": "Save",
"server-access-key-detected": "Access key detected",
"server-access-key-label": "ss://access-key",
"server-add": "Add server",
diff --git a/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts b/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts
index c7c3713cd3..2fb4471ee3 100644
--- a/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts
+++ b/client/src/www/views/servers_view/server_list_item/server_card/server_rename_dialog/index.ts
@@ -11,7 +11,7 @@
limitations under the License.
*/
-import {LitElement, html} from 'lit';
+import {LitElement, html, css} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
import '@material/web/all.js';
@@ -24,6 +24,13 @@ export class ServerRenameDialog extends LitElement {
@state() private editedServerName: string | null = null;
+ static styles = css`
+ :host {
+ --md-sys-color-primary: var(--outline-primary);
+ --md-sys-shape-corner-extra-large: 12px;
+ }
+ `;
+
render() {
if (this.editedServerName === null) {
this.editedServerName = this.serverName;
From 261d211fa562d2a8d9fba5012948035ff867f406 Mon Sep 17 00:00:00 2001
From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com>
Date: Wed, 21 Aug 2024 14:50:46 -0400
Subject: [PATCH 03/12] cleanup: time to integrate
---
.../servers_view/server_list_item/index.ts | 1 +
.../server_list_item/server_card/index.ts | 33 ++++++++++++-----
.../server_card/server_rename_dialog/index.ts | 36 +++++++++----------
3 files changed, 43 insertions(+), 27 deletions(-)
diff --git a/client/src/www/views/servers_view/server_list_item/index.ts b/client/src/www/views/servers_view/server_list_item/index.ts
index 8d70bf6580..5657292138 100644
--- a/client/src/www/views/servers_view/server_list_item/index.ts
+++ b/client/src/www/views/servers_view/server_list_item/index.ts
@@ -46,4 +46,5 @@ export interface ServerListItemElement {
localize: Localizer;
menu: Ref