wip provider boxes

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>

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>

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>

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="box-container">
-            <div class="logo-container">
+            <ToggleGradientBox v-for="(provider, i) in providers" :key="i" v-model="provider.enabled">
-              <img class="logo" :src="provider.logo" /> {{ provider.label }}
+              <div class="logo">
-            </div>
+                <img :src="provider.logo" />
-          </ToggleGradientBox>
+              </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 {
+  .box-container {
-    display: inline-block;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: 0 -1*$margin;
 
-    .logo-container {
+    @media only screen and (min-width: map-get($breakpoints, '--viewport-4')) {
-      display: flex;
+      .toggle-gradient-box {
-      justify-content: space-between;
+        width: 100%;
-      align-items: center;
+      }
-      min-width: 160px;
+    }
-      padding: 15px 20px;
+    @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);
+      // }
     }
   }
 }