Replace status message abbr with a tooltipped icon

This commit is contained in:
Jérémie Astori 2017-08-05 15:28:05 -04:00
parent 499dfdfe92
commit 0cdc2a0a04
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
2 changed files with 25 additions and 2 deletions

View File

@ -194,6 +194,7 @@ kbd {
#chat .title:before, #chat .title:before,
#footer .icon, #footer .icon,
#chat .count:before, #chat .count:before,
#settings .extra-help,
#settings #play:before, #settings #play:before,
#form #submit:before, #form #submit:before,
#chat .invite .from:before, #chat .invite .from:before,
@ -334,6 +335,10 @@ kbd {
line-height: 50px; line-height: 50px;
} }
#settings .extra-help:before {
content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
}
#settings #play:before { #settings #play:before {
content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */ content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */
margin-right: 9px; margin-right: 9px;
@ -1400,10 +1405,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin: 4px 10px 0 0; margin: 4px 10px 0 0;
} }
#settings .extra-help,
#settings #play { #settings #play {
color: #7f8c8d; color: #7f8c8d;
} }
#settings .extra-help {
cursor: help;
}
#settings #play { #settings #play {
font-size: 14px; font-size: 14px;
transition: opacity .2s; transition: opacity .2s;
@ -1725,6 +1735,16 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
animation-delay: .4s; animation-delay: .4s;
} }
.tooltipped-no-delay:hover:before,
.tooltipped-no-delay:hover:after,
.tooltipped-no-delay:active:before,
.tooltipped-no-delay:active:after,
.tooltipped-no-delay:focus:before,
.tooltipped-no-delay:focus:after {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.tooltipped-s:after, .tooltipped-s:after,
.tooltipped-se:after, .tooltipped-se:after,
.tooltipped-sw:after { .tooltipped-sw:after {

View File

@ -219,13 +219,16 @@
<div class="col-sm-6"> <div class="col-sm-6">
<label class="opt"> <label class="opt">
<input type="checkbox" name="optional"> <input type="checkbox" name="optional">
Show <abbr title="Joins, parts, kicks, nick changes, and mode changes">status messages</abbr> Show status messages
<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, and mode changes">
<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, and mode changes"></button>
</span>
</label> </label>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<label class="opt"> <label class="opt">
<input type="checkbox" name="condense"> <input type="checkbox" name="condense">
Condense <abbr title="Joins, parts, kicks, nick changes, and mode changes">status messages</abbr> Condense status messages
</label> </label>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">