From 8c572502436a2eb22bd1eb1e4069c1c9145e2070 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Sat, 12 Jun 2021 12:48:12 +0300 Subject: [PATCH] Maximize Card. In Progress. Thanks to xet7 ! Related #1574 --- client/components/cards/cardDetails.jade | 923 ++++++++++++----------- client/components/cards/cardDetails.js | 12 + client/components/cards/cardDetails.styl | 85 ++- i18n/en.i18n.json | 4 +- models/users.js | 26 +- 5 files changed, 573 insertions(+), 477 deletions(-) diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index acde82a54..66bf708fd 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -6,6 +6,10 @@ template(name="cardDetails") else unless isMiniScreen a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}") + unless cardMaximized + a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}") + if cardMaximized + a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}") if currentUser.isBoardMember a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}") input.inline-input(type="text" id="cardURL_copy" value="{{ originRelativeUrl }}") @@ -41,498 +45,501 @@ template(name="cardDetails") else p.warning {{_ 'card-archived'}} - .card-details-items - 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 - span.card-label(class="card-label-{{color}}" title=name) - +viewer - = name - if canModifyCard - unless currentUser.isWorker - a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}") - i.fa.fa-plus + .card-details-left + + .card-details-items + 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 + span.card-label(class="card-label-{{color}}" title=name) + +viewer + = name + if canModifyCard + unless currentUser.isWorker + a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}") + i.fa.fa-plus + + if currentBoard.allowsReceivedDate + hr + .card-details-item.card-details-item-received + h3.card-details-item-title + i.fa.fa-sign-out + | {{_ 'card-received'}} + if getReceived + +cardReceivedDate + else + 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 + else + 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 + else + 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 + else + if canModifyCard + unless currentUser.isWorker + a.card-label.add-label.js-end-date + i.fa.fa-plus - if currentBoard.allowsReceivedDate hr - .card-details-item.card-details-item-received - h3.card-details-item-title - i.fa.fa-sign-out - | {{_ 'card-received'}} - if getReceived - +cardReceivedDate - else - if canModifyCard - unless currentUser.isWorker - a.card-label.add-label.js-received-date - i.fa.fa-plus + if currentBoard.allowsCreator + .card-details-item.card-details-item-creator + h3.card-details-item-title + i.fa.fa-user + | {{_ 'creator'}} - 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 - else - 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 - else - 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 - else - if canModifyCard - unless currentUser.isWorker - a.card-label.add-label.js-end-date - i.fa.fa-plus - - hr - 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) - | {{! XXX Hack to hide syntaxic coloration /// }} - - //.card-details-items - if currentBoard.allowsMembers - .card-details-item.card-details-item-members - h3.card-details-item-title - i.fa.fa-users - | {{_ 'members'}} - each userId in getMembers - +userAvatar(userId=userId cardId=_id) + +userAvatar(userId=userId noRemove=true) | {{! XXX Hack to hide syntaxic coloration /// }} - 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) - | {{! XXX Hack to hide syntaxic coloration /// }} - if canModifyCard - a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}") - i.fa.fa-plus - if currentUser.isWorker - unless assigneeSelected + //.card-details-items + if currentBoard.allowsMembers + .card-details-item.card-details-item-members + h3.card-details-item-title + i.fa.fa-users + | {{_ 'members'}} + each userId in getMembers + +userAvatar(userId=userId cardId=_id) + | {{! XXX Hack to hide syntaxic coloration /// }} + 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) + | {{! XXX Hack to hide syntaxic coloration /// }} + if canModifyCard a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}") i.fa.fa-plus + 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 getSpentTime - .card-details-item.card-details-item-spent - if getIsOvertime - h3.card-details-item-title - | {{_ 'overtime-hours'}} - else - h3.card-details-item-title - | {{_ 'spent-time-hours'}} - +cardSpentTime - - //.card-details-items - if currentBoard.allowsRequestedBy - .card-details-item.card-details-item-name - h3.card-details-item-title - i.fa.fa-shopping-cart - | {{_ 'requested-by'}} - if canModifyCard - unless currentUser.isWorker - +inlinedForm(classNames="js-card-details-requester") - +editCardRequesterForm - else - a.js-open-inlined-form - if getRequestedBy - +viewer - = getRequestedBy - else - | {{_ 'add'}} - else if getRequestedBy - +viewer - = getRequestedBy - - if currentBoard.allowsAssignedBy - .card-details-item.card-details-item-name - h3.card-details-item-title - i.fa.fa-user-plus - | {{_ 'assigned-by'}} - if canModifyCard - unless currentUser.isWorker - +inlinedForm(classNames="js-card-details-assigner") - +editCardAssignerForm - else - a.js-open-inlined-form - if getAssignedBy - +viewer - = getAssignedBy - else - | {{_ 'add'}} - else if getRequestedBy - +viewer - = getAssignedBy - - if currentBoard.allowsCardSortingByNumber - .card-details-item.card-details-sort-order - h3.card-details-item-title - i.fa.fa-sort - | {{_ 'sort'}} - if canModifyCard - +inlinedForm(classNames="js-card-details-sort") - +editCardSortOrderForm + //.card-details-items + if getSpentTime + .card-details-item.card-details-item-spent + if getIsOvertime + h3.card-details-item-title + | {{_ 'overtime-hours'}} else - a.js-open-inlined-form - +viewer - = sort + h3.card-details-item-title + | {{_ 'spent-time-hours'}} + +cardSpentTime - //.card-details-items - if customFieldsWD - hr - each customFieldsWD - .card-details-item.card-details-item-customfield + //.card-details-items + if currentBoard.allowsRequestedBy + .card-details-item.card-details-item-name h3.card-details-item-title - i.fa.fa-list-alt - = definition.name - +cardCustomField + i.fa.fa-shopping-cart + | {{_ 'requested-by'}} + if canModifyCard + unless currentUser.isWorker + +inlinedForm(classNames="js-card-details-requester") + +editCardRequesterForm + else + a.js-open-inlined-form + if getRequestedBy + +viewer + = getRequestedBy + else + | {{_ 'add'}} + else if getRequestedBy + +viewer + = getRequestedBy - if getVoteQuestion - hr - .vote-title - div.flex - h3 - i.fa.fa-thumbs-up - | {{_ 'vote-question'}} - if getVoteEnd - +voteEndDate - .vote-result - if votePublic - a.card-label.card-label-green.js-show-positive-votes {{ voteCountPositive }} - a.card-label.card-label-red.js-show-negative-votes {{ voteCountNegative }} - else - .card-label.card-label-green {{ voteCountPositive }} - .card-label.card-label-red {{ voteCountNegative }} - unless ($and currentBoard.isPublic voteAllowNonBoardMembers ) - .card-label.card-label-gray {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }} - +viewer - = getVoteQuestion - if showVotingButtons - button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}") - if voteState - i.fa.fa-thumbs-up - | {{_ 'vote-for-it'}} - button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}") - if $eq voteState false - i.fa.fa-thumbs-down - | {{_ 'vote-against'}} + if currentBoard.allowsAssignedBy + .card-details-item.card-details-item-name + h3.card-details-item-title + i.fa.fa-user-plus + | {{_ 'assigned-by'}} + if canModifyCard + unless currentUser.isWorker + +inlinedForm(classNames="js-card-details-assigner") + +editCardAssignerForm + else + a.js-open-inlined-form + if getAssignedBy + +viewer + = getAssignedBy + else + | {{_ 'add'}} + else if getRequestedBy + +viewer + = getAssignedBy - if getPokerQuestion - hr - .poker-title - div.flex - h3 - i.fa.fa-thumbs-up - | {{_ 'poker-question'}} - if getPokerEnd - +pokerEndDate - div.flex + if currentBoard.allowsCardSortingByNumber + .card-details-item.card-details-sort-order + h3.card-details-item-title + i.fa.fa-sort + | {{_ 'sort'}} + if canModifyCard + +inlinedForm(classNames="js-card-details-sort") + +editCardSortOrderForm + else + a.js-open-inlined-form + +viewer + = sort + + //.card-details-items + if customFieldsWD + hr + each customFieldsWD + .card-details-item.card-details-item-customfield + h3.card-details-item-title + i.fa.fa-list-alt + = definition.name + +cardCustomField + + if getVoteQuestion + hr + .vote-title + div.flex + h3 + i.fa.fa-thumbs-up + | {{_ 'vote-question'}} + if getVoteEnd + +voteEndDate + .vote-result + if votePublic + a.card-label.card-label-green.js-show-positive-votes {{ voteCountPositive }} + a.card-label.card-label-red.js-show-negative-votes {{ voteCountNegative }} + else + .card-label.card-label-green {{ voteCountPositive }} + .card-label.card-label-red {{ voteCountNegative }} + unless ($and currentBoard.isPublic voteAllowNonBoardMembers ) + .card-label.card-label-gray {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }} + +viewer + = getVoteQuestion + if showVotingButtons + button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}") + if voteState + i.fa.fa-thumbs-up + | {{_ 'vote-for-it'}} + button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}") + if $eq voteState false + i.fa.fa-thumbs-down + | {{_ 'vote-against'}} + + if getPokerQuestion + hr + .poker-title + div.flex + h3 + i.fa.fa-thumbs-up + | {{_ 'poker-question'}} + if getPokerEnd + +pokerEndDate + div.flex + .poker-result + if expiredPoker + unless ($and currentBoard.isPublic pokerAllowNonBoardMembers ) + .card-label.card-label-gray {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }} + if showPlanningPokerButtons .poker-result - if expiredPoker - unless ($and currentBoard.isPublic pokerAllowNonBoardMembers ) - .card-label.card-label-gray {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }} - if showPlanningPokerButtons - .poker-result - .poker-deck - .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 + .poker-deck + .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'}} + if currentUser.isBoardAdmin + button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}} - if expiredPoker - .poker-table - .poker-table-side-left - .poker-table-heading-left - .poker-table-row - .poker-table-cell - .poker-table-cell - | {{_ 'poker-result-votes' }} - .poker-table-cell.poker-table-cell-who - | {{_ 'poker-result-who' }} - .poker-table-body - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 1}}winner{{else}}loser{{/if}}") {{_ 'poker-one'}} - .poker-table-cell {{ pokerCountOne }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberOne - a.name - +userAvatar(userId=m._id noRemove=true) + if expiredPoker + .poker-table + .poker-table-side-left + .poker-table-heading-left + .poker-table-row + .poker-table-cell + .poker-table-cell + | {{_ 'poker-result-votes' }} + .poker-table-cell.poker-table-cell-who + | {{_ 'poker-result-who' }} + .poker-table-body + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 1}}winner{{else}}loser{{/if}}") {{_ 'poker-one'}} + .poker-table-cell {{ pokerCountOne }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberOne + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 2}}winner{{else}}loser{{/if}}") {{_ 'poker-two'}} - .poker-table-cell {{ pokerCountTwo }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberTwo - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 2}}winner{{else}}loser{{/if}}") {{_ 'poker-two'}} + .poker-table-cell {{ pokerCountTwo }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberTwo + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 3}}winner{{else}}loser{{/if}}") {{_ 'poker-three'}} - .poker-table-cell {{ pokerCountThree }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberThree - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 3}}winner{{else}}loser{{/if}}") {{_ 'poker-three'}} + .poker-table-cell {{ pokerCountThree }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberThree + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 5}}winner{{else}}loser{{/if}}") {{_ 'poker-five'}} - .poker-table-cell {{ pokerCountFive }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberFive - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 5}}winner{{else}}loser{{/if}}") {{_ 'poker-five'}} + .poker-table-cell {{ pokerCountFive }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberFive + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 8}}winner{{else}}loser{{/if}}") {{_ 'poker-eight'}} - .poker-table-cell {{ pokerCountEight }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberEight - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 8}}winner{{else}}loser{{/if}}") {{_ 'poker-eight'}} + .poker-table-cell {{ pokerCountEight }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberEight + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-side-right - .poker-table-heading-right - .poker-table-row - .poker-table-cell - .poker-table-cell - | {{_ 'poker-result-votes' }} - .poker-table-cell.poker-table-cell-who - | {{_ 'poker-result-who' }} - .poker-table-body - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 13}}winner{{else}}loser{{/if}}") {{_ 'poker-thirteen'}} - .poker-table-cell {{ pokerCountThirteen }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberThirteen - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-side-right + .poker-table-heading-right + .poker-table-row + .poker-table-cell + .poker-table-cell + | {{_ 'poker-result-votes' }} + .poker-table-cell.poker-table-cell-who + | {{_ 'poker-result-who' }} + .poker-table-body + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 13}}winner{{else}}loser{{/if}}") {{_ 'poker-thirteen'}} + .poker-table-cell {{ pokerCountThirteen }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberThirteen + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 20}}winner{{else}}loser{{/if}}") {{_ 'poker-twenty'}} - .poker-table-cell {{ pokerCountTwenty }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberTwenty - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 20}}winner{{else}}loser{{/if}}") {{_ 'poker-twenty'}} + .poker-table-cell {{ pokerCountTwenty }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberTwenty + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 40}}winner{{else}}loser{{/if}}") {{_ 'poker-forty'}} - .poker-table-cell {{ pokerCountForty }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberForty - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 40}}winner{{else}}loser{{/if}}") {{_ 'poker-forty'}} + .poker-table-cell {{ pokerCountForty }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberForty + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 100}}winner{{else}}loser{{/if}}") {{_ 'poker-oneHundred'}} - .poker-table-cell {{ pokerCountOneHundred }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberOneHundred - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 100}}winner{{else}}loser{{/if}}") {{_ 'poker-oneHundred'}} + .poker-table-cell {{ pokerCountOneHundred }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberOneHundred + a.name + +userAvatar(userId=m._id noRemove=true) - .poker-table-row - .poker-table-cell - button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 'unsure'}}winner{{else}}loser{{/if}}") {{_ 'poker-unsure'}} - .poker-table-cell {{ pokerCountUnsure }} - .poker-table-cell.poker-table-cell-who - .poker-result - each m in pokerMemberUnsure - a.name - +userAvatar(userId=m._id noRemove=true) + .poker-table-row + .poker-table-cell + button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 'unsure'}}winner{{else}}loser{{/if}}") {{_ 'poker-unsure'}} + .poker-table-cell {{ pokerCountUnsure }} + .poker-table-cell.poker-table-cell-who + .poker-result + each m in pokerMemberUnsure + a.name + +userAvatar(userId=m._id noRemove=true) - if currentUser.isBoardAdmin - div.estimation-add - button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}} - div.estimation-add - button.js-poker-estimation - i.fa.fa-plus - | {{_ 'set-estimation'}} - input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation") + if currentUser.isBoardAdmin + div.estimation-add + button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}} + div.estimation-add + button.js-poker-estimation + i.fa.fa-plus + | {{_ 'set-estimation'}} + input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation") - //- XXX We should use "editable" to avoid repetiting ourselves - if canModifyCard - unless currentUser.isWorker + //- XXX We should use "editable" to avoid repetiting ourselves + if canModifyCard + unless currentUser.isWorker + if currentBoard.allowsDescriptionTitle + hr + h3.card-details-item-title + i.fa.fa-align-left + | {{_ 'description'}} + if currentBoard.allowsDescriptionText + +inlinedCardDescription(classNames="card-description js-card-description") + +descriptionForm + .edit-controls.clearfix + button.primary(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + else + if currentBoard.allowsDescriptionText + a.js-open-inlined-form + if getDescription + +viewer + = getDescription + else + | {{_ 'edit'}} + if (hasUnsavedValue 'cardDescription' _id) + p.quiet + | {{_ 'unsaved-description'}} + a.js-open-inlined-form {{_ 'view-it'}} + = ' - ' + a.js-close-inlined-form {{_ 'discard'}} + else if getDescription if currentBoard.allowsDescriptionTitle hr - h3.card-details-item-title - i.fa.fa-align-left - | {{_ 'description'}} + h3.card-details-item-title {{_ 'description'}} if currentBoard.allowsDescriptionText - +inlinedCardDescription(classNames="card-description js-card-description") - +descriptionForm - .edit-controls.clearfix - button.primary(type="submit") {{_ 'save'}} - a.fa.fa-times-thin.js-close-inlined-form - else - if currentBoard.allowsDescriptionText - a.js-open-inlined-form - if getDescription - +viewer - = getDescription - else - | {{_ 'edit'}} - if (hasUnsavedValue 'cardDescription' _id) - p.quiet - | {{_ 'unsaved-description'}} - a.js-open-inlined-form {{_ 'view-it'}} - = ' - ' - a.js-close-inlined-form {{_ 'discard'}} - else if getDescription - if currentBoard.allowsDescriptionTitle - hr - h3.card-details-item-title {{_ 'description'}} - if currentBoard.allowsDescriptionText - +viewer - = getDescription + +viewer + = getDescription - .card-checklist-attachmentGalerys - .card-checklist-attachmentGalery.card-checklists - if currentBoard.allowsChecklists + .card-checklist-attachmentGalerys + .card-checklist-attachmentGalery.card-checklists + if currentBoard.allowsChecklists + hr + +checklists(cardId = _id) + if currentBoard.allowsSubtasks + hr + +subtasks(cardId = _id) + if currentBoard.allowsAttachments hr - +checklists(cardId = _id) - if currentBoard.allowsSubtasks - hr - +subtasks(cardId = _id) - if currentBoard.allowsAttachments - hr - h3.card-details-item-title - i.fa.fa-paperclip - | {{_ 'attachments'}} - .card-checklist-attachmentGalery.card-attachmentGalery - +attachmentsGalery + h3.card-details-item-title + i.fa.fa-paperclip + | {{_ 'attachments'}} + .card-checklist-attachmentGalery.card-attachmentGalery + +attachmentsGalery - hr - unless currentUser.isNoComments - .activity-title - h3.card-details-item-title - i.fa.fa-history - | {{ _ 'activity'}} + .card-details-right + + unless currentUser.isNoComments + .activity-title + h3.card-details-item-title + i.fa.fa-history + | {{ _ 'activity'}} + if currentUser.isBoardMember + .material-toggle-switch(title="{{_ 'hide-system-messages'}}") + //span.toggle-switch-title + if hiddenSystemMessages + input.toggle-switch(type="checkbox" id="toggleButton" checked="checked") + else + input.toggle-switch(type="checkbox" id="toggleButton") + label.toggle-label(for="toggleButton") + if currentBoard.allowsComments if currentUser.isBoardMember - .material-toggle-switch(title="{{_ 'hide-system-messages'}}") - //span.toggle-switch-title - if hiddenSystemMessages - input.toggle-switch(type="checkbox" id="toggleButton" checked="checked") - else - input.toggle-switch(type="checkbox" id="toggleButton") - label.toggle-label(for="toggleButton") - if currentBoard.allowsComments - if currentUser.isBoardMember - unless currentUser.isNoComments - +commentForm - unless currentUser.isNoComments - if isLoaded.get - if isLinkedCard - +activities(card=this mode="linkedcard") - else if isLinkedBoard - +activities(card=this mode="linkedboard") - else - +activities(card=this mode="card") + unless currentUser.isNoComments + +commentForm + unless currentUser.isNoComments + if isLoaded.get + if isLinkedCard + +activities(card=this mode="linkedcard") + else if isLinkedBoard + +activities(card=this mode="linkedboard") + else + +activities(card=this mode="card") template(name="editCardTitleForm") textarea.js-edit-card-title(rows='1' autofocus dir="auto") diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 1f9dc7773..6511c8210 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -54,6 +54,10 @@ BlazeComponent.extendComponent({ return Meteor.user().hasHiddenSystemMessages(); }, + cardMaximized() { + return Meteor.user().hasCardMaximized(); + }, + canModifyCard() { return ( Meteor.user() && @@ -408,6 +412,14 @@ BlazeComponent.extendComponent({ 'click #toggleButton'() { Meteor.call('toggleSystemMessages'); }, + 'click #js-maximize-card-details'() { + Meteor.call('toggleCardMaximized'); + autosize($('.card-details')); + }, + 'click #js-minimize-card-details'() { + Meteor.call('toggleCardMaximized'); + autosize($('.card-details')); + }, 'click .js-vote'(e) { const forIt = $(e.target).hasClass('js-vote-positive'); let newState = null; diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index fe5c50bf6..9a57a25bd 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -86,21 +86,62 @@ avatar-radius = 50% // Other card details -.card-details - padding: 0 - flex-shrink: 0 - flex-basis: 600px - will-change: flex-basis - overflow-y: scroll - overflow-x: hidden - background: darken(white, 3%) - border-radius: bottom 3px - z-index: 20 !important - animation: flexGrowIn 0.1s - box-shadow: 0 0 7px 0 darken(white, 30%) - transition: flex-basis 0.1s - box-sizing: border-box +unless isMiniScreen + if cardMaximized + .card-details + padding: 0 + flex-shrink: 0 + flex-basis: calc(100% - 20px) + will-change: flex-basis + overflow-y: scroll + overflow-x: scroll + background: darken(white, 3%) + border-radius: bottom 3px + z-index: 1000 !important + animation: flexGrowIn 0.1s + box-shadow: 0 0 7px 0 darken(white, 30%) + transition: flex-basis 0.1s + box-sizing: border-box + position: absolute + top: 0 + left: 0 + height: calc(100% - 20px) + width: calc(100% - 20px) + float: left + .card-details-left + position: absolute + float: left + top: 60px + left: 20px + width: 47% + + .card-details-right + position: absolute + float: right + top: 20px + left: 50% + + .card-details-header + width: 47% + +if isMiniScreen + .card-details + padding: 0 + flex-shrink: 0 + flex-basis: 600px + will-change: flex-basis + overflow-y: scroll + overflow-x: hidden + background: darken(white, 3%) + border-radius: bottom 3px + z-index: 20 !important + animation: flexGrowIn 0.1s + box-shadow: 0 0 7px 0 darken(white, 30%) + transition: flex-basis 0.1s + box-sizing: border-box + +.card-details .mCustomScrollBox padding-left: 0 @@ -110,11 +151,13 @@ avatar-radius = 50% .card-details-header margin: 0 -20px 5px - padding 7px 20px + padding: 7px 20px background: darken(white, 7%) border-bottom: 1px solid darken(white, 14%) .close-card-details, + .maximize-card-details, + .minimize-card-details, .card-details-menu, .card-copy-button, .card-copy-mobile-button, @@ -122,7 +165,9 @@ avatar-radius = 50% .card-details-menu-mobile-web float: right - .close-card-details + .close-card-details, + .maximize-card-details, + .minimize-card-details font-size: 24px padding: 5px margin-right: -8px @@ -260,7 +305,13 @@ input[type="submit"].attachment-add-link-submit margin-right: 0px .card-details-menu - margin-right: 10px + margin-right: 40px + + .maximize-card-details + margin-right: 40px + + .minimize-card-details + margin-right: 40px card-details-color(background, color...) background: background !important diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 9a0254654..a84ff69bb 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -1048,5 +1048,7 @@ "Double-Bounce": "Double Bounce Wait Spinner", "Rotateplane": "Rotateplane Wait Spinner", "Scaleout": "Scaleout Wait Spinner", - "Wave": "Wave Wait Spinner" + "Wave": "Wave Wait Spinner", + "maximize-card": "Maximize Card", + "minimize-card": "Minimize Card" } diff --git a/models/users.js b/models/users.js index 1ad7f1a9c..38b76f436 100644 --- a/models/users.js +++ b/models/users.js @@ -164,7 +164,7 @@ Users.attachSchema( }, 'profile.showDesktopDragHandles': { /** - * does the user want to hide system messages? + * does the user want to show desktop drag handles? */ type: Boolean, optional: true, @@ -176,6 +176,13 @@ Users.attachSchema( type: Boolean, optional: true, }, + 'profile.cardMaximized': { + /** + * has user clicked maximize card? + */ + type: Boolean, + optional: true, + }, 'profile.hiddenSystemMessages': { /** * does the user want to hide system messages? @@ -641,6 +648,11 @@ Users.helpers({ return profile.hiddenSystemMessages || false; }, + hasCardMaximized() { + const profile = this.profile || {}; + return profile.cardMaximized || false; + }, + hasHiddenMinicardLabelText() { const profile = this.profile || {}; return profile.hiddenMinicardLabelText || false; @@ -793,6 +805,14 @@ Users.mutations({ }; }, + toggleCardMaximized(value = false) { + return { + $set: { + 'profile.cardMaximized': !value, + }, + }; + }, + toggleLabelText(value = false) { return { $set: { @@ -887,6 +907,10 @@ Meteor.methods({ const user = Meteor.user(); user.toggleSystem(user.hasHiddenSystemMessages()); }, + toggleCardMaximized() { + const user = Meteor.user(); + user.toggleCardMaximized(user.hasCardMaximized()); + }, toggleMinicardLabelText() { const user = Meteor.user(); user.toggleLabelText(user.hasHiddenMinicardLabelText());