Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Settings page improvements #567

Merged
merged 5 commits into from
Feb 4, 2020
Merged

Settings page improvements #567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6fcf2af
Replace settings toggles with dropdowns
alalamav Feb 3, 2020
c2a07f1
Move feedback link closer to experiment
alalamav Feb 3, 2020
8c113e2
Update yarn.lock
alalamav Feb 3, 2020
ffb3460
Use checkbox for metrics; style fixes; re-introduce deleted function
alalamav Feb 4, 2020
97d7c32
Await for metrics enabled call
alalamav Feb 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/server_manager/bower.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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