UI: update exec styles to match conventions (#7811)
This commit is contained in:
Buck Doyle
GitHub
parent
315bcf1060
commit
438aec636a
|
|
@ -8,7 +8,8 @@
|
|||
@import './components/ember-power-select';
|
||||
@import './components/empty-message';
|
||||
@import './components/error-container';
|
||||
@import './components/exec';
|
||||
@import './components/exec-button';
|
||||
@import './components/exec-window';
|
||||
@import './components/fs-explorer';
|
||||
@import './components/gutter';
|
||||
@import './components/gutter-toggle';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
.exec-button {
|
||||
color: $ui-gray-800;
|
||||
border-color: $ui-gray-300;
|
||||
|
||||
span {
|
||||
color: $ui-gray-800;
|
||||
}
|
||||
|
||||
.icon:first-child:not(:last-child) {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0.5em;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
.exec-window {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3.5rem; // nav.navbar.is-popup height
|
||||
bottom: 0;
|
||||
|
||||
.terminal-container {
|
||||
flex-grow: 1;
|
||||
background: black;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
color: white;
|
||||
|
||||
.terminal {
|
||||
height: 100%;
|
||||
|
||||
.xterm .xterm-viewport {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: black;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.task-group-tree {
|
||||
background-color: $ui-gray-900;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
color: $grey-lighter;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $ui-gray-500;
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: white;
|
||||
font-size: inherit;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
padding: 6px 0 5px 17px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: 3px 3px 0 0;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
// Adapted from fs-explorer
|
||||
&.is-loading::after {
|
||||
animation: spinAround 750ms infinite linear;
|
||||
border: 2px solid $grey-light;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
opacity: 0.3;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list {
|
||||
.task-item {
|
||||
padding: 0 8px 0 19px;
|
||||
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.border-and-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
border-left: 1px solid $ui-gray-700;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
position: absolute;
|
||||
top: 7.5px;
|
||||
left: -9.75px;
|
||||
|
||||
stroke: $ui-gray-900;
|
||||
stroke-width: 5px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.task-label {
|
||||
padding: 6px 0 5px 13px;
|
||||
overflow-wrap: break-word;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
visibility: hidden;
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover .icon.show-on-hover {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-button,
|
||||
.task-item {
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: $ui-gray-800;
|
||||
border-radius: 4px;
|
||||
|
||||
.is-active {
|
||||
stroke: $ui-gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
.tree-and-terminal {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3.5rem; // nav.navbar.is-popup height
|
||||
bottom: 0;
|
||||
|
||||
.terminal-container {
|
||||
flex-grow: 1;
|
||||
background: black;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
color: white;
|
||||
|
||||
.terminal {
|
||||
height: 100%;
|
||||
|
||||
.xterm .xterm-viewport {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: black;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.task-group-tree {
|
||||
background-color: $ui-gray-900;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
color: $grey-lighter;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $ui-gray-500;
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: white;
|
||||
font-size: inherit;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
padding: 6px 0 5px 17px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: 3px 3px 0 0;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
// Adapted from fs-explorer
|
||||
&.is-loading::after {
|
||||
animation: spinAround 750ms infinite linear;
|
||||
border: 2px solid $grey-light;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
opacity: 0.3;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list {
|
||||
.task-item {
|
||||
padding: 0 8px 0 19px;
|
||||
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.border-and-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
border-left: 1px solid $ui-gray-700;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
position: absolute;
|
||||
top: 7.5px;
|
||||
left: -9.75px;
|
||||
|
||||
stroke: $ui-gray-900;
|
||||
stroke-width: 5px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.task-label {
|
||||
padding: 6px 0 5px 13px;
|
||||
overflow-wrap: break-word;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
visibility: hidden;
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover .icon.show-on-hover {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-button,
|
||||
.task-item {
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: $ui-gray-800;
|
||||
border-radius: 4px;
|
||||
|
||||
.is-active {
|
||||
stroke: $ui-gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exec-button {
|
||||
color: $ui-gray-800;
|
||||
border-color: $ui-gray-300;
|
||||
|
||||
span {
|
||||
color: $ui-gray-800;
|
||||
}
|
||||
|
||||
.icon:first-child:not(:last-child) {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0.5em;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,6 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="tree-and-terminal loading">
|
||||
<div class="exec-window loading">
|
||||
{{partial "partials/loading-spinner"}}
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</nav>
|
||||
|
||||
{{#if (eq model.status "dead")}}
|
||||
<div class="tree-and-terminal" data-test-exec-job-dead>
|
||||
<div class="exec-window" data-test-exec-job-dead>
|
||||
<div class="task-group-tree">
|
||||
</div>
|
||||
<div class="terminal-container" data-test-exec-job-dead-message>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="tree-and-terminal">
|
||||
<div class="exec-window">
|
||||
<div class="task-group-tree">
|
||||
<h4 class="title is-6">Tasks</h4>
|
||||
<ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue