From c3361be73105ed3dcd55f51e198a7a6415871de0 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 29 Mar 2021 14:16:04 -0700
Subject: [PATCH] Fixes bugs and adds column icon

---
 assets/components/FuzzySearchModal.vue | 24 ++++++++++++++++++++++--
 assets/index.ejs                       |  5 +++++
 assets/styles.scss                     |  4 ++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index cf2eb5b2..85434bfc 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -19,6 +19,9 @@
           <div class="media-content">
             {{ props.option.name }}
           </div>
+          <div class="media-right">
+            <span class="column-icon" @click.stop.prevent="addColumn(props.option)"><icon name="column"></icon></span>
+          </div>
         </div>
       </template>
     </b-autocomplete>
@@ -26,7 +29,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
 import fuzzysort from "fuzzysort";
 
 import PastTime from "./PastTime";
@@ -54,10 +57,17 @@ export default {
   },
   watch: {},
   methods: {
+    ...mapActions({
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
+    }),
     selected(item) {
       this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
       this.$emit("close");
     },
+    addColumn(container) {
+      this.appendActiveContainer(container);
+      this.$emit("close");
+    },
   },
   computed: {
     ...mapState(["containers"]),
@@ -93,7 +103,7 @@ export default {
 
 <style lang="scss" scoped>
 .panel {
-  height: 400px;
+  min-height: 400px;
 }
 
 .running {
@@ -103,4 +113,14 @@ export default {
 .exited {
   color: var(--scheme-main-ter);
 }
+
+.column-icon {
+  &:hover {
+    color: var(--secondary-color);
+  }
+}
+
+::v-deep a.dropdown-item {
+  padding-right: 1em;
+}
 </style>
diff --git a/assets/index.ejs b/assets/index.ejs
index b233ba0d..46c47535 100644
--- a/assets/index.ejs
+++ b/assets/index.ejs
@@ -80,6 +80,11 @@
             d="M137.484 68.427l-88.018 50.812 207.879 120.013 88.021-50.813L137.484 68.427zm326.394 51.595L256.001 0 176.14 46.11l207.883 120.009 79.855-46.097zM275.327 273.503V512l207.21-119.628V153.877l-207.21 119.626zM29.463 392.372l207.203 119.622V271.95L29.463 152.331v240.041z"
           />
         </symbol>
+        <symbol id="icon-column" viewBox="0 0 1792 1792">
+          <path
+            d="M224 1536h608V384H192v1120q0 13 9.5 22.5t22.5 9.5zm1376-32V384H960v1152h608q13 0 22.5-9.5t9.5-22.5zm128-1216v1216q0 66-47 113t-113 47H224q-66 0-113-47t-47-113V288q0-66 47-113t113-47h1344q66 0 113 47t47 113z"
+          />
+        </symbol>
       </defs>
     </svg>
     <div id="app"></div>
diff --git a/assets/styles.scss b/assets/styles.scss
index e236c171..5be0ab5c 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -152,3 +152,7 @@ html.has-custom-scrollbars {
   white-space: nowrap;
   overflow: hidden;
 }
+
+.modal {
+  z-index: 1000;
+}