supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages 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 { .password-container .reveal-password {
height: 37px;
width: 37px;
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 15px; right: 15px;
cursor: pointer;
} }
.password-container .reveal-password i { .password-container .reveal-password button {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-size: 16px; font-size: 16px;
color: #cdd3da; color: #cdd3da;
display: flex; padding: 10px;
justify-content: center;
align-items: center;
height: 100%;
} }
.password-container .reveal-password i:hover { .password-container .reveal-password button:hover {
color: #79838c; color: #79838c;
} }
.password-container .reveal-password i::before { .password-container .reveal-password button::before {
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */ content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
transition: color 0.2s; 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 */ content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
color: #ff4136; color: #ff4136;
} }

11
client/js/utils.js
View File

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