From d7245c2d319d0abca4ee41bc258e95ca4662220e Mon Sep 17 00:00:00 2001
From: Sami Kolari <sami_kolari@hotmail.com>
Date: Mon, 14 Mar 2022 13:14:23 +0200
Subject: [PATCH] edit icon and input

---
 src/components/Editor.vue         | 39 ++++++++++++++++++++++-----
 src/components/icons/EditIcon.vue | 45 +++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 src/components/icons/EditIcon.vue

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 4fdca72e9..3d9b5cb13 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -145,15 +145,36 @@
           </transition>
         </div>
         <!-- file tabs (desktop) -->
-        <div v-else :key="activeProjectName">
-          <button
+        <div
+          v-else
+          :key="activeProjectName"
+          class="flex">
+          <div
             v-for="{ fileName, hidden } in activeProject?.files"
             :key="fileName"
-            v-show="!hidden"
+            v-show="!hidden">
+            <div
+              v-if="fileBeingRenamed !== fileName"
+              class="flex stroke small m-2xsmall bg-grey-darkest"
+              :class="activeFileName === fileName ? 'active' : 'primary'"
+              @click="setActiveFile(fileName)">
+              <div>
+                {{ fileName }}
+              </div>
+              <button @click="fileBeingRenamed = fileName; editorStatus.renameNewName = fileName">
+                <edit-icon color="hover-theme" />
+              </button>
+            </div>
+            <input
+              v-else
+              v-model="editorStatus.renameNewName"
+              class="border-white border-thin rounded small m-2xsmall bg-grey-darkest"
+              type="text" />
+          </div>
+          <button
             class="stroke small m-2xsmall bg-grey-darkest"
-            :class="activeFileName === fileName ? 'active' : 'primary'"
             @click="setActiveFile(fileName)">
-            {{ fileName }}
+            +
           </button>
         </div>
       </transition>
@@ -262,6 +283,7 @@ import DocumentIcon from './icons/DocumentIcon.vue'
 import CopyIcon from './icons/CopyIcon.vue'
 import CloseIcon from './icons/CloseIcon.vue'
 import NewTabIcon from './icons/NewTabIcon.vue'
+import EditIcon from './icons/EditIcon.vue'
 let editor = {}
 let codeLens = null
 let models = {}
@@ -285,7 +307,8 @@ export default {
     DocumentIcon,
     CopyIcon,
     CloseIcon,
-    NewTabIcon
+    NewTabIcon,
+    EditIcon
   },
   data: () => ({
     editorStatus: {
@@ -293,7 +316,9 @@ export default {
       running: false,
       runCompleted: false,
       projectModified: false,
-      changingTab: false
+      changingTab: false,
+      fileBeingRenamed: null,
+      renameNewName: ''
     },
     projectsList: null,
     activeProjectName: null, // the short dropdown name from examples index
diff --git a/src/components/icons/EditIcon.vue b/src/components/icons/EditIcon.vue
new file mode 100644
index 000000000..9e9aa464c
--- /dev/null
+++ b/src/components/icons/EditIcon.vue
@@ -0,0 +1,45 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    :width="size"
+    :height="size"
+    :class="{
+      ['fill-white']: color === 'white',
+      ['fill-theme']: color === 'theme',
+      ['fill-white hover-theme']: color === 'hover-theme'
+    }">
+    <path d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'EditIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'white'
+    },
+    size: {
+      type: String,
+      default: '1rem'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .fill-white {
+    fill: var(--color-white);
+  }
+  .fill-theme {
+    fill: var(--color-theme);
+  }
+  .hover-theme {
+    transition: fill 0.2s;
+  }
+  .hover-theme:hover {
+    fill: var(--color-theme);
+  }
+</style>