feat: adjust styles for new prompt input field and add auto-focus fun…

…ctionality Signed-off-by: DingChil <xu.dingchao@gmail.com>
webpilot-ai · Nov 2, 2023 · a72db27 · a72db27
1 parent c23970d
commit a72db27
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 30 deletions.
diff --git a/src/components/PromptEditor.vue b/src/components/PromptEditor.vue
@@ -12,23 +12,29 @@
         ref="textareaRef"
         v-model="command"
         :class="$style.content__textarea"
-        :placeholder="prompt.command"
+        :placeholder="prompt.command || $gettext('Set a prompt here')"
       />
       <article :class="$style.content__back">
         <InteractiveIcon type="previous" @click="handleHideEditor" />
       </article>
     </section>
     <section :class="$style.container__footer">
       <article :class="$style['form-name']">
-        <input
+        <!-- <input
           v-model="title"
           :class="[$style['form-name__txt'], {[$style['form-name__txt--focus']]: nameFocused}]"
-          :placeholder="prompt.title || 'Add Name'"
+          :placeholder="prompt.title || $gettext('Add name')"
           type="text"
           @blur="onNameInputBlur"
           @focus="onNameInputFocus"
+        /> -->
+        <input
+          v-model="title"
+          :class="$style['form-name__txt']"
+          :placeholder="prompt.title || $gettext('Add prompt name')"
+          type="text"
         />
-        <InteractiveIcon :hover-state="title === '' ? 1 : 2" :size="18" type="pencil" />
+        <!-- <InteractiveIcon :hover-state="title === '' ? 1 : 2" :size="18" type="pencil" /> -->
       </article>
       <InteractiveIcon
         v-show="!disableDelete"
@@ -76,7 +82,7 @@ const props = defineProps({
 
 const title = ref(props.prompt.title)
 const command = ref(props.prompt.command)
-const nameFocused = ref(false)
+// const nameFocused = ref(false)
 const textareaRef = ref(null)
 
 const autoResize = () => {
@@ -87,6 +93,7 @@ const autoResize = () => {
 }
 
 onMounted(async () => {
+  textareaRef.value.focus()
   await nextTick()
   autoResize()
 })
@@ -123,12 +130,12 @@ watchEffect(() => {
   command.value = props.prompt.command
 })
 
-const onNameInputFocus = () => {
-  nameFocused.value = true
-}
-const onNameInputBlur = () => {
-  nameFocused.value = false
-}
+// const onNameInputFocus = () => {
+//   nameFocused.value = true
+// }
+// const onNameInputBlur = () => {
+//   nameFocused.value = false
+// }
 </script>
 
 <style lang="scss" module>
@@ -170,12 +177,8 @@ const onNameInputBlur = () => {
   max-height: 196px;
   padding: 0 42px 0 0;
   overflow-y: auto;
-  color: var(--webpilot-theme-main-text-color, #292929);
   font-size: 14px !important;
   line-height: 20px !important;
-
-  // flex: 1;
-  background-color: var(--webpilot-theme-content-background-color, #fff);
   border: none;
   outline: none;
   appearance: none;
@@ -186,8 +189,6 @@ const onNameInputBlur = () => {
   position: absolute;
   right: 12px;
   bottom: 6px;
-
-  // cursor: pointer;
 }
 
 .content__back {
@@ -223,21 +224,28 @@ const onNameInputBlur = () => {
 
 .form-name__txt {
   width: 70px;
-  padding: 0 !important;
-  color: var(--webpilot-theme-main-text-color, #292929);
-  font-weight: 600 !important;
-  font-size: 12px !important;
-
-  // line-height: 20px;
-  background-color: var(--webpilot-theme-content-background-color, #fff);
-  border: 0 !important;
+  padding: 0;
+  font-weight: 600;
+  font-size: 12px;
+  border: 0;
   outline: none;
 }
 
-.form-name__txt--focus {
-  color: #4f5aff;
+.content__textarea,
+.form-name__txt {
+  color: var(--webpilot-theme-main-text-color, #292929);
+  font-weight: 400;
+  background-color: var(--webpilot-theme-content-background-color, #fff);
+
+  &::placeholder {
+    color: #929497;
+  }
 }
 
+// .form-name__txt--focus {
+//   color: #4f5aff;
+// }
+
 .form-button:last-of-type {
   margin-left: 40px;
 }

diff --git a/src/components/PromptInput.vue b/src/components/PromptInput.vue
@@ -10,8 +10,8 @@
         :placeholder="placeholderText"
         type="text"
         @focus="handleFocus"
-        @keydown.enter="handleSend"
       />
+      <!-- @keydown.enter="handleSend" -->
       <InteractiveIcon
         v-if="showSavePrompt"
         :class="$style['container__collect']"

diff --git a/src/csui/Index/ThePopupBox/ThePopupBox.vue b/src/csui/Index/ThePopupBox/ThePopupBox.vue
@@ -130,7 +130,6 @@ useMagicKeys({
     // when the index equals the array length, it indicates that the create prompt button is selected
     if (e.key === 'ArrowUp' || e.key === 'ArrowDown') e.preventDefault()
     if (e.type !== 'keyup') return
-    console.log(`%c${e.key}`, 'color:dodgerblue', oldIndex)
     if (e.key === 'ArrowUp') {
       const newIndex = oldIndex - 1 < 0 ? length : oldIndex - 1
       chooseIndex.value = newIndex
@@ -147,7 +146,6 @@ useMagicKeys({
       else handleChangePrompt({index: oldIndex, prompt: currentPromptsList.value[oldIndex]})
       e.preventDefault()
     }
-    console.log(`%c${length}`, 'color:deepskyblue', chooseIndex.value)
   },
 })