Skip to content

Commit

Permalink
remove remaining uses of hidden
Browse files Browse the repository at this point in the history
  • Loading branch information
@ohnorobo
ohnorobo committed Oct 25, 2022
1 parent 0aec213 commit aeb07a5
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 58 deletions.
63 changes: 41 additions & 22 deletions src/www/ui_components/add-server-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,21 +163,24 @@ Polymer({
<iron-icon icon="communication:vpn-key" slot="suffix"></iron-icon>
</paper-input>
<div class="footer center top-divider">
<div
id="addServerFooter"
hidden$="[[showAltAccessMessage]]"
inner-h-t-m-l="[[localize('server-create-your-own', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'closeLink', '</a>')]]"
></div>
<div
id="addServerFooterAlt"
hidden$="[[!showAltAccessMessage]]"
inner-h-t-m-l="[[localize('server-create-your-own-access', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
></div>
<div
id="invalidAccessKeyFooter"
hidden=""
inner-h-t-m-l="[[localize('server-add-invalid', 'openLine', '<span class=input-invalid>', 'closeLine', '</span><br/>')]]"
></div>
<template is="dom-if" if="[[shouldShowNormalMessage]]">
<div
id="addServerFooter"
inner-h-t-m-l="[[localize('server-create-your-own', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'closeLink', '</a>')]]"
></div>
</template>
<template is="dom-if" if="[[shouldShowAltMessage]]">
<div
id="addServerFooterAlt"
inner-h-t-m-l="[[localize('server-create-your-own-access', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
></div>
</template>
<template is="dom-if" if="[[invalidAccessKeyInput]]">
<div
id="invalidAccessKeyFooter"
inner-h-t-m-l="[[localize('server-add-invalid', 'openLine', '<span class=input-invalid>', 'closeLine', '</span><br/>')]]"
></div>
</template>
</div>
</paper-dialog>
Expand Down Expand Up @@ -207,11 +210,23 @@ Polymer({

properties: {
localize: Function,
showAltAccessMessage: Boolean,
useAltAccessMessage: Boolean,
invalidAccessKeyInput: {
Boolean,
value: false,
},
accessKey: {
type: String,
observer: '_accessKeyChanged',
},
shouldShowNormalMessage: {
type: Boolean,
computed: '_computeShouldShowNormalMessage(useAltAccessMessage, invalidAccessKeyInput)',
},
shouldShowAltMessage: {
type: Boolean,
computed: '_computeShouldShowAltMessage(useAltAccessMessage, invalidAccessKeyInput)',
},
},

ready: function() {
Expand Down Expand Up @@ -305,17 +320,21 @@ Polymer({
var input = event.target;
input.toggleClass('input-invalid', input.invalid);
if (input.invalid) {
this.$.addServerFooter.hidden = true;
this.$.addServerFooterAlt.hidden = true;
this.$.invalidAccessKeyFooter.hidden = false;
this.invalidAccessKeyInput = true;
} else {
this.$.addServerFooter.hidden = false || this.showAltAccessMessage;
this.$.addServerFooterAlt.hidden = false || !this.showAltAccessMessage;
this.$.invalidAccessKeyFooter.hidden = true;
this.invalidAccessKeyInput = false;
}
},

_disallowScroll: function(event) {
event.preventDefault();
},

_computeShouldShowNormalMessage(useAltAccessMessage, invalidAccessKeyInput) {
return !useAltAccessMessage && !invalidAccessKeyInput;
},

_computeShouldShowAltMessage(useAltAccessMessage, invalidAccessKeyInput) {
return useAltAccessMessage && !invalidAccessKeyInput;
},
});
12 changes: 6 additions & 6 deletions src/www/ui_components/app-root.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ 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]]" show-alt-access-message="[[showAltAccessMessage]]""></servers-view>
<servers-view name="servers" id="serversView" servers="[[servers]]" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]""></servers-view>
<feedback-view name="feedback" id="feedbackView" localize="[[localize]]"></feedback-view>
<about-view
name="about"
Expand Down Expand Up @@ -389,7 +389,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
<a hidden="" id="toastUrl" href="[[toastUrl]]"></a>
</paper-toast>
<add-server-view id="addServerView" localize="[[localize]]" show-alt-access-message="[[showAltAccessMessage]]"></add-server-view>
<add-server-view id="addServerView" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]"></add-server-view>
<!-- Modal dialogs must be placed outside of app-header-layout, see
/~https://github.com/PolymerElements/paper-dialog/issues/152 and
Expand Down Expand Up @@ -540,9 +540,9 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
toastUrl: {
type: String,
},
showAltAccessMessage: {
useAltAccessMessage: {
type: Boolean,
computed: '_computeShowAltAccessMessage()',
computed: '_computeUseAltAccessMessage(language)',
},
};
}
Expand Down Expand Up @@ -771,9 +771,9 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
});
}

_computeShowAltAccessMessage() {
_computeUseAltAccessMessage(language) {
// Hack to show an alternative message
return this.language === 'fa' && this.platform !== 'ios' && this.platform !== 'osx';
return language === 'fa' && this.platform !== 'ios' && this.platform !== 'osx';
}
}
customElements.define(AppRoot.is, AppRoot);
59 changes: 29 additions & 30 deletions src/www/views/servers_view/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,6 @@ Polymer({
color: var(--medium-green);
text-decoration: none;
}
/* Do not remove, this allows the hidden attribute to work with flex displays. */
[hidden] {
display: none !important;
}
.server-list-container {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -98,48 +94,51 @@ Polymer({
}
</style>
<div class="server-list-container">
<div class="flex-column-container" hidden$="[[!shouldShowZeroState]]">
<template is="dom-if" if="[[shouldShowZeroState]]">
<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 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/index.html>', '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/index.html>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
></div>
</template>
</div>
<template is="dom-if" if="[[!showAltAccessMessage]]">
<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/index.html>', 'closeLink', '</a>')]]"
></div>
</template>
<template is="dom-if" if="[[showAltAccessMessage]]">
<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/index.html>', '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>
<server-list
id="serverList"
hidden$="[[shouldShowZeroState]]"
servers="[[servers]]"
localize="[[localize]]"
></server-list>
<template is="dom-if" if="[[!shouldShowZeroState]]">
<server-list
id="serverList"
servers="[[servers]]"
localize="[[localize]]"
></server-list>
</template>
</div>
`,

is: 'servers-view',

properties: {
localize: Function,
showAltAccessMessage: Boolean,
useAltAccessMessage: Boolean,
servers: Array,
shouldShowZeroState: {
type: Boolean,
Expand Down

0 comments on commit aeb07a5

Please sign in to comment.