Skip to content

Commit d8f7c3d

Browse files
johncowenkaxcode
johncowen
authored and
kaxcode
committed
ui: Refactors our app-view/%app-view component (#7752)
We noticed that it was about time we dug into the app-view component as the skin of the UI has chnged quite a bit since this component started and it has now become slightly more consistent. The %app-view CSS has not changed much and things needed within it have gradually become more clearer. Apart from some refactoring of CSS here, the biggest change is the addition of a `nav` Slot, which gets placed immediately underneath the title of the page. This contains any main navigation elements for the page.
1 parent 46d589b commit d8f7c3d

File tree

16 files changed

+152
-178
lines changed

16 files changed

+152
-178
lines changed

‎ui-v2/app/components/app-view/index.hbs

+13-7
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,25 @@
4545
</FlashMessage>
4646
{{/each}}
4747
<div>
48-
<div class="actions">
49-
{{#if authorized}}
50-
<YieldSlot @name="actions">{{yield}}</YieldSlot>
51-
{{/if}}
52-
</div>
53-
5448
<div>
5549
{{#if authorized}}
5650
<nav aria-label="Breadcrumb">
5751
<YieldSlot @name="breadcrumbs">{{yield}}</YieldSlot>
5852
</nav>
5953
{{/if}}
60-
<YieldSlot @name="header">{{yield}}</YieldSlot>
54+
<div class="title">
55+
<YieldSlot @name="header">
56+
{{yield}}
57+
</YieldSlot>
58+
<div class="actions">
59+
{{#if authorized}}
60+
<YieldSlot @name="actions">{{yield}}</YieldSlot>
61+
{{/if}}
62+
</div>
63+
</div>
64+
<YieldSlot @name="nav">
65+
{{yield}}
66+
</YieldSlot>
6167
</div>
6268
</div>
6369
{{#if authorized}}

‎ui-v2/app/styles/components/app-view.scss

+11-56
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,19 @@
44

55
@import '../base/components/popover-menu/index';
66

7-
%app-view-header .actions > [type='checkbox'] {
8-
@extend %more-popover-menu;
9-
}
10-
%more-popover-menu-panel [type='checkbox']:checked ~ * {
11-
/* this needs to autocalculate */
12-
min-height: 143px;
13-
max-height: 143px;
14-
}
15-
%more-popover-menu-panel [id$='logout']:checked ~ * {
16-
/* this needs to autocalculate */
17-
min-height: 163px;
18-
max-height: 163px;
19-
}
20-
%more-popover-menu-panel [id$='delete']:checked ~ ul label[for$='delete'] + [role='menu'],
21-
%more-popover-menu-panel [id$='logout']:checked ~ ul label[for$='logout'] + [role='menu'],
22-
%more-popover-menu-panel [id$='use']:checked ~ ul label[for$='use'] + [role='menu'] {
23-
display: block;
24-
}
25-
%app-view-header .actions label + div {
26-
// We need this extra to allow tooltips to show
7+
%app-view-actions label + div {
8+
/* We need this extra to allow tooltips to show */
279
overflow: visible !important;
2810
}
2911

3012
main {
3113
@extend %app-view;
3214
}
33-
%app-view > div > header {
34-
@extend %app-view-header;
35-
}
36-
%app-view > div > div {
37-
@extend %app-view-content;
38-
}
39-
%app-view header form {
15+
%app-view-header form {
4016
@extend %filter-bar;
4117
}
42-
@media #{$--lt-spacious-page-header} {
43-
%app-view-header .actions {
44-
margin-top: 9px;
45-
}
46-
}
47-
// TODO: This should be its own component
48-
%app-view h1 {
49-
padding-bottom: 0.2em;
50-
}
51-
%app-view h1 span[data-tooltip] {
52-
@extend %with-external-source-icon;
53-
margin-top: 13px;
54-
}
55-
%app-view h1 span.kind-proxy {
56-
@extend %frame-gray-900;
57-
@extend %pill;
58-
}
59-
%app-view h1 span.kind-proxy::before {
60-
width: 0.3em !important;
61-
}
62-
%app-view h1 em {
63-
color: $gray-600;
64-
}
65-
%app-view-header .actions a,
66-
%app-view-header .actions button {
18+
%app-view-actions a,
19+
%app-view-actions button {
6720
@extend %button-compact;
6821
}
6922
%app-view-content div > dl {
@@ -97,12 +50,14 @@ main {
9750
display: none;
9851
}
9952
}
53+
@media #{$--lt-spacious-page-header} {
54+
%app-view-actions {
55+
margin-top: 9px;
56+
}
57+
}
10058
// reduced search magnifying icon layout
10159
@media #{$--lt-horizontal-selects} {
102-
%app-view header h1 {
103-
display: inline-block;
104-
}
105-
%app-view header h1 {
60+
%app-view-header h1 {
10661
display: inline-block;
10762
}
10863
// on the instance detail page we don't have the magnifier

‎ui-v2/app/styles/components/app-view/index.scss

+12
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
11
@import './skin';
22
@import './layout';
3+
%app-view > div > header {
4+
@extend %app-view-header;
5+
}
6+
%app-view-header .title {
7+
@extend %app-view-title;
8+
}
9+
%app-view-header .actions {
10+
@extend %app-view-actions;
11+
}
12+
%app-view > div > div {
13+
@extend %app-view-content;
14+
}

‎ui-v2/app/styles/components/app-view/layout.scss

+32-37
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,61 @@
11
/* layout */
2-
%app-view-header > div:last-of-type > div:first-child {
3-
flex-grow: 1;
4-
}
52
%app-view {
63
position: relative;
74
}
8-
%app-view-header .actions {
9-
float: right;
5+
%app-view-title {
6+
display: flex;
7+
align-items: center;
8+
}
9+
%app-view-actions {
10+
margin-left: auto;
1011
display: flex;
1112
align-items: flex-start;
12-
margin-top: 9px;
1313
}
1414
%app-view-header dl {
1515
float: left;
16-
margin-top: 25px;
17-
margin-right: 50px;
18-
margin-bottom: 20px;
19-
}
20-
%app-view-header dt {
21-
font-weight: bold;
22-
}
23-
%app-view-header dd > a {
24-
color: $black;
25-
}
26-
%app-view-header .title-bar {
27-
display: flex;
28-
align-items: center;
29-
}
30-
%app-view-header .title-bar > h1 {
31-
border: 0;
32-
}
33-
%app-view-header .title-bar > span {
34-
margin-left: 8px;
3516
}
3617
/* units */
3718
%app-view {
3819
margin-top: 50px;
3920
}
21+
/* give anything after the header a bit of room */
4022
%app-view-header + div > *:first-child {
4123
margin-top: 1.8em;
4224
}
43-
%app-view h2 {
25+
%app-view-title {
4426
padding-bottom: 0.2em;
45-
margin-bottom: 0.5em;
4627
}
47-
%app-view-header .actions > *:not(:last-child) {
28+
%app-view-title > :not(:last-child) {
29+
margin-right: 8px;
30+
}
31+
%app-view-actions {
32+
margin-top: 9px;
33+
}
34+
%app-view-actions > *:not(:last-child) {
4835
margin-right: 12px;
4936
}
50-
51-
// content
52-
%app-view-content div > dl > dt {
53-
position: absolute;
37+
%app-view-header dl {
38+
margin-top: 19px;
39+
margin-bottom: 23px;
40+
margin-right: 50px;
5441
}
55-
%app-view-content div > dl {
56-
position: relative;
42+
43+
/* content */
44+
%app-view-content h2 {
45+
padding-bottom: 0.2em;
46+
margin-bottom: 0.5em;
5747
}
5848
%app-view-content-empty {
5949
margin-top: 0;
6050
padding: 50px;
6151
text-align: center;
6252
}
63-
%app-view-content form:not(:last-child) {
64-
margin-bottom: 2.2em;
53+
/* this should probably be its own component */
54+
%app-view-content div > dl {
55+
position: relative;
56+
}
57+
%app-view-content div > dl > dt {
58+
position: absolute;
6559
}
6660
%app-view-content div > dl > dt {
6761
width: 140px;
@@ -73,7 +67,8 @@
7367
min-height: 1em;
7468
margin-bottom: 0.4em;
7569
}
76-
// TODO: Think about an %app-form or similar
70+
/* */
71+
/* TODO: Think about an %app-form or similar */
7772
%app-view-content fieldset:not(.freetext-filter) {
7873
padding-bottom: 0.3em;
7974
margin-bottom: 2em;

‎ui-v2/app/styles/components/app-view/skin.scss

+23-47
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,33 @@
1-
/*TODO: Rename this to %app-view-brand-icon or similar */
2-
%with-external-source-icon {
3-
background-repeat: no-repeat;
4-
background-size: contain;
5-
width: 18px;
6-
height: 18px;
7-
8-
--kubernetes-icon: #{$kubernetes-logo-color-svg};
9-
--terraform-icon: #{$terraform-logo-color-svg};
10-
--nomad-icon: #{$nomad-logo-color-svg};
11-
--consul-icon: #{$consul-logo-color-svg};
12-
--aws-icon: #{$aws-logo-color-svg};
13-
}
14-
%app-view h2,
15-
%app-view fieldset {
1+
%app-view-content-empty {
2+
@extend %frame-gray-500;
3+
}
4+
%app-view-title {
5+
border-bottom: $decor-border-200;
6+
}
7+
%app-view-content h2,
8+
%app-view-content fieldset {
169
border-bottom: $decor-border-200;
1710
}
18-
%app-view fieldset h2 {
11+
%app-view-content fieldset h2 {
1912
border-bottom: none;
2013
}
21-
@media #{$--horizontal-selects} {
22-
%app-view header h1,
23-
%app-view-header .title-bar {
24-
border-bottom: $decor-border-200;
25-
}
26-
}
27-
@media #{$--lt-horizontal-selects} {
28-
%app-view header > div > div:last-child {
29-
border-bottom: $decor-border-200;
30-
}
31-
}
32-
%app-view header > div > div:last-child,
33-
%app-view header h1,
34-
%app-view-header .title-bar,
35-
%app-view h2,
36-
%app-view fieldset {
37-
border-color: $gray-200;
14+
%app-view-header h1 > em {
15+
color: $gray-600;
3816
}
39-
%app-view-header .with-nav {
40-
border: 0;
41-
}
42-
// We know that any sibling navs might have a top border
43-
// by default. As its squashed up to a h1, in this
44-
// case hide its border to avoid double border
45-
@media #{$--horizontal-selects} {
46-
%app-view header h1 ~ nav {
47-
border-top: 0 !important;
48-
}
17+
%app-view-header dd > a {
18+
color: $black;
4919
}
5020
%app-view-content div > dl > dd {
5121
color: $gray-400;
5222
}
53-
[role='tabpanel'] > p:only-child,
54-
.template-error > div,
55-
%app-view-content > p:only-child {
56-
@extend %frame-gray-500;
23+
%app-view-title,
24+
%app-view-content h2,
25+
%app-view-content fieldset {
26+
border-color: $gray-200;
27+
}
28+
// We know that any sibling navs might have a top border
29+
// by default. As its squashed up to a %app-view-title, in this
30+
// case hide its border to avoid double border
31+
%app-view-title ~ nav {
32+
border-top: 0 !important;
5733
}

‎ui-v2/app/styles/components/filter-bar/layout.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
%filter-bar {
22
padding: 4px;
33
display: block;
4+
margin-bottom: 8px;
45
margin-top: 0 !important;
5-
margin-bottom: 8px !important;
6+
}
7+
%filter-bar + :not(.notice) {
8+
margin-top: 1.8em;
69
}
710
@media #{$--horizontal-filters} {
811
%filter-bar {

0 commit comments

Comments
 (0)