diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index 06cb0d549..10c4ccd7c 100644 --- a/client/components/boards/boardHeader.jade +++ b/client/components/boards/boardHeader.jade @@ -23,6 +23,10 @@ template(name="boardHeaderBar") span = currentBoard.stars + a.board-header-btn.js-auto-width-board(class="{{#if isAutoWidth}}is-active{{/if}}" + title="{{#if isAutoWidth}}{{_ 'click-to-disable-auto-width'}}{{else}}{{_ 'click-to-enable-auto-width'}}{{/if}}") + i.fa(class="fa-solid fa-{{#if isAutoWidth}}compress{{else}}expand{{/if}}") + a.board-header-btn( class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}" title="{{_ currentBoard.permission}}") @@ -66,6 +70,10 @@ template(name="boardHeaderBar") span = currentBoard.stars + a.board-header-btn.js-auto-width-board(class="{{#if isAutoWidth}}is-active{{/if}}" + title="{{#if isAutoWidth}}{{_ 'click-to-disable-auto-width'}}{{else}}{{_ 'click-to-enable-auto-width'}}{{/if}}") + i.fa(class="fa-solid fa-{{#if isAutoWidth}}compress{{else}}expand{{/if}}") + a.board-header-btn( class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}" title="{{_ currentBoard.permission}}") diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js index 22408b3c6..e4c6a7c47 100644 --- a/client/components/boards/boardHeader.js +++ b/client/components/boards/boardHeader.js @@ -38,6 +38,12 @@ BlazeComponent.extendComponent({ return user && user.hasStarred(boardId); }, + isAutoWidth() { + const boardId = Session.get('currentBoard'); + const user = ReactiveCache.getCurrentUser(); + return user && user.hasAutoWidth(boardId); + }, + // Only show the star counter if the number of star is greater than 2 showStarCounter() { const currentBoard = Utils.getCurrentBoard(); @@ -71,6 +77,9 @@ BlazeComponent.extendComponent({ 'click .js-star-board'() { ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard')); }, + 'click .js-auto-width-board'() { + ReactiveCache.getCurrentUser().toggleAutoWidth(Session.get('currentBoard')); + }, 'click .js-open-board-menu': Popup.open('boardMenu'), 'click .js-change-visibility': Popup.open('boardChangeVisibility'), 'click .js-watch-board': Popup.open('boardChangeWatch'), diff --git a/client/components/lists/list.jade b/client/components/lists/list.jade index 62a719f92..09129d6ce 100644 --- a/client/components/lists/list.jade +++ b/client/components/lists/list.jade @@ -1,7 +1,7 @@ template(name='list') .list.js-list(id="js-list-{{_id}}" - style="{{#unless collapsed}}min-width:{{listWidth}}px;{{/unless}}" - class="{{#if collapsed}}list-collapsed{{/if}}") + style="{{#unless collapsed}}{{#if autoWidth}}min-{{/if}}width:{{listWidth}}px;{{/unless}}" + class="{{#if collapsed}}list-collapsed{{/if}} {{#if autoWidth}}list-auto-width{{/if}}") +listHeader +listBody diff --git a/client/components/lists/list.js b/client/components/lists/list.js index c49f00780..a3ac18cdb 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -200,6 +200,12 @@ BlazeComponent.extendComponent({ const list = Template.currentData(); return user.getListWidth(list.boardId, list._id); }, + + autoWidth() { + const user = ReactiveCache.getCurrentUser(); + const list = Template.currentData(); + return user.hasAutoWidth(list.boardId); + }, }).register('list'); Template.miniList.events({ diff --git a/models/users.js b/models/users.js index 7bee1c0f3..de38602bc 100644 --- a/models/users.js +++ b/models/users.js @@ -716,6 +716,11 @@ Users.helpers({ return _.contains(starredBoards, boardId); }, + hasAutoWidth(boardId) { + const { autoWidths = {} } = this.profile || {}; + return autoWidths[boardId] === true; + }, + invitedBoards() { const { invitedBoards = [] } = this.profile || {}; return Boards.userBoards( @@ -974,6 +979,17 @@ Users.mutations({ }, }; }, + toggleAutoWidth(boardId) { + const { autoWidths = {} } = this.profile || {}; + + autoWidths[boardId] = !autoWidths[boardId]; + + return { + $set: { + 'profile.autoWidths': autoWidths, + }, + }; + }, addInvite(boardId) { return { diff --git a/server/migrations.js b/server/migrations.js index 2930d6fa7..815f3d2c5 100644 --- a/server/migrations.js +++ b/server/migrations.js @@ -1489,3 +1489,16 @@ Migrations.add('remove-user-profile-hideCheckedItems', () => { noValidateMulti, ); }); + +Migrations.add('add-default-auto-width-boards', () => { + Users.find().forEach(user => { + if (!user.hasOwnProperty('profile.autoWidths')) { + // Set default auto widths + Users.direct.update( + { _id: user._id }, + { $set: { 'profile.autoWidths': {} } }, + noValidate, + ); + } + }); +});