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

Add the ability to close for functional tabs.

Browse Source
This commit is contained in:
Zhongyi Tong
2017-06-18 02:17:18 +08:00
parent a62fc3d3bf
commit f3cf2229c6
6 changed files with 81 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/renderer/css/main.css
View File

@@ -151,6 +151,17 @@ html, body {
.tab .server-tab-badge {
display: none;
}
.tab .server-tab-badge.close-button {
width: 16px;
padding: 0 0 0 1px;
}
.tab .server-tab-badge.close-button i {
font-size: 13px;
line-height: 17px;
}
/*******************
* Webview Area *
*******************/

31
app/renderer/js/components/functional-tab.js
View File

@@ -9,12 +9,39 @@ class FunctionalTab extends Tab {
template() {
return `<div class="tab">
<div class="server-tab-badge"></div>
<div class="server-tab-badge close-button">
<i class="material-icons">close</i>
</div>
<div class="server-tab functional-tab">
<i class="material-icons md-48">${this.props.materialIcon}</i>
<i class="material-icons">${this.props.materialIcon}</i>
</div>
</div>`;
}
init() {
this.$el = this.generateNodeFromTemplate(this.template());
this.props.$root.appendChild(this.$el);
this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
this.registerListeners();
}
registerListeners() {
super.registerListeners();
this.$el.addEventListener('mouseover', () => {
this.$closeButton.classList.add('active');
});
this.$el.addEventListener('mouseout', () => {
this.$closeButton.classList.remove('active');
});
this.$closeButton.addEventListener('click', (e) => {
this.props.onDestroy();
e.stopPropagation();
});
}
}
module.exports = FunctionalTab;

17
app/renderer/js/components/server-tab.js
View File

@@ -13,6 +13,23 @@ class ServerTab extends Tab {
<div class="server-tab" style="background-image: url(${this.props.icon});"></div>
</div>`;
}
init() {
super.init();
this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
}
updateBadge(count) {
if (count > 0) {
const formattedCount = count > 999 ? '1K+' : count;
this.$badge.innerHTML = formattedCount;
this.$badge.classList.add('active');
} else {
this.$badge.classList.remove('active');
}
}
}
module.exports = ServerTab;

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

@@ -13,23 +13,11 @@ class Tab extends BaseComponent {
init() {
this.$el = this.generateNodeFromTemplate(this.template());
this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
this.props.$root.appendChild(this.$el);
this.registerListeners();
}
updateBadge(count) {
if (count > 0) {
const formattedCount = count > 999 ? '1K+' : count;
this.$badge.innerHTML = formattedCount;
this.$badge.classList.add('active');
} else {
this.$badge.classList.remove('active');
}
}
registerListeners() {
this.$el.addEventListener('click', this.props.onClick);
}

1
app/renderer/js/components/webview.js
View File

@@ -21,7 +21,6 @@ class WebView extends BaseComponent {
template() {
return `<webview
id="webview-${this.props.index}"
class="disabled"
src="${this.props.url}"
${this.props.nodeIntegration ? 'nodeIntegration' : ''}

31
app/renderer/js/main.js
View File

@@ -81,7 +81,8 @@ class ServerManagerView {
this.tabs.push(new FunctionalTab({
materialIcon: tabProps.materialIcon,
$root: this.$tabsContainer,
onClick: this.activateTab.bind(this, this.functionalTabs[name])
onClick: this.activateTab.bind(this, this.functionalTabs[name]),
onDestroy: this.destroyTab.bind(this, name, this.functionalTabs[name])
}));
this.webviews.push(new WebView({
@@ -115,7 +116,7 @@ class ServerManagerView {
});
}
activateTab(index) {
activateTab(index, hideOldTab=true) {
if (this.webviews[index].loading) {
return;
}
@@ -123,7 +124,7 @@ class ServerManagerView {
if (this.activeTabIndex !== -1) {
if (this.activeTabIndex === index) {
return;
} else {
} else if (hideOldTab) {
this.tabs[this.activeTabIndex].deactivate();
this.webviews[this.activeTabIndex].hide();
}
@@ -135,13 +136,29 @@ class ServerManagerView {
this.webviews[index].load();
}
destroyTab(name, index) {
if (this.webviews[index].loading) {
return;
}
this.tabs[index].$el.parentNode.removeChild(this.tabs[index].$el);
this.webviews[index].$el.parentNode.removeChild(this.webviews[index].$el);
delete this.tabs[index];
delete this.webviews[index];
delete this.functionalTabs[name];
this.activateTab(0, false);
}
updateBadge() {
let messageCountAll = 0;
for (let i = 0; i < this.webviews.length; i++) {
const count = this.webviews[i].badgeCount;
messageCountAll += count;
this.tabs[i].updateBadge(count);
if (this.tabs[i] && this.tabs[i].hasOwnProperty('updateBadge')) {
const count = this.webviews[i].badgeCount;
messageCountAll += count;
this.tabs[i].updateBadge(count);
}
}
ipcRenderer.send('update-badge', messageCountAll);