feat(FileSelector): edit file name in place and auto resize input on …

…typing
vuejs · Dec 3, 2023 · 4c27b9d · 4c27b9d
1 parent c95ae1a
commit 4c27b9d
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
@@ -132,7 +132,9 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="(pending === true && i === files.length - 1) || pending === file"
         class="file pending"
+        :class="{ active: store.state.activeFile.filename === file }"
       >
+        <span class="file pending">{{ pendingFilename }}</span>
         <input
           v-model="pendingFilename"
           spellcheck="false"
@@ -196,6 +198,7 @@ function horizontalScroll(e: WheelEvent) {
 }
 
 .file {
+  position: relative;
   display: inline-block;
   font-size: 13px;
   font-family: var(--font-code);
@@ -213,18 +216,20 @@ function horizontalScroll(e: WheelEvent) {
   padding: 8px 10px 6px;
   line-height: 20px;
 }
+.file.pending span {
+  min-width: 50px;
+  padding-right: 32px;
+}
 .file.pending input {
-  width: 90px;
-  height: 30px;
-  line-height: 30px;
-  outline: none;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 0 0 0 10px;
-  margin-top: 2px;
-  margin-left: 6px;
+  position: absolute;
+  inset: 8px 7px 6px;
+  font-size: 13px;
   font-family: var(--font-code);
-  font-size: 12px;
+  line-height: 20px;
+  outline: none;
+  border: none;
+  padding: 0 3px;
+  min-width: 1px;
 }
 .file .remove {
   display: inline-block;