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

Extract Nav from Preference.

Browse Source
This commit is contained in:
Zhongyi Tong
2017-06-21 19:55:12 +08:00
parent b553b29328
commit ffba6b68f8
5 changed files with 85 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,23 +22,23 @@ body {
font-size: 16px;
}
#tabs-container {
#nav-container {
padding: 20px 0;
}
.tab {
.nav {
padding: 5px 0;
color: #999;
cursor: pointer;
}
.tab.active {
.nav.active {
color: #464e5a;
cursor: default;
position: relative;
}
.tab.active::before {
.nav.active::before {
background: #464e5a;
width: 3px;
height: 16px;

3
app/renderer/js/components/tab.js
View File

@@ -43,7 +43,4 @@ class Tab extends BaseComponent {
}
}
Tab.SERVER_TAB = 0;
Tab.SETTINGS_TAB = 1;
module.exports = Tab;

65
app/renderer/js/pages/preference/nav.js Normal file
View File

@@ -0,0 +1,65 @@
'use strict';
const BaseComponent = require(__dirname + '/../../components/base.js');
class PreferenceNav extends BaseComponent {
constructor(props) {
super();
this.props = props;
this.navItems = ['General', 'Server'];
this.init();
}
template() {
let navItemsTemplate = '';
for (let navItem of this.navItems) {
navItemsTemplate += `<div class="nav" id="nav-${navItem}">${navItem}</div>`;
}
return `
<div>
<div id="settings-header">Settings</div>
<div id="nav-container">${navItemsTemplate}</div>
</div>
`;
}
init() {
this.$el = this.generateNodeFromTemplate(this.template());
this.props.$root.appendChild(this.$el);
this.registerListeners();
}
registerListeners() {
for (let navItem of this.navItems) {
const $item = document.getElementById(`nav-${navItem}`);
$item.addEventListener('click', this.props.onItemSelected.bind(navItem));
}
}
select(navItemToSelect) {
for (let navItem of this.navItems) {
if (navItem === navItemToSelect) {
this.activate(navItem);
} else {
this.deactivate(navItem);
}
}
}
activate(navItem) {
const $item = document.getElementById(`nav-${navItem}`);
$item.classList.add('active');
}
deactivate(navItem) {
const $item = document.getElementById(`nav-${navItem}`);
$item.classList.remove('active');
}
}
module.exports = PreferenceNav;

14
app/renderer/js/pages/preference.js → app/renderer/js/pages/preference/preference.js
View File

@@ -3,9 +3,11 @@
const {ipcRenderer} = require('electron');
const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
const Nav = require(__dirname + '/js/pages/preference/nav.js');
class PreferenceView {
constructor() {
this.$sidebarContainer = document.getElementById('sidebar');
this.$newServerButton = document.getElementById('new-server-action');
this.$saveServerButton = document.getElementById('save-server-action');
this.$reloadServerButton = document.getElementById('reload-server-action');
@@ -13,6 +15,12 @@ class PreferenceView {
}
init() {
this.nav = new Nav({
$root: this.$sidebarContainer,
onItemSelected: this.handleNavigation
});
this.nav.activate('Server');
this.initServers();
this.initActions();
}
@@ -20,6 +28,7 @@ class PreferenceView {
initServers() {
const servers = DomainUtil.getDomains();
this.$serverInfoContainer.innerHTML = servers.length ? '' : 'Add your first server to get started!';
this.$serverInfoContainer.innerHTML = servers.length ? '' : 'Add your first server to get started!';
this.initNewServerForm();
@@ -131,6 +140,11 @@ class PreferenceView {
ipcRenderer.send('reload-main');
});
}
handleNavigation(navItem) {
}
insertNode(html) {
const wrapper = document.createElement('div');
wrapper.innerHTML = html;

11
app/renderer/preference.html
View File

@@ -9,14 +9,7 @@
</head>
<body>
<div id="content">
<div id="sidebar">
<div id="settings-header">Settings</div>
<div id="tabs-container">
<div class="tab" id="general-settings">General</div>
<div class="tab active" id="server-settings">Servers</div>
<div class="tab" id="about-settings">About</div>
</div>
</div>
<div id="sidebar"></div>
<div id="settings-container">
<div class="settings-pane" id="server-settings-pane">
<div class="title">Manage Servers</div>
@@ -40,5 +33,5 @@
</div>
</div>
</body>
<script src="js/pages/preference.js"></script>
<script src="js/pages/preference/preference.js"></script>
</html>