Skip to content

Commit

Permalink
chore(www): upgrade servers-view to Lit (#1941)
Browse files Browse the repository at this point in the history 
* chore(www): upgrade `servers-view` to Lit

* Remove use of `paper-button` from `servers-view`.

* Use semantic elements for header and footer.

* Use `<button>` element.

* Change `line-height` values.

* Rename `useAltAccessMessage` to `shouldShowAccessKeyWikiLink`.

* Hoist `<user-coms-dialog>` to the root element.

* Remove unused import.

* Add a section element.
  • Loading branch information
@sbruens
sbruens authored Apr 8, 2024
1 parent fd2657c commit 8c5916e
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 97 deletions.
5 changes: 2 additions & 3 deletions client/src/www/app/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export class App {
document.addEventListener('resume', this.syncConnectivityStateToServerCards.bind(this));

// Register handlers for events fired by Polymer components.
this.rootEl.addEventListener('PromptAddServerRequested', this.requestPromptAddServer.bind(this));
this.rootEl.$.serversView.addEventListener('add-server', this.requestPromptAddServer.bind(this));
this.rootEl.addEventListener('AddServerConfirmationRequested', this.requestAddServerConfirmation.bind(this));
this.rootEl.addEventListener('AddServerRequested', this.requestAddServer.bind(this));
this.rootEl.addEventListener('IgnoreServerRequested', this.requestIgnoreServer.bind(this));
Expand Down Expand Up @@ -300,7 +300,6 @@ export class App {
}

private requestPromptAddServer() {
this.rootEl.promptAddServer();
this.pullClipboardText();
}

Expand Down Expand Up @@ -440,7 +439,7 @@ export class App {
console.error(`Failed to read auto-connect dialog status, assuming not dismissed: ${e}`);
}
if (!dismissed) {
this.rootEl.$.serversView.$.autoConnectDialog.show();
this.rootEl.$.autoConnectDialog.show();
}
}

Expand Down
17 changes: 16 additions & 1 deletion client/src/www/ui_components/app-root.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,14 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
</app-header>
<iron-pages id="pages" selected="[[page]]" attr-for-selected="name">
<servers-view name="servers" id="serversView" servers="[[servers]]" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]""></servers-view>
<servers-view
name="servers"
id="serversView"
servers="[[servers]]"
localize="[[localize]]"
should-show-access-key-wiki-link="[[useAltAccessMessage]]"
on-add-server="promptAddServer"
></servers-view>
<template is="dom-if" if="{{contactViewFeatureFlag}}">
<contact-view
name="contact"
Expand Down Expand Up @@ -490,6 +497,14 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
root-path="[[rootPath]]"
localize="[[localize]]"
></server-rename-dialog>
<user-comms-dialog
id="autoConnectDialog"
localize="[[localize]]"
title-localization-key="auto-connect-dialog-title"
detail-localization-key="auto-connect-dialog-detail"
fire-event-on-hide="AutoConnectDialogDismissed"
></user-comms-dialog>
`;
}

Expand Down
201 changes: 108 additions & 93 deletions client/src/www/views/servers_view/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,139 +14,154 @@
limitations under the License.
*/

import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {css, html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {unsafeHTML, UnsafeHTMLDirective} from 'lit/directives/unsafe-html.js';

import '@material/mwc-button';
import './server_connection_indicator';
import './server_list';

import {ServerListItem as _ServerListItem} from './server_list_item';
import {ServerConnectionState as _ServerConnectionState} from './server_connection_indicator';
import { Localizer } from 'src/infrastructure/i18n';

export type ServerListItem = _ServerListItem;

// (This value is used: it's exported.)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export import ServerConnectionState = _ServerConnectionState;
import { DirectiveResult } from 'lit/directive';

Polymer({
_template: html`
<style>
@customElement('servers-view')
export class ServerList extends LitElement {
static styles = [
css`
:host {
width: 100%;
display: flex;
flex-direction: column;
font-size: .9rem;
height: 100%;
/* Use vh, as % does not work in iOS. |header-height|+|server-margin| = 64px.
* Subtract |header-height| to fix iOS padding, and |server-margin| to fix scrolling in Android.
*/
height: -webkit-calc(100vh - 64px);
font-size: 14px;
line-height: 20px;
justify-content: center;
line-height: 1.25rem;
margin: auto;
max-width: 400px;
width: 100%;
}
:host a {
color: var(--medium-green);
text-decoration: none;
}
.server-list-container {
width: 100%;
height: 100%;
max-width: 400px;
margin: auto;
section {
display: flex;
flex-direction: column;
flex: 1;
}
.flex-column-container {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: center;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
header {
display: flex;
flex-direction: column;
-webkit-flex: 1;
flex: 1;
justify-content: center;
}
.header {
font-size: 20px;
color: rgba(0, 0, 0, 0.87);
line-height: 32px;
margin-top: 34px;
text-align: center;
}
.subtle {
h1,
h2,
footer {
color: rgba(0, 0, 0, 0.54);
}
.footer {
margin: 0;
padding: 24px 0 16px 0;
border-top-width: 1px;
border-top-color: rgba(0, 0, 0, 0.08);
border-top-style: solid;
}
paper-button {
h1 {
color: rgba(0, 0, 0, 0.87);
font-size: 1.25rem;
font-weight: 400;
}
h2 {
font-size: .9rem;
font-weight: initial;
line-height: 1.5;
}
footer {
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding: 24px 0 16px;
text-align: center;
}
button {
align-items: center;
border: 0;
display: flex;
flex-direction: column;
text-transform: none;
justify-content: center;
outline: none; /* Remove outline for Safari. */
padding: 0;
}
paper-button server-connection-indicator {
width: 192px;
button:hover {
cursor: pointer;
}
server-connection-indicator {
height: 192px;
margin-bottom: 34px;
width: 192px;
}
</style>
<div class="server-list-container">
<template is="dom-if" if="[[shouldShowZeroState]]">
<div class="flex-column-container">
<div class="flex-column-container">
<paper-button noink="" on-tap="_requestPromptAddServer">
<server-connection-indicator connection-state="disconnected"></server-connection-indicator>
<div class="header">[[localize('server-add')]]</div>
<div class="subtle">[[localize('server-add-zero-state-instructions')]]</div>
</paper-button>
</div>
<template is="dom-if" if="[[!useAltAccessMessage]]">
<div
class="footer subtle"
inner-h-t-m-l="[[localize('server-create-your-own-zero-state', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>', 'closeLink', '</a>')]]"
></div>
</template>
<template is="dom-if" if="[[useAltAccessMessage]]">
<div
class="footer subtle"
inner-h-t-m-l="[[localize('server-create-your-own-zero-state-access', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
></div>
</template>
</div>
</template>
<user-comms-dialog
id="autoConnectDialog"
localize="[[localize]]"
title-localization-key="auto-connect-dialog-title"
detail-localization-key="auto-connect-dialog-detail"
fire-event-on-hide="AutoConnectDialogDismissed"
></user-comms-dialog>
<template is="dom-if" if="[[!shouldShowZeroState]]">
<server-list id="serverList" servers="[[servers]]" localize="[[localize]]"></server-list>
</template>
</div>
`,
`,
];

is: 'servers-view',
@property({type: Function}) localize: Localizer = msg => msg;
@property({type: Boolean}) shouldShowAccessKeyWikiLink = false;
@property({type: Array}) servers: ServerListItem[] = [];

properties: {
localize: Function,
useAltAccessMessage: Boolean,
servers: Array,
shouldShowZeroState: {
type: Boolean,
computed: '_computeShouldShowZeroState(servers)',
},
},
get shouldShowZeroState() {
return this.servers ? this.servers.length === 0 : false;
}

_computeShouldShowZeroState(servers: ServerListItem[]) {
return servers ? servers.length === 0 : false;
},
private requestPromptAddServer() {
this.dispatchEvent(new CustomEvent('add-server', {bubbles: true, composed: true}));
}

_requestPromptAddServer() {
this.fire('PromptAddServerRequested', {});
},
});
private get zeroStateContent(): DirectiveResult<typeof UnsafeHTMLDirective> {
let msg;
if (this.shouldShowAccessKeyWikiLink) {
msg = this.localize(
'server-create-your-own-zero-state-access',
'breakLine', '<br/>',
'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>',
'closeLink', '</a>');
} else {
msg = this.localize(
'server-create-your-own-zero-state',
'breakLine', '<br/>',
'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/get-started/index.html#step-1>',
'closeLink', '</a>');
}
return unsafeHTML(msg);
}

render() {
if (this.shouldShowZeroState) {
return html`
<section>
<header>
<button type="button" @click=${this.requestPromptAddServer}>
<server-connection-indicator connection-state="disconnected"></server-connection-indicator>
<h1>${this.localize('server-add')}</h1>
<h2>${this.localize('server-add-zero-state-instructions')}</h2>
</button>
</header>
<footer>${this.zeroStateContent}</footer>
</section>
`;
} else {
return html`
<server-list
.servers=${this.servers}
.localize=${this.localize}
></server-list>
`;
}
}
}

0 comments on commit 8c5916e

Please sign in to comment.