From ea4fcae1b96499ee0c7c114f0974cfbe9fa9bc30 Mon Sep 17 00:00:00 2001
From: Sipachev Igor <sipachev@sveak.com>
Date: Thu, 10 Mar 2022 13:08:29 +0700
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=BD=D0=B5=D1=81=20=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B1=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup/src/components/mocks-tab/main.vue       |  4 ++
 popup/src/components/mocks-tab/script.ts      | 14 ++++
 popup/src/components/mocks-tab/style.scss     | 65 +++++++++++++++++++
 popup/src/components/mocks-tab/template.html  | 10 +++
 popup/src/components/person-tab/template.html |  2 +-
 popup/src/components/script.ts                |  4 +-
 popup/src/components/template.html            |  9 +--
 7 files changed, 98 insertions(+), 10 deletions(-)
 create mode 100644 popup/src/components/mocks-tab/main.vue
 create mode 100644 popup/src/components/mocks-tab/script.ts
 create mode 100644 popup/src/components/mocks-tab/style.scss
 create mode 100644 popup/src/components/mocks-tab/template.html

diff --git a/popup/src/components/mocks-tab/main.vue b/popup/src/components/mocks-tab/main.vue
new file mode 100644
index 0000000..bfbb7d7
--- /dev/null
+++ b/popup/src/components/mocks-tab/main.vue
@@ -0,0 +1,4 @@
+<template src="./template.html"></template>
+<script lang="ts" src="./script.ts"></script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss" src="./style.scss"></style>
diff --git a/popup/src/components/mocks-tab/script.ts b/popup/src/components/mocks-tab/script.ts
new file mode 100644
index 0000000..3d9c8fe
--- /dev/null
+++ b/popup/src/components/mocks-tab/script.ts
@@ -0,0 +1,14 @@
+import { Component, Vue } from 'vue-property-decorator'
+import VueClipboard from 'vue-clipboard2'
+import Mocks from '@/components/mocks/main.vue'
+
+Vue.use(VueClipboard)
+
+@Component({
+  components: {
+    Mocks
+  }
+})
+export default class MocksTab extends Vue {
+  personalId = ''
+}
diff --git a/popup/src/components/mocks-tab/style.scss b/popup/src/components/mocks-tab/style.scss
new file mode 100644
index 0000000..fe25a0b
--- /dev/null
+++ b/popup/src/components/mocks-tab/style.scss
@@ -0,0 +1,65 @@
+.container {
+  max-width: 400px;
+  min-width: 400px;
+  border: solid 2px gray;
+
+  .wrapper {
+    padding: 10px;
+
+    .tab-panel {
+      display: flex;
+
+      &__item {
+        flex-grow: 1;
+        padding: 5px;
+        cursor: pointer;
+        border-bottom: solid 2px #cae5fa;
+
+        &_active {
+          border-bottom: solid 2px #298df8;
+        }
+
+        &:hover {
+          border-bottom: solid 2px #298df8;
+        }
+      }
+    }
+
+    .tab-page {
+      padding-top: 10px;
+
+      &__item {
+        display: none;
+
+
+        &_show {
+          display: block;
+        }
+
+        .form-row {
+          display: flex;
+          margin-bottom: 5px;
+
+          &__item {
+            flex-grow: 1;
+            margin-right: 10px;
+
+            &-input {
+              width: 100%;
+            }
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    .memory-panel {
+      text-align: left;
+      padding: 5px;
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/popup/src/components/mocks-tab/template.html b/popup/src/components/mocks-tab/template.html
new file mode 100644
index 0000000..fab94b3
--- /dev/null
+++ b/popup/src/components/mocks-tab/template.html
@@ -0,0 +1,10 @@
+<div>
+    <label>
+        Personal id
+        <input type="text" v-model="personalId"/>
+    </label>
+    <div v-if="personalId">
+        <hr />
+        <Mocks :personalId="personalId"></Mocks>
+    </div>
+</div>
diff --git a/popup/src/components/person-tab/template.html b/popup/src/components/person-tab/template.html
index c46f160..d1bfb17 100644
--- a/popup/src/components/person-tab/template.html
+++ b/popup/src/components/person-tab/template.html
@@ -1,4 +1,4 @@
-<div class="tab-page__item tab-page__item_show">
+<div>
     <div class="form-row">
         <div class="form-row__item">
             <input title="Day" class="form-row__item-input" type="text" v-model="person.birthday.day" placeholder="Day">
diff --git a/popup/src/components/script.ts b/popup/src/components/script.ts
index 35188c9..1c6434f 100644
--- a/popup/src/components/script.ts
+++ b/popup/src/components/script.ts
@@ -7,13 +7,15 @@ import { Action } from '@/classes/Enum/Action'
 import notificationCleaner from '@/classes/Service/NotificationCleaner'
 import Mocks from '@/components/mocks/main.vue'
 import PersonTab from '@/components/person-tab/main.vue'
+import MocksTab from '@/components/mocks-tab/main.vue'
 
 Vue.use(VueClipboard)
 
 @Component({
   components: {
     Mocks,
-    PersonTab
+    PersonTab,
+    MocksTab
   }
 })
 export default class HelloWorld extends Vue {
diff --git a/popup/src/components/template.html b/popup/src/components/template.html
index 7d55a0f..aacc887 100644
--- a/popup/src/components/template.html
+++ b/popup/src/components/template.html
@@ -16,14 +16,7 @@
                 <PersonTab/>
             </div>
             <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}">
-                <label>
-                    Personal id
-                    <input type="text" v-model="personalId"/>
-                </label>
-                <div v-if="personalId">
-                    <hr />
-                    <Mocks :personalId="personalId"></Mocks>
-                </div>
+                <MocksTab/>
             </div>
             <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
                 <div class="form-row">