From 91cfcf7b12b5e7c137c2e765b2c378dde6b82966 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Fri, 28 Aug 2015 05:11:45 +0200 Subject: Yet another iteration on the user interface * Automatically display the overlay when the card details is opened (previously we waited for the mouse to enter the card details panel) * Improve the design of the minicards badges * Change the minicard background when it is hovered or selected * Removes unimplemented features links from the UI * Fix the board canvas position when the sidebar is open (was hidden behind) Fixes #215 --- client/components/activities/activities.styl | 3 ++- client/components/boards/boardBody.jade | 4 ++-- client/components/boards/boardBody.js | 13 ++++++------- client/components/boards/boardBody.styl | 17 +++++------------ client/components/boards/boardHeader.jade | 4 ---- client/components/cards/cardDetails.js | 15 +++++++++++---- client/components/cards/cardDetails.styl | 6 ++---- client/components/cards/labels.js | 2 +- client/components/cards/minicard.styl | 26 +++++++++++++++++++------- client/components/sidebar/sidebar.js | 4 ++++ client/components/sidebar/sidebar.styl | 2 +- 11 files changed, 53 insertions(+), 43 deletions(-) diff --git a/client/components/activities/activities.styl b/client/components/activities/activities.styl index de2b796d..e084bff8 100644 --- a/client/components/activities/activities.styl +++ b/client/components/activities/activities.styl @@ -2,7 +2,7 @@ clear: both .activity - margin: 6px 0 + margin: 10px 0 display: flex .member @@ -13,6 +13,7 @@ flex: 1 align-self: center margin: 0 + margin-left: 3px .activity-comment display: block diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 25c8f6d8..0233231d 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -10,8 +10,9 @@ template(name="board") template(name="boardBody") .board-wrapper(class=currentBoard.colorClass) + +sidebar .board-canvas( - class=currentBoard.sidebarSize + class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}" class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}" class="{{#if draggingActive.get}}is-dragging-active{{/if}}") if showOverlay.get @@ -23,7 +24,6 @@ template(name="boardBody") +cardDetails(currentCard) if currentUser.isBoardMember +addListForm - +sidebar template(name="addListForm") .list.js-list.list-composer.js-list-composer diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 8a1941d6..669b5b4b 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -22,6 +22,9 @@ BlazeComponent.extendComponent({ self._isDragging = false; self._lastDragPositionX = 0; + + // Used to set the overlay + self.mouseHasEnterCardDetails = false; }, openNewListForm: function() { @@ -57,18 +60,14 @@ BlazeComponent.extendComponent({ return currentCard && currentCard.listId === listId; }, - sidebarSize: function() { - var sidebar = this.componentChildren('sidebar')[0]; - if (sidebar && sidebar.isOpen()) - return 'next-sidebar'; - }, - events: function() { return [{ // XXX The board-overlay div should probably be moved to the parent // component. 'mouseenter .board-overlay': function() { - this.showOverlay.set(false); + if (this.mouseHasEnterCardDetails) { + this.showOverlay.set(false); + } }, // Click-and-drag action diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl index b0649f45..dd961bae 100644 --- a/client/components/boards/boardBody.styl +++ b/client/components/boards/boardBody.styl @@ -26,11 +26,10 @@ position() animation: fadeIn 0.2s z-index: 16 - &.next-sidebar + &.is-sibling-sidebar-open margin-right: 248px &.is-dragging-active - .open-minicard-composer, .minicard-wrapper.is-checked display: none @@ -39,14 +38,8 @@ position() align-items: flex-start display: flex flex-direction: row - margin-bottom: 10px - overflow: auto - padding-bottom: 5px + margin: 0 10px 10px + padding: 0 25px 5px 0 + overflow-x: auto + overflow-y: hidden position: cover - - // In order for the card details pane to overlap the header we need to - // virtually increase this container size with the below hack. (Note that it - // is not possible to set overflow-x: auto, overflow-y: hidden as I - // originally tried). - padding-top: 10px - top: -10px diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index 4773e3bb..ea779e32 100644 --- a/client/components/boards/boardHeader.jade +++ b/client/components/boards/boardHeader.jade @@ -46,10 +46,6 @@ template(name="boardMenuPopup") li: a.js-open-archives Archived elements if currentUser.isBoardAdmin li: a.js-change-board-color Change color - li: a Permissions - hr - ul.pop-over-list - li: a Copy this board //- XXX Language should be handled by sandstorm, but for now display a language selection link in the board menu. This link is normally present diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 4fa90bf7..82ecde85 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -1,3 +1,7 @@ +// XXX Obviously this shouldn't be a global, but this is currently the only way +// to share a variable between two files. + + BlazeComponent.extendComponent({ template: function() { return 'cardDetails'; @@ -17,6 +21,12 @@ BlazeComponent.extendComponent({ activitiesComponent.loadNextPage(); }, + onCreated: function() { + this.isLoaded = new ReactiveVar(false); + this.componentParent().showOverlay.set(true); + this.componentParent().mouseHasEnterCardDetails = false; + }, + onRendered: function() { var bodyBoardComponent = this.componentParent(); var additionalMargin = 550; @@ -35,10 +45,6 @@ BlazeComponent.extendComponent({ }); }, - onCreated: function() { - this.isLoaded = new ReactiveVar(false); - }, - events: function() { var events = { [CSSEvents.animationend + ' .js-card-details']: function() { @@ -69,6 +75,7 @@ BlazeComponent.extendComponent({ 'click .js-add-labels': Popup.open('cardLabels'), 'mouseenter .js-card-details': function() { this.componentParent().showOverlay.set(true); + this.componentParent().mouseHasEnterCardDetails = true; } })]; } diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index 72e8c7c9..9a6736ee 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -7,13 +7,12 @@ flex-basis: 470px will-change: flex-basis overflow: hidden - background: white - border-radius: 3px + background: darken(white, 2%) + 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 - margin-top: -9px .card-details-canvas width: 470px @@ -21,7 +20,6 @@ .card-details-header margin: 0 -20px 5px padding 7px 20px 0 - background: #F7F7F7 border-bottom: 1px solid darken(white, 10%) min-height: 38px position: relative diff --git a/client/components/cards/labels.js b/client/components/cards/labels.js index 731e6367..4e6ceb3a 100644 --- a/client/components/cards/labels.js +++ b/client/components/cards/labels.js @@ -37,7 +37,7 @@ Template.createLabelPopup.helpers({ // is not already used in the board (although it's not a problem if two // labels have the same color). defaultColor: function() { - var labels = this.labels || this.card.board().labels; + var labels = Boards.findOne(Session.get('currentBoard')).labels; var usedColors = _.pluck(labels, 'color'); var availableColors = _.difference(labelColors, usedColors); return availableColors.length > 1 ? availableColors[0] : labelColors[0]; diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index ee454e78..c45c7eb9 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -5,10 +5,6 @@ align-items: center margin-bottom: 9px - &.draggable-hover-card - background-color: #f0f0f0 - border-bottom-color: #c2c2c2 - &.placeholder background: darken(white, 20%) border-radius: 2px @@ -53,6 +49,14 @@ z-index: 25 box-shadow: -2px 1px 2px rgba(0,0,0,.2) + &:hover:not(.minicard-composer), + .is-selected &, + .draggable-hover-card & + background: darken(white, 2%) + + .draggable-hover-card & + background: darken(white, 4%) + .minicard-cover background-position: center background-repeat: no-repeat @@ -79,18 +83,26 @@ .badges float: left - margin-top: 5px - color: darken(white, 60%) + margin-top: 7px + color: darken(white, 50%) &:empty display: none .badge float: left - margin-right: 10px + margin-right: 11px + margin-bottom: 3px + font-size: 0.9em + + .badge-icon, + .badge-text + vertical-align: top .badge-text font-size: 0.9em + padding-left: 2px + line-height: 14px .minicard-members float: right diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index 17175ad4..97b6f2de 100644 --- a/client/components/sidebar/sidebar.js +++ b/client/components/sidebar/sidebar.js @@ -102,6 +102,10 @@ BlazeComponent.extendComponent({ } }).register('sidebar'); +Blaze.registerHelper('Sidebar', function() { + return Sidebar; +}); + EscapeActions.register('sidebarView', function() { Sidebar.setView(defaultView); }, function() { return Sidebar && Sidebar.getView() !== defaultView; } diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl index f4c4dd01..3ea4cf04 100644 --- a/client/components/sidebar/sidebar.styl +++ b/client/components/sidebar/sidebar.styl @@ -34,7 +34,7 @@ display: flex flex-direction: column - li a + li > a display: flex height: 30px margin: 0 -- cgit v1.2.3-1-g7c22