supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #540 from thelounge/astorije/tooltips

Browse Source 
Tooltips, tooltips everywhere
This commit is contained in:
Alistair McKinlay 2016-08-19 08:17:38 +01:00 committed by GitHub
commit 7217655110
4 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/css/style.css
View File

@ -346,9 +346,12 @@ button {
opacity: 1; opacity: 1;
} }
#viewport .rt-tooltip {
float: right;
}
#viewport .rt { #viewport .rt {
display: block; display: block;
float: right;
margin: 6px -12px 0 0; margin: 6px -12px 0 0;
} }
@ -1368,9 +1371,9 @@ button {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
padding: 5px 8px; padding: 5px 8px;
font-size: 12px; font: 12px Lato;
line-height: 1.2; line-height: 1.2;
color: #262c36; color: #fff;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
@ -1380,7 +1383,7 @@ button {
white-space: pre; white-space: pre;
pointer-events: none; pointer-events: none;
content: attr(aria-label); content: attr(aria-label);
background: #fff; background: #222;
border-radius: 3px; border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
transition: .2s; transition: .2s;
@ -1394,7 +1397,7 @@ button {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
color: #262c36; color: #fff;
pointer-events: none; pointer-events: none;
content: ""; content: "";
border: 5px solid transparent; border: 5px solid transparent;
@ -1427,7 +1430,7 @@ button {
right: 50%; right: 50%;
bottom: -5px; bottom: -5px;
margin-right: -5px; margin-right: -5px;
border-bottom-color: #fff; border-bottom-color: #222;
} }
.tooltipped-se:after { .tooltipped-se:after {
@ -1455,7 +1458,7 @@ button {
right: 50%; right: 50%;
bottom: auto; bottom: auto;
margin-right: -5px; margin-right: -5px;
border-top-color: #fff; border-top-color: #222;
} }
.tooltipped-ne:after { .tooltipped-ne:after {
@ -1489,7 +1492,7 @@ button {
bottom: 50%; bottom: 50%;
left: -5px; left: -5px;
margin-top: -5px; margin-top: -5px;
border-left-color: #fff; border-left-color: #222;
} }
.tooltipped-e:after { .tooltipped-e:after {
@ -1506,9 +1509,11 @@ button {
right: -5px; right: -5px;
bottom: 50%; bottom: 50%;
margin-top: -5px; margin-top: -5px;
border-right-color: #fff; border-right-color: #222;
} }
/* End tooltips */
/** /**
* IRC Message Styling * IRC Message Styling
* https://github.com/megawac/irc-style-parser * https://github.com/megawac/irc-style-parser

4
client/index.html
View File

@ -61,7 +61,9 @@
<div class="input"> <div class="input">
<label for="input" id="nick"></label> <label for="input" id="nick"></label>
<textarea id="input" class="mousetrap"></textarea> <textarea id="input" class="mousetrap"></textarea>
<button id="submit" type="submit" title="Send" aria-label="Send message"></button> <span class="tooltipped tooltipped-w" aria-label="Send message">
<button id="submit" type="submit" aria-label="Send message"></button>
</span>
</div> </div>
</form> </form>
</div> </div>

4
client/themes/crypto.css
View File

@ -129,6 +129,10 @@ a:hover,
color: #666; color: #666;
} }
.tooltipped:after {
font-family: Inconsolata-g, monospace;
}
@media (max-width: 768px) { @media (max-width: 768px) {
#main { #main {
left: 0; left: 0;

2
client/views/chat.tpl
View File

@ -3,7 +3,9 @@
<div class="header"> <div class="header">
<button class="lt" aria-label="Toggle channel list"></button> <button class="lt" aria-label="Toggle channel list"></button>
{{#equal type "channel"}} {{#equal type "channel"}}
<span class="rt-tooltip tooltipped tooltipped-w" aria-label="Toggle user list">
<button class="rt" aria-label="Toggle user list"></button> <button class="rt" aria-label="Toggle user list"></button>
</span>
{{/equal}} {{/equal}}
<button class="menu" aria-label="Open the context menu"></button> <button class="menu" aria-label="Open the context menu"></button>
<span class="title">{{name}}</span> <span class="title">{{name}}</span>