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

sidebar: Add scrollbar for list of organizations on overflow.

Browse Source
This commit is contained in:
Abhigyan Khaund
2018-04-16 19:38:26 +05:30
committed by Akash Nimare
parent ca8ce1deaa
commit 22f705960d
2 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,6 +45,28 @@ body {
transition: all 0.6s ease-out; transition: all 0.6s ease-out;
} }
#view-controls-container {
height: calc(100% - 156px);
overflow-y: hidden;
}
#view-controls-container:hover {
overflow-y: overlay;
}
#view-controls-container::-webkit-scrollbar {
width: 4px;
}
#view-controls-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#view-controls-container::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;

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

@@ -176,7 +176,7 @@ class ServerManagerView {
}); });
}); });
this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip); this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true);
this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip); this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip); this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
this.sidebarHoverEvent(this.$backButton, this.$backTooltip); this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
@@ -188,9 +188,17 @@ class ServerManagerView {
return currentIndex; return currentIndex;
} }
sidebarHoverEvent(SidebarButton, SidebarTooltip) { sidebarHoverEvent(SidebarButton, SidebarTooltip, addServer = false) {
SidebarButton.addEventListener('mouseover', () => { SidebarButton.addEventListener('mouseover', () => {
SidebarTooltip.removeAttribute('style'); SidebarTooltip.removeAttribute('style');
// To handle position of add server tooltip due to scrolling of list of organizations
// This could not be handled using CSS, hence the top of the tooltip is made same
// as that of its parent element.
// This needs to handled only for the add server tooltip and not others.
if (addServer) {
const { top } = SidebarButton.getBoundingClientRect();
SidebarTooltip.style.top = top + 'px';
}
}); });
SidebarButton.addEventListener('mouseout', () => { SidebarButton.addEventListener('mouseout', () => {
SidebarTooltip.style.display = 'none'; SidebarTooltip.style.display = 'none';
@@ -200,6 +208,11 @@ class ServerManagerView {
onHover(index, serverName) { onHover(index, serverName) {
this.$serverIconTooltip[index].innerHTML = serverName; this.$serverIconTooltip[index].innerHTML = serverName;
this.$serverIconTooltip[index].removeAttribute('style'); this.$serverIconTooltip[index].removeAttribute('style');
// To handle position of servers' tooltip due to scrolling of list of organizations
// This could not be handled using CSS, hence the top of the tooltip is made same
// as that of its parent element.
const { top } = this.$serverIconTooltip[index].parentElement.getBoundingClientRect();
this.$serverIconTooltip[index].style.top = top + 'px';
} }
onHoverOut(index) { onHoverOut(index) {