From 2947238a021b6952b56e828d49a8c0094520d89a Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Fri, 17 Oct 2025 02:19:43 +0300 Subject: [PATCH] Convert Font Awesome to Unicode Icons. Part 1. In Progress. Thanks to xet7 ! --- .meteor/packages | 2 +- .meteor/versions | 1 - .../components/boardConversionProgress.jade | 8 +- client/components/cards/attachments.jade | 31 ++++--- client/components/cards/cardDate.css | 53 +++++++++-- client/components/cards/cardDate.jade | 72 +++++++++++++++ client/components/cards/cardDate.js | 20 ++++ client/components/cards/cardDetails.jade | 91 ++++++++++--------- client/components/cards/cardTime.jade | 8 +- client/components/cards/minicard.css | 14 +++ client/components/main/bookmarks.jade | 6 +- client/components/main/header.jade | 16 ++-- client/components/main/layouts.jade | 4 +- client/components/main/popup.tpl.jade | 4 +- client/components/migrationProgress.jade | 18 ++-- client/components/settings/cronSettings.jade | 58 ++++++------ client/components/settings/settingBody.jade | 40 ++++---- .../components/swimlanes/swimlaneHeader.jade | 25 ++--- client/components/users/userAvatar.jade | 14 +-- client/components/users/userHeader.jade | 40 ++++---- 20 files changed, 342 insertions(+), 183 deletions(-) diff --git a/.meteor/packages b/.meteor/packages index 0f4f81d0d..e0baa96d9 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -93,4 +93,4 @@ ejson@1.1.3 logging@1.3.3 wekan-fullcalendar momentjs:moment@2.29.3 -wekan-fontawesome +# wekan-fontawesome diff --git a/.meteor/versions b/.meteor/versions index aac91cd05..886c8cb4a 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -155,7 +155,6 @@ wekan-accounts-cas@0.1.0 wekan-accounts-lockout@1.0.0 wekan-accounts-oidc@1.0.10 wekan-accounts-sandstorm@0.8.0 -wekan-fontawesome@6.4.2 wekan-fullcalendar@3.10.5 wekan-ldap@0.0.2 wekan-markdown@1.0.9 diff --git a/client/components/boardConversionProgress.jade b/client/components/boardConversionProgress.jade index 946bbdbaf..37a404d90 100644 --- a/client/components/boardConversionProgress.jade +++ b/client/components/boardConversionProgress.jade @@ -3,7 +3,7 @@ template(name="boardConversionProgress") .board-conversion-modal .board-conversion-header h3 - i.fa.fa-cogs + | ⚙️ | {{_ 'converting-board'}} p {{_ 'converting-board-description'}} @@ -14,14 +14,14 @@ template(name="boardConversionProgress") .progress-text {{conversionProgress}}% .conversion-status - i.fa.fa-spinner.fa-spin + | ⚙️ | {{conversionStatus}} .conversion-time(style="{{#unless conversionEstimatedTime}}display: none;{{/unless}}") - i.fa.fa-clock-o + | ⏰ | {{_ 'estimated-time-remaining'}}: {{conversionEstimatedTime}} .board-conversion-footer .conversion-info - i.fa.fa-info-circle + | ℹ️ | {{_ 'conversion-info-text'}} diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade index da52688f2..efa66f513 100644 --- a/client/components/cards/attachments.jade +++ b/client/components/cards/attachments.jade @@ -34,10 +34,10 @@ template(name="attachmentViewer") #viewer-overlay.hidden #viewer-top-bar span#attachment-name - a#viewer-close.fa.fa-times-thin + a#viewer-close ❌ #viewer-container - i.fa.fa-chevron-left.attachment-arrow#prev-attachment + | ◀️ #viewer-content img#image-viewer.hidden video#video-viewer.hidden(controls="true") @@ -45,7 +45,7 @@ template(name="attachmentViewer") object#pdf-viewer.hidden(type="application/pdf") span.pdf-preview-error {{_ 'preview-pdf-not-supported' }} object#txt-viewer.hidden(type="text/plain") - i.fa.fa-chevron-right.attachment-arrow#next-attachment + | ▶️ template(name="attachmentGallery") @@ -53,7 +53,7 @@ template(name="attachmentGallery") if canModifyCard a.attachment-item.add-attachment.js-add-attachment - i.fa.fa-plus.icon + | ➕ each attachments @@ -87,21 +87,22 @@ template(name="attachmentGallery") span.file-size ({{fileSize size}}) .attachment-actions a.js-download(href="{{link}}?download=true", download="{{name}}") - i.fa.fa-download.icon(title="{{_ 'download'}}") + | ⬇️(title="{{_ 'download'}}") if currentUser.isBoardMember unless currentUser.isCommentOnly unless currentUser.isWorker a.js-rename - i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}") + | ✏️(title="{{_ 'rename'}}") a.js-confirm-delete - i.fa.fa-trash.icon(title="{{_ 'delete'}}") - a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}") + | 🗑️(title="{{_ 'delete'}}") + a.js-open-attachment-menu + | ☰(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}") // Migration spinner overlay if isAttachmentMigrating _id .attachment-migration-overlay .migration-spinner - i.fa.fa-cog.fa-spin + | ⚙️ .migration-text {{_ 'migrating-attachment'}} template(name="attachmentActionsPopup") @@ -109,8 +110,8 @@ template(name="attachmentActionsPopup") li if isImage a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}") - i.fa.fa-book - i.fa.fa-picture-o + | 📖 + | 🖼️ if isCover | {{_ 'remove-cover'}} else @@ -118,7 +119,7 @@ template(name="attachmentActionsPopup") if currentUser.isBoardAdmin if isImage a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}") - i.fa.fa-picture-o + | 🖼️ if isBackgroundImage | {{_ 'remove-background-image'}} else @@ -126,19 +127,19 @@ template(name="attachmentActionsPopup") if $neq versions.original.storage "fs" a.js-move-storage-fs - i.fa.fa-arrow-right + | ▶️ | {{_ 'attachment-move-storage-fs'}} if $neq versions.original.storage "gridfs" if versions.original.storage a.js-move-storage-gridfs - i.fa.fa-arrow-right + | ▶️ | {{_ 'attachment-move-storage-gridfs'}} if $neq versions.original.storage "s3" if versions.original.storage a.js-move-storage-s3 - i.fa.fa-arrow-right + | ▶️ | {{_ 'attachment-move-storage-s3'}} template(name="attachmentRenamePopup") diff --git a/client/components/cards/cardDate.css b/client/components/cards/cardDate.css index 30bc0d3af..952cc15b7 100644 --- a/client/components/cards/cardDate.css +++ b/client/components/cards/cardDate.css @@ -42,23 +42,64 @@ .card-date.long-overdue.is-active { background-color: #fd3e24; } + +/* Date type specific colors */ +.card-date.received-date { + background-color: #0079bf; /* Blue for received */ +} + +.card-date.received-date:hover, +.card-date.received-date.is-active { + background-color: #005a8b; +} + +.card-date.start-date { + background-color: #3cb500; /* Green for start */ +} + +.card-date.start-date:hover, +.card-date.start-date.is-active { + background-color: #2d8f00; +} + +.card-date.due-date { + background-color: #ff9f19; /* Orange for due */ +} + +.card-date.due-date:hover, +.card-date.due-date.is-active { + background-color: #e68a00; +} + +.card-date.end-date { + background-color: #a632db; /* Purple for end */ +} + +.card-date.end-date:hover, +.card-date.end-date.is-active { + background-color: #8a2bb8; +} .card-date.end-date time::before { - content: "\f253"; + content: "🏁"; /* Finish flag - represents end/completion */ } .card-date.due-date time::before { - content: "\f090"; + content: "⏰"; /* Alarm clock - represents due/deadline */ } .card-date.start-date time::before { - content: "\f251"; + content: "🚀"; /* Rocket - represents start/launch */ } .card-date.received-date time::before { - content: "\f08b"; + content: "📥"; /* Inbox tray - represents received/incoming */ +} + +/* Generic date badge and custom field date */ +.card-date:not(.received-date):not(.start-date):not(.due-date):not(.end-date) time::before { + content: "📅"; /* Calendar - represents generic date */ } .card-date time::before { - font: normal normal normal 14px/1 FontAwesome; font-size: inherit; - -webkit-font-smoothing: antialiased; margin-right: 0.3em; + display: inline-block; } .customfield-date { display: block; diff --git a/client/components/cards/cardDate.jade b/client/components/cards/cardDate.jade index 202b8f6f0..c19f45528 100644 --- a/client/components/cards/cardDate.jade +++ b/client/components/cards/cardDate.jade @@ -21,3 +21,75 @@ template(name="dateCustomField") if showWeekOfYear b | {{showWeek}} + +template(name="minicardReceivedDate") + if canModifyCard + a.js-edit-date.card-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + else + a.card-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + +template(name="minicardStartDate") + if canModifyCard + a.js-edit-date.card-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + else + a.card-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + +template(name="minicardDueDate") + if canModifyCard + a.js-edit-date.card-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + else + a.card-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + +template(name="minicardEndDate") + if canModifyCard + a.js-edit-date.card-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + else + a.card-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} + +template(name="minicardCustomFieldDate") + a(title="{{_ 'date'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + if showWeekOfYear + b + | {{showWeek}} diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js index cc5498fe3..451af183c 100644 --- a/client/components/cards/cardDate.js +++ b/client/components/cards/cardDate.js @@ -329,30 +329,50 @@ class CardCustomFieldDate extends CardDate { CardCustomFieldDate.register('cardCustomFieldDate'); (class extends CardReceivedDate { + template() { + return 'minicardReceivedDate'; + } + showDate() { return format(this.date.get(), 'L'); } }.register('minicardReceivedDate')); (class extends CardStartDate { + template() { + return 'minicardStartDate'; + } + showDate() { return format(this.date.get(), 'YYYY-MM-DD HH:mm'); } }.register('minicardStartDate')); (class extends CardDueDate { + template() { + return 'minicardDueDate'; + } + showDate() { return format(this.date.get(), 'YYYY-MM-DD HH:mm'); } }.register('minicardDueDate')); (class extends CardEndDate { + template() { + return 'minicardEndDate'; + } + showDate() { return format(this.date.get(), 'YYYY-MM-DD HH:mm'); } }.register('minicardEndDate')); (class extends CardCustomFieldDate { + template() { + return 'minicardCustomFieldDate'; + } + showDate() { return format(this.date.get(), 'L'); } diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 043eca308..34b1c88bb 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -12,15 +12,19 @@ template(name="cardDetails") else unless isMiniScreen unless isPopup - a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}") + a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}") + | ❌ if canModifyCard if cardMaximized - a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}") + a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}") + | 🔽 else - a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}") + a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}") + | 🔼 if canModifyCard - a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}") - a.fa.fa-link.card-copy-button.js-copy-link( + a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}") + | ☰ + a.card-copy-button.js-copy-link( id="cardURL_copy" class="fa-link" title="{{_ 'copy-card-link-to-clipboard'}}" @@ -29,10 +33,12 @@ template(name="cardDetails") span.copied-tooltip {{_ 'copied'}} else unless isPopup - a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}") + a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}") + | ❌ if canModifyCard - a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}") - a.fa.fa-link.card-copy-mobile-button.js-copy-link( + a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}") + | ☰ + a.card-copy-mobile-button.js-copy-link( id="cardURL_copy" class="fa-link" title="{{_ 'copy-card-link-to-clipboard'}}" @@ -47,7 +53,8 @@ template(name="cardDetails") | ##{getCardNumber} = getTitle if isWatching - i.card-details-watch.fa.fa-eye + i.card-details-watch + | 👁️ .card-details-path each parentList |   >   @@ -69,7 +76,7 @@ template(name="cardDetails") if hasActiveUploads .card-details-upload-progress .upload-progress-header - i.fa.fa-upload + | 📤 span {{_ 'uploading-files'}} ({{uploadCount}}) each uploads .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}") @@ -78,11 +85,11 @@ template(name="cardDetails") .upload-progress-fill(style="width: {{progress}}%") if $eq status 'error' .upload-progress-error - i.fa.fa-exclamation-triangle + | ⚠️ span {{_ 'upload-failed'}} else if $eq status 'completed' .upload-progress-success - i.fa.fa-check + | ✅ span {{_ 'upload-completed'}} .card-details-left @@ -91,7 +98,7 @@ template(name="cardDetails") if currentBoard.allowsLabels .card-details-item.card-details-item-labels h3.card-details-item-title - i.fa.fa-tags + | 🏷️ | {{_ 'labels'}} a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}") each labels @@ -101,7 +108,7 @@ template(name="cardDetails") if canModifyCard unless currentUser.isWorker a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}") - i.fa.fa-plus + | ➕ if currentBoard.hasAnyAllowsDate hr @@ -109,7 +116,7 @@ template(name="cardDetails") if currentBoard.allowsReceivedDate .card-details-item.card-details-item-received h3.card-details-item-title - i.fa.fa-sign-out + | 📥 | {{_ 'card-received'}} if getReceived +cardReceivedDate @@ -117,12 +124,12 @@ template(name="cardDetails") if canModifyCard unless currentUser.isWorker a.card-label.add-label.js-received-date - i.fa.fa-plus + | ➕ if currentBoard.allowsStartDate .card-details-item.card-details-item-start h3.card-details-item-title - i.fa.fa-hourglass-start + | 🚀 | {{_ 'card-start'}} if getStart +cardStartDate @@ -130,12 +137,12 @@ template(name="cardDetails") if canModifyCard unless currentUser.isWorker a.card-label.add-label.js-start-date - i.fa.fa-plus + | ➕ if currentBoard.allowsDueDate .card-details-item.card-details-item-due h3.card-details-item-title - i.fa.fa-sign-in + | ⏰ | {{_ 'card-due'}} if getDue +cardDueDate @@ -143,12 +150,12 @@ template(name="cardDetails") if canModifyCard unless currentUser.isWorker a.card-label.add-label.js-due-date - i.fa.fa-plus + | ➕ if currentBoard.allowsEndDate .card-details-item.card-details-item-end h3.card-details-item-title - i.fa.fa-hourglass-end + | 🏁 | {{_ 'card-end'}} if getEnd +cardEndDate @@ -156,7 +163,7 @@ template(name="cardDetails") if canModifyCard unless currentUser.isWorker a.card-label.add-label.js-end-date - i.fa.fa-plus + | ➕ if currentBoard.hasAnyAllowsUser hr @@ -164,7 +171,7 @@ template(name="cardDetails") if currentBoard.allowsCreator .card-details-item.card-details-item-creator h3.card-details-item-title - i.fa.fa-user + | 👤 | {{_ 'creator'}} +userAvatar(userId=userId noRemove=true) @@ -174,7 +181,7 @@ template(name="cardDetails") if currentBoard.allowsMembers .card-details-item.card-details-item-members h3.card-details-item-title - i.fa.fa-users + | 👤s | {{_ 'members'}} each userId in getMembers +userAvatar(userId=userId cardId=_id) @@ -182,13 +189,13 @@ template(name="cardDetails") if canModifyCard unless currentUser.isWorker a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}") - i.fa.fa-plus + | ➕ //if assigneeSelected if currentBoard.allowsAssignee .card-details-item.card-details-item-assignees h3.card-details-item-title - i.fa.fa-user + | 👤 | {{_ 'assignee'}} each userId in getAssignees +userAvatar(userId=userId cardId=_id assignee=true) @@ -199,7 +206,7 @@ template(name="cardDetails") if currentUser.isWorker unless assigneeSelected a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}") - i.fa.fa-plus + | ➕ //.card-details-items if currentBoard.allowsRequestedBy @@ -225,7 +232,7 @@ template(name="cardDetails") if currentBoard.allowsAssignedBy .card-details-item.card-details-item-name h3.card-details-item-title - i.fa.fa-user-plus + | 👤-plus | {{_ 'assigned-by'}} if canModifyCard unless currentUser.isWorker @@ -350,52 +357,52 @@ template(name="cardDetails") .poker-card span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}} if $eq pokerState "one" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}} if $eq pokerState "two" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}} if $eq pokerState "three" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}} if $eq pokerState "five" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}} if $eq pokerState "eight" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}} if $eq pokerState "thirteen" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}} if $eq pokerState "twenty" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}} if $eq pokerState "forty" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}} if $eq pokerState "oneHundred" - i.fa.fa-check + | ✅ .poker-deck .poker-card span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}} if $eq pokerState "unsure" - i.fa.fa-check + | ✅ if currentUser.isBoardAdmin button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}} @@ -812,7 +819,7 @@ template(name="cardMembersPopup") = user.profile.fullname | ({{ user.username }}) if isCardMember - i.fa.fa-check + | ✅ template(name="cardAssigneesPopup") input.card-assignees-filter(type="text" placeholder="{{_ 'search'}}") @@ -826,7 +833,7 @@ template(name="cardAssigneesPopup") = user.profile.fullname | ({{ user.username }}) if isCardAssignee - i.fa.fa-check + | ✅ if currentUser.isWorker ul.pop-over-list.js-card-assignee-list li.item(class="{{#if currentUser.isCardAssignee}}active{{/if}}") @@ -836,7 +843,7 @@ template(name="cardAssigneesPopup") = currentUser.profile.fullname | ({{ currentUser.username }}) if currentUser.isCardAssignee - i.fa.fa-check + | ✅ template(name="cardAssigneePopup") .board-assignee-menu @@ -902,7 +909,7 @@ template(name="setCardColorPopup") unless $eq color 'white' span.card-label.palette-color.js-palette-color(class="card-details-{{color}}") if(isSelected color) - i.fa.fa-check + | ✅ button.primary.confirm.js-submit {{_ 'save'}} button.js-remove-color.negate.wide.right {{_ 'unset-color'}} diff --git a/client/components/cards/cardTime.jade b/client/components/cards/cardTime.jade index 8af8c4143..88f52fef6 100644 --- a/client/components/cards/cardTime.jade +++ b/client/components/cards/cardTime.jade @@ -15,8 +15,8 @@ template(name="editCardSpentTime") template(name="timeBadge") if canModifyCard - a.js-edit-time.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}") - | {{showTime}} + a.js-edit-time.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}") + | ⏱️ {{showTime}} else - a.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}") - | {{showTime}} + a.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}") + | ⏱️ {{showTime}} diff --git a/client/components/cards/minicard.css b/client/components/cards/minicard.css index 11fe181ad..637be7763 100644 --- a/client/components/cards/minicard.css +++ b/client/components/cards/minicard.css @@ -168,6 +168,20 @@ .minicard .date { margin-right: 0.4vw; } + +/* Font Awesome icons in minicard dates */ +.minicard .card-date i.fa { + margin-right: 0.3vw; + font-size: 0.9em; + vertical-align: middle; +} + +/* Font Awesome icons in minicard spent time */ +.minicard .card-time i.fa { + margin-right: 0.3vw; + font-size: 0.9em; + vertical-align: middle; +} .minicard .badges { float: left; margin-top: 1vh; diff --git a/client/components/main/bookmarks.jade b/client/components/main/bookmarks.jade index b1af77489..27e377af4 100644 --- a/client/components/main/bookmarks.jade +++ b/client/components/main/bookmarks.jade @@ -8,7 +8,7 @@ template(name="bookmarks") li a(href="{{pathFor 'board' id=_id slug=slug}}")= title a.js-toggle-star(title="{{_ 'star-board-short-unstar'}}") - i.fa.fa-star + | ⭐ else p {{_ 'no-starred-boards'}} else @@ -21,9 +21,9 @@ template(name="bookmarksPopup") each starredBoards li a(href="{{pathFor 'board' id=_id slug=slug}}") - i.fa.fa-star + | ⭐ | #{title} a.js-toggle-star.right(title="{{_ 'star-board-short-unstar'}}") - i.fa.fa-star + | ⭐ else li {{_ 'no-starred-boards'}} diff --git a/client/components/main/header.jade b/client/components/main/header.jade index 4ce881972..c792b4e13 100644 --- a/client/components/main/header.jade +++ b/client/components/main/header.jade @@ -9,7 +9,7 @@ template(name="header") // Home icon - always at left side of logo span.home-icon.allBoards a(href="{{pathFor 'home'}}") - span.fa.fa-home + | 🏠 | {{_ 'all-boards'}} // Logo - visible; on mobile constrained by CSS @@ -80,12 +80,12 @@ template(name="header") .mobile-mode-toggle a.board-header-btn.js-mobile-mode-toggle(title="{{_ 'mobile-desktop-toggle'}}" class="{{#if mobileMode}}mobile-active{{else}}desktop-active{{/if}}") - i.fa.fa-mobile.mobile-icon(class="{{#if mobileMode}}active{{/if}}") - i.fa.fa-desktop.desktop-icon(class="{{#unless mobileMode}}active{{/unless}}") + | 📱(class="{{#if mobileMode}}active{{/if}}") + | 🖥️(class="{{#unless mobileMode}}active{{/unless}}") // Bookmarks button - desktop opens popup, mobile routes to page a.board-header-btn.js-open-bookmarks(title="{{_ 'bookmarks'}}") - i.fa.fa-bookmark + | 🔖 // Notifications +notifications @@ -93,7 +93,7 @@ template(name="header") if currentSetting.customHelpLinkUrl #header-help a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer") - span.fa.fa-question + | ❓ +headerUserBar @@ -112,15 +112,15 @@ template(name="header") if hasAnnouncement .announcement p - i.fa.fa-bullhorn + | 📢 +viewer | #{announcement} - i.fa.fa-times-circle.js-close-announcement + | ❌ template(name="offlineWarning") .offline-warning p - i.fa.fa-warning + | ⚠️ | {{_ 'app-is-offline'}} a.app-try-reconnect {{_ 'app-try-reconnect'}} diff --git a/client/components/main/layouts.jade b/client/components/main/layouts.jade index 536f8dd31..469524e04 100644 --- a/client/components/main/layouts.jade +++ b/client/components/main/layouts.jade @@ -85,13 +85,13 @@ template(name="defaultLayout") if (Modal.isWide) .modal-content-wide.modal-container a.modal-close-btn.js-close-modal - i.fa.fa-times-thin + | ❌ +Template.dynamic(template=Modal.getHeaderName) +Template.dynamic(template=Modal.getTemplateName) else .modal-content.modal-container a.modal-close-btn.js-close-modal - i.fa.fa-times-thin + | ❌ +Template.dynamic(template=Modal.getHeaderName) +Template.dynamic(template=Modal.getTemplateName) diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade index dee721659..bcc5756e4 100644 --- a/client/components/main/popup.tpl.jade +++ b/client/components/main/popup.tpl.jade @@ -5,10 +5,10 @@ style="left:{{offset.left}}px; top:{{offset.top}}px;{{#if offset.maxHeight}} max-height:{{offset.maxHeight}}px;{{/if}}") .header a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}") - i.fa.fa-chevron-left + | ◀️ span.header-title= title a.close-btn.js-close-pop-over - i.fa.fa-times-thin + | ❌ .content-wrapper //- We display the all stack of popup content next to each other and move diff --git a/client/components/migrationProgress.jade b/client/components/migrationProgress.jade index 0e4842349..274ea4621 100644 --- a/client/components/migrationProgress.jade +++ b/client/components/migrationProgress.jade @@ -3,7 +3,7 @@ template(name="migrationProgress") .migration-modal .migration-header h3 - i.fa.fa-database + | 🗄️ | {{_ 'database-migration'}} p {{_ 'database-migration-description'}} @@ -16,11 +16,11 @@ template(name="migrationProgress") .progress-label {{_ 'overall-progress'}} .current-step - i.fa.fa-cog.fa-spin + | ⚙️ | {{migrationCurrentStep}} .estimated-time(style="{{#unless migrationEstimatedTime}}display: none;{{/unless}}") - i.fa.fa-clock-o + | ⏰ | {{_ 'estimated-time-remaining'}}: {{migrationEstimatedTime}} .migration-steps @@ -31,11 +31,11 @@ template(name="migrationProgress") .step-header .step-icon if completed - i.fa.fa-check-circle + | ✅ else if isCurrentStep - i.fa.fa-cog.fa-spin + | ⚙️ else - i.fa.fa-circle-o + | ⭕ .step-info .step-name {{name}} .step-description {{description}} @@ -51,13 +51,13 @@ template(name="migrationProgress") .progress-fill(style="width: {{progress}}%") .migration-status - i.fa.fa-info-circle + | ℹ️ | {{migrationStatus}} .migration-footer .migration-info - i.fa.fa-lightbulb-o + | 💡 | {{_ 'migration-info-text'}} .migration-warning - i.fa.fa-exclamation-triangle + | ⚠️ | {{_ 'migration-warning-text'}} diff --git a/client/components/settings/cronSettings.jade b/client/components/settings/cronSettings.jade index b53dd41cb..b1b71a0d1 100644 --- a/client/components/settings/cronSettings.jade +++ b/client/components/settings/cronSettings.jade @@ -47,17 +47,17 @@ template(name="cronMigrations") .cron-migrations .migration-header h2 - i.fa.fa-database + | 🗄️ | {{_ 'database-migrations'}} .migration-controls button.btn.btn-primary.js-start-all-migrations - i.fa.fa-play + | ▶️ | {{_ 'start-all-migrations'}} button.btn.btn-warning.js-pause-all-migrations - i.fa.fa-pause + | ⏸️ | {{_ 'pause-all-migrations'}} button.btn.btn-danger.js-stop-all-migrations - i.fa.fa-stop + | ⏹️ | {{_ 'stop-all-migrations'}} .migration-progress @@ -68,11 +68,11 @@ template(name="cronMigrations") .progress-label {{_ 'overall-progress'}} .current-step - i.fa.fa-cog.fa-spin + | ⚙️ | {{migrationCurrentStep}} .migration-status - i.fa.fa-info-circle + | ℹ️ | {{migrationStatus}} .migration-steps @@ -83,11 +83,11 @@ template(name="cronMigrations") .step-header .step-icon if completed - i.fa.fa-check-circle + | ✅ else if isCurrentStep - i.fa.fa-cog.fa-spin + | ⚙️ else - i.fa.fa-circle-o + | ⭕ .step-info .step-name {{name}} .step-description {{description}} @@ -106,17 +106,17 @@ template(name="cronBoardOperations") .cron-board-operations .board-operations-header h2 - i.fa.fa-tasks + | 📋 | {{_ 'board-operations'}} .board-operations-controls button.btn.btn-success.js-refresh-board-operations - i.fa.fa-refresh + | 🔄 | {{_ 'refresh'}} button.btn.btn-primary.js-start-test-operation - i.fa.fa-play + | ▶️ | {{_ 'start-test-operation'}} button.btn.btn-info.js-force-board-scan - i.fa.fa-search + | 🔍 | {{_ 'force-board-scan'}} .board-operations-stats @@ -164,7 +164,7 @@ template(name="cronBoardOperations") .board-operations-search .search-box input.form-control.js-search-board-operations(type="text" placeholder="{{_ 'search-boards-or-operations'}}") - i.fa.fa-search.search-icon + | 🔍.search-icon .board-operations-list .operations-header @@ -203,36 +203,36 @@ template(name="cronBoardOperations") .btn-group if isRunning button.btn.btn-sm.btn-warning.js-pause-operation(data-operation="{{id}}") - i.fa.fa-pause + | ⏸️ else button.btn.btn-sm.btn-success.js-resume-operation(data-operation="{{id}}") - i.fa.fa-play + | ▶️ button.btn.btn-sm.btn-danger.js-stop-operation(data-operation="{{id}}") - i.fa.fa-stop + | ⏹️ button.btn.btn-sm.btn-info.js-view-details(data-operation="{{id}}") - i.fa.fa-info-circle + | ℹ️ .pagination if pagination.hasPrev button.btn.btn-sm.btn-default.js-prev-page - i.fa.fa-chevron-left + | ◀️ | {{_ 'previous'}} .page-info | {{_ 'page'}} {{pagination.page}} {{_ 'of'}} {{pagination.totalPages}} if pagination.hasNext button.btn.btn-sm.btn-default.js-next-page | {{_ 'next'}} - i.fa.fa-chevron-right + | ▶️ template(name="cronJobs") .cron-jobs .jobs-header h2 - i.fa.fa-clock-o + | ⏰ | {{_ 'cron-jobs'}} .jobs-controls button.btn.btn-success.js-refresh-jobs - i.fa.fa-refresh + | 🔄 | {{_ 'refresh'}} .jobs-list @@ -258,20 +258,20 @@ template(name="cronJobs") .btn-group if isRunning button.btn.btn-sm.btn-warning.js-pause-job(data-job="{{name}}") - i.fa.fa-pause + | ⏸️ else button.btn.btn-sm.btn-success.js-start-job(data-job="{{name}}") - i.fa.fa-play + | ▶️ button.btn.btn-sm.btn-danger.js-stop-job(data-job="{{name}}") - i.fa.fa-stop + | ⏹️ button.btn.btn-sm.btn-danger.js-remove-job(data-job="{{name}}") - i.fa.fa-trash + | 🗑️ template(name="cronAddJob") .cron-add-job .add-job-header h2 - i.fa.fa-plus + | ➕ | {{_ 'add-cron-job'}} .add-job-form @@ -302,8 +302,8 @@ template(name="cronAddJob") .form-actions button.btn.btn-primary(type="submit") - i.fa.fa-plus + | ➕ | {{_ 'add-job'}} button.btn.btn-default.js-cancel-add-job - i.fa.fa-times + | ❌ | {{_ 'cancel'}} diff --git a/client/components/settings/settingBody.jade b/client/components/settings/settingBody.jade index dbd7a92d5..9101e18f7 100644 --- a/client/components/settings/settingBody.jade +++ b/client/components/settings/settingBody.jade @@ -6,87 +6,87 @@ template(name="setting") .content-title.ext-box if isGeneralSetting span - i.fa.fa-sign-in + | 🔑 | {{_ 'registration'}} else if isEmailSetting span - i.fa.fa-envelope + | ✉️ | {{_ 'email'}} else if isAccountSetting span - i.fa.fa-users + | 👥 | {{_ 'accounts'}} else if isTableVisibilityModeSetting span - i.fa.fa-eye + | 👁️ | {{_ 'tableVisibilityMode'}} else if isAnnouncementSetting span - i.fa.fa-bullhorn + | 📢 | {{_ 'admin-announcement'}} else if isAccessibilitySetting span - i.fa.fa-universal-access + | ♿ | {{_ 'accessibility'}} else if isLayoutSetting span - i.fa.fa-object-group + | 🔗 | {{_ 'layout'}} else if isWebhookSetting span - i.fa.fa-globe + | 🌐 | {{_ 'global-webhook'}} else if isAttachmentSettings span - i.fa.fa-paperclip + | 📎 | {{_ 'attachments'}} else if isCronSettings span - i.fa.fa-clock-o + | ⏰ | {{_ 'cron'}} .content-body .side-menu ul li(class="{{#if isGeneralSetting}}active{{/if}}") a.js-setting-menu(data-id="registration-setting") - i.fa.fa-sign-in + | 🔑 | {{_ 'registration'}} unless isSandstorm li(class="{{#if isEmailSetting}}active{{/if}}") a.js-setting-menu(data-id="email-setting") - i.fa.fa-envelope + | ✉️ | {{_ 'email'}} li(class="{{#if isAccountSetting}}active{{/if}}") a.js-setting-menu(data-id="account-setting") - i.fa.fa-users + | 👥 | {{_ 'accounts'}} li(class="{{#if isTableVisibilityModeSetting}}active{{/if}}") a.js-setting-menu(data-id="tableVisibilityMode-setting") - i.fa.fa-eye + | 👁️ | {{_ 'tableVisibilityMode'}} li(class="{{#if isAnnouncementSetting}}active{{/if}}") a.js-setting-menu(data-id="announcement-setting") - i.fa.fa-bullhorn + | 📢 | {{_ 'admin-announcement'}} li(class="{{#if isAccessibilitySetting}}active{{/if}}") a.js-setting-menu(data-id="accessibility-setting") - i.fa.fa-universal-access + | ♿ | {{_ 'accessibility'}} li(class="{{#if isLayoutSetting}}active{{/if}}") a.js-setting-menu(data-id="layout-setting") - i.fa.fa-object-group + | 🔗 | {{_ 'layout'}} li(class="{{#if isWebhookSetting}}active{{/if}}") a.js-setting-menu(data-id="webhook-setting") - i.fa.fa-globe + | 🌐 | {{_ 'global-webhook'}} li(class="{{#if isAttachmentSettings}}active{{/if}}") a.js-setting-menu(data-id="attachment-settings") - i.fa.fa-paperclip + | 📎 | {{_ 'attachments'}} li(class="{{#if isCronSettings}}active{{/if}}") a.js-setting-menu(data-id="cron-settings") - i.fa.fa-clock-o + | ⏰ | {{_ 'cron'}} .main-body if isLoading diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index bc6f91e3b..fac00e23b 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -24,16 +24,18 @@ template(name="swimlaneFixedHeader") | {{isTitleDefault title}} .swimlane-header-menu unless currentUser.isCommentOnly - a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}") - a.fa.fa-navicon.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}") + a.js-open-add-swimlane-menu.swimlane-header-plus-icon + | ➕(title="{{_ 'add-swimlane'}}") + a.js-open-swimlane-menu + | ☰(title="{{_ 'swimlaneActionPopup-title'}}") //// TODO: Collapse Swimlane: make button working, etc. //unless collapsed // a.js-collapse-swimlane(title="{{_ 'collapse'}}") // i.fa.fa-arrow-down.swimlane-header-collapse-down - // i.fa.fa-arrow-up.swimlane-header-collapse-up + // ⬆️.swimlane-header-collapse-up //if collapsed // a.js-collapse-swimlane(title="{{_ 'uncollapse'}}") - // i.fa.fa-arrow-up.swimlane-header-collapse-up + // ⬆️.swimlane-header-collapse-up // i.fa.fa-arrow-down.swimlane-header-collapse-down unless isTouchScreen if isShowDesktopDragHandles @@ -46,33 +48,34 @@ template(name="editSwimlaneTitleForm") input.list-name-input.full-line(type="text" value="{{isTitleDefault title}}" autofocus) .edit-controls.clearfix button.primary.confirm(type="submit") {{_ 'save'}} - a.fa.fa-times-thin.js-close-inlined-form + a.js-close-inlined-form + | ❌ template(name="swimlaneActionPopup") unless currentUser.isCommentOnly ul.pop-over-list if currentUser.isBoardAdmin li: a.js-set-swimlane-color - i.fa.fa-paint-brush + | 🎨 | {{_ 'select-color'}} li: a.js-set-swimlane-height - i.fa.fa-arrows-v + | ↕️ | {{_ 'set-swimlane-height'}} if currentUser.isBoardAdmin unless this.isTemplateContainer hr ul.pop-over-list li: a.js-close-swimlane - i.fa.fa-arrow-right - i.fa.fa-archive + | ▶️ + | 📦 | {{_ 'archive-swimlane'}} ul.pop-over-list li: a.js-copy-swimlane - i.fa.fa-copy + | 📋 | {{_ 'copy-swimlane'}} ul.pop-over-list li: a.js-move-swimlane - i.fa.fa-arrow-up + | ⬆️ | {{_ 'move-swimlane'}} template(name="swimlaneAddPopup") diff --git a/client/components/users/userAvatar.jade b/client/components/users/userAvatar.jade index e6c51ef5e..b1bc7e2d4 100644 --- a/client/components/users/userAvatar.jade +++ b/client/components/users/userAvatar.jade @@ -13,7 +13,7 @@ template(name="userAvatar") if showEdit if $eq currentUser._id userData._id a.edit-avatar.js-change-avatar - i.fa.fa-pencil + | ✏️ template(name="userAvatarInitials") svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15") @@ -32,7 +32,8 @@ template(name="boardOrgRow") td if currentUser.isBoardAdmin a.member.orgOrTeamMember.add-member.js-manage-board-removeOrg(title="{{_ 'remove-from-board'}}") - i.removeTeamFaMinus.fa.fa-minus + i.removeTeamFaMinus + | ➖ .divaddfaplusminus | {{_ 'remove-btn'}} @@ -45,7 +46,8 @@ template(name="boardTeamRow") td if currentUser.isBoardAdmin a.member.orgOrTeamMember.add-member.js-manage-board-removeTeam(title="{{_ 'remove-from-board'}}") - i.removeTeamFaMinus.fa.fa-minus + i.removeTeamFaMinus + | ➖ .divaddfaplusminus | {{_ 'remove-btn'}} @@ -88,7 +90,7 @@ template(name="changeAvatarPopup") img.avatar.avatar-image(src="{{link}}?auth=false&brokenIsFine=true") | {{_ 'uploaded-avatar'}} if isSelected - i.fa.fa-check + | ✅ p.sub-name unless isSelected a.js-delete-avatar {{_ 'delete'}} @@ -99,7 +101,7 @@ template(name="changeAvatarPopup") +userAvatarInitials(userId=currentUser._id) | {{_ 'initials' }} if noAvatarUrl - 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 @@ -110,7 +112,7 @@ template(name="changeAvatarPopup") br | {{_ 'invalid-file'}} button.full.js-upload-avatar - i.fa.fa-upload + | 📤 | {{_ 'upload-avatar'}} template(name="cardMemberPopup") diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade index cb296878b..b0c6b120d 100644 --- a/client/components/users/userHeader.jade +++ b/client/components/users/userHeader.jade @@ -15,92 +15,92 @@ template(name="memberMenuPopup") // Bookmarks at the very top li a.js-open-bookmarks - i.fa.fa-bookmark + | 🔖 | {{_ 'bookmarks'}} with currentUser 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'}}") - span.fa.fa-home + | 🏠 | {{_ 'all-boards'}} li a(href="{{pathFor 'public'}}") - span.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 + | ❓ | {{_ 'help'}} unless currentUser.isWorker ul.pop-over-list li a(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}") - i.fa.fa-clone + | 📋 | {{_ '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'}} //li // a.js-support - // i.fa.fa-question-circle + // ❓-circle // | {{_ 'support'}} unless isSandstorm hr ul.pop-over-list li a.js-logout - i.fa.fa-sign-out + | 🚪 | {{_ 'log-out'}} template(name="invitePeoplePopup") @@ -190,7 +190,7 @@ template(name="changeSettingsPopup") | {{_ '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