summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/details.styl27
-rw-r--r--client/components/cards/labels.styl5
-rw-r--r--client/components/cards/minicard.jade16
-rw-r--r--client/components/cards/minicard.js25
-rw-r--r--client/components/cards/minicard.styl119
-rw-r--r--client/components/cards/popups.jade5
6 files changed, 107 insertions, 90 deletions
diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl
index 68a436f9..6b1a4cd4 100644
--- a/client/components/cards/details.styl
+++ b/client/components/cards/details.styl
@@ -134,33 +134,6 @@
.card-composer
padding-bottom: 8px
-.cc-controls
- margin-top: 1px
-
- input[type="submit"]
- float: left
- margin-top: 0
- padding: 5px 18px
-
- .icon-lg
- float: left
-
- .cc-opt
- float: right
-
-.minicard-placeholder,
-.minicard.placeholder
- background: silver
- border: none
- min-height: 18px
-
- .hook
- height: 18px
- position: absolute
- right: 0
- top: 0
- width: 18px
-
input[type="text"].attachment-add-link-input
float: left
margin: 0 0 8px
diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl
index 27058b21..9514ce45 100644
--- a/client/components/cards/labels.styl
+++ b/client/components/cards/labels.styl
@@ -19,6 +19,11 @@
&:hover
color: white
+ &.square
+ height: 30px
+ width: @height
+ padding: 0
+
.card-label-green
background-color: #3cb500
diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index e1176264..ad51ce22 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -1,7 +1,11 @@
template(name="minicard")
- .minicard.card.js-minicard(
- class="{{#if isSelected}}is-selected{{/if}}")
- a.minicard-details.clearfix.show(href=absoluteUrl)
+ a.minicard-wrapper.js-minicard(href=absoluteUrl
+ class="{{#if isSelected}}is-selected{{/if}}"
+ class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+ if MultiSelection.isActive
+ .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
+ class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+ .minicard
if cover
.minicard-cover.js-card-cover(style="background-image: url({{cover.url}});")
if labels
@@ -16,12 +20,12 @@ template(name="minicard")
.badges
if comments.count
.badge(title="{{_ 'card-comments-title' comments.count }}")
- span.badge-icon.icon-sm.fa.fa-comment-o
+ span.badge-icon.fa.fa-comment-o
.badge-text= comments.count
if description
.badge.badge-state-image-only(title=description)
- span.badge-icon.icon-sm.fa.fa-align-left
+ span.badge-icon.fa.fa-align-left
if attachments.count
.badge
- span.badge-icon.icon-sm.fa.fa-paperclip
+ span.badge-icon.fa.fa-paperclip
span.badge-text= attachments.count
diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js
index b339580b..81d8c0d4 100644
--- a/client/components/cards/minicard.js
+++ b/client/components/cards/minicard.js
@@ -2,7 +2,6 @@
// 'click .member': Popup.open('cardMember')
// });
-
BlazeComponent.extendComponent({
template: function() {
return 'minicard';
@@ -10,5 +9,29 @@ BlazeComponent.extendComponent({
isSelected: function() {
return Session.equals('currentCard', this.currentData()._id);
+ },
+
+ toggleMultiSelection: function(evt) {
+ evt.stopPropagation();
+ evt.preventDefault();
+ MultiSelection.toogle(this.currentData()._id);
+ },
+
+ clickOnMiniCard: function(evt) {
+ if (MultiSelection.isActive() || evt.shiftKey) {
+ evt.stopImmediatePropagation();
+ evt.preventDefault();
+ var methodName = evt.shiftKey ? 'toogleRange' : 'toogle';
+ MultiSelection[methodName](this.currentData()._id);
+ }
+ },
+
+ events: function() {
+ return [{
+ submit: this.addCard,
+ 'click .js-toggle-multi-selection': this.toggleMultiSelection,
+ 'click .js-minicard': this.clickOnMiniCard,
+ 'click .open-minicard-composer': this.scrollToBottom
+ }];
}
}).register('minicard');
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index 775d31eb..a5110584 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -1,30 +1,57 @@
+.minicard-wrapper
+ cursor: pointer
+ position: relative
+ display: flex
+ align-items: center
+ margin-bottom: 9px
+
+ &.draggable-hover-card
+ background-color: #f0f0f0
+ border-bottom-color: #c2c2c2
+
+ &.placeholder
+ background: darken(white, 20%)
+ border-radius: 2px
+
+ &.ui-sortable-helper
+ transform: rotate(4deg)
+ display: block !important
+
+ .and-n-other
+ width: 100%
+ height: 16px
+ padding: 4px
+ background-color: darken(white, 5%)
+ text-align: center
+ border-radius: 3px
+
+ .multi-selection-checkbox
+ display: none
+
+ .multi-selection-checkbox + .minicard
+ margin-left: 8px
+
.minicard
+ padding: 6px 8px 2px
+ position: relative
+ flex: 1
+ flex-wrap: wrap
background-color: #fff
+ min-height: 20px
box-shadow: 0 1px 2px rgba(0,0,0,.2)
border-radius: 2px
- cursor: pointer
- margin-bottom: 9px
- min-height: 20px
- position: relative
- z-index: 0
+ color: #4d4d4d
overflow: hidden
transition: transform 0.2s,
border-radius 0.2s,
border-left 0.2s
- a
- color: #4d4d4d
-
- &.active-card
- background-color: #f0f0f0
- border-bottom-color: #c2c2c2
-
- .minicard-operation
- display: block
-
- &.draggable-hover-card
- background-color: #f0f0f0
- border-bottom-color: #c2c2c2
+ .is-selected &
+ transform: translateX(11px)
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ z-index: 100
+ box-shadow: -2px 1px 2px rgba(0,0,0,.2)
.minicard-cover
background-position: center
@@ -39,21 +66,6 @@
background-size: auto
background-position: center
- .minicard-details
- padding: 6px 8px 2px
- position: relative
- // z-index: 1
-
- &.is-selected
- transform: translateX(11px)
- border-bottom-right-radius: 0
- border-top-right-radius: 0
- z-index: 100
- box-shadow: -2px 1px 2px rgba(0,0,0,.2)
-
- a.minicard-details
- text-decoration:none
-
.minicard-details-overlay
background: transparent
bottom: 0
@@ -121,23 +133,24 @@
.minicard-members:empty
display: none
- &.ui-sortable-helper
- transform: rotate(4deg)
-
-.badges
- float: left
-
- &:empty
- display: none
-
-textarea.minicard-composer-textarea,
-textarea.minicard-composer-textarea:focus
- background: none
- border: none
- box-shadow: none
- height: auto
- margin-bottom: 4px
- padding: 0
- max-height: 162px
- min-height: 54px
- overflow-y: auto
+ .badges
+ float: left
+
+ &:empty
+ display: none
+
+ &.minicard-composer
+ margin-bottom: 10px
+
+ textarea.minicard-composer-textarea,
+ textarea.minicard-composer-textarea:focus
+ resize: none
+ background: none
+ border: none
+ box-shadow: none
+ height: auto
+ margin: 0
+ padding: 0
+ max-height: 162px
+ min-height: 54px
+ overflow-y: auto
diff --git a/client/components/cards/popups.jade b/client/components/cards/popups.jade
index 0b5aa4c0..0d10c147 100644
--- a/client/components/cards/popups.jade
+++ b/client/components/cards/popups.jade
@@ -1,8 +1,7 @@
template(name="cardMembersPopup")
- //- input.js-search-mem(autofocus placeholder="Search members…" type="text")
- ul.pop-over-member-list.checkable.js-mem-list
+ ul.pop-over-member-list.js-mem-list
each board.members
- li.item.js-member-item(class="{{#if isCardMember}}active{{/if}}")
+ li.item(class="{{#if isCardMember}}active{{/if}}")
a.name.js-select-member(href="#")
+userAvatar(user=user size="small")
span.full-name
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-10 22:06:49 +0000