deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-06-10 01:32:17 +02:00
Code Issues Projects Releases Wiki Activity

changed i with button

Browse source
This commit is contained in:
Cristi Ciobanu 2018-05-24 00:12:37 +02:00
parent bab78f9913
commit 25dc2848ca
3 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
client/css/style.css
View file

@ -1689,34 +1689,28 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
}
.password-container .reveal-password {
height: 37px;
width: 37px;
position: absolute;
top: 2px;
right: 15px;
cursor: pointer;
}
.password-container .reveal-password i {
.password-container .reveal-password button {
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
color: #cdd3da;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 10px;
}
.password-container .reveal-password i:hover {
.password-container .reveal-password button:hover {
color: #79838c;
}
.password-container .reveal-password i::before {
.password-container .reveal-password button::before {
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
transition: color 0.2s;
}
.password-container .reveal-password.visible i::before {
.password-container .reveal-password.visible button::before {
content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
color: #ff4136;
}

11
client/js/utils.js
View file

@ -103,17 +103,18 @@ function togglePasswordField(elem) {
const $this = $(this);
const input = $this.closest("div").find("input");
input.attr("type") === "password" ? input.attr("type", "text") : input.attr("type", "password");
input.attr("type", input.attr("type") === "password" ? "text" : "password");
swapLabel($this);
swapLabel($this.find("button"));
$this.toggleClass("visible");
});
}
// Given a span, swap its aria-label with the content of `data-alt-label`
function swapLabel(span) {
const altText = span.data("alt-label");
span.data("alt-label", span.attr("aria-label")).attr("aria-label", altText);
// Given a element, swap its aria-label with the content of `data-alt-label`
function swapLabel(element) {
const altText = element.data("alt-label");
element.data("alt-label", element.attr("aria-label")).attr("aria-label", altText);
}
function confirmExit() {

2
client/views/reveal-password.tpl
View file

@ -1,3 +1,3 @@
<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show password" data-alt-label="Hide password">
<i></i>
<button type="button" aria-label="Show password" data-alt-label="Hide password"></button>
</span>