diff --git a/js/forum/src/components/user-bio.js b/js/forum/src/components/user-bio.js index 09ea34b1e..c72246c14 100644 --- a/js/forum/src/components/user-bio.js +++ b/js/forum/src/components/user-bio.js @@ -14,6 +14,7 @@ export default class UserBio extends Component { super(props); this.editing = m.prop(false); + this.loading = m.prop(false); } view() { @@ -21,16 +22,22 @@ export default class UserBio extends Component { return m('div.user-bio', { className: classList({editable: this.isEditable(), editing: this.editing()}), - onclick: this.edit.bind(this), - config: this.element + onclick: this.edit.bind(this) }, [ this.editing() - ? m('textarea.form-control', {value: user.bio()}) - : m('div.bio-content', [ - user.bioHtml() - ? m.trust(user.bioHtml()) - : (this.props.editable ? m('p', 'Write something about yourself...') : '') - ]) + ? m('textarea.form-control', { + value: user.bio(), + placeholder: 'Write something about yourself...', + rows: 3 + }) + : m('div.bio-content', this.loading() + ? m('p.placeholder', 'Saving...') + : [ + user.bioHtml() + ? m.trust(user.bioHtml()) + : (this.props.editable ? m('p.placeholder', 'Write something about yourself...') : '') + ] + ) ]); } @@ -42,7 +49,6 @@ export default class UserBio extends Component { if (!this.isEditable()) { return; } this.editing(true); - var height = this.$().height(); m.redraw(); @@ -52,13 +58,20 @@ export default class UserBio extends Component { e.preventDefault(); self.save($(this).val()); }; - this.$('textarea').css('height', height).focus().bind('blur', save).bind('keydown', 'return', save); + this.$('textarea').focus().bind('blur', save).bind('keydown', 'return', save); } save(value) { this.editing(false); - this.props.user.save({bio: value}).then(() => m.redraw()); + if (this.props.user.bio() !== value) { + this.loading(true); + this.props.user.save({bio: value}).then(() => { + this.loading(false); + m.redraw(); + }); + } + m.redraw(); } } diff --git a/js/lib/components/text-editor.js b/js/lib/components/text-editor.js index 87e0665d8..5279a7e59 100644 --- a/js/lib/components/text-editor.js +++ b/js/lib/components/text-editor.js @@ -17,7 +17,7 @@ export default class TextEditor extends Component { } view() { - return m('div.text-editor', {config: this.element}, [ + return m('div.text-editor', [ m('textarea.form-control.flexible-height', { config: this.configTextarea.bind(this), oninput: m.withAttr('value', this.oninput.bind(this)), diff --git a/less/forum/user.less b/less/forum/user.less index a1d230265..a0d855d8f 100644 --- a/less/forum/user.less +++ b/less/forum/user.less @@ -107,7 +107,7 @@ cursor: text; &:hover { - border-color: rgba(255, 255, 255, 0.5); + border-color: rgba(255, 255, 255, 0.2); } } @@ -121,6 +121,10 @@ & textarea { padding: 10px; font-size: 14px; + resize: none; + } + & .placeholder { + opacity: 0.3; } } & .user-last-seen {