From 892469bedb5a93d37f8d3d774bdb3d918589e234 Mon Sep 17 00:00:00 2001
From: Minzkraut <minzkraut@gmail.com>
Date: Thu, 17 Mar 2022 01:44:56 +0100
Subject: [PATCH] Split app into components Moved each component and its styles
 into their own files

---
 src/App.vue                 |   3 +-
 src/components/Commands.vue |  44 +++++++++++++++
 src/components/Designer.vue | 105 +++---------------------------------
 src/components/Preview.vue  |  40 ++++++++++++++
 src/styles/commands.scss    |  27 ++++++++++
 src/styles/generic.scss     |  34 ++++++++++++
 src/styles/specifics.scss   |  28 ----------
 7 files changed, 154 insertions(+), 127 deletions(-)
 create mode 100644 src/components/Commands.vue
 create mode 100644 src/components/Preview.vue
 create mode 100644 src/styles/commands.scss
 create mode 100644 src/styles/generic.scss

diff --git a/src/App.vue b/src/App.vue
index e0086eb..fdcb379 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,7 +59,8 @@ export default {
   }),
 };
 </script>
-<style>
+<style lang="scss">
+@import './styles/generic.scss';
 
 a, footer.footer a {
   margin: 0 5px;
diff --git a/src/components/Commands.vue b/src/components/Commands.vue
new file mode 100644
index 0000000..4388e17
--- /dev/null
+++ b/src/components/Commands.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="flex-item" id="commands">
+        <h3>Commands</h3>
+        <div class="command">
+          Background
+          <div class="code">/editprofile background {{backgroundColor.substring(1,7)}}</div>  
+          <input type="hidden" id="bg" :value="'/editprofile background '+backgroundColor.substring(1,7)">
+          <v-btn @click.stop.prevent="copyColor('bg')">Copy</v-btn>
+        </div>
+        <div class="command">
+          Panels
+          <div class="code">/editprofile theme {{panelColor.substring(1,7)}}</div>  
+          <input type="hidden" id="panel" :value="'/editprofile theme ' + panelColor.substring(1,7)">
+          <v-btn @click.stop.prevent="copyColor('panel')">Copy</v-btn>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['panelColor', 'backgroundColor'],
+    methods: {
+        copyColor (qs) {
+          let testingCodeToCopy = document.querySelector('#'+qs)
+          testingCodeToCopy.setAttribute('type', 'text')
+          testingCodeToCopy.select()
+
+          try {
+            document.execCommand('copy');
+          } catch (err) {
+            console.log("Failed to copy!");
+          }
+
+          /* unselect the range */
+          testingCodeToCopy.setAttribute('type', 'hidden')
+          window.getSelection().removeAllRanges()
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+    @import '../styles/commands.scss';
+</style>
\ No newline at end of file
diff --git a/src/components/Designer.vue b/src/components/Designer.vue
index 7415866..cbe0690 100644
--- a/src/components/Designer.vue
+++ b/src/components/Designer.vue
@@ -9,34 +9,7 @@
       </p>
     </div>
     <div class="flex-container"> <!-- ToDo: fix container -->
-      <div id="preview" class="flex-item">
-        <h3>Preview</h3>
-        <div class="profile-container">
-          <div class="profile" :style="{backgroundColor: backgroundColor}">
-            <svg class="overlay-panels" width="100%" height="100%" viewBox="0 0 800 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-                  <g>
-                      <g id="TopBar" transform="matrix(7.20721,0,0,1.325,-79.2793,-24.85)" :style="{fill:panelColor}">
-                          <rect x="11" y="58" width="111" height="40" style="fill-opacity:0.75;"/>
-                      </g>
-                      <g id="MainCard" transform="matrix(2.3908,0,0,3.80899,-63.8046,-414.112)" :style="{fill:panelColor}">
-                          <path d="M130,148.662C130,147.193 128.1,146 125.759,146L47.241,146C44.9,146 43,147.193 43,148.662L43,232.338C43,233.807 44.9,235 47.241,235L125.759,235C128.1,235 130,233.807 130,232.338L130,148.662Z" style="fill-opacity:0.75;"/>
-                      </g>
-                      <g id="Description" transform="matrix(5.86207,0,0,1.07865,-0.0689655,-15.4831)" :style="{fill:panelColor}">
-                          <path d="M130,155.792C130,150.388 129.193,146 128.198,146L44.802,146C43.807,146 43,150.388 43,155.792L43,225.208C43,230.612 43.807,235 44.802,235L128.198,235C129.193,235 130,230.612 130,225.208L130,155.792Z" style="fill-opacity:0.75;"/>
-                      </g>
-                      <g id="Badges" transform="matrix(5.86207,0,0,1.07865,-0.0689655,83.5169)" :style="{fill:panelColor}">
-                          <path d="M130,156.173C130,150.558 129.161,146 128.128,146L44.872,146C43.839,146 43,150.558 43,156.173L43,224.827C43,230.442 43.839,235 44.872,235L128.128,235C129.161,235 130,230.442 130,224.827L130,156.173Z" style="fill-opacity:0.75;"/>
-                      </g>
-                      <g id="Showcase" transform="matrix(5.86207,0,0,1.58427,-0.0689655,108.697)" :style="{fill:panelColor}">
-                          <path d="M130,152.767C130,149.032 129.181,146 128.171,146L44.829,146C43.819,146 43,149.032 43,152.767L43,228.233C43,231.968 43.819,235 44.829,235L128.171,235C129.181,235 130,231.968 130,228.233L130,152.767Z" style="fill-opacity:0.75;"/>
-                      </g>
-                  </g>
-            </svg>
-            <div class="overlay-icons"></div>
-            <img class="user-image" src="../assets/user.webp" alt="">
-          </div>
-        </div>
-      </div>
+      <Preview :panelColor="panelColor" :backgroundColor="backgroundColor" />
       <div class="flex-item">
         <h3>Background</h3>
         <v-color-picker style="margin: 0 auto;"  
@@ -60,97 +33,33 @@
           mode="hexa"
         ></v-color-picker>
       </div>
-      <div class="flex-item" id="commands">
-        <h3>Commands</h3>
-        <div class="command">
-          Background
-          <div class="code">/editprofile background {{backgroundColor.substring(1,7)}}</div>  
-          <input type="hidden" id="bg" :value="'/editprofile background '+backgroundColor.substring(1,7)">
-          <v-btn @click.stop.prevent="copyColor('bg')">Copy</v-btn>
-        </div>
-        <div class="command">
-          Panels
-          <div class="code">/editprofile theme {{panelColor.substring(1,7)}}</div>  
-          <input type="hidden" id="panel" :value="'/editprofile theme ' + panelColor.substring(1,7)">
-          <v-btn @click.stop.prevent="copyColor('panel')">Copy</v-btn>
-        </div>
-      </div>
+      <Commands :panelColor="panelColor" :backgroundColor="backgroundColor" />
     </div>
   </div>
 </template>
 
 <script>
+import Preview from './Preview.vue';
+import Commands from './Commands.vue';
 
 export default {
   name: 'Designer',
+  components: { Preview, Commands },
   props: {
     msg: String
   },
   data: ()=>({
     panelColor: '3D985D',
     backgroundColor: '303144'
-  }),
-  methods: {
-        copyColor (qs) {
-          let testingCodeToCopy = document.querySelector('#'+qs)
-          testingCodeToCopy.setAttribute('type', 'text')
-          testingCodeToCopy.select()
-
-          try {
-            document.execCommand('copy');
-          } catch (err) {
-            console.log("Failed to copy!");
-          }
-
-          /* unselect the range */
-          testingCodeToCopy.setAttribute('type', 'hidden')
-          window.getSelection().removeAllRanges()
-        },
-    },
+  })
 }
 </script>
 
 <style scoped lang="scss">
-    @import '../styles/preview.scss';
     @import '../styles/specifics.scss';
 </style>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-.flex-container {
-  max-width: 100%;
-  width: 100%;
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-evenly;
-  margin-bottom: 25px;
-}
-
-.flex-item {
-  max-width: 100%;
-  margin: 0 15px;
-}
-
-h3 {
-  margin: 25px 0 0;
-  text-align: center;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
+<style lang="scss">
 
 </style>
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
new file mode 100644
index 0000000..4b6f78c
--- /dev/null
+++ b/src/components/Preview.vue
@@ -0,0 +1,40 @@
+<template>
+    <div id="preview" class="flex-item">
+        <h3>Preview</h3>
+        <div class="profile-container">
+          <div class="profile" :style="{backgroundColor: backgroundColor}">
+            <svg class="overlay-panels" width="100%" height="100%" viewBox="0 0 800 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+                  <g>
+                      <g id="TopBar" transform="matrix(7.20721,0,0,1.325,-79.2793,-24.85)" :style="{fill:panelColor}">
+                          <rect x="11" y="58" width="111" height="40" style="fill-opacity:0.75;"/>
+                      </g>
+                      <g id="MainCard" transform="matrix(2.3908,0,0,3.80899,-63.8046,-414.112)" :style="{fill:panelColor}">
+                          <path d="M130,148.662C130,147.193 128.1,146 125.759,146L47.241,146C44.9,146 43,147.193 43,148.662L43,232.338C43,233.807 44.9,235 47.241,235L125.759,235C128.1,235 130,233.807 130,232.338L130,148.662Z" style="fill-opacity:0.75;"/>
+                      </g>
+                      <g id="Description" transform="matrix(5.86207,0,0,1.07865,-0.0689655,-15.4831)" :style="{fill:panelColor}">
+                          <path d="M130,155.792C130,150.388 129.193,146 128.198,146L44.802,146C43.807,146 43,150.388 43,155.792L43,225.208C43,230.612 43.807,235 44.802,235L128.198,235C129.193,235 130,230.612 130,225.208L130,155.792Z" style="fill-opacity:0.75;"/>
+                      </g>
+                      <g id="Badges" transform="matrix(5.86207,0,0,1.07865,-0.0689655,83.5169)" :style="{fill:panelColor}">
+                          <path d="M130,156.173C130,150.558 129.161,146 128.128,146L44.872,146C43.839,146 43,150.558 43,156.173L43,224.827C43,230.442 43.839,235 44.872,235L128.128,235C129.161,235 130,230.442 130,224.827L130,156.173Z" style="fill-opacity:0.75;"/>
+                      </g>
+                      <g id="Showcase" transform="matrix(5.86207,0,0,1.58427,-0.0689655,108.697)" :style="{fill:panelColor}">
+                          <path d="M130,152.767C130,149.032 129.181,146 128.171,146L44.829,146C43.819,146 43,149.032 43,152.767L43,228.233C43,231.968 43.819,235 44.829,235L128.171,235C129.181,235 130,231.968 130,228.233L130,152.767Z" style="fill-opacity:0.75;"/>
+                      </g>
+                  </g>
+            </svg>
+            <div class="overlay-icons"></div>
+            <img class="user-image" src="../assets/user.webp" alt="">
+          </div>
+        </div>
+      </div>
+</template>
+
+<script>
+export default {
+    props: ['panelColor', 'backgroundColor']
+}
+</script>
+
+<style scoped lang="scss">
+    @import '../styles/preview.scss';
+</style> 
diff --git a/src/styles/commands.scss b/src/styles/commands.scss
new file mode 100644
index 0000000..96d2339
--- /dev/null
+++ b/src/styles/commands.scss
@@ -0,0 +1,27 @@
+#commands {
+    min-width: 300px;
+    flex-grow: 1;
+    align-self: flex-start;
+
+    .command {
+        position: relative;
+        margin: 20px;
+    }
+
+    button {
+        position: absolute;
+        right: 0px;
+        bottom: 6px;
+        height: 45px;
+    }
+
+    .code {
+        background-color: #0a0a0a;
+        border-radius: 5px;
+        padding: 11px;
+        width: 100%;
+        display: inline-block;
+        margin: 5px 0;
+        font-family: monospace;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/generic.scss b/src/styles/generic.scss
new file mode 100644
index 0000000..639a0d2
--- /dev/null
+++ b/src/styles/generic.scss
@@ -0,0 +1,34 @@
+.flex-container {
+    max-width: 100%;
+    width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-bottom: 25px;
+  }
+  
+  .flex-item {
+    max-width: 100%;
+    margin: 0 15px;
+  }
+  
+  h3 {
+    margin: 25px 0 0;
+    text-align: center;
+  }
+  
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+  
+  a {
+    color: #42b983;
+  }
\ No newline at end of file
diff --git a/src/styles/specifics.scss b/src/styles/specifics.scss
index 400728f..810b328 100644
--- a/src/styles/specifics.scss
+++ b/src/styles/specifics.scss
@@ -17,32 +17,4 @@
       width: 100%;
       padding: 25px 0;
     }  
-}
-
-#commands {
-    min-width: 300px;
-    flex-grow: 1;
-    align-self: flex-start;
-
-    .command {
-        position: relative;
-        margin: 20px;
-    }
-
-    button {
-        position: absolute;
-        right: 0px;
-        bottom: 6px;
-        height: 45px;
-    }
-
-    .code {
-        background-color: #0a0a0a;
-        border-radius: 5px;
-        padding: 11px;
-        width: 100%;
-        display: inline-block;
-        margin: 5px 0;
-        font-family: monospace;
-    }
 }
\ No newline at end of file