mirror of
https://github.com/wekan/wekan.git
synced 2026-01-29 12:46:09 +01:00
Most Unicode Icons back to Font Awesome 4.7 for better accessibility. Less always visible buttons, More at ☰ Men.
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu
parent
440f553de0
commit
7ad04f4535
84 changed files with 1828 additions and 1381 deletions
|
|
@ -3,11 +3,9 @@ template(name='passwordInput')
|
|||
label(for='at-field-{{_id}}') {{displayName}}
|
||||
.password-input-container
|
||||
input.password-field(type="{{type}}" placeholder="{{displayName}}" autocomplete="{{autocomplete}}" required="{{required}}")
|
||||
button.password-toggle-btn(type="button" aria-label="Toggle password visibility" title="Toggle password visibility")
|
||||
.eye-container
|
||||
span.eye-text 👁️
|
||||
svg.eye-slash(width="20" height="20" viewBox="0 0 20 20" class="eye-slash-line")
|
||||
line(x1="6" y1="14" x2="32" y2="-14" stroke="#000" stroke-width="2" stroke-linecap="round")
|
||||
button.password-toggle-btn(type="button" tabindex="-1" aria-label="Toggle password visibility" title="Toggle password visibility")
|
||||
i.fa.fa-eye.eye-icon
|
||||
i.fa.fa-eye-slash.eye-slash-icon
|
||||
if errs
|
||||
.at-error
|
||||
each errs
|
||||
|
|
|
|||
|
|
@ -15,10 +15,14 @@ Template.passwordInput.onRendered(function() {
|
|||
// Ensure the input starts as password type for password fields
|
||||
input.type = 'password';
|
||||
|
||||
// Initially hide the slash line since password starts hidden
|
||||
const slashLine = template.find('.eye-slash-line');
|
||||
if (slashLine) {
|
||||
slashLine.style.display = 'none';
|
||||
// Initially show eye icon (password is hidden) and hide eye-slash icon
|
||||
const eyeIcon = template.find('.eye-icon');
|
||||
const eyeSlashIcon = template.find('.eye-slash-icon');
|
||||
if (eyeIcon) {
|
||||
eyeIcon.style.display = 'inline-block';
|
||||
}
|
||||
if (eyeSlashIcon) {
|
||||
eyeSlashIcon.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -27,19 +31,26 @@ Template.passwordInput.events({
|
|||
'click .password-toggle-btn'(event, template) {
|
||||
event.preventDefault();
|
||||
const input = template.find('input.password-field');
|
||||
const slashLine = template.find('.eye-slash-line');
|
||||
const eyeIcon = template.find('.eye-icon');
|
||||
const eyeSlashIcon = template.find('.eye-slash-icon');
|
||||
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
// Show the slash line when password is visible
|
||||
if (slashLine) {
|
||||
slashLine.style.display = 'block';
|
||||
// Show eye-slash icon when password is visible
|
||||
if (eyeIcon) {
|
||||
eyeIcon.style.display = 'none';
|
||||
}
|
||||
if (eyeSlashIcon) {
|
||||
eyeSlashIcon.style.display = 'inline-block';
|
||||
}
|
||||
} else {
|
||||
input.type = 'password';
|
||||
// Hide the slash line when password is hidden
|
||||
if (slashLine) {
|
||||
slashLine.style.display = 'none';
|
||||
// Show eye icon when password is hidden
|
||||
if (eyeIcon) {
|
||||
eyeIcon.style.display = 'inline-block';
|
||||
}
|
||||
if (eyeSlashIcon) {
|
||||
eyeSlashIcon.style.display = 'none';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ template(name="userAvatar")
|
|||
if showEdit
|
||||
if $eq currentUser._id userData._id
|
||||
a.edit-avatar.js-change-avatar
|
||||
| ✏️
|
||||
i.fa.fa-pencil-square-o
|
||||
|
||||
template(name="userAvatarInitials")
|
||||
svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15")
|
||||
|
|
@ -92,8 +92,7 @@ template(name="changeAvatarPopup")
|
|||
.member
|
||||
img.avatar.avatar-image(src="{{link}}")
|
||||
if isSelected
|
||||
| ✅
|
||||
p.sub-name
|
||||
i.fa.fa-check p.sub-name
|
||||
a.js-delete-avatar {{_ 'delete'}}
|
||||
| -
|
||||
= name
|
||||
|
|
@ -102,8 +101,7 @@ template(name="changeAvatarPopup")
|
|||
+userAvatarInitials(userId=currentUser._id)
|
||||
| {{_ 'initials' }}
|
||||
if noAvatarUrl
|
||||
| ✅
|
||||
p.sub-name {{_ 'default-avatar'}}
|
||||
i.fa.fa-check p.sub-name {{_ 'default-avatar'}}
|
||||
input.hide.js-upload-avatar-input(accept="image/*;capture=camera" type="file")
|
||||
if Meteor.settings.public.avatarsUploadMaxSize
|
||||
| {{_ 'max-avatar-filesize'}} {{Meteor.settings.public.avatarsUploadMaxSize}}
|
||||
|
|
@ -113,7 +111,7 @@ template(name="changeAvatarPopup")
|
|||
br
|
||||
| {{_ 'invalid-file'}}
|
||||
button.full.js-upload-avatar
|
||||
| 📤
|
||||
i.fa.fa-upload
|
||||
| {{_ 'upload-avatar' }}
|
||||
|
||||
template(name="deleteAvatarPopup")
|
||||
|
|
|
|||
|
|
@ -37,14 +37,14 @@
|
|||
.password-toggle-btn {
|
||||
position: absolute;
|
||||
right: 5px; /* Adjusted for larger button */
|
||||
top: calc(50% - 6px); /* Moved up by 6px total */
|
||||
top: calc(50% - 26px); /* Moved up by 20px + 6px = 26px total */
|
||||
transform: translateY(-50%);
|
||||
background: #f8f8f8 !important;
|
||||
border: 1px solid #ddd !important;
|
||||
border-radius: 3px !important;
|
||||
color: #000 !important; /* Black color for the icon */
|
||||
cursor: pointer;
|
||||
padding: 8px 12px; /* 2x bigger padding */
|
||||
padding: 8px 6px 8px 12px; /* 2x bigger padding, 6px less on right */
|
||||
font-size: 16px; /* 2x bigger font size */
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
|
|
@ -56,6 +56,10 @@
|
|||
min-width: 40px; /* 2x bigger minimum width */
|
||||
min-height: 32px; /* 2x bigger minimum height */
|
||||
}
|
||||
/* Adjust position for login and register pages */
|
||||
.auth-layout .password-toggle-btn {
|
||||
top: calc(50% - 11px); /* Move 15px down for login/register */
|
||||
}
|
||||
.password-toggle-btn .eye-text {
|
||||
color: #000 !important;
|
||||
font-size: 16px !important;
|
||||
|
|
|
|||
|
|
@ -15,95 +15,95 @@ template(name="memberMenuPopup")
|
|||
with currentUser
|
||||
li
|
||||
a.js-toggle-grey-icons(href="#")
|
||||
| 🎨
|
||||
i.fa.fa-paint-brush
|
||||
| {{_ 'grey-icons'}}
|
||||
if currentUser.profile
|
||||
if currentUser.profile.GreyIcons
|
||||
span(key="grey-icons-checkmark") ✅
|
||||
i.fa.fa-check
|
||||
li
|
||||
a.js-my-cards(href="{{pathFor 'my-cards'}}")
|
||||
| 📋
|
||||
i.fa.fa-list
|
||||
| {{_ 'my-cards'}}
|
||||
li
|
||||
a.js-due-cards(href="{{pathFor 'due-cards'}}")
|
||||
| 📅
|
||||
i.fa.fa-calendar
|
||||
| {{_ 'dueCards-title'}}
|
||||
li
|
||||
a.js-global-search(href="{{pathFor 'global-search'}}")
|
||||
| 🔍
|
||||
i.fa.fa-search
|
||||
| {{_ 'globalSearch-title'}}
|
||||
li
|
||||
a(href="{{pathFor 'home'}}")
|
||||
| 🏠
|
||||
i.fa.fa-home
|
||||
| {{_ 'all-boards'}}
|
||||
li
|
||||
a(href="{{pathFor 'public'}}")
|
||||
| 🌐
|
||||
i.fa.fa-globe
|
||||
| {{_ 'public'}}
|
||||
li
|
||||
a.board-header-btn.js-open-archived-board
|
||||
| 📦
|
||||
i.fa.fa-archive
|
||||
span {{_ 'archives'}}
|
||||
li
|
||||
a.js-notifications-drawer-toggle
|
||||
| 🔔
|
||||
i.fa.fa-bell
|
||||
| {{_ 'notifications'}}
|
||||
if currentSetting.customHelpLinkUrl
|
||||
li
|
||||
a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
|
||||
| ❓
|
||||
i.fa.fa-question-circle
|
||||
| {{_ 'help'}}
|
||||
unless currentUser.isWorker
|
||||
ul.pop-over-list
|
||||
li
|
||||
a(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
|
||||
| 📋
|
||||
i.fa.fa-list
|
||||
| {{_ 'templates'}}
|
||||
if currentUser.isAdmin
|
||||
li
|
||||
a.js-go-setting(href="{{pathFor 'setting'}}")
|
||||
| 🔒
|
||||
i.fa.fa-lock
|
||||
| {{_ 'admin-panel'}}
|
||||
hr
|
||||
if isSameDomainNameSettingValue
|
||||
li
|
||||
a.js-invite-people
|
||||
| ✉️
|
||||
i.fa.fa-envelope
|
||||
| {{_ 'invite-people'}}
|
||||
if isNotOAuth2AuthenticationMethod
|
||||
li
|
||||
a.js-edit-profile
|
||||
| 👤
|
||||
i.fa.fa-user
|
||||
| {{_ 'edit-profile'}}
|
||||
li
|
||||
a.js-change-settings
|
||||
| ⚙️
|
||||
i.fa.fa-cog
|
||||
| {{_ 'change-settings'}}
|
||||
li
|
||||
a.js-change-avatar
|
||||
| 🖼️
|
||||
i.fa.fa-picture-o
|
||||
| {{_ 'edit-avatar'}}
|
||||
unless isSandstorm
|
||||
if isNotOAuth2AuthenticationMethod
|
||||
li
|
||||
a.js-change-password
|
||||
| 🔑
|
||||
i.fa.fa-key
|
||||
| {{_ 'changePasswordPopup-title'}}
|
||||
li
|
||||
a.js-change-language
|
||||
| 🏁
|
||||
i.fa.fa-flag
|
||||
| {{_ 'changeLanguagePopup-title'}}
|
||||
if isSupportPageEnabled
|
||||
li
|
||||
a(href="{{pathFor 'support'}}")
|
||||
| ❓
|
||||
i.fa.fa-question-circle
|
||||
| {{_ 'support'}}
|
||||
unless isSandstorm
|
||||
hr
|
||||
ul.pop-over-list
|
||||
li
|
||||
a.js-logout
|
||||
| 🚪
|
||||
i.fa.fa-sign-out
|
||||
| {{_ 'log-out'}}
|
||||
|
||||
template(name="invitePeoplePopup")
|
||||
|
|
@ -177,25 +177,25 @@ template(name="changeLanguagePopup")
|
|||
a.js-set-language
|
||||
span.emoji-icon {{languageFlag}}
|
||||
| {{name}}
|
||||
if rtl
|
||||
| (RTL)
|
||||
if isCurrentLanguage
|
||||
| ✅
|
||||
|
||||
i.fa.fa-check
|
||||
template(name="changeSettingsPopup")
|
||||
ul.pop-over-list
|
||||
li
|
||||
a.js-toggle-desktop-drag-handles
|
||||
| ↕️
|
||||
i.fa.fa-arrows
|
||||
| {{_ 'show-desktop-drag-handles'}}
|
||||
if isShowDesktopDragHandles
|
||||
| ✅
|
||||
unless currentUser.isWorker
|
||||
i.fa.fa-check unless currentUser.isWorker
|
||||
li
|
||||
label.bold.clear
|
||||
| 🔢
|
||||
i.fa.fa-sort-numeric-asc
|
||||
| {{_ 'show-cards-minimum-count'}}
|
||||
input#show-cards-count-at.inline-input.left(type="number" value="#{showCardsCountAt}" min="-1")
|
||||
label.bold.clear
|
||||
| 📅
|
||||
i.fa.fa-calendar
|
||||
| {{_ 'start-day-of-week'}}
|
||||
select#start-day-of-week.inline-input.left
|
||||
each day in weekDays startDayOfWeek
|
||||
|
|
|
|||
|
|
@ -295,7 +295,7 @@ Template.changePasswordPopup.onRendered(function() {
|
|||
Template.changeLanguagePopup.helpers({
|
||||
languages() {
|
||||
return TAPi18n.getSupportedLanguages()
|
||||
.map(({ tag, name }) => ({ tag: tag, name }))
|
||||
.map(({ tag, name, rtl }) => ({ tag, name, rtl }))
|
||||
.sort((a, b) => {
|
||||
if (a.name === b.name) {
|
||||
return 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue