inputitem playground

src/components/inputItem/inputItem.vue

@@ -5,6 +5,7 @@
     :class="{ playing: isRecording }"
     :style="{ top: `${elementY}px`, left: `${elementX}px` }"
   >
+    AG
 
     <!-- animations for recording and on-standby -->
     <span v-if="isRecording" class="play"></span>
@@ -13,7 +14,7 @@
     </span>
 
     <!-- Show text input on key-down -->
-    <TextInput />
+    <TextInput :position="elementX"/>
 
     <!-- Show suggestions menu on click -->
     <!-- <SuggestionsMenu /> -->
@@ -53,38 +54,20 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 
-.rec-icon {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: red;
-  transform: translate(14px);
-
-  animation-name: rec;
-  animation-duration: 0.5s;
-}
-
-@keyframes rec {
-  from {
-    transform: translate(14px) scale(0.3);
-  }
-  to {
-    transform: translate(14px) scale(1.0);
-  }
-}
-
 .input-item {
   position: absolute;
 
   display: flex;
   align-items: center;
+  justify-content: center;
 
   padding: 0;
 
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
 
-  border-radius: 18px;
+  border: 4px solid #C6C6C6;
+  border-radius: 24px;
 
   z-index: 3;
 
@@ -92,6 +75,8 @@ export default defineComponent({
 
   cursor: pointer;
 
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
+
   .play,
   .pause {
     z-index: 5;
@@ -138,6 +123,26 @@ export default defineComponent({
   }
 }
 
+.rec-icon {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: red;
+  transform: translate(14px);
+
+  animation-name: rec;
+  animation-duration: 0.5s;
+}
+
+@keyframes rec {
+  from {
+    transform: translate(14px) scale(0.3);
+  }
+  to {
+    transform: translate(14px) scale(1.0);
+  }
+}
+
 @keyframes circle1 {
   0%,
   100% {

src/components/inputItem/textInput.vue

@@ -2,6 +2,7 @@
 
   <div
     class="text-input"
+    :class="`text-input-${updateSide}`"
   >
     <input id="textInput" type="text" />
   </div>
@@ -9,22 +10,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref, watch } from "vue";
 
 export default defineComponent({
   name: "TextInput",
 
-  props: {
+  data: {
 
     // Where is avatar?
-    left: Boolean
+    position: Number
 
   },
 
-  setup(props) {
+  setup(data) {
+
+    const side = ref("")
+    side.value = "left"
+    
+    // Watch the position of parent.
+    // watch(data.position, (position, prevPosition) => {
+    //   console.log("position moved")
+    // })
 
     return {
-
+      side
     }
   }
 })