diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-27 17:17:00 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-27 17:23:25 +0200 |
commit | dcc64f44f9f81d32c8071c6bdac86546eaeb57a0 (patch) | |
tree | b8977727227a3ddbb2874ea3f86f1e26e03c8835 /client/components/boards/boardBody.js | |
parent | 42f6dc686f313ba294e3cbcfb0ebde50678580fe (diff) | |
download | wekan-dcc64f44f9f81d32c8071c6bdac86546eaeb57a0.tar.gz wekan-dcc64f44f9f81d32c8071c6bdac86546eaeb57a0.tar.bz2 wekan-dcc64f44f9f81d32c8071c6bdac86546eaeb57a0.zip |
UI improvements
* Implement visibility choice on board creation;
* Rework the board header bar. Remove links to un-implemented
features;
* Implement a board star counter (visible if the board have >2 stars);
* Define a new icon (a thin cross) to close elements;
* Remove $(document).on('mouseover') event handlers that were
basically fired hundreds of times for nothing, we now define a proper
Tracker dependency to execute jquery-ui plugin initialization only
when something has changed;
* Bug fixes related to list scrolling.
Diffstat (limited to 'client/components/boards/boardBody.js')
-rw-r--r-- | client/components/boards/boardBody.js | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js new file mode 100644 index 00000000..cf32f764 --- /dev/null +++ b/client/components/boards/boardBody.js @@ -0,0 +1,141 @@ +// XXX This event list must be abstracted somewhere else. +var endTransitionEvents = [ + 'webkitTransitionEnd', + 'otransitionend', + 'oTransitionEnd', + 'msTransitionEnd', + 'transitionend' +].join(' '); + +BlazeComponent.extendComponent({ + template: function() { + return 'boardComponent'; + }, + + openNewListForm: function() { + this.componentChildren('addListForm')[0].open(); + }, + + showNewCardForms: function(value) { + _.each(this.componentChildren('list'), function(listComponent) { + listComponent.showNewCardForm(value); + }); + }, + + scrollLeft: function(position) { + position = position || 0; + var $container = $(this.find('.js-lists')); + var containerWidth = $container.width(); + var currentScrollPosition = $container.scrollLeft(); + if (position < currentScrollPosition) { + $container.animate({ + scrollLeft: position + }); + } else if (position > currentScrollPosition + containerWidth) { + $container.animate({ + scrollLeft: Math.max(0, position - containerWidth) + }); + } + }, + + currentCardIsInThisList: function() { + var currentCard = Cards.findOne(Session.get('currentCard')); + var listId = this.currentData()._id; + return currentCard && currentCard.listId === listId; + }, + + onRendered: function() { + var self = this; + + self.scrollLeft(); + + var lists = this.find('.js-lists'); + + // We want to animate the card details window closing. We rely on CSS + // transition for the actual animation. + lists._uihooks = { + removeElement: function(node) { + var removeNode = _.once(function() { + node.parentNode.removeChild(node); + }); + if ($(node).hasClass('js-card-detail')) { + $(node).css({ + flex: '0 0 0', + padding: 0 + }); + $(lists).one(endTransitionEvents, removeNode); + } else { + removeNode(); + } + } + }; + + if (! Meteor.userId() || ! Meteor.user().isBoardMember()) + return; + + self.$(lists).sortable({ + tolerance: 'pointer', + appendTo: '.js-lists', + helper: 'clone', + items: '.js-list:not(.js-list-composer)', + placeholder: 'list placeholder', + start: function(event, ui) { + $('.list.placeholder').height(ui.item.height()); + Popup.close(); + }, + stop: function() { + self.$('.js-lists').find('.js-list:not(.js-list-composer)').each( + function(i, list) { + var data = Blaze.getData(list); + Lists.update(data._id, { + $set: { + sort: i + } + }); + } + ); + } + }); + + // If there is no data in the board (ie, no lists) we autofocus the list + // creation form by clicking on the corresponding element. + if (self.data().lists().count() === 0) { + this.openNewListForm(); + } + }, + + sidebarSize: function() { + var sidebar = this.componentChildren('sidebar')[0]; + if (sidebar && sidebar.isOpen()) + return 'next-sidebar'; + } +}).register('boardComponent'); + +BlazeComponent.extendComponent({ + template: function() { + return 'addListForm'; + }, + + // Proxy + open: function() { + this.componentChildren('inlinedForm')[0].open(); + }, + + events: function() { + return [{ + submit: function(evt) { + evt.preventDefault(); + var title = this.find('.list-name-input'); + if ($.trim(title.value)) { + Lists.insert({ + title: title.value, + boardId: Session.get('currentBoard'), + sort: $('.list').length + }); + + title.value = ''; + } + } + }]; + } +}).register('addListForm'); |