From 41ffe4a9133eff312bd20ceaafe29042b7c391e1 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Fri, 10 Dec 2021 16:06:13 -0500
Subject: [PATCH] [+] Color display

---
 src/views/NewHome.vue | 70 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 64 insertions(+), 6 deletions(-)

diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index e6f954c..d052085 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -3,8 +3,22 @@
         <canvas id="three"></canvas>
 
         <!-- Editor controls -->
-        <div id="editor-controls" class="fbox-vcenter">
-            <span>Editor</span>
+        <div id="editor-controls">
+            <div>Editor</div>
+
+            <div class="separator"/>
+
+            <div>New</div>
+            <div>Save</div>
+
+            <div class="separator"/>
+
+            <div id="colors" class="fbox-h">
+                <span class="colors-text">Colors</span>
+                <div class="color" v-for="(c, i) in colors" :key="i" :style="{'background-color': c}">
+                    <div>{{i + 1}}</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -19,6 +33,18 @@ export default class NewHome extends Vue
 {
     editMode = config.editMode
 
+    colors = [
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+    ]
+
     mounted(): void
     {
         start('three')
@@ -38,15 +64,47 @@ export default class NewHome extends Vue
 
 #editor-controls
     position: absolute
-    top: 20px
-    left: 0
     z-index: 2
 
+    // Positioning
+    top: 20px
+    left: 50px
     height: 50px
-    width: calc(100vw - 100px)
-    margin-left: 50px
+    width: calc(100vw - 100px - 40px)
+    padding: 0 20px
     border-radius: 50px
 
+    // Flex center
+    display: flex
+    align-items: center
+
+    // Colors
     color: #ffeedb
     background-image: linear-gradient(180deg, #000000 0%, #434343 100%)
+
+    // Separator
+    .separator
+        width: 1px
+        height: 50%
+        border-radius: 100px
+        background-color: rgba(255, 238, 219, 0.37)
+
+    #colors
+        align-items: center
+        .colors-text
+            margin-right: 5px
+
+        .color
+            width: 12px
+            height: 12px
+            margin-left: 5px
+
+            div
+                margin-top: -10px
+                font-size: 8px
+                color: #8f8f8f
+
+#editor-controls > *
+    margin-right: 10px
+
 </style>