paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-03 21:43:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish setting section for proxy.

Browse Source
This commit is contained in:
Zhongyi Tong
2017-08-20 21:59:31 -04:00
parent f142a2eb4e
commit fe34f8adad
7 changed files with 70 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/renderer/css/preference.css
View File

@@ -154,6 +154,10 @@ img.server-info-icon {
border-bottom: #7cb980 1px solid;
}
.setting-block {
width: 100%;
}
.actions-container {
display: flex;
font-size: 14px;

6
app/renderer/js/pages/preference/base-section.js
View File

@@ -1,5 +1,7 @@
'use strict';
const {ipcRenderer} = require('electron');
const BaseComponent = require(__dirname + '/../../components/base.js');
class BaseSection extends BaseComponent {
@@ -29,6 +31,10 @@ class BaseSection extends BaseComponent {
`;
}
}
reloadApp() {
ipcRenderer.send('forward-message', 'reload-viewer');
}
}
module.exports = BaseSection;

53
app/renderer/js/pages/preference/network-section.js
View File

@@ -18,18 +18,26 @@ class NetworkSection extends BaseSection {
<div class="setting-description">Connect servers through a proxy (requires reload)</div>
<div class="setting-control"></div>
</div>
<div class="setting-row" id="sidebar-option">
<div class="setting-block">
<div class="setting-row" id="proxy-pac-option">
<span class="setting-input-key">PAC script</span>
<input class="setting-input-value" placeholder=""/>
</div>
<div class="setting-row" id="sidebar-option">
<div class="setting-row" id="proxy-rules-option">
<span class="setting-input-key">Proxy rules</span>
<input class="setting-input-value" placeholder=""/>
</div>
<div class="setting-row" id="sidebar-option">
<div class="setting-row" id="proxy-bypass-option">
<span class="setting-input-key">Proxy bypass rules</span>
<input class="setting-input-value" placeholder=""/>
</div>
<div class="setting-row">
<div class="action green" id="proxy-save-action">
<i class="material-icons">check_box</i>
<span>Save</span>
</div>
</div>
</div>
</div>
</div>
`;
@@ -37,17 +45,48 @@ class NetworkSection extends BaseSection {
init() {
this.props.$root.innerHTML = this.template();
this.updateTrayOption();
this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');
this.$proxySaveAction = document.getElementById('proxy-save-action');
this.$settingBlock = this.props.$root.querySelector('.setting-block');
this.initProxyOption();
this.$proxyPAC.value = ConfigUtil.getConfigItem('proxyPAC', '');
this.$proxyRules.value = ConfigUtil.getConfigItem('proxyRules', '');
this.$proxyBypass.value = ConfigUtil.getConfigItem('proxyBypass', '');
this.$proxySaveAction.addEventListener('click', () => {
ConfigUtil.setConfigItem('proxyPAC', this.$proxyPAC.value);
ConfigUtil.setConfigItem('proxyRules', this.$proxyRules.value);
ConfigUtil.setConfigItem('proxyBypass', this.$proxyBypass.value);
this.reloadApp();
});
}
updateTrayOption() {
initProxyOption() {
const proxyEnabled = ConfigUtil.getConfigItem('useProxy', false);
this.toggleProxySettings(proxyEnabled);
this.updateProxyOption();
}
toggleProxySettings(option) {
if (option) {
this.$settingBlock.classList.remove('hidden');
} else {
this.$settingBlock.classList.add('hidden');
}
}
updateProxyOption() {
this.generateSettingOption({
$element: document.querySelector('#use-proxy-option .setting-control'),
value: ConfigUtil.getConfigItem('useProxy', true),
value: ConfigUtil.getConfigItem('useProxy', false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem('useProxy');
ConfigUtil.setConfigItem('useProxy', newValue);
this.updateTrayOption();
this.toggleProxySettings(newValue);
this.updateProxyOption();
}
});
}

4
app/renderer/js/pages/preference/new-server-form.js
View File

@@ -11,7 +11,7 @@ class NewServerForm extends BaseComponent {
template() {
return `
<div class="settings-card" style="border: solid 1px #4CAF50;">
<div class="settings-card">
<div class="server-info-right">
<div class="server-info-row">
<input class="setting-input-value" autofocus placeholder="Enter the url of your Zulip server..."/>
@@ -38,7 +38,7 @@ class NewServerForm extends BaseComponent {
this.props.$root.innerHTML = '';
this.props.$root.appendChild(this.$newServerForm);
this.$newServerUrl = this.$newServerForm.querySelectorAll('input.server-info-url')[0];
this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0];
}
submitFormHandler() {

2
app/renderer/js/pages/preference/server-info-form.js
View File

@@ -23,7 +23,7 @@ class ServerInfoForm extends BaseComponent {
<i class="material-icons open-tab-button">open_in_new</i>
</div>
<div class="server-info-row">
<input class="server-info-url" disabled value="${this.props.server.url}"/>
<input class="setting-input-value" disabled value="${this.props.server.url}"/>
</div>
<div class="server-info-row">
<div class="action red server-delete-action">

10
app/renderer/js/pages/preference/servers-section.js
View File

@@ -1,7 +1,5 @@
'use strict';
const {ipcRenderer} = require('electron');
const BaseComponent = require(__dirname + '/../../components/base.js');
const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
const ServerInfoForm = require(__dirname + '/server-info-form.js');
@@ -48,7 +46,7 @@ class ServersSection extends BaseComponent {
$root: this.$serverInfoContainer,
server: servers[i],
index: i,
onChange: this.handleServerInfoChange.bind(this)
onChange: this.reloadApp
}).init();
}
}
@@ -56,13 +54,9 @@ class ServersSection extends BaseComponent {
initNewServerForm() {
new NewServerForm({
$root: this.$newServerContainer,
onChange: this.handleServerInfoChange.bind(this)
onChange: this.reloadApp
}).init();
}
handleServerInfoChange() {
ipcRenderer.send('forward-message', 'reload-viewer');
}
}
module.exports = ServersSection;

2
help.md
View File

@@ -1,6 +1,6 @@
# User Guide
* Welcome! This guide will walk you through the basics of using Zulip Desktop.
> Welcome! This guide will walk you through the basics of using Zulip Desktop.
## Get Zulip Desktop