From 29274542336b82b5a8c5c19f7e5ce476f489ae37 Mon Sep 17 00:00:00 2001
From: jared <jaredrmain@gmail.com>
Date: Tue, 26 Mar 2019 13:40:37 -0400
Subject: [PATCH] #255 - support textarea and update user settings page
---
src/components/emoji-input/emoji-input.js | 3 ++-
src/components/emoji-input/emoji-input.vue | 18 +++++++++++++++++-
.../post_status_form/post_status_form.vue | 2 +-
src/components/user_settings/user_settings.js | 4 +++-
src/components/user_settings/user_settings.vue | 13 +++++++++++--
5 files changed, 34 insertions(+), 6 deletions(-)
diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
index 56414358a4..a5bb6eaf4a 100644
--- a/src/components/emoji-input/emoji-input.js
+++ b/src/components/emoji-input/emoji-input.js
@@ -5,7 +5,8 @@ const EmojiInput = {
props: [
'value',
'placeholder',
- 'type'
+ 'type',
+ 'classname'
],
data () {
return {
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
index 956063055e..568bd080e9 100644
--- a/src/components/emoji-input/emoji-input.vue
+++ b/src/components/emoji-input/emoji-input.vue
@@ -1,7 +1,8 @@
<template>
<div class="emoji-input">
<input
- class="form-control"
+ v-if="type !== 'textarea'"
+ :class="classname"
:type="type"
:value="value"
:placeholder="placeholder"
@@ -15,6 +16,21 @@
@keydown.tab="cycleForward"
@keydown.enter="replaceEmoji"
/>
+ <textarea
+ v-else
+ :class="classname"
+ :value="value"
+ :placeholder="placeholder"
+ @input="onInput"
+ @click="setCaret"
+ @keyup="setCaret"
+ @keydown="onKeydown"
+ @keydown.down="cycleForward"
+ @keydown.up="cycleBackward"
+ @keydown.shift.tab="cycleBackward"
+ @keydown.tab="cycleForward"
+ @keydown.enter="replaceEmoji"
+ ></textarea>
<div class="autocomplete-panel" v-if="suggestions">
<div class="autocomplete-panel-body">
<div
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9d449b749a..b2a1dc5831 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -15,7 +15,7 @@
type="text"
:placeholder="$t('post_status.content_warning')"
v-model="newStatus.spoilerText"
- class="form-cw"
+ classname="form-control"
/>
<textarea
ref="textarea"
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 72e7bb5311..5cb23b97f3 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -7,6 +7,7 @@ import StyleSwitcher from '../style_switcher/style_switcher.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
import BlockCard from '../block_card/block_card.vue'
import MuteCard from '../mute_card/mute_card.vue'
+import EmojiInput from '../emoji-input/emoji-input.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription'
import withList from '../../hocs/with_list/with_list'
@@ -69,7 +70,8 @@ const UserSettings = {
TabSwitcher,
ImageCropper,
BlockList,
- MuteList
+ MuteList,
+ EmojiInput
},
computed: {
user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index c9e68808a8..27c2f47dde 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -22,9 +22,18 @@
<div class="setting-item" >
<h2>{{$t('settings.name_bio')}}</h2>
<p>{{$t('settings.name')}}</p>
- <input class='name-changer' id='username' v-model="newName"></input>
+ <EmojiInput
+ type="text"
+ v-model="newName"
+ id="username"
+ classname="name-changer"
+ />
<p>{{$t('settings.bio')}}</p>
- <textarea class="bio" v-model="newBio"></textarea>
+ <EmojiInput
+ type="textarea"
+ v-model="newBio"
+ classname="bio"
+ />
<p>
<input type="checkbox" v-model="newLocked" id="account-locked">
<label for="account-locked">{{$t('settings.lock_account_description')}}</label>
--
GitLab