paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-10-24 08:33:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #221 from zulip/tooltip

Browse Source 
Added tooltip
This commit is contained in:
Akash Nimare
2017-07-18 17:33:11 +00:00
committed by GitHub
parent 64e8419410 0004152e18
commit 38abf2deab
3 changed files with 104 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,13 @@
/*******************
* General rules *
*******************/
html, body {
html,
body {
height: 100%;
margin: 0;
cursor: default;
user-select:none;
user-select: none;
}
#content {
@@ -28,40 +30,40 @@ html, body {
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
/*******************
* Left Sidebar *
*******************/
#tabs-container {
#tabs-container {
display: flex;
align-items: center;
flex-direction: column;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
/* Preferred icon size */
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
/* Preferred icon size */
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
}
.action-button {
@@ -178,6 +180,36 @@ html, body {
font-family: sans-serif;
}
/* Tooltip styling */
#reload-tooltip,
#setting-tooltip {
background: #222c31;
margin-left: 72px;
padding: 10px;
position: absolute;
margin-top: -3px;
z-index: 1000;
color: white;
border-radius: 4px;
text-align: center;
width: 55px;
height: 15px;
}
#reload-tooltip:after,
#setting-tooltip:after {
content: " ";
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #222c31;
position: absolute;
top: 10px;
right: 75px;
}
/*******************
* Webview Area *
*******************/
@@ -203,4 +235,4 @@ webview.disabled {
webview:focus {
outline: 0px solid transparent;
}
}

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

@@ -15,6 +15,10 @@ class ServerManagerView {
const $actionsContainer = document.getElementById('actions-container');
this.$reloadButton = $actionsContainer.querySelector('#reload-action');
this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
this.$settingsButton = $actionsContainer.querySelector('#settings-action');
this.$webviewsContainer = document.getElementById('webviews-container');
@@ -69,6 +73,18 @@ class ServerManagerView {
this.$reloadButton.addEventListener('click', () => {
this.tabs[this.activeTabIndex].webview.reload();
});
this.$reloadButton.addEventListener('mouseover', () => {
this.$reloadTooltip.removeAttribute('style');
});
this.$reloadButton.addEventListener('mouseout', () => {
this.$reloadTooltip.style.display = 'none';
});
this.$settingsButton.addEventListener('mouseover', () => {
this.$settingsTooltip.removeAttribute('style');
});
this.$settingsButton.addEventListener('mouseout', () => {
this.$settingsTooltip.style.display = 'none';
});
this.$addServerButton.addEventListener('click', () => {
this.openSettings('Servers');
});

55
app/renderer/main.html
View File

@@ -1,33 +1,38 @@
<!DOCTYPE html>
<html lang="en" class="responsive desktop">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>Zulip</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
</head>
<body>
<div id="content">
<div id="sidebar">
<div id="view-controls-container">
<div id="tabs-container"></div>
<div id ="add-tab" class="tab">
<div class="server-tab functional-tab" id="add-action">
<i class="material-icons">add</i>
</div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>Zulip</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
</head>
<body>
<div id="content">
<div id="sidebar">
<div id="view-controls-container">
<div id="tabs-container"></div>
<div id="add-tab" class="tab">
<div class="server-tab functional-tab" id="add-action">
<i class="material-icons">add</i>
</div>
</div>
<div id="actions-container">
<div class="action-button" id="reload-action">
<i class="material-icons md-48">refresh</i>
</div>
<div class="action-button" id="settings-action">
<i class="material-icons md-48">settings</i>
</div>
</div>
<div id="actions-container">
<div class="action-button" id="reload-action">
<i class="material-icons md-48">refresh</i>
<span id="reload-tooltip" style="display:none">Reload</span>
</div>
<div class="action-button" id="settings-action">
<i class="material-icons md-48">settings</i>
<span id="setting-tooltip" style="display:none">Settings</span>
</div>
</div>
<div id="webviews-container"/>
</div>
</body>
<script src="js/main.js"></script>
</html>
</div>
</body>
<script src="js/main.js"></script>
</html>