From 216887490e3be0ba141484afc11d37475e91562d Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Thu, 11 Jun 2015 12:35:08 +0200 Subject: Fix card title edition Closes #184 --- client/components/activities/comments.styl | 46 ++++++++++++++++++++++++++++++ client/components/cards/details.jade | 16 +++++------ client/components/cards/details.styl | 11 ++++++- client/components/cards/labels.styl | 3 -- client/components/forms/forms.styl | 3 ++ client/components/forms/inlinedform.jade | 2 +- client/components/lists/header.jade | 2 +- client/components/users/userAvatar.styl | 1 - 8 files changed, 69 insertions(+), 15 deletions(-) create mode 100644 client/components/activities/comments.styl (limited to 'client/components') diff --git a/client/components/activities/comments.styl b/client/components/activities/comments.styl new file mode 100644 index 00000000..f372e5ef --- /dev/null +++ b/client/components/activities/comments.styl @@ -0,0 +1,46 @@ +.new-comment + position: relative + margin: 0 0 20px 38px + + .member + opacity: .7 + position: absolute + top: 1px + left: -38px + + &.focus + .member + opacity: 1 + + .helper + display: inline-block + + .new-comment-input + min-height: 108px + color: #4d4d4d + cursor: auto + overflow: hidden + word-wrap: break-word + + .too-long + margin-top: 8px + +.new-comment-input + background-color: #fff + border: 0 + box-shadow: 0 1px 2px rgba(0, 0, 0, .23) + color: #8c8c8c + height: 36px + margin: 4px 4px 6px 0 + padding: 9px 11px + width: 100% + + &:hover, + &:focus + background-color: #fff + box-shadow: 0 1px 3px rgba(0, 0, 0, .33) + border: 0 + cursor: pointer + + &:focus + cursor: auto diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade index dc3d3dc3..be166ad8 100644 --- a/client/components/cards/details.jade +++ b/client/components/cards/details.jade @@ -5,7 +5,7 @@ template(name="cardDetails") .card-details-header +inlinedForm(classNames="js-card-details-title") - input.field.single-line(type="text" value=title autofocus) + input.full-line(type="text" value=title autofocus) .edit-controls.clearfix button.primary.confirm(type="submit") {{_ 'save'}} a.fa.fa-times-thin.js-close-inlined-form @@ -25,23 +25,23 @@ template(name="cardDetails") .card-details-items .card-details-item.card-details-item-members - h3 {{_ 'members'}} + h3.card-details-item-title {{_ 'members'}} each members +userAvatar(userId=this cardId=../_id) a.member.add-member.card-details-item-add-button.js-add-members i.fa.fa-plus .card-details-item.card-details-item-labels - h3 {{_ 'labels'}} - .js-add-labels + h3.card-details-item-title {{_ 'labels'}} + a.js-add-labels each labels span.card-label(class="card-label-{{color}}" title=name)= name - a.card-label.add-label.js-add-labels - i.fa.fa-plus + a.card-label.add-label.js-add-labels + i.fa.fa-plus //- XXX We should use "editable" to avoide repetiting ourselves if currentUser.isBoardMember - h3 Description + h3.card-details-item-title Description +inlinedForm(classNames="js-card-description") +editor(autofocus=true) = description @@ -56,7 +56,7 @@ template(name="cardDetails") else | {{_ 'edit'}} else if description - h3 Description + h3.card-details-item-title Description +viewer = description if attachments.count diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl index 4da8a371..94c75cf5 100644 --- a/client/components/cards/details.styl +++ b/client/components/cards/details.styl @@ -45,6 +45,10 @@ margin: 3px 0 padding: 0 + form.inlined-form + margin-top: 5px + margin-bottom: 10px + .card-details-list font-size: 0.85em margin-bottom: 3px @@ -58,6 +62,7 @@ border-radius: 3px padding: 0px 5px + .card-details-items display: flex margin: 15px 0 @@ -65,10 +70,14 @@ .card-details-item flex-grow: 1 - h3 + .card-details-item-title font-size: 14px color: darken(white, 45%) + .card-label + padding-top: 5px + padding-bottom: 5px + .new-comment position: relative margin: 0 0 20px 38px diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl index c93ecd12..39f9844f 100644 --- a/client/components/cards/labels.styl +++ b/client/components/cards/labels.styl @@ -2,7 +2,6 @@ // XXX Use .board-widget-labels as a flexbox container .card-label - background-color: #b3b3b3 border-radius: 4px color: white display: inline-block @@ -10,7 +9,6 @@ font-size: 13px margin-right: 4px padding: 3px 8px - position:relative max-width: 100% min-width: 8px overflow: ellipsis @@ -26,7 +24,6 @@ &.add-label box-shadow: 0 0 0 2px darken(white, 25%) inset - background: darken(white, 5%) .card-label-green background-color: #3cb500 diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl index f13a7e79..a71aee81 100644 --- a/client/components/forms/forms.styl +++ b/client/components/forms/forms.styl @@ -46,6 +46,9 @@ input[type="email"] height: 18px width: 200px + &.full-line + width: 100% + input[type="email"]:invalid box-shadow: none diff --git a/client/components/forms/inlinedform.jade b/client/components/forms/inlinedform.jade index 40e1c35c..ac58552a 100644 --- a/client/components/forms/inlinedform.jade +++ b/client/components/forms/inlinedform.jade @@ -1,6 +1,6 @@ template(name='inlinedForm') if isOpen.get - form.js-inlined-form(id=id class=classNames) + form.inlined-form.js-inlined-form(id=id class=classNames) +Template.contentBlock else +Template.elseBlock diff --git a/client/components/lists/header.jade b/client/components/lists/header.jade index e319aa93..288cfd57 100644 --- a/client/components/lists/header.jade +++ b/client/components/lists/header.jade @@ -10,7 +10,7 @@ template(name="listHeader") template(name="editListTitleForm") .list-composer - input.field.single-line(type="text" value=title autofocus) + input.full-line(type="text" value=title autofocus) .edit-controls.clearfix button.primary.confirm(type="submit") {{_ 'save'}} a.fa.fa-times-thin.js-close-inlined-form diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl index ed583288..010311b6 100644 --- a/client/components/users/userAvatar.styl +++ b/client/components/users/userAvatar.styl @@ -95,7 +95,6 @@ avatar-radius = 50% align-items: center justify-content: center box-shadow: 0 0 0 2px darken(white, 25%) inset - background: darken(white, 5%) .atMention background: #dbdbdb -- cgit v1.2.3-1-g7c22