From 095bd15ac69c7c6b2daef72ccc4195fe8193fc9a Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Fri, 15 Jan 2021 14:30:53 +0100
Subject: [PATCH] output tags for integrations list

---
 .../Integrations/IntegrationsCollection.cs    |  2 +-
 .../App/pages/settings/integrations-item.vue  | 18 +++++++++++------
 zero.Web.UI/Sass/Modules/_all.scss            |  4 +++-
 zero.Web.UI/Sass/Settings/_font-sizes.scss    |  1 +
 zero.Web.UI/sass/Modules/_tag.scss            | 20 +++++++++++++++++++
 5 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 zero.Web.UI/sass/Modules/_tag.scss

diff --git a/zero.Core/Collections/Integrations/IntegrationsCollection.cs b/zero.Core/Collections/Integrations/IntegrationsCollection.cs
index 03716965..9e8d8961 100644
--- a/zero.Core/Collections/Integrations/IntegrationsCollection.cs
+++ b/zero.Core/Collections/Integrations/IntegrationsCollection.cs
@@ -133,7 +133,7 @@ namespace zero.Core.Collections
         });
       }
 
-      return result;
+      return result.OrderByDescending(x => x.IsActive).ThenByDescending(x => x.IsConfigured).ThenByDescending(x => x.Type.Name).ToList();
     }
 
 
diff --git a/zero.Web.UI/App/pages/settings/integrations-item.vue b/zero.Web.UI/App/pages/settings/integrations-item.vue
index 03af1b42..add1f944 100644
--- a/zero.Web.UI/App/pages/settings/integrations-item.vue
+++ b/zero.Web.UI/App/pages/settings/integrations-item.vue
@@ -18,9 +18,10 @@
           <span v-localize="model.type.description"></span>
         </template>
       </p>
-      <div>
-        <ui-toggle class="integrations-item-toggle" v-if="model.isConfigured" v-model="model.isActive" @input="$emit('onActiveChange', model)" on-content="Active" off-content="Active" />
+      <div class="integrations-item-tags">
+        <span class="ui-tag" v-for="tag in model.type.tags">{{tag}}</span>
       </div>
+      <ui-toggle class="integrations-item-toggle" v-if="model.isConfigured" v-model="model.isActive" @input="$emit('onActiveChange', model)" on-content="Active" off-content="Active" />
     </main>  
   </div>
 </template>
@@ -93,16 +94,21 @@
     padding-top: var(--padding-m);
   }
 
+  .integrations-item-tags
+  {
+    margin-top: var(--padding-s); 
+  }
+
   .integrations-item-icon
   {
     display: inline-block;
     width: 120px;
-    height: 80px;
-    line-height: 79px !important; 
+    height: 90px;
+    line-height: 91px !important;
     font-size: 22px;
     text-align: center;
     background: var(--color-box-nested);
-    border-radius: var(--radius);  
+    border-radius: var(--radius);
   }
 
   .integrations-item-icon.has-color
@@ -136,6 +142,6 @@
 
   .integrations-item-toggle
   {
-    margin-top: var(--padding); 
+    margin-top: var(--padding-m); 
   }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Modules/_all.scss b/zero.Web.UI/Sass/Modules/_all.scss
index a44076c9..4d0de430 100644
--- a/zero.Web.UI/Sass/Modules/_all.scss
+++ b/zero.Web.UI/Sass/Modules/_all.scss
@@ -9,4 +9,6 @@
 
 @import "flatpickr";
 
-@import "tree";
\ No newline at end of file
+@import "tree";
+
+@import "tag";
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Settings/_font-sizes.scss b/zero.Web.UI/Sass/Settings/_font-sizes.scss
index 1bf164ff..aeacc169 100644
--- a/zero.Web.UI/Sass/Settings/_font-sizes.scss
+++ b/zero.Web.UI/Sass/Settings/_font-sizes.scss
@@ -1,6 +1,7 @@
 
 :root
 {
+  --font-size-2xs: 11px;
   --font-size-xs: 12px;
   --font-size-s: 13px;
   --font-size: 14px;
diff --git a/zero.Web.UI/sass/Modules/_tag.scss b/zero.Web.UI/sass/Modules/_tag.scss
new file mode 100644
index 00000000..c9251182
--- /dev/null
+++ b/zero.Web.UI/sass/Modules/_tag.scss
@@ -0,0 +1,20 @@
+
+
+.ui-tag
+{
+  align-self: center;
+  display: inline-block;
+  font-size: var(--font-size-2xs);
+  font-weight: 500;
+  background: var(--color-box-nested);
+  color: var(--color-text);
+  height: 22px;
+  line-height: 22px;
+  padding: 0 10px;
+  border-radius: 16px;
+}
+
+.ui-tag + .ui-tag
+{
+  margin-left: 8px;
+}
\ No newline at end of file