status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Upstream CSS Tweaks (#11554) 

Various CSS tweaks/HTML cleanup around upstreams (but impacts other 'rows')

- Prefer {{tooltip}} to <Tooltip>
- Removed some now unnecessary spans
- Stop using an empty class="" for styling purposes.
- Renamed any classes used to identify response properties to follow the exact property name but kebab-cased.
- Fixed up the alignment of things in the rows when used with a 'tiny copy button' (see screengrab) which was minus positioning and knocking things out (pending a proper refactor of our copy button CSS which is from the very very start of things)
This commit is contained in:
John Cowen 2021-11-16 15:36:54 +00:00 committed by GitHub
parent c847c9a8cb
commit 28b1e642cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 109 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
View File

@ -3,7 +3,7 @@
...attributes ...attributes
> >
<ul> <ul>
{{#each @items as |item|}} {{#each @items as |item|}}
<li> <li>
<div class="header"> <div class="header">
<p> <p>
@ -11,59 +11,59 @@
</p> </p>
</div> </div>
<div class="detail"> <div class="detail">
{{#if (env 'CONSUL_NSPACES_ENABLED')}} {{#if (env 'CONSUL_NSPACES_ENABLED')}}
{{#if (not-eq item.DestinationType 'prepared_query')}} {{#if (not-eq item.DestinationType 'prepared_query')}}
<dl class="nspace"> <dl class="nspace">
<dt> <dt
<Tooltip> {{tooltip}}
Namespace >
</Tooltip> Namespace
</dt> </dt>
<dd> <dd>
{{or item.DestinationNamespace 'default'}} {{or item.DestinationNamespace 'default'}}
</dd> </dd>
</dl> </dl>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if (and (not-eq item.Datacenter @dc) (not-eq item.Datacenter ""))}} {{#if (and (not-eq item.Datacenter @dc) (not-eq item.Datacenter ""))}}
<dl class="datacenter"> <dl class="datacenter">
<dt> <dt
<Tooltip> {{tooltip}}
Datacenter >
</Tooltip> Datacenter
</dt> </dt>
<dd> <dd>
{{item.Datacenter}} {{item.Datacenter}}
</dd> </dd>
</dl> </dl>
{{/if}} {{/if}}
{{#if item.LocalBindSocketPath}} {{#if item.LocalBindSocketPath}}
<dl> <dl class="local-bind-socket-path">
<dt> <dt>
Local bind socket path Local bind socket path
</dt> </dt>
<dd> <dd>
<CopyButton <CopyButton
@value={{item.LocalBindSocketPath}} @value={{item.LocalBindSocketPath}}
@name="Local bind socket path" @name="Local bind socket path"
/> />
{{item.LocalBindSocketPath}} {{item.LocalBindSocketPath}}
</dd> </dd>
</dl> </dl>
<dl class="local-bind-mode"> <dl class="local-bind-socket-mode">
<dt class>mode</dt> <dt>
<dd> Mode
{{or item.LocalBindSocketMode '-'}} </dt>
</dd> <dd>
</dl> {{or item.LocalBindSocketMode '-'}}
{{else}} </dd>
{{#if (gt item.LocalBindPort 0)}} </dl>
{{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}} {{else}}
{{#if (gt item.LocalBindPort 0)}}
{{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}}
<dl class="local-bind-address"> <dl class="local-bind-address">
<dt> <dt>
<span> Address
Address
</span>
</dt> </dt>
<dd> <dd>
<CopyButton <CopyButton
@ -73,12 +73,11 @@
{{combinedAddress}} {{combinedAddress}}
</dd> </dd>
</dl> </dl>
{{/let}} {{/let}}
{{/if}} {{/if}}
{{/if}}
{{/if}}
</div> </div>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</div> </div>

13
ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
View File

@ -1,4 +1,4 @@
.consul-upstream-instance-list { %consul-upstream-instance-list {
li { li {
@extend %composite-row; @extend %composite-row;
} }
@ -11,7 +11,16 @@
dl.nspace dt::before { dl.nspace dt::before {
@extend %with-folder-outline-mask, %as-pseudo; @extend %with-folder-outline-mask, %as-pseudo;
} }
dl.local-bind-mode dt { dl.local-bind-socket-path dt,
dl.local-bind-address dt {
@extend %horizontal-kv-list-hidden-title;
}
dl.local-bind-socket-mode dt {
@extend %horizontal-kv-list-visible-title;
text-transform: lowercase;
font-weight: var(--typo-weight-semibold); font-weight: var(--typo-weight-semibold);
} }
} }
.consul-upstream-instance-list {
@extend %consul-upstream-instance-list;
}

57
ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs
View File

@ -5,13 +5,14 @@
@linkable="linkable upstream" @linkable="linkable upstream"
as |item index|> as |item index|>
<BlockSlot @name="header"> <BlockSlot @name="header">
{{#if (gt item.InstanceCount 0)}} {{#if (gt item.InstanceCount 0)}}
<dl class={{item.MeshStatus}}> <dl class={{item.MeshStatus}}>
<dt> <dt>
Health Health
</dt> </dt>
<dd> <dd
<Tooltip @position="top-start"> {{tooltip}}
>
{{#if (eq 'critical' item.MeshStatus)}} {{#if (eq 'critical' item.MeshStatus)}}
At least one health check on one instance is failing. At least one health check on one instance is failing.
{{else if (eq 'warning' item.MeshStatus)}} {{else if (eq 'warning' item.MeshStatus)}}
@ -21,48 +22,44 @@ as |item index|>
{{else}} {{else}}
There are no health checks. There are no health checks.
{{/if}} {{/if}}
</Tooltip>
</dd> </dd>
</dl> </dl>
{{#if (and (can 'use nspaces') (not-eq item.Namespace @nspace))}} <a
<a data-test-service-name
data-test-service-name href={{if (and (can 'use nspaces') (not-eq item.Namespace @nspace))
href={{href-to 'dc.services.show' @dc item.Name (href-to 'dc.services.show' @dc item.Name
params=(hash params=(hash
nspace=item.Namespace nspace=item.Namespace
) )
}} )
> (href-to 'dc.services.show' item.Name)
{{item.Name}} }}
</a> >
{{item.Name}}
</a>
{{else}} {{else}}
<a data-test-service-name href={{href-to 'dc.services.show' item.Name}}>
{{item.Name}}
</a>
{{/if}}
{{else}}
<p data-test-service-name> <p data-test-service-name>
{{item.Name}} {{item.Name}}
</p> </p>
{{/if}} {{/if}}
</BlockSlot> </BlockSlot>
<BlockSlot @name="details"> <BlockSlot @name="details">
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace @nspace))}} {{#if (and (can 'use nspaces') (not-eq item.Namespace @nspace))}}
<dl class="nspace"> <dl class="nspace">
<dt> <dt
<Tooltip> {{tooltip}}
Namespace >
</Tooltip> Namespace
</dt> </dt>
<dd> <dd>
{{item.Namespace}} {{item.Namespace}}
</dd> </dd>
</dl> </dl>
{{/if}} {{/if}}
{{#each item.GatewayConfig.Addresses as |address|}} {{#each item.GatewayConfig.Addresses as |address|}}
<dl> <dl>
<dt> <dt>
<span>Address</span> Address
</dt> </dt>
<dd> <dd>
<CopyButton <CopyButton
@ -72,6 +69,6 @@ as |item index|>
{{address}} {{address}}
</dd> </dd>
</dl> </dl>
{{/each}} {{/each}}
</BlockSlot> </BlockSlot>
</ListCollection> </ListCollection>

14
ui/packages/consul-ui/app/components/copy-button/index.scss
View File

@ -3,6 +3,20 @@
%copy-button { %copy-button {
@extend %button; @extend %button;
} }
/* Temporary tweak for copy-buttons in kv-lists */
/* once someone gets round to re-doing copy buttons */
/* hopefully this little tweak can go */
%horizontal-kv-list .copy-button {
margin-top: 0 !important;
}
%horizontal-kv-list .copy-btn {
top: 0 !important;
}
%horizontal-kv-list .copy-btn:empty::before {
left: 0 !important;
}
/**/
.copy-button button { .copy-button button {
@extend %copy-button; @extend %copy-button;
} }

1
ui/packages/consul-ui/app/components/definition-table/layout.scss
View File

@ -2,6 +2,7 @@
display: grid; display: grid;
grid-template-columns: 140px auto; grid-template-columns: 140px auto;
grid-gap: 0.4em 20px; grid-gap: 0.4em 20px;
margin-bottom: 1.4em;
} }
%definition-table dd > * { %definition-table dd > * {
display: inline-block; display: inline-block;

3
ui/packages/consul-ui/app/components/form-elements/index.scss
View File

@ -60,8 +60,7 @@ span.label {
} }
%form table, %form table,
%radio-group, %radio-group,
%checkbox-group, %checkbox-group {
%main-content form dl {
@extend %form-row; @extend %form-row;
} }
%radio-group label, %radio-group label,

4
ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss
View File

@ -10,10 +10,6 @@
%horizontal-kv-list:not([class]) dt:not([class]) { %horizontal-kv-list:not([class]) dt:not([class]) {
@extend %horizontal-kv-list-hidden-title; @extend %horizontal-kv-list-hidden-title;
} }
%horizontal-kv-list[class] dt,
%horizontal-kv-list dt[class] {
@extend %horizontal-kv-list-visible-title;
}
%horizontal-kv-list-hidden-title { %horizontal-kv-list-hidden-title {
@extend %visually-hidden; @extend %visually-hidden;
} }

6
ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss
View File

@ -19,6 +19,7 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
%horizontal-kv-list-visible-title { %horizontal-kv-list-visible-title {
display: inline-flex;
min-width: 18px; min-width: 18px;
} }
%horizontal-kv-list-reversed:not(:first-of-type), %horizontal-kv-list-reversed:not(:first-of-type),
@ -35,9 +36,12 @@
} }
/**/ /**/
%horizontal-kv-list-reversed dt, %horizontal-kv-list-reversed dt,
%horizontal-kv-list-visible-title + dd { %horizontal-kv-list dt + dd {
margin-left: 4px; margin-left: 4px;
} }
%horizontal-kv-list-hidden-title + dd {
margin-left: 0 !important;
}
%horizontal-kv-list-reversed dt + dd { %horizontal-kv-list-reversed dt + dd {
margin-left: 0; margin-left: 0;

5
ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss
View File

@ -1,8 +1,7 @@
%horizontal-kv-list dt[class=""]::after, %horizontal-kv-list-visible-title::after {
%horizontal-kv-list dt[class=""]::after {
display: inline; display: inline;
} }
%horizontal-kv-list dt[class=""]::after { %horizontal-kv-list-visible-title::after {
content: var(--horizontal-kv-list-key-separator); content: var(--horizontal-kv-list-key-separator);
} }
%horizontal-kv-list-reversed dt[class=""]::after { %horizontal-kv-list-reversed dt[class=""]::after {

2
ui/packages/consul-ui/mock-api/v1/catalog/connect/_
View File

@ -58,7 +58,7 @@ ${range(env('CONSUL_EXPOSED_COUNT', 3)).map((i) => `
${ location.pathname.slice(4) === "service-0" ? ` ${ location.pathname.slice(4) === "service-0" ? `
, ,
"DestinationServiceID": "${location.pathname.slice(4)}-with-id", "DestinationServiceID": "${location.pathname.slice(4)}-with-id",
${ fake.random.number({min: 1, max: 10}) > 2 ? ` ${ fake.random.number({min: 1, max: 10}) > 5 ? `
"LocalServiceAddress": "${fake.internet.ip()}", "LocalServiceAddress": "${fake.internet.ip()}",
"LocalServicePort": ${fake.random.number({min: 0, max: 65535})} "LocalServicePort": ${fake.random.number({min: 0, max: 65535})}
` : ` ` : `

6
ui/packages/consul-ui/mock-api/v1/health/service/_
View File

@ -127,13 +127,13 @@ ${range(env('CONSUL_EXPOSED_COUNT', 3)).map((i) => `
] ]
}, },
"Upstreams": [ "Upstreams": [
${range(env('CONSUL_UPSTREAM_COUNT', 10)).map((item, j) => ` ${range(env('CONSUL_UPSTREAM_COUNT', 10)).map((item, j) => `
{ {
"Datacenter": "${fake.address.countryCode().toLowerCase()} ${ i % 2 ? "west" : "east"}-${j}", "Datacenter": "${fake.address.countryCode().toLowerCase()} ${ i % 2 ? "west" : "east"}-${j}",
"DestinationName": "${fake.hacker.noun()}", "DestinationName": "${fake.hacker.noun()}",
"DestinationNamespace": "${fake.hacker.noun()}", "DestinationNamespace": "${fake.hacker.noun()}",
"DestinationType": "${fake.helpers.randomize(['service', 'prepared_query'])}", "DestinationType": "${fake.helpers.randomize(['service', 'prepared_query'])}",
${ false ? ` ${fake.random.number({min: 1, max: 10}) > 5 ? `
"LocalBindAddress": "${fake.internet.ip()}", "LocalBindAddress": "${fake.internet.ip()}",
"LocalBindPort": ${fake.random.number({min: 0, max: 65535})} "LocalBindPort": ${fake.random.number({min: 0, max: 65535})}
` : ` ` : `
@ -141,7 +141,7 @@ ${ false ? `
"LocalBindSocketPath": "/${fake.lorem.words(fake.random.number({min: 1, max: 5})).split(' ').join('/')}${fake.random.boolean() ? fake.system.fileName() : ''}" "LocalBindSocketPath": "/${fake.lorem.words(fake.random.number({min: 1, max: 5})).split(' ').join('/')}${fake.random.boolean() ? fake.system.fileName() : ''}"
` } ` }
} }
`)} `)}
] ]
` : ``} ` : ``}
}, },