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')]]

- -
- [[localize('cancel')]] - [[localize('save')]] -
- - `, - - 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` +
+ +
+`;