From 2c0030da62b9a1e59a55e3429fe514bbd51e1ee3 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Fri, 29 May 2015 23:35:30 +0200 Subject: Implement multi-selection The UI and the internal APIs are still rough around the edges but the feature is basically working. You can now select multiple cards and move them together or (un|)assign them a label. --- client/components/main/editor.js | 4 +- client/components/main/header.styl | 3 + client/components/main/popup.styl | 239 ------------------------------------- 3 files changed, 5 insertions(+), 241 deletions(-) (limited to 'client/components/main') diff --git a/client/components/main/editor.js b/client/components/main/editor.js index a35ecd06..e1a90cb1 100644 --- a/client/components/main/editor.js +++ b/client/components/main/editor.js @@ -61,6 +61,6 @@ Template.editor.onRendered(function() { }); EscapeActions.register('textcomplete', - function() { return dropdownMenuIsOpened; }, - function() {} + function() {}, + function() { return dropdownMenuIsOpened; } ); diff --git a/client/components/main/header.styl b/client/components/main/header.styl index 248e2851..8e1682eb 100644 --- a/client/components/main/header.styl +++ b/client/components/main/header.styl @@ -58,6 +58,9 @@ margin: 4px 8px 0 0 float: left + i.fa-chevron-down + margin-right: 4px + #header-main-bar height: 28px * 1.618034 - 6px padding: 7px 10px 0 diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl index 141f4261..cf1fd46e 100644 --- a/client/components/main/popup.styl +++ b/client/components/main/popup.styl @@ -35,21 +35,9 @@ margin: 4px 0 12px width: 100% - .empty - margin: 0 - img max-width: 270px - .custom-image img - height: 18px - left: 9px - top: 9px - width: 18px - - .title - line-height: 32px - .header height: 36px position: relative @@ -68,10 +56,6 @@ text-overflow: ellipsis white-space: nowrap - .back-btn, .close-btn - &:hover .icon-sm - color: darken(white, 80%) - .back-btn float: left overflow: hidden @@ -91,7 +75,6 @@ top: 0 right: 0 - &.no-title .header background: none @@ -134,15 +117,11 @@ margin-bottom: 8px .pop-over-list - &.navigable li.not-selectable>a:hover, li.not-selectable>a:hover color: #8c8c8c cursor: default - .icon-sm - color: #a6a6a6 - li > a cursor: pointer display: block @@ -168,9 +147,6 @@ .unread-indicator background: #fff - .icon-sm - color: #fff - .sub-name clear: both color: #8c8c8c @@ -208,9 +184,6 @@ .vis-icon opacity: .35 - .icon-sm - color: #a6a6a6 - &:hover background: none @@ -218,9 +191,6 @@ .quiet color: #8c8c8c - .icon-sm - color: #a6a6a6 - &:active background: none @@ -268,9 +238,6 @@ .quiet color: #8c8c8c - .icon-sm - color: #a6a6a6 - li.selected > a background-color: #005377 color: #fff @@ -287,14 +254,10 @@ .unread-indicator background: #fff - .icon-sm - color: #fff - &:active background-color: #005377 .pop-over.miniprofile - .header border-bottom-color: transparent height: 30px @@ -329,205 +292,3 @@ &:hover text-decoration: underline - -.pop-over.avdetail .header - border-bottom-color: transparent - height: 20px - position: absolute - top: 8px - left: 8px - right: 8px - z-index: 0 - -.pop-over.avdetail .header-title - display: none - -.pop-over.avdetail .content - text-align: center - -.pop-over.avdetail .mem-info - margin: 2px 24px 8px - position: relative - z-index: 1 - width: 222px - -.pop-over.avdetail .mem-info h3 a - text-decoration: none - -.pop-over.avdetail .mem-info h3 a:hover - text-decoration: underline - -.pop-over-label-list li, -.pop-over-member-list li - - &.disabled a - cursor:default - - &:not(.disabled):hover a - background-color: #005377 - color: #fff - - -.pop-over-label-list, -.pop-over-member-list, -.pop-over-emoji-list, -.pop-over-card-list - li - a - border-radius: 3px - display: block - height: 30px - line-height: 30px - overflow: hidden - position: relative - text-overflow: ellipsis - text-decoration: none - white-space: nowrap - padding: 4px - margin-bottom: 2px - - &.multi-line - line-height: 16px - - .member - margin-right: 8px - - .card-label - float: left - height: 30px - margin: 0 8px 0 0 - padding: 0 - width: 30px - - .option, - .icon-check - background-clip: content-box - background-origin: content-box - padding: 11px - position: absolute - top: 0 - right: 0 - - .sub-name - font-size: 12px - - - &:last-child a - margin-bottom: 0 - - &.disabled - opacity: .5 - - &.active a, - &.selected a - background: none - color: #4d4d4d - cursor: default - - .quiet - color: #8c8c8c - - &.email-invite - - .member - display: none - - a - padding: 0 10px - - &.selected a - background-color: #005377 - color: #fff - - .quiet - color: #eee - - .card-label - border-radius: 3px - - .icon-check - color: #fff - - &.active a .icon-check - display: block - - &.unconfirmed a.name - line-height: 16px - - &.options li - - &.selected a - padding-right: 28px - - .option - display: block - opacity: .5 - - &:hover - opacity: 1 - - &.disabled.selected a - padding-right: 0 - - .option - display: none - - - &.no-option.selected a - padding-right: 6px - - .option - display: none - - &.collapsed - - &.checkable li.active a - padding-right: 0 - - li - float: left - margin: 0 3px 3px 0 - - a - padding: 0 - margin: 0 - width: 30px - - .member - opacity: .8 - - .full-name - display: none - - &.selected a .member, - &.active.selected a .member - border-color: #005377 - opacity: .9 - - &.active a - - .member - border-color: #2e85b8 - opacity: 1 - - .icon-check - border-radius: 3px - background-color: #2e85b8 - bottom: 0 - color: #fff - display: block - padding: 0 - right: 0 - top: auto - - &.checkable li.active a - padding-right: 28px - - &.filtered li - display: none - - &.matches-filter - display: block - - &.limited li.exceeds-limit - display: none -- cgit v1.2.3-1-g7c22