From 861b98ea372bf6d709b601d14a04de38a5d99f55 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 17 Nov 2021 00:10:39 +0100 Subject: [PATCH 1/8] List header contains now a button to add the card to the bottom of the list --- client/components/lists/list.styl | 4 ++-- client/components/lists/listHeader.jade | 2 ++ client/components/lists/listHeader.js | 11 ++++++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 368394ae1..50e38a6d6 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -91,7 +91,7 @@ top: -7px right: 3px - .list-header-plus-icon + .list-header-plus-icon,.list-header-plus-square-icon color: #a6a6a6 margin-right: 15px @@ -102,7 +102,7 @@ color: #8c8c8c font-size: 0.8em -.list-header .list-header-plus-icon, .js-open-list-menu, .list-header-menu a +.list-header .list-header-plus-icon, .list-header .list-header-plus-square-icon, .js-open-list-menu, .list-header-menu a color #4d4d4d padding-left 4px diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 866665308..987092b08 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -28,6 +28,7 @@ template(name="listHeader") div.list-header-menu unless currentUser.isCommentOnly if canSeeAddCard + a.js-add-card.fa.fa-plus-square.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") else @@ -41,6 +42,7 @@ template(name="listHeader") //if isBoardAdmin // a.fa.js-list-star.list-header-plus-icon(class="fa-star{{#unless starred}}-o{{/unless}}") if canSeeAddCard + a.js-add-card.fa.fa-plus-square.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") if currentUser.isBoardAdmin diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index f86274937..d194b7d52 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -101,7 +101,7 @@ BlazeComponent.extendComponent({ this.starred(!this.starred()); }, 'click .js-open-list-menu': Popup.open('listAction'), - 'click .js-add-card'(event) { + 'click .js-add-card.fa-plus'(event) { const listDom = $(event.target).parents( `#js-list-${this.currentData()._id}`, )[0]; @@ -110,6 +110,15 @@ BlazeComponent.extendComponent({ position: 'top', }); }, + 'click .js-add-card.fa-plus-square'(event) { + const listDom = $(event.target).parents( + `#js-list-${this.currentData()._id}`, + )[0]; + const listComponent = BlazeComponent.getComponentForElement(listDom); + listComponent.openForm({ + position: 'bottom', + }); + }, 'click .js-unselect-list'() { Session.set('currentList', null); }, From a7b7bfafb52b144e1540704849c9bc316460ab71 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 27 Nov 2021 11:51:24 +0100 Subject: [PATCH 2/8] Add arrow down icon in the right of the plus icon - there isn't a good plus icon which means the card is added at the bottom, so i try to use 2 icons for this feature --- client/components/lists/list.styl | 9 +++++++++ client/components/lists/listHeader.jade | 8 ++++++-- client/components/lists/listHeader.js | 2 +- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 50e38a6d6..40dfc8a7d 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -106,6 +106,15 @@ color #4d4d4d padding-left 4px +.list-header-plus-square-icon + border: 1px solid #a6a6a6 + + a + padding: 0px + + .fa.fa-arrow-down + padding-right: 1px + .list-body flex: 1 1 auto flex-direction: column diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 987092b08..7f71870e9 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -28,7 +28,9 @@ template(name="listHeader") div.list-header-menu unless currentUser.isCommentOnly if canSeeAddCard - a.js-add-card.fa.fa-plus-square.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") + a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") + a.fa.fa-plus-square + a.fa.fa-arrow-down a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") else @@ -42,7 +44,9 @@ template(name="listHeader") //if isBoardAdmin // a.fa.js-list-star.list-header-plus-icon(class="fa-star{{#unless starred}}-o{{/unless}}") if canSeeAddCard - a.js-add-card.fa.fa-plus-square.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") + a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") + a.fa.fa-plus-square + a.fa.fa-arrow-down a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") if currentUser.isBoardAdmin diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index d194b7d52..fdc339ec0 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -110,7 +110,7 @@ BlazeComponent.extendComponent({ position: 'top', }); }, - 'click .js-add-card.fa-plus-square'(event) { + 'click .js-add-card.list-header-plus-square-icon'(event) { const listDom = $(event.target).parents( `#js-list-${this.currentData()._id}`, )[0]; From b5ee0649db2c8137b0d0b55d40bab4cde4ed5eb3 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 27 Nov 2021 20:59:23 +0100 Subject: [PATCH 3/8] Changed plus-square icon back to plus icon --- client/components/lists/listHeader.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 7f71870e9..6c92e3862 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -29,7 +29,7 @@ template(name="listHeader") unless currentUser.isCommentOnly if canSeeAddCard a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") - a.fa.fa-plus-square + a.fa.fa-plus a.fa.fa-arrow-down a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") @@ -45,7 +45,7 @@ template(name="listHeader") // a.fa.js-list-star.list-header-plus-icon(class="fa-star{{#unless starred}}-o{{/unless}}") if canSeeAddCard a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") - a.fa.fa-plus-square + a.fa.fa-plus a.fa.fa-arrow-down a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") From 2767c444b2d95249e2640cda0f2f435ea7238118 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 27 Nov 2021 20:12:01 +0100 Subject: [PATCH 4/8] Add arrow up icon in the right of the plus icon --- client/components/boards/boardColors.styl | 2 +- client/components/lists/list.styl | 12 +++++++++--- client/components/lists/listHeader.jade | 14 +++++++++----- client/components/lists/listHeader.js | 4 ++-- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl index 19246356b..399ef9e1d 100644 --- a/client/components/boards/boardColors.styl +++ b/client/components/boards/boardColors.styl @@ -876,7 +876,7 @@ setBoardClear(color1,color2) padding: 10px top: 0 - .list-header .list-header-plus-icon + .list-header .list-header-plus-top color: #a6a6a6 .list-body diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 40dfc8a7d..34b78ca41 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -91,7 +91,7 @@ top: -7px right: 3px - .list-header-plus-icon,.list-header-plus-square-icon + .list-header-plus-top,.list-header-plus-bottom color: #a6a6a6 margin-right: 15px @@ -102,16 +102,22 @@ color: #8c8c8c font-size: 0.8em -.list-header .list-header-plus-icon, .list-header .list-header-plus-square-icon, .js-open-list-menu, .list-header-menu a +.list-header .list-header-plus-top, .list-header .list-header-plus-bottom, .js-open-list-menu, .list-header-menu a color #4d4d4d padding-left 4px -.list-header-plus-square-icon +.list-header-plus-bottom border: 1px solid #a6a6a6 a padding: 0px +.list-header-plus-top + border: 1px solid #4d4d4d + + a + padding: 0px + .fa.fa-arrow-down padding-right: 1px diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 6c92e3862..ff2ae9a70 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -28,10 +28,12 @@ template(name="listHeader") div.list-header-menu unless currentUser.isCommentOnly if canSeeAddCard - a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") + a.js-add-card.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}") a.fa.fa-plus a.fa.fa-arrow-down - a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") + a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") + a.fa.fa-plus + a.fa.fa-arrow-up a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") else a.list-header-menu-icon.fa.fa-angle-right.js-select-list @@ -42,12 +44,14 @@ template(name="listHeader") div.list-header-menu unless currentUser.isCommentOnly //if isBoardAdmin - // a.fa.js-list-star.list-header-plus-icon(class="fa-star{{#unless starred}}-o{{/unless}}") + // a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}") if canSeeAddCard - a.js-add-card.list-header-plus-square-icon(title="{{_ 'add-card-to-bottom-of-list'}}") + a.js-add-card.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}") a.fa.fa-plus a.fa.fa-arrow-down - a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}") + a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") + a.fa.fa-plus + a.fa.fa-arrow-up a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") if currentUser.isBoardAdmin if isShowDesktopDragHandles diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index fdc339ec0..aa9f840b2 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -101,7 +101,7 @@ BlazeComponent.extendComponent({ this.starred(!this.starred()); }, 'click .js-open-list-menu': Popup.open('listAction'), - 'click .js-add-card.fa-plus'(event) { + 'click .js-add-card.list-header-plus-top'(event) { const listDom = $(event.target).parents( `#js-list-${this.currentData()._id}`, )[0]; @@ -110,7 +110,7 @@ BlazeComponent.extendComponent({ position: 'top', }); }, - 'click .js-add-card.list-header-plus-square-icon'(event) { + 'click .js-add-card.list-header-plus-bottom'(event) { const listDom = $(event.target).parents( `#js-list-${this.currentData()._id}`, )[0]; From 9cf8af04169582e0fc4d3ff9e17a802d80184676 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 27 Nov 2021 21:50:35 +0100 Subject: [PATCH 5/8] Plus and arrow icon as "one icon", no space between them --- client/components/lists/list.styl | 14 ++++---------- client/components/lists/listHeader.jade | 6 ++---- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 34b78ca41..71b4cba60 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -104,22 +104,16 @@ .list-header .list-header-plus-top, .list-header .list-header-plus-bottom, .js-open-list-menu, .list-header-menu a color #4d4d4d - padding-left 4px + padding-left 3px -.list-header-plus-bottom +.list-header-plus-bottom, .list-header-plus-top border: 1px solid #a6a6a6 a padding: 0px -.list-header-plus-top - border: 1px solid #4d4d4d - - a - padding: 0px - - .fa.fa-arrow-down - padding-right: 1px + .fa + padding-right: 2px .list-body flex: 1 1 auto diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index ff2ae9a70..d5cda6708 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -46,11 +46,9 @@ template(name="listHeader") //if isBoardAdmin // a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}") if canSeeAddCard - a.js-add-card.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}") - a.fa.fa-plus + a.js-add-card.fa.fa-plus.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}") a.fa.fa-arrow-down - a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") - a.fa.fa-plus + a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-arrow-up a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") if currentUser.isBoardAdmin From 892828c02e09c3c4ca498b0b17460b7bda2b6b95 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 27 Nov 2021 21:51:26 +0100 Subject: [PATCH 6/8] Restored icon color --- client/components/lists/list.styl | 1 + 1 file changed, 1 insertion(+) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 71b4cba60..5fd805443 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -113,6 +113,7 @@ padding: 0px .fa + color #4d4d4d padding-right: 2px .list-body From a2cefc595eb64a5d1750ff8e5fcb8d0ef05238ee Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sun, 28 Nov 2021 17:37:01 +0100 Subject: [PATCH 7/8] Move "Add card to bottom" to hamburger menu --- client/components/lists/list.styl | 14 ++------------ client/components/lists/listHeader.jade | 17 ++++++++--------- client/components/lists/listHeader.js | 17 ++++++++--------- 3 files changed, 18 insertions(+), 30 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 5fd805443..fbecbc398 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -91,7 +91,7 @@ top: -7px right: 3px - .list-header-plus-top,.list-header-plus-bottom + .list-header-plus-top color: #a6a6a6 margin-right: 15px @@ -102,20 +102,10 @@ color: #8c8c8c font-size: 0.8em -.list-header .list-header-plus-top, .list-header .list-header-plus-bottom, .js-open-list-menu, .list-header-menu a +.list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a color #4d4d4d padding-left 3px -.list-header-plus-bottom, .list-header-plus-top - border: 1px solid #a6a6a6 - - a - padding: 0px - - .fa - color #4d4d4d - padding-right: 2px - .list-body flex: 1 1 auto flex-direction: column diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index d5cda6708..26ce44108 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -28,12 +28,7 @@ template(name="listHeader") div.list-header-menu unless currentUser.isCommentOnly if canSeeAddCard - a.js-add-card.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}") - a.fa.fa-plus - a.fa.fa-arrow-down - a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") - a.fa.fa-plus - a.fa.fa-arrow-up + a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") else a.list-header-menu-icon.fa.fa-angle-right.js-select-list @@ -46,10 +41,7 @@ template(name="listHeader") //if isBoardAdmin // a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}") if canSeeAddCard - a.js-add-card.fa.fa-plus.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}") - a.fa.fa-arrow-down a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") - a.fa.fa-arrow-up a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") if currentUser.isBoardAdmin if isShowDesktopDragHandles @@ -63,6 +55,13 @@ template(name="editListTitleForm") a.fa.fa-times-thin.js-close-inlined-form template(name="listActionPopup") + ul.pop-over-list + li + a.js-add-card.list-header-plus-bottom + i.fa.fa-plus + i.fa.fa-arrow-down + | {{_ 'add-card-to-bottom-of-list'}} + hr ul.pop-over-list li a.js-toggle-watch-list diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index aa9f840b2..547ba1bc8 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -110,15 +110,6 @@ BlazeComponent.extendComponent({ position: 'top', }); }, - 'click .js-add-card.list-header-plus-bottom'(event) { - const listDom = $(event.target).parents( - `#js-list-${this.currentData()._id}`, - )[0]; - const listComponent = BlazeComponent.getComponentForElement(listDom); - listComponent.openForm({ - position: 'bottom', - }); - }, 'click .js-unselect-list'() { Session.set('currentList', null); }, @@ -150,6 +141,14 @@ Template.listActionPopup.helpers({ Template.listActionPopup.events({ 'click .js-list-subscribe'() {}, + 'click .js-add-card.list-header-plus-bottom'(event) { + const listDom = $(`#js-list-${this._id}`)[0]; + const listComponent = BlazeComponent.getComponentForElement(listDom); + listComponent.openForm({ + position: 'bottom', + }); + Popup.back(); + }, 'click .js-set-color-list': Popup.open('setListColor'), 'click .js-select-cards'() { const cardIds = this.allCards().map(card => card._id); From 4a4bfef888a10211224c02d861c494ed00e5653c Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sun, 28 Nov 2021 19:48:59 +0100 Subject: [PATCH 8/8] Restored padding-left to 4px --- client/components/lists/list.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index fbecbc398..b3d542996 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -104,7 +104,7 @@ .list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a color #4d4d4d - padding-left 3px + padding-left 4px .list-body flex: 1 1 auto