From cd1d418be5db88ceb37ffffcceb6ed40c58ee057 Mon Sep 17 00:00:00 2001
From: lvuch <laurenvuchetich@gmail.com>
Date: Wed, 23 Sep 2020 14:27:06 -0700
Subject: [PATCH] wip provider boxes

---
 assets/images/logo-color-elasticsearch.svg   |   1 +
 assets/images/logo-color-fluentd.svg         |   1 +
 assets/images/logo-color-kafka.svg           |   1 +
 assets/images/logo-color-splunk.svg          |   1 +
 edit/logging.banzaicloud.io.output/index.vue | 143 ++++++++++++++++---
 5 files changed, 129 insertions(+), 18 deletions(-)
 create mode 100644 assets/images/logo-color-elasticsearch.svg
 create mode 100644 assets/images/logo-color-fluentd.svg
 create mode 100644 assets/images/logo-color-kafka.svg
 create mode 100644 assets/images/logo-color-splunk.svg

diff --git a/assets/images/logo-color-elasticsearch.svg b/assets/images/logo-color-elasticsearch.svg
new file mode 100644
index 0000000000..be92d3303c
--- /dev/null
+++ b/assets/images/logo-color-elasticsearch.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.cls-1{fill:#f0bf1a;}.cls-2{fill:#07a5de;}.cls-3{fill:#3ebeb0;}.cls-4{fill:#231f20;}.cls-5{fill:#d7a229;}.cls-6{fill:#019b8f;}</style></defs><path class="cls-1" d="M5.67233,15.75H42.84189A13.2881,13.2881,0,0,0,53.05,10.93953,27.99761,27.99761,0,0,0,5.67233,15.75"/><path class="cls-2" d="M39.69179,20.12505H3.985a27.992,27.992,0,0,0,0,15.75H39.69179a7.875,7.875,0,1,0,0-15.75"/><path class="cls-3" d="M53.14557,44.93887A13.26041,13.26041,0,0,0,43.01679,40.25H5.67239a27.9999,27.9999,0,0,0,47.47318,4.68888"/><path class="cls-4" d="M3.98506,20.12505a27.992,27.992,0,0,0,0,15.75H27.35439A31.30625,31.30625,0,0,0,28.3168,28a31.30573,31.30573,0,0,0-.96241-7.8749Z"/><path class="cls-5" d="M16.767,3.76251A28.81329,28.81329,0,0,0,5.65438,15.7501H26.30444A30.46011,30.46011,0,0,0,16.767,3.76251"/><path class="cls-6" d="M17.642,52.67506A31.226,31.226,0,0,0,26.917,40.25H5.6544A28.83025,28.83025,0,0,0,17.642,52.67506"/></svg>
\ No newline at end of file
diff --git a/assets/images/logo-color-fluentd.svg b/assets/images/logo-color-fluentd.svg
new file mode 100644
index 0000000000..a4c80bd595
--- /dev/null
+++ b/assets/images/logo-color-fluentd.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56 56"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}.cls-4{fill:url(#linear-gradient-4);}.cls-5{fill:url(#linear-gradient-5);}.cls-6{fill:url(#linear-gradient-6);}.cls-7{fill:url(#linear-gradient-7);}.cls-8{fill:url(#linear-gradient-8);}.cls-9{fill:#fff;}</style><linearGradient id="linear-gradient" x1="146" y1="1103.99976" x2="201.99989" y2="1103.99976" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2a59a2"/><stop offset="1" stop-color="#2a59a2"/></linearGradient><linearGradient id="linear-gradient-2" x1="143.73885" y1="1113.5609" x2="202.97005" y2="1113.5609" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#91d3f2"/><stop offset="0.2664" stop-color="#6fb2de"/><stop offset="0.5214" stop-color="#5598ce"/><stop offset="0.6729" stop-color="#4b8fc8"/></linearGradient><linearGradient id="linear-gradient-3" x1="146.00452" y1="1090.96301" x2="202.41319" y2="1090.96301" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c9ec7"/><stop offset="0.4037" stop-color="#2c63a5"/><stop offset="1" stop-color="#395da1"/></linearGradient><linearGradient id="linear-gradient-4" x1="146.00358" y1="1102.79807" x2="202.41225" y2="1102.79807" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4faac4"/><stop offset="0.00155" stop-color="#2f75b1"/><stop offset="1" stop-color="#356eac"/></linearGradient><linearGradient id="linear-gradient-5" x1="166.22458" y1="1111.53039" x2="202.73668" y2="1111.53039" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4faac4"/><stop offset="0.00155" stop-color="#2f81b6"/><stop offset="1" stop-color="#3b5ea9"/></linearGradient><linearGradient id="linear-gradient-6" x1="166.22315" y1="1097.5519" x2="202.73526" y2="1097.5519" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4faac4"/><stop offset="0.00155" stop-color="#1e3773"/><stop offset="1" stop-color="#203370"/></linearGradient><linearGradient id="linear-gradient-7" x1="189.8539" y1="1094.50229" x2="189.8539" y2="1114.52393" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4faac4"/><stop offset="0.00155" stop-color="#2c5a9a"/><stop offset="1" stop-color="#374580"/></linearGradient><linearGradient id="linear-gradient-8" x1="139.91429" y1="1096.93636" x2="181.46443" y2="1096.93636" gradientTransform="matrix(1, 0, 0, -1, -146, 1132)" gradientUnits="userSpaceOnUse"><stop offset="0.1115" stop-color="#38b1da"/><stop offset="1" stop-color="#326fb5"/></linearGradient></defs><path class="cls-1" d="M55.7013,24.6299h-.99991a12.342,12.342,0,0,0-8.4699,2.90474c-7.55141,6.53793-9.27525,16.16157-22.19726,21.35571C13.2704,53.21579,0,49.1211,0,49.1211s11.84066-.82346,13.41066-9.85892c1.22614-7.06729-5.20319-12.085-9.23906-18.46C.06787,14.30948-.98634,8.91626.99087,6.58614,6.59674-.03323,22.03439,17.86123,29.69891,20.2728c7.50165,2.35727,12.56459-3.11739,18.77674-2.312a4.39185,4.39185,0,0,1,3.59247,2.19891,11.14121,11.14121,0,0,0,1.22614,2.07676,8.60573,8.60573,0,0,0,1.665,1.1266C55.69678,23.79739,56.42522,24.6299,55.7013,24.6299Z"/><path class="cls-2" d="M20.22458,14.27781c-1.855-1.41164-3.76892-2.89116-5.65112-4.23947h0c-.4253-.30314-.85061-.60176-1.27139-.89133h0C8.25724,5.69481,3.57889,3.53209.99087,6.58614c-1.97721,2.33012-.923,7.72334,3.18526,14.216.04072.06787.086.13121.12668.19908,2.1401,3.31195,8.34773,11.07149,23.06146,10.7412.96824-1.02706,2.43871-2.96808,4.339-5.081C28.62208,21.67992,23.97993,17.33639,20.22458,14.27781Z"/><path class="cls-3" d="M35.05594,37.68765a17.57084,17.57084,0,0,0-1.10851-6.48815,51.97909,51.97909,0,0,1-6.58317.54294A67.2458,67.2458,0,0,1,14.6368,43.375C5.56515,49.51021.00452,49.1211.00452,49.1211s13.27493,4.09469,24.03423-.23075a28.79073,28.79073,0,0,0,9.04-5.64207A8.39475,8.39475,0,0,0,35.05594,37.68765Z"/><path class="cls-4" d="M31.7078,26.66141c-1.9003,2.10843-3.37529,4.054-4.339,5.081A51.835,51.835,0,0,0,33.952,31.1995c-.22623-.62891-.48865-1.24876-.77822-1.85958A28.61922,28.61922,0,0,0,31.7078,26.66141Z"/><path class="cls-5" d="M42.73856,18.65754C38.766,19.86107,34.798,21.87448,29.69891,20.2728c-2.52468-.79179-5.89544-3.2667-9.47433-5.995,3.75535,3.05858,8.3975,7.39759,11.48322,12.3836C34.52205,23.544,38.27739,20.06014,42.73856,18.65754Z"/><path class="cls-6" d="M33.952,31.1995a17.571,17.571,0,0,1,1.1085,6.48815,8.43849,8.43849,0,0,1-1.98173,5.56063C38.51267,38.22155,40.94234,32.118,46.236,27.53465a11.675,11.675,0,0,1,2.9907-1.88673h-.00453C45.75189,27.10482,41.9875,29.98693,33.952,31.1995Z"/><path class="cls-7" d="M55.7013,24.6299c.72392,0-.00452-.83251-.7375-1.26234a9.03253,9.03253,0,0,1-1.665-1.1266,10.79712,10.79712,0,0,1-1.22614-2.07675,4.38879,4.38879,0,0,0-3.59247-2.19891,13.543,13.543,0,0,0-5.73708.69677c-4.46117,1.4026-8.22105,4.88648-11.03529,8.00387a27.547,27.547,0,0,1,1.46594,2.674c.28957.61534.552,1.2352.77822,1.85958,8.04006-1.21257,11.79993-4.09469,15.27023-5.55158h.00453a13.12126,13.12126,0,0,1,5.47918-1.018Z"/><path class="cls-8" d="M14.6368,43.375A67.2458,67.2458,0,0,0,27.36426,31.74244c-14.71372.33029-20.92135-7.42925-23.06145-10.7412,4.04039,6.28455,10.325,11.27057,9.11238,18.26095C11.84518,48.29765.00452,49.1211.00452,49.1211S5.56515,49.51021,14.6368,43.375Z"/><ellipse class="cls-9" cx="48.06845" cy="21.33153" rx="1.17637" ry="1.16733"/></svg>
\ No newline at end of file
diff --git a/assets/images/logo-color-kafka.svg b/assets/images/logo-color-kafka.svg
new file mode 100644
index 0000000000..f975dd9e16
--- /dev/null
+++ b/assets/images/logo-color-kafka.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.cls-1{fill:#231f20;}</style></defs><path id="path3139" class="cls-1" d="M22.63282,4.90667h0a3.47893,3.47893,0,0,0-4.8,0h0a3.37911,3.37911,0,0,0-.96,2.45333,3.88427,3.88427,0,0,0,.96,2.45333h0a3.30909,3.30909,0,0,0,2.34667.96,3.88422,3.88422,0,0,0,2.45333-.96h0a3.37911,3.37911,0,0,0,.96-2.45333,3.88422,3.88422,0,0,0-.96-2.45333Zm-2.45333,47.36h0a3.88422,3.88422,0,0,0,2.45333-.96h0a3.37913,3.37913,0,0,0,.96-2.45333,3.88425,3.88425,0,0,0-.96-2.45334h0a3.479,3.479,0,0,0-4.8,0h0a3.37913,3.37913,0,0,0-.96,2.45334,3.88427,3.88427,0,0,0,.96,2.45333h0a3.38353,3.38353,0,0,0,2.34667.96Zm18.56-10.45333h0a3.04164,3.04164,0,0,0,2.02667-1.6l.10667-.10666h0a3.33233,3.33233,0,0,0,.32-2.45334,3.495,3.495,0,0,0-1.6-2.13333h0a3.54368,3.54368,0,0,0-2.56-.32,3.0416,3.0416,0,0,0-2.02667,1.6,3.831,3.831,0,0,0-.32,2.66667,3.49493,3.49493,0,0,0,1.6,2.13333h0a3.77083,3.77083,0,0,0,2.45333.21333Zm-15.04-17.28h0a5.08564,5.08564,0,0,0-3.52-1.49333,4.83656,4.83656,0,0,0-3.52,1.49333,5.161,5.161,0,0,0,0,7.04,5.08561,5.08561,0,0,0,3.52,1.49333,4.83658,4.83658,0,0,0,3.52-1.49333,5.161,5.161,0,0,0,0-7.04Zm-2.02667-5.86667h0a9.17841,9.17841,0,0,1,5.12,2.66667h0a4.63912,4.63912,0,0,1,.64.74667l3.41334-2.02667a8.27431,8.27431,0,0,1-.10666-4.26666,7.5617,7.5617,0,0,1,3.41333-4.48h.10666A7.77917,7.77917,0,0,1,39.80615,10.56a7.642,7.642,0,0,1,4.48,3.52h0a8.1381,8.1381,0,0,1,.74667,5.65333,7.5617,7.5617,0,0,1-3.41333,4.48l-.42667.32h0A7.19217,7.19217,0,0,1,32.65947,22.72l-3.41333,2.02667a8.84374,8.84374,0,0,1,.64,3.41333,9.2391,9.2391,0,0,1-.64,3.41333L32.65947,33.6a8.28488,8.28488,0,0,1,3.52-2.24,6.82472,6.82472,0,0,1,5.54667.74667h.10667a7.70783,7.70783,0,0,1,3.30666,4.48A7.126,7.126,0,0,1,44.39281,42.24l-.10667.10666h0A7.66789,7.66789,0,0,1,39.91281,45.76a6.82462,6.82462,0,0,1-5.54666-.74667h0a7.88805,7.88805,0,0,1-3.41334-4.48,8.27442,8.27442,0,0,1,.10667-4.26666l-3.62666-2.13334-.64.64h0a9.1783,9.1783,0,0,1-5.12,2.66666v3.94667a7.6458,7.6458,0,0,1,3.62667,2.02667h0A7.71075,7.71075,0,0,1,27.43282,48.64a7.51014,7.51014,0,0,1-2.13333,5.22667h0A7.24828,7.24828,0,0,1,20.07282,56a7.71075,7.71075,0,0,1-5.22667-2.13333h0A7.71075,7.71075,0,0,1,12.71282,48.64a7.51012,7.51012,0,0,1,2.13333-5.22667h0a7.64593,7.64593,0,0,1,3.62667-2.02667V37.44a9.17831,9.17831,0,0,1-5.12-2.66666h0a9.61173,9.61173,0,0,1-2.77334-6.72,9.42233,9.42233,0,0,1,2.77334-6.72h0a9.17838,9.17838,0,0,1,5.12-2.66667V14.72a7.6459,7.6459,0,0,1-3.62667-2.02667h0a7.71073,7.71073,0,0,1-2.13333-5.22666A7.51012,7.51012,0,0,1,14.84615,2.24h0A7.1631,7.1631,0,0,1,20.07282,0a7.34628,7.34628,0,0,1,5.22667,2.24h0a7.71075,7.71075,0,0,1,2.13333,5.22667,7.51012,7.51012,0,0,1-2.13333,5.22666h0A7.6458,7.6458,0,0,1,21.67282,14.72ZM40.76615,16h0a3.607,3.607,0,0,0-2.02667-1.6,3.54367,3.54367,0,0,0-2.56.32h0a3.23,3.23,0,0,0-1.6,2.13333,3.9016,3.9016,0,0,0,.32,2.66667h0a3.04167,3.04167,0,0,0,2.02667,1.6,3.54377,3.54377,0,0,0,2.56-.32h0a3.89751,3.89751,0,0,0,1.49333-2.02667A3.56706,3.56706,0,0,0,40.76615,16h0"/></svg>
\ No newline at end of file
diff --git a/assets/images/logo-color-splunk.svg b/assets/images/logo-color-splunk.svg
new file mode 100644
index 0000000000..4c9b115ca8
--- /dev/null
+++ b/assets/images/logo-color-splunk.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.cls-1{fill:#62a713;}.cls-2{fill:#fff;}</style></defs><rect class="cls-1" width="56" height="56" rx="8.81483"/><polygon class="cls-2" points="41.497 24.41 14.503 10.759 14.503 17.949 34.174 28 14.503 38.051 14.503 45.241 41.497 31.59 41.497 24.41"/></svg>
\ No newline at end of file
diff --git a/edit/logging.banzaicloud.io.output/index.vue b/edit/logging.banzaicloud.io.output/index.vue
index 1b45c28654..7bef8e0588 100644
--- a/edit/logging.banzaicloud.io.output/index.vue
+++ b/edit/logging.banzaicloud.io.output/index.vue
@@ -33,28 +33,28 @@ export default {
         label:   'Elasticsearch',
         enabled: false,
         default: {},
-        logo:    require(`~/assets/images/logo-${ theme }-elasticsearch.svg`)
+        logo:    require(`~/assets/images/logo-color-elasticsearch.svg`)
       },
       {
         name:    'splunkHec',
         label:   'Splunk',
         enabled: false,
         default: {},
-        logo:    require(`~/assets/images/logo-${ theme }-splunk.svg`)
+        logo:    require(`~/assets/images/logo-color-splunk.svg`)
       },
       {
         name:    'kafka',
         label:   'Kafka',
         enabled: false,
         default: { format: { type: 'json' } },
-        logo:    require(`~/assets/images/logo-${ theme }-kafka.svg`)
+        logo:    require(`~/assets/images/logo-color-kafka.svg`)
       },
       {
         name:    'forward',
         label:   'Fluentd',
         enabled: false,
         default: { servers: [{}] },
-        logo:    require(`~/assets/images/logo-${ theme }-fluentd.svg`)
+        logo:    require(`~/assets/images/logo-color-fluentd.svg`)
       }
     ];
 
@@ -128,11 +128,16 @@ export default {
           <Banner class="mt-0" color="info">
             {{ t('logging.output.selectBanner') }}
           </Banner>
-          <ToggleGradientBox v-for="(provider, i) in providers" :key="i" v-model="provider.enabled" class="mr-20">
-            <div class="logo-container">
-              <img class="logo" :src="provider.logo" /> {{ provider.label }}
-            </div>
-          </ToggleGradientBox>
+          <div class="box-container">
+            <ToggleGradientBox v-for="(provider, i) in providers" :key="i" v-model="provider.enabled">
+              <div class="logo">
+                <img :src="provider.logo" />
+              </div>
+              <h4 class="name">
+                {{ provider.label }}
+              </h4>
+            </ToggleGradientBox>
+          </div>
         </Tab>
         <Tab v-for="(provider, i) in enabledProviders" :key="i" :name="provider.name" :label="provider.label" :weight="i + 1">
           <div class="provider mb-10">
@@ -162,6 +167,11 @@ export default {
 </template>
 
 <style lang="scss">
+  $chart: 110px;
+  $side: 15px;
+  $margin: 10px;
+  $logo: 60px;
+
 .output {
   .provider {
     h1 {
@@ -169,19 +179,116 @@ export default {
     }
   }
 
-  .toggle-gradient-box {
-    display: inline-block;
+  .box-container {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: 0 -1*$margin;
 
-    .logo-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      min-width: 160px;
-      padding: 15px 20px;
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-4')) {
+      .toggle-gradient-box {
+        width: 100%;
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-7')) {
+      .toggle-gradient-box {
+        width: calc(50% - 2 * #{$margin});
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-9')) {
+      .toggle-gradient-box {
+        width: calc(33.33333% - 2 * #{$margin});
+      }
+    }
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-12')) {
+      .toggle-gradient-box {
+        width: calc(25% - 2 * #{$margin});
+      }
+    }
+
+    .toggle-gradient-box {
+      height: $chart;
+      margin: $margin;
+      padding: $margin;
+      position: relative;
+      border-radius: calc( 1.5 * var(--border-radius));
+
+      &:hover {
+        box-shadow: 0 0 30px var(--shadow);
+        transition: box-shadow 0.1s ease-in-out;
+        cursor: pointer;
+      }
+
+      .side-label {
+        transform: rotate(180deg);
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        min-width: calc(1.5 * var(--border-radius));
+        width: $side;
+        border-top-right-radius: calc( 1.5 * var(--border-radius));
+        border-bottom-right-radius: calc( 1.5 * var(--border-radius));
+
+        label {
+          text-align: center;
+          writing-mode: tb;
+          height: 100%;
+          padding: 0 2px;
+          display: block;
+          white-space: no-wrap;
+          text-overflow: ellipsis;
+        }
+      }
 
       .logo {
-        height: 50px;
+        text-align: center;
+        // position: absolute;
+        // left: $side+$margin;
+        // top: ($chart - $logo)/2;
+        width: $logo;
+        height: $logo;
+        border-radius: calc(2 * var(--border-radius));
+        overflow: hidden;
+        background-color: white;
+        display: inline-block;
+        vertical-align: middle;
+
+        img {
+          width: $logo - 4px;
+          height: $logo - 4px;
+          object-fit: contain;
+          position: relative;
+          top: 2px;
+        }
       }
+
+      &:hover {
+        background-position: right center;
+      }
+
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: $margin;
+        margin-left: $side+$logo+$margin;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      // .description {
+      //   margin-top: $margin;
+      //   margin-left: $side+$logo+$margin;
+      //   margin-right: $margin;
+      //   display: -webkit-box;
+      //   -webkit-box-orient: vertical;
+      //   -webkit-line-clamp: 3;
+      //   line-clamp: 3;
+      //   overflow: hidden;
+      //   text-overflow: ellipsis;
+      //   color: var(--text-muted);
+      // }
     }
   }
 }