Skip to content

Commit

Permalink
i think i need to migrate the server card first
Browse files Browse the repository at this point in the history
  • Loading branch information
daniellacosse committed Aug 20, 2024
1 parent 7295b73 commit 54217ea
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 98 deletions.
6 changes: 1 addition & 5 deletions client/src/www/app/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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

Check failure on line 155 in client/src/www/app/app.ts

View workflow job for this annotation

GitHub Actions / Lint

Replace `s` with `⏎····s;`
this.rootEl.addEventListener(
'QuitPressed',
this.quitApplication.bind(this)
Expand Down
11 changes: 0 additions & 11 deletions client/src/www/ui_components/app-root.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 -->
<server-rename-dialog
id="serverRenameDialog"
root-path="[[rootPath]]"
localize="[[localize]]"
></server-rename-dialog>
<user-comms-dialog
id="autoConnectDialog"
localize="[[localize]]"
Expand Down Expand Up @@ -954,10 +947,6 @@ export class AppRoot extends mixinBehaviors(
return shouldShowQuitButton ? '' : 'last-menu-item';
}

showServerRename(event) {
this.$.serverRenameDialog.open(event.detail.name, event.detail.serverId);
}

_computeShouldShowAppLogo(page) {
return page === 'servers';
}
Expand Down
69 changes: 0 additions & 69 deletions client/src/www/ui_components/server-rename-dialog.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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`
<md-dialog .open="${this.open}">
<md-dialog-header slot="headline">
${this.localize('server-rename')}
</md-dialog-header>
<md-filled-text-field
slot="content"
maxlength="100"
value="${this.editedServerName}"
></md-filled-text-field>
<md-dialog-actions slot="actions">
<md-text-button @click="${this.handleCancel}"
>${this.localize('cancel')}</md-text-button
>
<md-filled-button @click="${this.handleRename}"
>${this.localize('save')}</md-filled-button
>
</md-dialog-actions>
</md-dialog>
`;
}

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;
}
}
Original file line number Diff line number Diff line change
@@ -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`
<server-rename-dialog
.open=${open}
.localize=${localize}
serverId=${serverId}
serverName=${serverName}
></server-rename-dialog>
`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,17 @@ export default {
},
};

export const ServerRowCard = ({server}: ServerListItemElement) =>
html`
<div style="width: 100%; height: clamp(100px, 100%, 150px);">
<server-row-card .localize=${localize} .server=${server}></server-row-card>
</div>
`;

export const ServerHeroCard = ({server}: ServerListItemElement) =>
html`
<div style="width: 100%; height: 100%;">
<server-hero-card .localize=${localize} .server=${server}></server-hero-card>
</div>
`;
export const ServerRowCard = ({server}: ServerListItemElement) => html`
<div style="width: 100%; height: clamp(100px, 100%, 150px);">
<server-row-card .localize=${localize} .server=${server}></server-row-card>
</div>
`;

export const ServerHeroCard = ({server}: ServerListItemElement) => html`
<div style="width: 100%; height: 100%;">
<server-hero-card
.localize=${localize}
.server=${server}
></server-hero-card>
</div>
`;

0 comments on commit 54217ea

Please sign in to comment.