luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

UI: CC-4032 - Update sidebar width (#16204) 

* Update chrome-width var to be 280px

* Formatting & Changelog
This commit is contained in:
Tyler Wendlandt 2023-02-13 11:48:31 -07:00 committed by GitHub
parent 346f89781d
commit 9329199863
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 120 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/16204.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Update sidebar width to 280px
```

6
ui/packages/consul-ui/app/components/app/index.scss
View File

@ -123,11 +123,11 @@ main {
}
%main-nav-horizontal-toggle:checked ~ footer,
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
left: calc(var(--chrome-width, 300px) * -1);
left: calc(var(--chrome-width, 280px) * -1);
}
%main-nav-horizontal-toggle ~ main .notifications,
%main-nav-horizontal-toggle ~ main {
margin-left: var(--chrome-width, 300px);
margin-left: var(--chrome-width, 280px);
}
%main-nav-horizontal-toggle:checked ~ main .notifications,
%main-nav-horizontal-toggle:checked ~ main {
@ -144,7 +144,7 @@ main {
}
%main-nav-horizontal-toggle ~ footer,
%main-nav-horizontal-toggle + header > div > nav:first-of-type {
left: calc(var(--chrome-width, 300px) * -1);
left: calc(var(--chrome-width, 280px) * -1);
}
%main-nav-horizontal-toggle ~ main .notifications,
%main-nav-horizontal-toggle ~ main {

2
ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
View File

@ -2,7 +2,7 @@
position: absolute;
left: 0;
top: var(--chrome-height, 47px);
width: var(--chrome-width, 300px);
width: var(--chrome-width, 280px);
height: calc(100vh - var(--chrome-height, 47px) - 35px);
padding-top: 35px;
overflow: auto;

2
ui/packages/consul-ui/app/styles/variables/layout.scss
View File

@ -1,4 +1,4 @@
:root {
--chrome-width: 300px;
--chrome-width: 280px;
--chrome-height: 64px;
}

121
ui/packages/consul-ui/app/templates/application.hbs
View File

@ -1,36 +1,41 @@
<Route @name={{routeName}} as |route|>
{{! Add the a11y route announcer }}
<route.Announcer @title="Consul" />
<route.Announcer @title='Consul' />
{{! Tell CSS what we have enabled }}
{{#if (can "use acls")}}
{{document-attrs class="has-acls"}}
{{#if (can 'use acls')}}
{{document-attrs class='has-acls'}}
{{/if}}
{{#if (can "use nspaces")}}
{{document-attrs class="has-nspaces"}}
{{#if (can 'use nspaces')}}
{{document-attrs class='has-nspaces'}}
{{/if}}
{{#if (can "use partitions")}}
{{document-attrs class="has-partitions"}}
{{#if (can 'use partitions')}}
{{document-attrs class='has-partitions'}}
{{/if}}
{{! Listen out for blocking query/client setting changes }}
<DataSource @src={{uri 'settings://consul:client' }} @onchange={{route-action "onClientChanged" }} />
<DataSource
@src={{uri 'settings://consul:client'}}
@onchange={{route-action 'onClientChanged'}}
/>
{{! Tell CSS about our theme }}
<DataSource @src={{uri 'settings://consul:theme' }} as |source|>
<DataSource @src={{uri 'settings://consul:theme'}} as |source|>
{{#each-in source.data as |key value|}}
{{#if (and value (includes key (array "color-scheme" "contrast")))}}
{{#if (and value (includes key (array 'color-scheme' 'contrast')))}}
{{document-attrs class=(concat 'prefers-' key '-' value)}}
{{/if}}
{{/each-in}}
</DataSource>
{{! If ACLs are enabled try get a token }}
{{#if (can "use acls")}}
<DataSource @src={{uri 'settings://consul:token' }} @onchange={{action (mut token) value="data" }} />
{{#if (can 'use acls')}}
<DataSource
@src={{uri 'settings://consul:token'}}
@onchange={{action (mut token) value='data'}}
/>
{{/if}}
{{#if (not-eq route.currentName 'oauth-provider-debug')}}
{{! redirect if we aren't on a URL with dc information }}
@ -40,80 +45,80 @@
{{! redirects are in the dc.show route}}
{{! 2022-04-15: Temporarily reverting the services page to the default }}
{{did-insert (route-action 'replaceWith' 'dc.services.index'
(hash
dc=(env 'CONSUL_DATACENTER_LOCAL')
)
)}}
{{did-insert
(route-action 'replaceWith' 'dc.services.index' (hash dc=(env 'CONSUL_DATACENTER_LOCAL')))
}}
{{else}}
{{! If we are notfound, guess the params we need }}
{{#if (eq route.currentName 'notfound')}}
<DataSource @src={{uri '/*/*/*/notfound/${path}' (hash path=route.params.notfound ) }} @onchange={{action (mut
notfound) value="data" }} />
<DataSource
@src={{uri '/*/*/*/notfound/${path}' (hash path=route.params.notfound)}}
@onchange={{action (mut notfound) value='data'}}
/>
{{/if}}
{{! Make sure we guess and default to the right params when not found }}
{{#let
(if (can "use partitions") (or route.params.partition notfound.partition token.Partition '') '')
(if (can "use nspaces") (or route.params.nspace notfound.nspace token.Namespace '') '')
as |partition nspace|}}
(if
(can 'use partitions')
(or route.params.partition notfound.partition token.Partition '')
''
)
(if (can 'use nspaces') (or route.params.nspace notfound.nspace token.Namespace '') '')
as |partition nspace|
}}
{{! Make sure we have enough to show the app chrome}}
{{! Don't show anything until we have a list of DCs }}
<DataSource @src={{uri '/*/*/*/datacenters' }} as |dcs|>
<DataSource @src={{uri '/*/*/*/datacenters'}} as |dcs|>
{{! Once we have a list of DCs make sure the DC we are asking for exists }}
{{! If not use the DC that the UI is running in }}
{{#let
(or
(if nofound.dc
(object-at 0 (cached-model
'dc'
(hash
Name=notfound.dc
(if nofound.dc (object-at 0 (cached-model 'dc' (hash Name=notfound.dc))))
(object-at 0 (cached-model 'dc' (hash Name=route.params.dc)))
(hash Name=(env 'CONSUL_DATACENTER_LOCAL'))
)
)
)
)
(object-at 0 (cached-model
'dc'
(hash
Name=route.params.dc
)
)
)
(hash
Name=(env "CONSUL_DATACENTER_LOCAL")
)
)
dcs.data
as |dc dcs|}}
as |dc dcs|
}}
{{#if (and (gt dc.Name.length 0) dcs)}}
{{! figure out our current DC and convert it to a model }}
<DataSource @src={{uri '/${partition}/*/${dc}/datacenter-cache/${name}' (hash dc=dc.Name partition=partition
name=dc.Name ) }} as |dc|>
<DataSource
@src={{uri
'/${partition}/*/${dc}/datacenter-cache/${name}'
(hash dc=dc.Name partition=partition name=dc.Name)
}}
as |dc|
>
{{#if dc.data}}
<HashicorpConsul id="wrapper" @dcs={{dcs}} @dc={{dc.data}} @partition={{partition}} @nspace={{nspace}}
@user={{hash token=token }} @onchange={{action "reauthorize" }} as |consul|>
<HashicorpConsul
id='wrapper'
@dcs={{dcs}}
@dc={{dc.data}}
@partition={{partition}}
@nspace={{nspace}}
@user={{hash token=token}}
@onchange={{action 'reauthorize'}}
as |consul|
>
{{#if error}}
{{! If we got an error from anything, show an error page }}
<AppError @error={{error}} @login={{consul.login.open}} />
{{else}}
{{! Otherwise show the rest of the app}}
<Outlet @name="application" @model={{hash app=consul user=(hash token=token ) dc=dc.data dcs=dcs }} as |o|>
<Outlet
@name='application'
@model={{hash app=consul user=(hash token=token) dc=dc.data dcs=dcs}}
as |o|
>
{{outlet}}
</Outlet>
{{! loading component for when we need it}}
<Consul::Loader class="view-loader" />
<Consul::Loader class='view-loader' />
{{/if}}
</HashicorpConsul>
@ -126,7 +131,7 @@
{{/if}}
{{else}}
{{! Routes with no main navigation }}
<Outlet @name="application" @model={{hash user=(hash token=token ) }} as |o|>
<Outlet @name='application' @model={{hash user=(hash token=token)}} as |o|>
{{outlet}}
</Outlet>
{{/if}}