mirror of https://github.com/rancher/dashboard.git
wip provider boxes
This commit is contained in:
lvuch
parent
146958909e
commit
cd1d418be5
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 361 B |
|
|
@ -33,28 +33,28 @@ export default {
|
||||||
label: 'Elasticsearch',
|
label: 'Elasticsearch',
|
||||||
enabled: false,
|
enabled: false,
|
||||||
default: {},
|
default: {},
|
||||||
logo: require(`~/assets/images/logo-${ theme }-elasticsearch.svg`)
|
logo: require(`~/assets/images/logo-color-elasticsearch.svg`)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'splunkHec',
|
name: 'splunkHec',
|
||||||
label: 'Splunk',
|
label: 'Splunk',
|
||||||
enabled: false,
|
enabled: false,
|
||||||
default: {},
|
default: {},
|
||||||
logo: require(`~/assets/images/logo-${ theme }-splunk.svg`)
|
logo: require(`~/assets/images/logo-color-splunk.svg`)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'kafka',
|
name: 'kafka',
|
||||||
label: 'Kafka',
|
label: 'Kafka',
|
||||||
enabled: false,
|
enabled: false,
|
||||||
default: { format: { type: 'json' } },
|
default: { format: { type: 'json' } },
|
||||||
logo: require(`~/assets/images/logo-${ theme }-kafka.svg`)
|
logo: require(`~/assets/images/logo-color-kafka.svg`)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'forward',
|
name: 'forward',
|
||||||
label: 'Fluentd',
|
label: 'Fluentd',
|
||||||
enabled: false,
|
enabled: false,
|
||||||
default: { servers: [{}] },
|
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">
|
<Banner class="mt-0" color="info">
|
||||||
{{ t('logging.output.selectBanner') }}
|
{{ t('logging.output.selectBanner') }}
|
||||||
</Banner>
|
</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">
|
||||||
|
<img :src="provider.logo" />
|
||||||
</div>
|
</div>
|
||||||
|
<h4 class="name">
|
||||||
|
{{ provider.label }}
|
||||||
|
</h4>
|
||||||
</ToggleGradientBox>
|
</ToggleGradientBox>
|
||||||
|
</div>
|
||||||
</Tab>
|
</Tab>
|
||||||
<Tab v-for="(provider, i) in enabledProviders" :key="i" :name="provider.name" :label="provider.label" :weight="i + 1">
|
<Tab v-for="(provider, i) in enabledProviders" :key="i" :name="provider.name" :label="provider.label" :weight="i + 1">
|
||||||
<div class="provider mb-10">
|
<div class="provider mb-10">
|
||||||
|
|
@ -162,6 +167,11 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
$chart: 110px;
|
||||||
|
$side: 15px;
|
||||||
|
$margin: 10px;
|
||||||
|
$logo: 60px;
|
||||||
|
|
||||||
.output {
|
.output {
|
||||||
.provider {
|
.provider {
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -169,20 +179,117 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-gradient-box {
|
.box-container {
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
.logo-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
flex-wrap: wrap;
|
||||||
min-width: 160px;
|
margin: 0 -1*$margin;
|
||||||
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 {
|
.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);
|
||||||
|
// }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue