From fb0cf6454982a371e68b22e29b0374507425242d Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Fri, 8 Feb 2019 10:49:14 -0500
Subject: #255 - make AutoCompleteInput component

---
 .../autocomplete_input/autocomplete_input.vue      | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/autocomplete_input/autocomplete_input.vue

(limited to 'src/components/autocomplete_input/autocomplete_input.vue')

diff --git a/src/components/autocomplete_input/autocomplete_input.vue b/src/components/autocomplete_input/autocomplete_input.vue
new file mode 100644
index 00000000..1c049891
--- /dev/null
+++ b/src/components/autocomplete_input/autocomplete_input.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <textarea
+      ref="textarea"
+      :value="text"
+      @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" 
+      @click="setCaret"
+      @keyup="setCaret" :placeholder="$t('post_status.default')" rows="1" :class="classObj"
+      @keydown.down="cycleForward"
+      @keydown.up="cycleBackward"
+      @keydown.shift.tab="cycleBackward"
+      @keydown.tab="cycleForward"
+      @keydown.enter="replaceCandidate"
+      @drop="drop && drop()"
+      @dragover.prevent="dragoverPrevent && dragoverPrevent()"
+      @paste="paste && paste()"
+      @keydown.meta.enter="keydownMetaEnter && keydownMetaEnter()"
+      @keyup.ctrl.enter="keyupCtrlEnter && keyupCtrlEnter()">
+    </textarea>
+    <div style="position:relative;" v-if="candidates">
+      <div class="autocomplete-panel">
+        <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
+          <div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
+            <span v-if="candidate.img"><img :src="candidate.img"></img></span>
+            <span v-else>{{candidate.utf}}</span>
+            <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./autocomplete_input.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 128dcc637edb5550168423941171f5b567365b7c Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Fri, 8 Feb 2019 11:01:12 -0500
Subject: make name field auto-complete

---
 .../autocomplete_input/autocomplete_input.vue         | 19 +++++++++++++++++++
 src/components/user_settings/user_settings.vue        |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

(limited to 'src/components/autocomplete_input/autocomplete_input.vue')

diff --git a/src/components/autocomplete_input/autocomplete_input.vue b/src/components/autocomplete_input/autocomplete_input.vue
index 1c049891..d3bda597 100644
--- a/src/components/autocomplete_input/autocomplete_input.vue
+++ b/src/components/autocomplete_input/autocomplete_input.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <textarea
+      v-if="multiline"
       ref="textarea"
       :value="text"
       @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" 
@@ -17,6 +18,24 @@
       @keydown.meta.enter="keydownMetaEnter && keydownMetaEnter()"
       @keyup.ctrl.enter="keyupCtrlEnter && keyupCtrlEnter()">
     </textarea>
+    <input
+      v-else
+      ref="textarea"
+      :value="text"
+      :id="id"
+      @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" 
+      @click="setCaret"
+      @keyup="setCaret" :placeholder="placeholder" rows="1" :class="classObj"
+      @keydown.down="cycleForward"
+      @keydown.up="cycleBackward"
+      @keydown.shift.tab="cycleBackward"
+      @keydown.tab="cycleForward"
+      @keydown.enter="replaceCandidate"
+      @drop="drop && drop()"
+      @dragover.prevent="dragoverPrevent && dragoverPrevent()"
+      @paste="paste && paste()"
+      @keydown.meta.enter="keydownMetaEnter && keydownMetaEnter()"
+      @keyup.ctrl.enter="keyupCtrlEnter && keyupCtrlEnter()"/>
     <div style="position:relative;" v-if="candidates">
       <div class="autocomplete-panel">
         <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index c5ee672f..7f81af1b 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -9,9 +9,9 @@
           <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>
+            <auto-complete-input :classObj="{ 'name-changer': true }" :id="'username'" v-model="newName"/>
             <p>{{$t('settings.bio')}}</p>
-            <auto-complete-input :classObj="{ bio: true }" v-model="newBio"/>
+            <auto-complete-input :classObj="{ bio: true }" v-model="newBio" :multiline="true"/>
             <p>
               <input type="checkbox" v-model="newLocked" id="account-locked">
               <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
-- 
cgit v1.2.3-70-g09d2


From 17c70fc0ef380d1faa360aa5b91791fd44d6c419 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Fri, 8 Feb 2019 11:02:28 -0500
Subject: add id & placeholder props to AutoCompleteInput component

---
 src/components/autocomplete_input/autocomplete_input.js  | 3 +++
 src/components/autocomplete_input/autocomplete_input.vue | 3 ++-
 src/components/post_status_form/post_status_form.vue     | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/components/autocomplete_input/autocomplete_input.vue')

diff --git a/src/components/autocomplete_input/autocomplete_input.js b/src/components/autocomplete_input/autocomplete_input.js
index 51c1f5d9..0f1a510c 100644
--- a/src/components/autocomplete_input/autocomplete_input.js
+++ b/src/components/autocomplete_input/autocomplete_input.js
@@ -3,9 +3,12 @@ import { take, filter, map } from 'lodash'
 
 const AutoCompleteInput = {
   props: [
+    'id',
     'classObj',
     'value',
+    'placeholder',
     'autoResize',
+    'multiline',
     'drop',
     'dragoverPrevent',
     'paste',
diff --git a/src/components/autocomplete_input/autocomplete_input.vue b/src/components/autocomplete_input/autocomplete_input.vue
index d3bda597..309f2202 100644
--- a/src/components/autocomplete_input/autocomplete_input.vue
+++ b/src/components/autocomplete_input/autocomplete_input.vue
@@ -4,9 +4,10 @@
       v-if="multiline"
       ref="textarea"
       :value="text"
+      :id="id"
       @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" 
       @click="setCaret"
-      @keyup="setCaret" :placeholder="$t('post_status.default')" rows="1" :class="classObj"
+      @keyup="setCaret" :placeholder="placeholder" rows="1" :class="classObj"
       @keydown.down="cycleForward"
       @keydown.up="cycleBackward"
       @keydown.shift.tab="cycleBackward"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ac5f5566..18c2d2b2 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -18,7 +18,9 @@
         class="form-cw">
       <auto-complete-input v-model="newStatus.status"
         :classObj="{ 'form-control': true }"
+        :placeholder="$t('post_status.default')"
         :autoResize="true"
+        :multiline="true"
         :drop="fileDrop"
         :dragoverPrevent="fileDrag"
         :paste="paste"
-- 
cgit v1.2.3-70-g09d2


From dd8531f9c908e1aefd3f5577024ba86e20b26447 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Fri, 8 Feb 2019 11:06:27 -0500
Subject: move styles for AutoCompleteInput

---
 .../autocomplete_input/autocomplete_input.vue      | 51 ++++++++++++++++++++++
 .../post_status_form/post_status_form.vue          | 47 --------------------
 2 files changed, 51 insertions(+), 47 deletions(-)

(limited to 'src/components/autocomplete_input/autocomplete_input.vue')

diff --git a/src/components/autocomplete_input/autocomplete_input.vue b/src/components/autocomplete_input/autocomplete_input.vue
index 309f2202..44324e23 100644
--- a/src/components/autocomplete_input/autocomplete_input.vue
+++ b/src/components/autocomplete_input/autocomplete_input.vue
@@ -52,3 +52,54 @@
 </template>
 
 <script src="./autocomplete_input.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.autocomplete-panel {
+  margin: 0 0.5em 0 0.5em;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  position: absolute;
+  z-index: 1;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  // this doesn't match original but i don't care, making it uniform.
+  box-shadow: var(--popupShadow);
+  min-width: 75%;
+  background: $fallback--bg;
+  background: var(--bg, $fallback--bg);
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
+}
+
+.autocomplete {
+  cursor: pointer;
+  padding: 0.2em 0.4em 0.2em 0.4em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+  display: flex;
+
+  img {
+    width: 24px;
+    height: 24px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    object-fit: contain;
+  }
+
+  span {
+    line-height: 24px;
+    margin: 0 0.1em 0 0.2em;
+  }
+
+  small {
+    margin-left: .5em;
+    color: $fallback--faint;
+    color: var(--faint, $fallback--faint);
+  }
+
+  &.highlighted {
+    background-color: $fallback--fg;
+    background-color: var(--lightBg, $fallback--fg);
+  }
+}
+</style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 18c2d2b2..4c3eb159 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -233,52 +233,5 @@
     cursor: pointer;
     z-index: 4;
   }
