diff --git a/client/components/activities/comments.css b/client/components/activities/comments.css index f495ca361..de0189de7 100644 --- a/client/components/activities/comments.css +++ b/client/components/activities/comments.css @@ -108,15 +108,12 @@ text-decoration: none; height: 24px; } -.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o { - font-size: 17px; +.comments .comment .comment-desc .reactions .open-comment-reaction-popup span { + display: inline-block; + font-size: clamp(14px, 2vw, 18px); font-weight: 500; - margin-left: 2px; -} -.comments .comment .comment-desc .reactions .open-comment-reaction-popup i.fa.fa-plus { - font-size: 8px; - margin-top: -7px; - margin-left: 1px; + line-height: 1; + margin-left: 4px; } .comments .comment .comment-desc .reactions .reaction { cursor: pointer; diff --git a/client/components/activities/comments.jade b/client/components/activities/comments.jade index 07b52d47d..f459fc664 100644 --- a/client/components/activities/comments.jade +++ b/client/components/activities/comments.jade @@ -25,7 +25,7 @@ template(name="comment") = text .edit-controls button.primary(type="submit") {{_ 'edit'}} - .fa.fa-times-thin.js-close-inlined-form + a.js-close-inlined-form(title="{{_ 'close' }}") ❌ else .comment-text +viewer @@ -55,8 +55,8 @@ template(name="commentReactions") span.reaction-count #{reaction.userIds.length} if (currentUser.isBoardMember) a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}") - i.fa.fa-smile-o - i.fa.fa-plus + span(title="{{_ 'reaction' }}") 😀 + span(title="{{_ 'add' }}") ➕ template(name="addReactionPopup") .reactions-popup diff --git a/client/components/boards/boardArchive.jade b/client/components/boards/boardArchive.jade index d9a251ebd..ada3dc81a 100644 --- a/client/components/boards/boardArchive.jade +++ b/client/components/boards/boardArchive.jade @@ -1,6 +1,6 @@ template(name="archivedBoards") h2 - i.fa.fa-archive + span(title="{{_ 'archived-boards'}}") đŸ“Ļ | {{_ 'archived-boards'}} ul.archived-lists @@ -8,10 +8,10 @@ template(name="archivedBoards") li.archived-lists-item div.board-header-btns button.board-header-btn.js-delete-board - i.fa.fa-trash-o + | 🗑ī¸ | {{_ 'delete-board'}} button.board-header-btn.js-restore-board - i.fa.fa-undo + | ↩ī¸ | {{_ 'restore-board'}} = title span {{ moment archivedAt 'LLL' }} diff --git a/client/components/boards/miniboard.jade b/client/components/boards/miniboard.jade index d1fb0b075..ea40604a7 100644 --- a/client/components/boards/miniboard.jade +++ b/client/components/boards/miniboard.jade @@ -3,6 +3,6 @@ template(name="miniboard") class="minicard-{{colorClass}}") .minicard-title .handle - .fa.fa-arrows + span.drag-handle(title="{{_ 'dragBoard'}}") ↕ī¸ +viewer = title diff --git a/client/components/cards/cardDetails.css b/client/components/cards/cardDetails.css index fb68b2957..14a25d4f2 100644 --- a/client/components/cards/cardDetails.css +++ b/client/components/cards/cardDetails.css @@ -31,8 +31,8 @@ display: block; position: relative; float: left; - height: 30px; - width: 30px; + height: clamp(24px, 3.5vw, 36px); + width: clamp(24px, 3.5vw, 36px); margin: .3vh; cursor: pointer; user-select: none; diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index cf810b38a..bd59e4f85 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -26,10 +26,10 @@ template(name="cardDetails") | ☰ a.card-copy-button.js-copy-link( id="cardURL_copy" - class="fa-link" title="{{_ 'copy-card-link-to-clipboard'}}" href="{{ originRelativeUrl }}" ) + | 🔗 span.copied-tooltip {{_ 'copied'}} else unless isPopup @@ -40,10 +40,10 @@ template(name="cardDetails") | ☰ a.card-copy-mobile-button.js-copy-link( id="cardURL_copy" - class="fa-link" title="{{_ 'copy-card-link-to-clipboard'}}" href="{{ originRelativeUrl }}" ) + | 🔗 span.copied-tooltip {{_ 'copied'}} h2.card-details-title.js-card-title( class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}") @@ -304,7 +304,7 @@ template(name="cardDetails") hr .card-details-item.card-details-item-customfield h3.card-details-item-title - | 📋-alt + | 📋 = definition.name +cardCustomField @@ -678,7 +678,7 @@ template(name="cardDetailsActionsPopup") | 👁ī¸ | {{_ 'unwatch'}} else - | 👁ī¸-slash + | 👁ī¸ | {{_ 'watch'}} hr if canModifyCard @@ -698,7 +698,7 @@ template(name="cardDetailsActionsPopup") if currentUser.isBoardAdmin li a.js-custom-fields - | 📋-alt + | 📋 | {{_ 'card-edit-custom-fields'}} //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}} //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}} @@ -718,7 +718,7 @@ template(name="cardDetailsActionsPopup") | 👁ī¸ | {{_ 'hide-list-on-minicard'}} else - | 👁ī¸-slash + | 👁ī¸ | {{_ 'show-list-on-minicard'}} hr ul.pop-over-list diff --git a/client/components/cards/checklists.css b/client/components/cards/checklists.css index 566df27f0..05d937085 100644 --- a/client/components/cards/checklists.css +++ b/client/components/cards/checklists.css @@ -67,14 +67,14 @@ textarea.js-edit-checklist-item { .checklist-title .checklist-stat.is-finished { color: #3cb500; } -.checklist-title span.fa.checklist-handle { +.checklist-title span.checklist-handle { padding-right: 20px; padding-top: 3px; float: left; -} -.checklist-title span.fa.checklist-handle.fa-arrows::before { - content: "↕ī¸" !important; - font-family: inherit !important; + display: inline-block; + width: 1.2em; + text-align: center; + color: #999; } #card-details-overlay { top: 0; @@ -148,13 +148,13 @@ textarea.js-edit-checklist-item { word-wrap: break-word; max-width: 420px; } -.checklist-item span.fa.checklistitem-handle { +.checklist-item span.checklistitem-handle { padding-top: 2px; padding-right: 10px; -} -.checklist-item span.fa.checklistitem-handle.fa-arrows::before { - content: "↕ī¸" !important; - font-family: inherit !important; + display: inline-block; + width: 1.2em; + text-align: center; + color: #999; } .js-delete-checklist-item, .js-convert-checklist-item-to-card { diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 39ed211b1..2bd16d88b 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -43,7 +43,7 @@ template(name="checklistDetail") if canModifyCard h4.title.js-open-inlined-form.is-editable if isTouchScreenOrShowDesktopDragHandles - span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}") + span.checklist-handle(title="{{_ 'dragChecklist'}}") ↕ī¸ +viewer = checklist.title else @@ -127,7 +127,7 @@ template(name='checklistItemDetail') if canModifyCard .check-box-container .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}") - span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}") + span.checklistitem-handle(title="{{_ 'dragChecklistItem'}}") ↕ī¸ .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}") +viewer = item.title diff --git a/client/components/cards/labels.css b/client/components/cards/labels.css index f4738a879..19a8746a8 100644 --- a/client/components/cards/labels.css +++ b/client/components/cards/labels.css @@ -223,9 +223,13 @@ .card-label-edit-button:hover { background: #dbdbdb; } -ul.edit-labels-pop-over span.fa.label-handle { +ul.edit-labels-pop-over span.label-handle { padding-right: 10px; + display: inline-block; + width: 1.2em; + text-align: center; + color: #999; } -ul.edit-labels-pop-over span.fa.label-handle + .card-label { +ul.edit-labels-pop-over span.label-handle + .card-label { max-width: 180px; } diff --git a/client/components/cards/labels.jade b/client/components/cards/labels.jade index d49c939d2..a32256748 100644 --- a/client/components/cards/labels.jade +++ b/client/components/cards/labels.jade @@ -31,7 +31,7 @@ template(name="cardLabelsPopup") a.card-label-edit-button.js-edit-label | ✏ī¸ if isTouchScreenOrShowDesktopDragHandles - span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}") + span.label-handle(title="{{_ 'dragLabel'}}") ↕ī¸ span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}" class="{{# if isLabelSelected ../_id }}active{{/if}}") +viewer diff --git a/client/components/cards/minicard.css b/client/components/cards/minicard.css index 8e6158826..bb1430060 100644 --- a/client/components/cards/minicard.css +++ b/client/components/cards/minicard.css @@ -142,9 +142,12 @@ display: block; } } -.minicard .handle .fa-arrows { +.minicard .handle .drag-handle { font-size: clamp(16px, 3vw, 20px); color: #ccc; + display: inline-block; + width: 1.4em; + text-align: center; } .minicard .minicard-title .card-number { color: #b3b3b3; @@ -297,19 +300,6 @@ background-color: #1976d2 !important; } -/* 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; @@ -740,8 +730,3 @@ align-items: center; gap: 0.3vw; } - -.minicard-list-name i.fa { - font-size: 0.8em; - opacity: 0.7; -} diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index b36af1ceb..ffb900db7 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -251,6 +251,6 @@ template(name="minicardDetailsActionsPopup") | 👁ī¸ | {{_ 'unwatch'}} else - | 👁ī¸-slash + | 👁ī¸ | {{_ 'watch'}} diff --git a/client/components/common/originalPosition.html b/client/components/common/originalPosition.html index 3e3191e27..0dc9e953b 100644 --- a/client/components/common/originalPosition.html +++ b/client/components/common/originalPosition.html @@ -2,19 +2,17 @@
{{#if isLoading}}
- Loading original position... + âŗ Loading original position...
{{else if showOriginalPosition}}
{{#if hasMovedFromOriginal}}
- - {{getOriginalPositionDescription}} + ℹī¸ {{getOriginalPositionDescription}}
{{else}}
- - In original position + ✅ In original position
{{/if}} diff --git a/client/components/import/import.jade b/client/components/import/import.jade index ed42fe44b..18039c7f5 100644 --- a/client/components/import/import.jade +++ b/client/components/import/import.jade @@ -1,7 +1,7 @@ template(name="importHeaderBar") h1 a.back-btn(href="{{pathFor 'home'}}") - i.fa.fa-chevron-left + | âŦ…ī¸ | {{_ title}} template(name="import") @@ -36,7 +36,7 @@ template(name="importMapMembers") +userAvatar(userId=wekanId) else a.member.add-member - i.fa.fa-plus + | ➕ //- Due to the way the flewbox layout is working, we need to set some invisible items so that the last row items have a consistent width. diff --git a/client/components/lists/list.css b/client/components/lists/list.css index 77e78de29..72e728bea 100644 --- a/client/components/lists/list.css +++ b/client/components/lists/list.css @@ -368,6 +368,18 @@ body.list-resizing-active * { text-overflow: ellipsis; word-wrap: break-word; } +/* Sum badge shown before list title */ +.list-header .list-sum-badge { + display: inline-block; + margin-right: 8px; + padding: 0; + border-radius: 0; + background: transparent; + color: #8c8c8c; + font-weight: bold; + font-size: 12px; + vertical-align: middle; +} .list-rotated { width: 1.3vw; height: 35vh; @@ -750,6 +762,9 @@ body.list-resizing-active * { grid-row: 2; grid-column: 2; align-self: start; + text-align: left; + padding-left: 0; + margin-left: 0; font-size: 16px !important; line-height: 1.2; } @@ -964,6 +979,9 @@ body.list-resizing-active * { grid-row: 2 !important; grid-column: 2 !important; align-self: start !important; + text-align: left !important; + padding-left: 0 !important; + margin-left: 0 !important; font-size: 16px !important; line-height: 1.2 !important; } diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 529c70fc8..5ac0b8dd7 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -16,11 +16,50 @@ BlazeComponent.extendComponent({ }, customFieldsSum() { - const ret = ReactiveCache.getCustomFields({ - boardIds: { $in: [Session.get('currentBoard')] }, + const list = Template.currentData(); + if (!list) return []; + const boardId = Session.get('currentBoard'); + const fields = ReactiveCache.getCustomFields({ + boardIds: { $in: [boardId] }, showSumAtTopOfList: true, }); - return ret; + + if (!fields || !fields.length) return []; + + const cards = ReactiveCache.getCards({ + listId: list._id, + archived: false, + }); + + const result = fields.map(field => { + let sum = 0; + if (cards && cards.length) { + cards.forEach(card => { + const cfs = (card.customFields || []); + const cf = cfs.find(f => f && f._id === field._id); + if (!cf || cf.value === null || cf.value === undefined) return; + let v = cf.value; + if (typeof v === 'string') { + // try to parse string numbers, accept comma decimal + const parsed = parseFloat(v.replace(',', '.')); + if (isNaN(parsed)) return; + v = parsed; + } + if (typeof v === 'number' && isFinite(v)) { + sum += v; + } + }); + } + return { + _id: field._id, + name: field.name, + type: field.type, + settings: field.settings || {}, + value: sum, + }; + }); + + return result; }, openForm(options) { @@ -254,6 +293,22 @@ BlazeComponent.extendComponent({ }, }).register('listBody'); +// Helpers for listBody template context +Template.listBody.helpers({ + formattedCurrencyCustomFieldValue(val) { + // `this` is the custom field sum object from customFieldsSum each-iteration + const field = this || {}; + const code = (field.settings && field.settings.currencyCode) || 'USD'; + try { + const n = typeof val === 'number' ? val : parseFloat(val); + if (!isFinite(n)) return val; + return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(n); + } catch (e) { + return `${code} ${val}`; + } + }, +}); + function toggleValueInReactiveArray(reactiveValue, value) { const array = reactiveValue.get(); const valueIndex = array.indexOf(value); diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 160be7b11..3e1567d2d 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -26,6 +26,9 @@ template(name="listHeader") |/#{wipLimit.value}) if showCardsCountForList cards.length span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}} + if hasNumberFieldsSum + |   + span.list-sum-badge(title="{{_ 'sum-of-number-fields'}}") ∑ {{numberFieldsSum}} else if collapsed a.js-collapse(title="{{_ 'uncollapse'}}") @@ -44,6 +47,9 @@ template(name="listHeader") unless collapsed if showCardsCountForList cards.length span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}} + if hasNumberFieldsSum + |   + span.list-sum-badge(title="{{_ 'sum-of-number-fields'}}") ∑ {{numberFieldsSum}} if isMiniScreen if currentList if isWatching diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index 5a3e212d8..2999a06c7 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -142,7 +142,48 @@ BlazeComponent.extendComponent({ Template.listHeader.helpers({ isBoardAdmin() { return ReactiveCache.getCurrentUser().isBoardAdmin(); - } + }, + numberFieldsSum() { + const list = Template.currentData(); + if (!list) return 0; + const boardId = Session.get('currentBoard'); + const fields = ReactiveCache.getCustomFields({ + boardIds: { $in: [boardId] }, + showSumAtTopOfList: true, + type: 'number', + }); + if (!fields || !fields.length) return 0; + const cards = ReactiveCache.getCards({ listId: list._id, archived: false }); + let total = 0; + if (cards && cards.length) { + cards.forEach(card => { + const cfs = (card.customFields || []); + fields.forEach(field => { + const cf = cfs.find(f => f && f._id === field._id); + if (!cf || cf.value === null || cf.value === undefined) return; + let v = cf.value; + if (typeof v === 'string') { + const parsed = parseFloat(v.replace(',', '.')); + if (isNaN(parsed)) return; + v = parsed; + } + if (typeof v === 'number' && isFinite(v)) { + total += v; + } + }); + }); + } + return total; + }, + hasNumberFieldsSum() { + const boardId = Session.get('currentBoard'); + const fields = ReactiveCache.getCustomFields({ + boardIds: { $in: [boardId] }, + showSumAtTopOfList: true, + type: 'number', + }); + return !!(fields && fields.length); + }, }); Template.listActionPopup.helpers({ diff --git a/client/components/lists/minilist.jade b/client/components/lists/minilist.jade index e34214c40..142308da8 100644 --- a/client/components/lists/minilist.jade +++ b/client/components/lists/minilist.jade @@ -3,6 +3,6 @@ template(name="minilist") class="minicard-{{colorClass}}") .minicard-title .handle - .fa.fa-arrows + span.drag-handle(title="{{_ 'dragList'}}") ↕ī¸ +viewer = title diff --git a/client/components/main/layouts.css b/client/components/main/layouts.css index fb8f4bf5c..367881f3c 100644 --- a/client/components/main/layouts.css +++ b/client/components/main/layouts.css @@ -527,7 +527,7 @@ a:not(.disabled).is-active i.fa { /* Board canvas */ .board-canvas { - padding: 8px; + padding: 0 8px 8px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } @@ -675,7 +675,7 @@ a:not(.disabled).is-active i.fa { } .board-canvas { - padding: 12px; + padding: 0 12px 12px 0; } #header { @@ -756,7 +756,7 @@ a:not(.disabled).is-active i.fa { .inline-input { height: 37px; margin: 8px 10px 0 0; - width: 50px; + width: 100px; } .select-authentication { width: 100%; diff --git a/client/components/notifications/notification.css b/client/components/notifications/notification.css index 0ced61d37..397061fc8 100644 --- a/client/components/notifications/notification.css +++ b/client/components/notifications/notification.css @@ -20,10 +20,10 @@ height: 3vw; } #notifications-drawer .notification .read-status .activity-type { - margin: 2vh 0 0; - width: 2.2vw; - height: 2.2vw; - font-size: clamp(14px, 2.5vw, 17px); + margin: 8px 0 0; + width: 1.2em; + height: 1.2em; + font-size: clamp(14px, 2vw, 17px); display: block; color: #bbb; } diff --git a/client/components/notifications/notification.jade b/client/components/notifications/notification.jade index c98bbdba5..0ee76306f 100644 --- a/client/components/notifications/notification.jade +++ b/client/components/notifications/notification.jade @@ -7,4 +7,4 @@ template(name='notification') +activity(activity=activityData mode='none') if read .remove - a.fa.fa-trash + a(title="{{_ 'delete'}}") 🗑ī¸ diff --git a/client/components/notifications/notificationIcon.jade b/client/components/notifications/notificationIcon.jade index ff35739c4..9b4c629ee 100644 --- a/client/components/notifications/notificationIcon.jade +++ b/client/components/notifications/notificationIcon.jade @@ -1,8 +1,8 @@ template(name='notificationIcon') if($in activityType 'deleteAttachment' 'addAttachment') - i.fa.fa-paperclip.activity-type(title="attachment") + span.activity-type(title="attachment") 📎 else if($in activityType 'createBoard' 'importBoard') - i.fa.fa-chalkboard.activity-type(title="board") + span.activity-type(title="board") 🗂ī¸ else if($in activityType 'createCard' 'importCard' 'moveCard') +cardNotificationIcon @@ -19,17 +19,17 @@ template(name='notificationIcon') //- DRY and consistant else if($in activityType 'checkedItem' 'uncheckedItem' 'addChecklistItem' 'removedChecklistItem') - i.fa.fa-check-square.activity-type(title="checklist item") + span.activity-type(title="checklist item") ☑ī¸ else if($in activityType 'addComment') - i.fa.fa-comment-o.activity-type(title="comment") + span.activity-type(title="comment") đŸ’Ŧ else if($in activityType 'createCustomField' 'setCustomField' 'unsetCustomField') - i.fa.fa-code.activity-type(title="custom field") + span.activity-type(title="custom field") 🧩 else if($in activityType 'addedLabel' 'removedLabel') - i.fa.fa-tag.activity-type(title="label") + span.activity-type(title="label") 🏷ī¸ else if($in activityType 'a-startAt' 'a-receivedAt') - i.fa.fa-clock-o.activity-type(title="date") + span.activity-type(title="date") ⏰ else if($in activityType 'a-dueAt' 'a-endAt') - i.fa.fa-clock-o.activity-type(title="date") + span.activity-type(title="date") ⏰ else if($in activityType 'createList' 'removeList' 'archivedList') +listNotificationIcon @@ -41,17 +41,17 @@ template(name='notificationIcon') //- elswhere in the app we use fa-trello to indicate lists... //- i personally like fa-columns a bit better else if($in activityType 'unjoinMember' 'addBoardMember' 'joinMember' 'removeBoardMember') - i.fa.fa-user.activity-type(title="member") + span.activity-type(title="member") 👤 else if($in activityType 'createSwimlane' 'archivedSwimlane') - i.fa.fa-th-large.activity-type(title="swimlane") + span.activity-type(title="swimlane") 🧭 else - i.fa.fa-bug.activity-type(title="can't find icon for #{activityType}") + span.activity-type(title="can't find icon for #{activityType}") 🐞 template(name='cardNotificationIcon') - i.fa.fa-clone.activity-type(title="card") + span.activity-type(title="card") 🗒ī¸ template(name='checklistNotificationIcon') - i.fa.fa-list.activity-type(title="checklist") + span.activity-type(title="checklist") 📝 template(name='listNotificationIcon') - i.fa.fa-columns.activity-type(title="list") + span.activity-type(title="list") 📋 diff --git a/client/components/notifications/notificationsDrawer.css b/client/components/notifications/notificationsDrawer.css index d8ffcb153..758018404 100644 --- a/client/components/notifications/notificationsDrawer.css +++ b/client/components/notifications/notificationsDrawer.css @@ -55,9 +55,6 @@ section#notifications-drawer .remove-read { section#notifications-drawer .remove-read:hover { color: #eb4646 !important; } -section#notifications-drawer .remove-read:hover i.fa { - color: inherit; -} section#notifications-drawer ul.notifications { display: block; padding: 0px 16px 0px 16px; diff --git a/client/components/notifications/notificationsDrawer.jade b/client/components/notifications/notificationsDrawer.jade index 2fd2bb229..66c53b849 100644 --- a/client/components/notifications/notificationsDrawer.jade +++ b/client/components/notifications/notificationsDrawer.jade @@ -8,7 +8,7 @@ template(name='notificationsDrawer') h5 {{_ 'notifications'}} if($gt unreadNotifications 0) |(#{unreadNotifications}) - a.fa.fa-times-thin.close + a.close ❌ ul.notifications each transformedProfile.notifications +notification(activityData=activityObj index=dbIndex read=read) @@ -16,5 +16,5 @@ template(name='notificationsDrawer') a.all-read {{_ 'mark-all-as-read'}} if ($and ($.Session.get 'showReadNotifications') ($gt readNotifications 0)) a.remove-read - i.fa.fa-trash + | 🗑ī¸ | {{_ 'remove-all-read'}} diff --git a/client/components/sidebar/sidebarFilters.jade b/client/components/sidebar/sidebarFilters.jade index 918711b09..433d6daa8 100644 --- a/client/components/sidebar/sidebarFilters.jade +++ b/client/components/sidebar/sidebarFilters.jade @@ -36,7 +36,7 @@ template(name="filterSidebar") else span.quiet {{_ "label-default" (_ (concat "color-" color))}} if Filter.labelIds.isSelected _id - i.fa.fa-check + | ✅ hr h3 | đŸ‘Ĩ @@ -68,7 +68,7 @@ template(name="filterSidebar") span.sidebar-list-item-description | {{_ 'filter-no-assignee'}} if Filter.assignees.isSelected undefined - i.fa.fa-check + | ✅ each currentBoard.activeMembers with getUser userId li(class="{{#if Filter.assignees.isSelected _id}}active{{/if}}") @@ -90,37 +90,37 @@ template(name="filterSidebar") span.sidebar-list-item-description | {{_ 'filter-no-due-date' }} if Filter.dueAt.isSelected 'noDate' - i.fa.fa-check + | ✅ li(class="{{#if Filter.dueAt.isSelected 'past'}}active{{/if}}") a.name.js-toggle-overdue-filter span.sidebar-list-item-description | {{_ 'filter-overdue' }} if Filter.dueAt.isSelected 'past' - i.fa.fa-check + | ✅ li(class="{{#if Filter.dueAt.isSelected 'today'}}active{{/if}}") a.name.js-toggle-due-today-filter span.sidebar-list-item-description | {{_ 'filter-due-today' }} if Filter.dueAt.isSelected 'today' - i.fa.fa-check + | ✅ li(class="{{#if Filter.dueAt.isSelected 'tomorrow'}}active{{/if}}") a.name.js-toggle-due-tomorrow-filter span.sidebar-list-item-description | {{_ 'filter-due-tomorrow' }} if Filter.dueAt.isSelected 'tomorrow' - i.fa.fa-check + | ✅ li(class="{{#if Filter.dueAt.isSelected 'thisweek'}}active{{/if}}") a.name.js-toggle-due-this-week-filter span.sidebar-list-item-description | {{_ 'filter-due-this-week' }} if Filter.dueAt.isSelected 'thisweek' - i.fa.fa-check + | ✅ li(class="{{#if Filter.dueAt.isSelected 'nextweek'}}active{{/if}}") a.name.js-toggle-due-next-week-filter span.sidebar-list-item-description | {{_ 'filter-due-next-week' }} if Filter.dueAt.isSelected 'nextweek' - i.fa.fa-check + | ✅ hr h3 | 📋 @@ -138,7 +138,7 @@ template(name="filterSidebar") span.sidebar-list-item-description | {{ name }} if Filter.customFields.isSelected _id - i.fa.fa-check + | ✅ hr h3 | {{_ 'other-filters-label'}} @@ -148,14 +148,14 @@ template(name="filterSidebar") span.sidebar-list-item-description | {{_ 'filter-show-archive'}} if Filter.archive.isSelected _id - i.fa.fa-check + | ✅ ul.sidebar-list li(class="{{#if Filter.hideEmpty.isSelected _id}}active{{/if}}") a.name.js-toggle-hideEmpty-filter span.sidebar-list-item-description | {{_ 'filter-hide-empty'}} if Filter.hideEmpty.isSelected _id - i.fa.fa-check + | ✅ hr h3 {{_ 'advanced-filter-label'}} input.js-field-advanced-filter(type="text") diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index a0a44eb7f..11560a01b 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -28,23 +28,14 @@ template(name="swimlaneFixedHeader") unless currentUser.isWorker 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 - // âŦ†ī¸.swimlane-header-collapse-up - //if collapsed - // a.js-collapse-swimlane(title="{{_ 'uncollapse'}}") - // âŦ†ī¸.swimlane-header-collapse-up - // i.fa.fa-arrow-down.swimlane-header-collapse-down unless isTouchScreen a.swimlane-header-handle.handle.js-swimlane-header-handle | ↕ī¸ if isTouchScreen a.swimlane-header-miniscreen-handle.handle.js-swimlane-header-handle | ↕ī¸ + a.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}") + | ☰ template(name="editSwimlaneTitleForm") .list-composer diff --git a/client/components/swimlanes/swimlanes.css b/client/components/swimlanes/swimlanes.css index 83540549f..6d4ad3d0e 100644 --- a/client/components/swimlanes/swimlanes.css +++ b/client/components/swimlanes/swimlanes.css @@ -54,12 +54,14 @@ width: 100%; min-width: 100%; position: relative; - overflow: hidden; + overflow: visible; min-height: 33px; + padding: 0; + margin: 0; } .swimlane .swimlane-header-wrap .swimlane-header { font-size: 14px; - padding: 5px 5px; + padding: 0; font-weight: bold; min-height: 33px; width: 100%; @@ -74,30 +76,39 @@ } .swimlane .swimlane-header-wrap .swimlane-header-menu { position: absolute; - padding: 5px 5px; + top: 0; + left: 0; + padding: 0; + margin: 0; font-size: 22px; + line-height: 1; z-index: 20; pointer-events: auto; } +.swimlane .swimlane-header-wrap .swimlane-header-menu .js-open-swimlane-menu { + top: calc(50% + 6px); + padding: 5px; + display: inline-block; + margin-left: 74px; +} @media print { .swimlane .swimlane-header-wrap .swimlane-header-menu { display: none; } } .swimlane .swimlane-header-wrap .swimlane-header-plus-icon { - margin-left: 5px; - padding-right: 20px; + top: calc(50% + 6px); + padding: 5px; font-size: 22px; } .swimlane .swimlane-header-wrap .swimlane-header-menu-icon { - padding-right: 20px; + top: calc(50% + 6px); + padding: 5px; font-size: 22px; } .swimlane .swimlane-header-wrap .swimlane-header-handle { - position: absolute; - padding: 7px; - top: 50%; - left: 230px; + top: calc(50% + 2px); + padding: 2px; font-size: clamp(16px, 3vw, 20px); transform: translateY(-50%); display: flex; @@ -109,22 +120,16 @@ } .swimlane .swimlane-header-wrap .swimlane-header-miniscreen-handle { position: absolute; - padding: 7px; - top: 50%; + padding: 2px; + top: calc(50% + 2px); transform: translateY(-50%); - right: 10px; + right: 60px; font-size: 24px; cursor: move; z-index: 15; pointer-events: auto; } -/* Safety: ensure wrapper is interactive and above list content */ -.swimlane .swimlane-header-wrap { - position: relative; - z-index: 9; - pointer-events: auto; -} #js-swimlane-height-edit .swimlane-height-error { display: none; } diff --git a/client/components/users/userAvatar.css b/client/components/users/userAvatar.css index b65a98bd9..7e2b2a923 100644 --- a/client/components/users/userAvatar.css +++ b/client/components/users/userAvatar.css @@ -3,8 +3,8 @@ display: block; position: relative; float: left; - height: 30px; - width: 30px; + height: clamp(24px, 3.5vw, 36px); + width: clamp(24px, 3.5vw, 36px); margin: .3vh; cursor: pointer; user-select: none; @@ -111,7 +111,7 @@ padding-top: 0; } .mini-profile-info .member { - width: 50px; - height: 50px; + width: clamp(40px, 5vw, 60px); + height: clamp(40px, 5vw, 60px); margin-right: 10px; }