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 - client/lib/escapeActions.js | 3 +- client/styles/main.styl | 83 ------------------------------ 10 files changed, 71 insertions(+), 99 deletions(-) create mode 100644 client/components/activities/comments.styl (limited to 'client') 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 diff --git a/client/lib/escapeActions.js b/client/lib/escapeActions.js index 3759f441..5d8a1f25 100644 --- a/client/lib/escapeActions.js +++ b/client/lib/escapeActions.js @@ -151,7 +151,8 @@ Mousetrap.bindGlobal('esc', function() { // close the popup). We don't execute any action if the user has clicked on a // link or a button. $(document).on('click', function(evt) { - if (evt.which === 1 && $(evt.target).closest('a,button').length === 0) { + if (evt.which === 1 && + $(evt.target).closest('a,button,.is-editable').length === 0) { EscapeActions.clickExecute(evt, 'detailsPane'); } }); diff --git a/client/styles/main.styl b/client/styles/main.styl index e6849852..3509d5c9 100644 --- a/client/styles/main.styl +++ b/client/styles/main.styl @@ -137,42 +137,6 @@ dl, dt dd margin: 0 0 16px 24px -.edit - display: none - position: relative - -.editable .current - cursor: pointer - -.editable.editing - cursor: auto - -.edits-warning, .edits-error - display: none - clear: both - -.editing .edit - display: block - float: left - padding-bottom: 9px - z-index: 100 - width: 100% - -.editing .edits-warning - display: none!important - -.editing .edit .field, -.editing .edit .field:active - background: rgba(0, 0, 0, .03) - box-shadow: inset 0 1px 6px rgba(0, 0, 0, .1) - border-color: rgba(0, 0, 0, .15) - margin-bottom: 4px - -.edit-heavy .field - font-size: 15px - font-weight: 700 - line-height: 18px - .ui-draggable-dragging z-index: 200 @@ -212,53 +176,6 @@ dd font-size: 25px color: white -.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 - .atMention background: #dbdbdb border-radius: 3px -- cgit v1.2.3-1-g7c22