summaryrefslogtreecommitdiffstats
path: root/client/components
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-06-11 12:35:08 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-06-11 12:35:08 +0200
commit216887490e3be0ba141484afc11d37475e91562d (patch)
treeb1ba81dc991f06966713864525f6f993d3fa9e90 /client/components
parent765b0168eaaeb28550dfb698de0b6cec9f9c2113 (diff)
downloadwekan-216887490e3be0ba141484afc11d37475e91562d.tar.gz
wekan-216887490e3be0ba141484afc11d37475e91562d.tar.bz2
wekan-216887490e3be0ba141484afc11d37475e91562d.zip
Fix card title edition
Closes #184
Diffstat (limited to 'client/components')
-rw-r--r--client/components/activities/comments.styl46
-rw-r--r--client/components/cards/details.jade16
-rw-r--r--client/components/cards/details.styl11
-rw-r--r--client/components/cards/labels.styl3
-rw-r--r--client/components/forms/forms.styl3
-rw-r--r--client/components/forms/inlinedform.jade2
-rw-r--r--client/components/lists/header.jade2
-rw-r--r--client/components/users/userAvatar.styl1
8 files changed, 69 insertions, 15 deletions
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