Skip to content

Commit

Permalink
Settings page improvements (#567)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alalamav
alalamav authored Feb 4, 2020
1 parent e1a772e commit b1454f1
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 69 deletions.
2 changes: 1 addition & 1 deletion src/server_manager/bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"iron-pages": "PolymerElements/iron-pages#^2.0.1",
"outline-i18n": "Jigsaw-Code/outline-i18n#^0.0.7",
"paper-button": "PolymerElements/paper-button#^2.0.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.4",
"paper-dialog": "PolymerElements/paper-dialog#^2.0.1",
"paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.2",
Expand All @@ -35,7 +36,6 @@
"paper-progress": "PolymerElements/paper-progress#^2.0.1",
"paper-tabs": "PolymerElements/paper-tabs#^2.1.1",
"paper-toast": "PolymerElements/paper-toast#^2.0.0",
"paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
"paper-tooltip": "PolymerElements/paper-tooltip#^2.0.0",
"web-animations-js": "web-animations/web-animations-js",
"webcomponentsjs": "webcomponents/webcomponentsjs#^v1.1.0"
Expand Down
5 changes: 4 additions & 1 deletion src/server_manager/messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
"digitalocean-disconnect": "Disconnect",
"digitalocean-disconnect-account": "Disconnect DigitalOcean account",
"digitalocean-unreachable": "This error may be due to a firewall on your network or temporary connectivity issues with digitalocean.com.",
"disabled": "Disabled",
"done": "Done",
"enabled": "Enabled",
"error-connectivity": "We're having trouble connecting to your DigitalOcean account. This is sometimes a temporary problem with DigitalOcean or with your internet connection. If retrying doesn't work, logging into DigitalOcean again should fix the problem.",
"error-connectivity-title": "Connection problem",
"error-do-account-info": "Failed to get DigitalOcean account information",
Expand Down Expand Up @@ -63,8 +65,9 @@
"error-set-data-limit": "Could not set access key data limit",
"error-unexpected": "An unexpected error occurred.",
"experiments": "Experiments",
"experiments-description": "Test new features and provide us with {openLink}feedback{closeLink} before they are released.",
"experiments-description": "Test new features and provide us with feedback before they are released.",
"experiments-disclaimer": "Experiments are in development and may change or be removed from the app. If you are currently reporting metrics, use of experimental features will be included. Please see the {openLink}data collection policy{closeLink} for more details.",
"experiments-feedback": "Have suggestions? {openLink}Submit feedback here.{closeLink}",
"feedback-cloud-provider": "Select cloud provider",
"feedback-cloud-provider-error": "Please select a cloud provider.",
"feedback-connection": "Can't connect to my server",
Expand Down
22 changes: 17 additions & 5 deletions src/server_manager/messages/master_messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,10 +197,18 @@
"message": "This error may be due to a firewall on your network or temporary connectivity issues with digitalocean.com.",
"description": "This string appears in a dialog as a paragraph. It is shown when a DigitalOcean server cannot be reached. DigitalOcean is a cloud server provider."
},
"disabled": {
"message": "Disabled",
"description": "This string appears across the application as a drop-down menu option. It allows the user to deactivate features."
},
"done": {
"message": "Done",
"description": "This string appears across the application as a button. It lets the user indicate that an action, such as entering text or reading a dialog, has been completed."
},
"enabled": {
"message": "Enabled",
"description": "This string appears across the application as a drop-down menu option. It allows the user to activate features."
},
"error_connectivity": {
"message": "We're having trouble connecting to your DigitalOcean account. This is sometimes a temporary problem with DigitalOcean or with your internet connection. If retrying doesn't work, logging into DigitalOcean again should fix the problem.",
"description": "This string appears in a dialog as a paragraph. The dialog is shown when an operation on a DigitalOcean server fails due to connectivity issues. The dialog displays buttons that allow the user to retry the operation. DigitalOcean is a cloud server provider name and should not be translated."
Expand Down Expand Up @@ -326,8 +334,12 @@
"description": "This string is the title of a section that displays opt-in experimental features."
},
"experiments_description": {
"message": "Test new features and provide us with $START_OF_LINK$feedback$END_OF_LINK$ before they are released.",
"description": "This string is the description of a section that displays opt-in experimental features.",
"message": "Test new features and provide us with feedback before they are released.",
"description": "This string is the description of a section that displays opt-in experimental features."
},
"experiments_disclaimer": {
"message": "Experiments are in development and may change or be removed from the app. If you are currently reporting metrics, use of experimental features will be included. Please see the $START_OF_LINK$data collection policy$END_OF_LINK$ for more details.",
"description": "This string provides a disclaimer to opting into experimental features.",
"placeholders": {
"END_OF_LINK": {
"content": "{closeLink}"
Expand All @@ -337,9 +349,9 @@
}
}
},
"experiments_disclaimer": {
"message": "Experiments are in development and may change or be removed from the app. If you are currently reporting metrics, use of experimental features will be included. Please see the $START_OF_LINK$data collection policy$END_OF_LINK$ for more details.",
"description": "This string provides a disclaimer to opting into experimental features.",
"experiments_feedback": {
"message": "Have suggestions? $START_OF_LINK$Submit feedback here.$END_OF_LINK$",
"description": "This string appears in a section that allows the user to enable experimental features. Allows the user to submit feedback about a particular feature.",
"placeholders": {
"END_OF_LINK": {
"content": "{closeLink}"
Expand Down
121 changes: 83 additions & 38 deletions src/server_manager/ui_components/outline-server-settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
-->
<link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel='import' href='../bower_components/paper-button/paper-button.html'>
<link rel='import' href='../bower_components/paper-checkbox/paper-checkbox.html'>
<link rel='import' href='../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../bower_components/paper-input/paper-input.html'>
<link rel='import' href='../bower_components/paper-toggle-button/paper-toggle-button.html'>

<link rel='import' href='./cloud-install-styles.html'>
<link rel='import' href='./outline-server-settings-styles.html'>
Expand Down Expand Up @@ -56,9 +56,12 @@
}
.setting p {
margin-bottom: 12px;
width: 80%;
width: 60%;
color: var(--medium-gray);
}
#experiments p {
width: 80%;
}
#experiments .sub-section p {
width: 100%;
}
Expand All @@ -73,10 +76,16 @@
.sub-section iron-icon {
margin-right: 16px;
}
.space-between {
.selection-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: baseline;
}
.selection-container > .content {
flex: 4;
}
.selection-container > paper-dropdown-menu {
flex: 1;
}
.data-limits-input {
display: flex;
Expand All @@ -95,23 +104,17 @@
paper-input:not([readonly]) {
width: 60%;
}
paper-toggle-button {
--paper-toggle-button-checked-bar-color: var(--primary-green);
--paper-toggle-button-checked-button-color: var(--primary-green);
--paper-toggle-button-checked-ink-color: var(--primary-green);
--paper-toggle-button-unchecked-bar-color: var(--dark-gray);
}
.link {
text-decoration: underline;
color: var(--medium-gray);
}
paper-dropdown-menu {
border: 1px solid var(--medium-gray);
border-radius: 4px;
max-width: 150px;
--paper-input-container: {
padding: 0 4px;
text-align: center;
width: 64px;
};
--paper-input-container-input: {
color: var(--medium-gray);
font-size: 14px;
};
--paper-dropdown-menu-ripple: {
display: none;
Expand All @@ -123,17 +126,40 @@
display: none;
}
}
.data-limits-input paper-dropdown-menu {
border: none;
--paper-input-container: {
width: 64px;
};
}
paper-listbox paper-item {
font-size: 14px;
}
paper-listbox paper-item:hover {
cursor: pointer;
background-color: #eee;
}
#data-limits-container .space-between h3 {
#data-limits-container .selection-container h3 {
font-weight: normal;
margin-bottom: 8px;
}
#data-limits-container .space-between p {
#data-limits-container .selection-container p {
margin: 0 0 24px 0;
}
#data-limits-container .selection-container span {
display: block;
margin-top: 6px;
}
paper-checkbox {
/* We want the ink to be the color we're going to, not coming from */
--paper-checkbox-checked-color: var(--primary-green);
--paper-checkbox-checked-ink-color: var(--dark-gray);
--paper-checkbox-unchecked-color: var(--light-gray);
--paper-checkbox-unchecked-ink-color: var(--primary-green);
}
.selection-container paper-checkbox {
margin-right: 4px;
}
</style>
<div class="container">
<div class="content">
Expand All @@ -151,8 +177,8 @@ <h3>DigitalOcean</h3>
<iron-icon class="setting-icon" icon="outline-iconset:outline"></iron-icon>
<div>
<h3>[[localize('settings-server-info')]]</h3>
<!-- TODO: make this outline-validated-input -->
<paper-input id="serverNameInput" class="server-name" value="{{name}}" label="[[localize('settings-server-name')]]" always-float-label maxlength="100" on-keydown="_handleNameInputKeyDown" on-blur="_handleNameInputBlur"></paper-input>
<!-- TODO: consider making this an outline-validated-input -->
<paper-input id="serverNameInput" class="server-name" value="{{serverName}}" label="[[localize('settings-server-name')]]" always-float-label maxlength="100" on-keydown="_handleNameInputKeyDown" on-blur="_handleNameInputBlur"></paper-input>
<p class="detail">[[localize('settings-server-rename')]]</p>
<outline-validated-input
editable="[[isAccessKeyPortEditable]]" visible="[[serverPortForNewAccessKeys]]" label="[[localize('settings-access-key-port')]]" allowed-pattern="[0-9]{1,5}" max-length="5" value="[[serverPortForNewAccessKeys]]" client-side-validator="[[_validatePort]]" event="ChangePortForNewAccessKeysRequested" localize="[[localize]]"
Expand All @@ -170,19 +196,29 @@ <h3>[[localize('settings-server-info')]]</h3>
<iron-icon class="setting-icon" icon="icons:build"></iron-icon>
<div>
<h3>[[localize('experiments')]]</h3>
<!-- TODO: link to feedback form -->
<p inner-h-t-m-l="[[localize('experiments-description', 'openLink', '<a href=#>', 'closeLink', '</a>')]]"></p>
<p>[[localize('experiments-description')]]</p>
<div class="sub-section">
<iron-icon icon="icons:error-outline"></iron-icon>
<p inner-h-t-m-l="[[localize('experiments-disclaimer', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html#/en/support/dataCollection>', 'closeLink', '</a>')]]"></p>
</div>
<div id="data-limits-container" hidden$="[[!supportsAccessKeyDataLimit]]">
<div class="space-between">
<div>
<div class="selection-container">
<div class="content">
<h3>[[localize('data-limits')]]</h3>
<p>[[localize('data-limits-description', 'date', dataLimitsAvailabilityDate)]]</p>
<p>
[[localize('data-limits-description', 'date', dataLimitsAvailabilityDate)]]<br/>
<!-- TODO: link to feedback form -->
<span inner-h-t-m-l="[[localize('experiments-feedback', 'openLink', '<a href=#>', 'closeLink', '</a>')]]"></span>
</p>
</div>
<paper-toggle-button id="dataLimitsToggle" checked="{{isAccessKeyDataLimitEnabled}}" on-checked-changed="_accessKeyDataLimitEnabledChanged"></paper-toggle-button>
<!-- NOTE: The dropdown is not automatically sized to the button's width:
https://github.com/PolymerElements/paper-dropdown-menu/issues/229 -->
<paper-dropdown-menu no-label-float horizontal-align="left">
<paper-listbox slot="dropdown-content" selected="{{_computeDataLimitsEnabledName(isAccessKeyDataLimitEnabled)}}" attr-for-selected="name" on-selected-changed="_accessKeyDataLimitEnabledChanged">
<paper-item name="enabled">[[localize('enabled')]]</paper-item>
<paper-item name="disabled">[[localize('disabled')]]</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
<div class="data-limits-input" hidden$="[[!isAccessKeyDataLimitEnabled]]">
<paper-input id="accessKeyDataLimitInput" value="[[accessKeyDataLimit.value]]" label="Data limit per key" always-float-label allowed-pattern="[0-9]+" required auto-validate maxlength="9" on-keydown="_handleAccessKeyDataLimitInputKeyDown" on-blur="_requestSetAccessKeyDataLimit"></paper-input>
Expand All @@ -200,11 +236,11 @@ <h3>[[localize('data-limits')]]</h3>
<div class="setting card-section">
<iron-icon class="setting-icon" icon="editor:insert-chart"></iron-icon>
<div>
<div class="space-between">
<h3>[[localize('settings-metrics-header')]]</h3>
<paper-toggle-button checked="{{metricsEnabled}}"></paper-toggle-button>
<div class="selection-container">
<paper-checkbox checked="{{metricsEnabled}}"></paper-checkbox>
<h3>[[localize('settings-metrics-header')]]</h3>
</div>
<p inner-h-t-m-l="[[localize('metrics-description', 'openLink', '<a class=link href=https://s3.amazonaws.com/outline-vpn/index.html#/en/support/dataCollection>', 'closeLink', '</a>')]]"></p>
<p inner-h-t-m-l="[[localize('metrics-description', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html#/en/support/dataCollection>', 'closeLink', '</a>')]]"></p>
</div>
</div>
</div>
Expand All @@ -215,8 +251,8 @@ <h3>[[localize('settings-metrics-header')]]</h3>
is: 'outline-server-settings',
properties: {
isServerManaged: Boolean,
name: String,
metricsEnabled: { type: Boolean, observer: '_metricsEnabledChanged' },
serverName: String,
metricsEnabled: {type: Boolean, observer: '_metricsEnabledChanged'},
// Initialize to null so we can use the hidden attribute, which does not work well with undefined values.
serverId: {type: String, value: null},
serverHostname: {type: String, value: null},
Expand All @@ -233,8 +269,6 @@ <h3>[[localize('settings-metrics-header')]]</h3>
serverMonthlyCost: {type: String, value: null},
serverMonthlyTransferLimit: {type: String, value: null},
localize: {type: Function, readonly: true},
enableKeysPortButtons: {type: Boolean, value: false},
showKeysPortButtons: {type: Boolean, value: false},
shouldShowExperiments: {type: Boolean, computed: '_computeShouldShowExperiments(supportsAccessKeyDataLimit)'},
},
update: function(name, metricsEnabled) {
Expand All @@ -244,21 +278,20 @@ <h3>[[localize('settings-metrics-header')]]</h3>
},
_handleNameInputKeyDown: function(event) {
if (event.key === 'Escape') {
this.name = this.initialName;
this.serverName = this.initialName;
this.$.serverNameInput.blur();
} else if (event.key === 'Enter') {
this.$.serverNameInput.blur();
}
},
_handleNameInputBlur: function(event) {
const newName = this.name;
const newName = this.serverName;
if (!newName) {
this.name = this.initialName;
this.serverName = this.initialName;
return;
}
// Fire signal if name has changed.
if (newName !== this.initialName) {
this.initialName = newName
this.fire('ServerRenameRequested', {newName});
}
},
Expand All @@ -275,18 +308,27 @@ <h3>[[localize('settings-metrics-header')]]</h3>
},
_accessKeyDataLimitEnabledChanged: function(e) {
const wasDataLimitEnabled = this.isAccessKeyDataLimitEnabled;
const isDataLimitEnabled = e.detail.value;
const isDataLimitEnabled = e.detail.value === 'enabled';
if (isDataLimitEnabled === undefined || wasDataLimitEnabled === undefined) {
return;
} else if (isDataLimitEnabled === wasDataLimitEnabled) {
return;
}
this.isAccessKeyDataLimitEnabled = isDataLimitEnabled;
if (isDataLimitEnabled) {
this._requestSetAccessKeyDataLimit();
} else {
this.fire('RemoveAccessKeyDataLimitRequested');
}
},
_handleAccessKeyDataLimitInputKeyDown: function(event) {
if (event.key === 'Escape') {
this.$.accessKeyDataLimitInput.value = this.accessKeyDataLimit.value;
this.$.accessKeyDataLimitInput.blur();
} else if (event.key === 'Enter') {
this.$.accessKeyDataLimitInput.blur();
}
},
_requestSetAccessKeyDataLimit: function() {
if (this.$.accessKeyDataLimitInput.invalid) {
return;
Expand All @@ -295,6 +337,9 @@ <h3>[[localize('settings-metrics-header')]]</h3>
const unit = this.$.accessKeyDataLimitUnits.selected;
this.fire('SetAccessKeyDataLimitRequested', {limit: {value, unit}});
},
_computeDataLimitsEnabledName: function(isAccessKeyDataLimitEnabled) {
return isAccessKeyDataLimitEnabled ? 'enabled' : 'disabled';
},
_computeShouldShowExperiments: function(supportsAccessKeyDataLimit) {
return supportsAccessKeyDataLimit;
},
Expand Down
1 change: 1 addition & 0 deletions src/server_manager/ui_components/outline-server-view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -510,6 +510,7 @@ <h3>[[accessKeyRows.length]]</h3>
id="serverSettings"
server-id="[[serverId]]"
server-hostname="[[serverHostname]]"
server-name="[[serverName]]"
is-hostname-editable="[[isHostnameEditable]]"
server-management-api-url="[[serverManagementApiUrl]]"
server-port-for-new-access-keys="[[serverPortForNewAccessKeys]]"
Expand Down
Loading

0 comments on commit b1454f1

Please sign in to comment.