-
-  .autocomplete-panel {
-    margin: 0 0.5em 0 0.5em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    position: absolute;
-    z-index: 1;
-    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-    // this doesn't match original but i don't care, making it uniform.
-    box-shadow: var(--popupShadow);
-    min-width: 75%;
-    background: $fallback--bg;
-    background: var(--bg, $fallback--bg);
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-  }
-
-  .autocomplete {
-    cursor: pointer;
-    padding: 0.2em 0.4em 0.2em 0.4em;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-    display: flex;
-
-    img {
-      width: 24px;
-      height: 24px;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
-      object-fit: contain;
-    }
-
-    span {
-      line-height: 24px;
-      margin: 0 0.1em 0 0.2em;
-    }
-
-    small {
-      margin-left: .5em;
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
-    }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--lightBg, $fallback--fg);
-    }
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From e8dc019afd31981295fbf79637727fb4ce34a072 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Fri, 8 Feb 2019 11:10:47 -0500
Subject: remove rows attribute from input

---
 src/components/autocomplete_input/autocomplete_input.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

(limited to 'src/components/autocomplete_input/autocomplete_input.vue')

diff --git a/src/components/autocomplete_input/autocomplete_input.vue b/src/components/autocomplete_input/autocomplete_input.vue
index 44324e23..5f285af0 100644
--- a/src/components/autocomplete_input/autocomplete_input.vue
+++ b/src/components/autocomplete_input/autocomplete_input.vue
@@ -3,11 +3,11 @@
     <textarea
       v-if="multiline"
       ref="textarea"
-      :value="text"
-      :id="id"
+      rows="1"
+      :value="text" :class="classObj" :id="id" :placeholder="placeholder"
       @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" 
       @click="setCaret"
-      @keyup="setCaret" :placeholder="placeholder" rows="1" :class="classObj"
+      @keyup="setCaret"
       @keydown.down="cycleForward"
       @keydown.up="cycleBackward"
       @keydown.shift.tab="cycleBackward"
@@ -22,11 +22,10 @@
     <input
       v-else
       ref="textarea"
-      :value="text"
-      :id="id"
+      :value="text" :class="classObj" :id="id" :placeholder="placeholder"
       @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" 
       @click="setCaret"
-      @keyup="setCaret" :placeholder="placeholder" rows="1" :class="classObj"
+      @keyup="setCaret"
       @keydown.down="cycleForward"
       @keydown.up="cycleBackward"
       @keydown.shift.tab="cycleBackward"
-- 
cgit v1.2.3-70-g09d2


From 9f83aee1ed6d4a56150d58e6af8573718bac6529 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Fri, 8 Feb 2019 11:54:12 -0500
Subject: fix auto-complete field not taking the whole parent width in flex

---
 src/components/autocomplete_input/autocomplete_input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/autocomplete_input/autocomplete_input.vue')

diff --git a/src/components/autocomplete_input/autocomplete_input.vue b/src/components/autocomplete_input/autocomplete_input.vue
index 5f285af0..56233535 100644
--- a/src/components/autocomplete_input/autocomplete_input.vue
+++ b/src/components/autocomplete_input/autocomplete_input.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="display: flex; flex-direction: column;">
     <textarea
       v-if="multiline"
       ref="textarea"
-- 
cgit v1.2.3-70-g09d2