Merge pull request #1659 from marshmalien/fix/ux-hit-list

UX Hit List
This commit is contained in:
Jake McDermott 2018-05-03 01:08:46 -04:00 committed by GitHub
commit 771dbe2ffe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 75 additions and 194 deletions

View File

@ -135,6 +135,7 @@
border-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
max-height: ~"calc(100vh - 350px)";
& > table {
table-layout: fixed;
@ -300,7 +301,7 @@
display: grid;
grid-gap: 20px;
grid-template-columns: minmax(300px, 1fr) minmax(500px, 2fr);
grid-template-rows: minmax(500px, ~"calc(100vh - 140px)");
grid-template-rows: minmax(500px, ~"calc(100vh - 130px)");
.at-Panel {
overflow-y: auto;

View File

@ -120,6 +120,7 @@
}
.at-Row-toggle {
align-self: flex-start;
margin-right: @at-space-4x;
}

View File

@ -246,7 +246,7 @@
@at-padding-list-empty: @at-space-2x;
@at-padding-list-row-item-tag: 0 @at-space-2x;
@at-padding-list-row-action: 7px;
@at-padding-list-row: 10px 20px;
@at-padding-list-row: 10px 20px 10px 10px;
@at-margin-input-message: @at-space;
@at-margin-item-column: @at-space-3x;
@ -264,7 +264,7 @@
@at-margin-top-search-key: @at-space-2x;
@at-margin-top-list: @at-space-5x;
@at-margin-top-list: @at-space-4x;
@at-margin-bottom-list-toolbar: @at-space-4x;
@at-margin-left-toolbar-action: @at-space-4x;
@at-margin-left-toolbar-carat: @at-space;

View File

@ -61,7 +61,7 @@
.DashboardList-tableHeader--actions {
border-top-right-radius: 5px;
width: 90px;
width: 110px;
padding-right: 15px;
text-align: right;
}

View File

@ -32,12 +32,12 @@
</td>
<td class="List-actionsContainer">
<div class="List-actionButtonCell">
<at-launch-template template="template"
ng-show="template.can_start">
</at-launch-template>
<button class="List-actionButton" ng-click="editTemplate(template)">
<i class="fa fa-pencil"></i>
</button>
<at-launch-template template="template"
ng-show="template.can_start">
</at-launch-template>
</div>
</td>
</tr>

View File

@ -93,13 +93,6 @@ export default ['i18n', function(i18n) {
fieldActions: {
columnClass: 'col-md-2 col-sm-3 col-xs-4',
network: {
label: i18n._('Network Visualization'),
ngClick: 'goToGraph(inventory)',
awToolTip: i18n._('Network Visualization'),
dataPlacement: 'top',
ngShow: '!inventory.pending_deletion'
},
edit: {
label: i18n._('Edit'),
ngClick: 'editInventory(inventory)',
@ -107,6 +100,13 @@ export default ['i18n', function(i18n) {
dataPlacement: 'top',
ngShow: '!inventory.pending_deletion && inventory.summary_fields.user_capabilities.edit'
},
network: {
label: i18n._('Network Visualization'),
ngClick: 'goToGraph(inventory)',
awToolTip: i18n._('Network Visualization'),
dataPlacement: 'top',
ngShow: '!inventory.pending_deletion'
},
copy: {
label: i18n._('Copy'),
ngClick: 'copyInventory(inventory)',

View File

@ -73,6 +73,13 @@ export default ['i18n', function(i18n) {
fieldActions: {
columnClass: 'col-lg-6 col-md-4 col-sm-4 col-xs-5 text-right',
edit: {
ngClick: "editHost(host)",
icon: 'icon-edit',
awToolTip: i18n._('Edit host'),
dataPlacement: 'top',
ngShow: 'host.summary_fields.user_capabilities.edit'
},
insights: {
ngClick: "goToInsights(host)",
icon: 'fa-info',
@ -81,13 +88,6 @@ export default ['i18n', function(i18n) {
ngShow: 'host.insights_system_id && host.summary_fields.inventory.hasOwnProperty("insights_credential_id")',
ngClass: "{'List-actionButton--selected': $stateParams['host_id'] == host.id && $state.is('inventories.edit.hosts.edit.insights')}"
},
edit: {
ngClick: "editHost(host)",
icon: 'icon-edit',
awToolTip: i18n._('Edit host'),
dataPlacement: 'top',
ngShow: 'host.summary_fields.user_capabilities.edit'
},
view: {
ngClick: "editHost(host)",
awToolTip: i18n._('View host'),

View File

@ -77,6 +77,13 @@
columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right',
edit: {
mode: 'all',
ngClick: "editSource(inventory_source.id)",
awToolTip: i18n._('Edit source'),
dataPlacement: "top",
ngShow: "inventory_source.summary_fields.user_capabilities.edit"
},
source_update: {
mode: 'all',
ngClick: 'updateSource(inventory_source)',
@ -105,13 +112,6 @@
dataPlacement: 'top',
ngShow: "!(inventory_source.summary_fields.inventory_source.source === '') && inventory_source.summary_fields.user_capabilities.schedule"
},
edit: {
mode: 'all',
ngClick: "editSource(inventory_source.id)",
awToolTip: i18n._('Edit source'),
dataPlacement: "top",
ngShow: "inventory_source.summary_fields.user_capabilities.edit"
},
view: {
mode: 'all',
ngClick: "editSource(inventory_source.id)",

View File

@ -59,15 +59,7 @@ export default ['i18n', function(i18n){
fieldActions: {
columnClass: 'col-md-2 col-sm-3 col-xs-3',
test: {
ngClick: "testNotification(notification_template.id)",
icon: 'fa-bell-o',
label: i18n._('Edit'),
"class": 'btn-sm',
awToolTip: i18n._('Test notification'),
dataPlacement: 'top',
ngShow: 'notification_template.summary_fields.user_capabilities.edit'
},
edit: {
ngClick: "editNotification(notification_template.id)",
icon: 'fa-edit',
@ -77,6 +69,15 @@ export default ['i18n', function(i18n){
dataPlacement: 'top',
ngShow: 'notification_template.summary_fields.user_capabilities.edit'
},
test: {
ngClick: "testNotification(notification_template.id)",
icon: 'fa-bell-o',
label: i18n._('Edit'),
"class": 'btn-sm',
awToolTip: i18n._('Test notification'),
dataPlacement: 'top',
ngShow: 'notification_template.summary_fields.user_capabilities.edit'
},
copy: {
label: i18n._('Copy'),
ngClick: 'copyNotification(notification_template)',

View File

@ -5,6 +5,11 @@
</div>
<div class="PortalMode-panel--right">
<div id="portal-container-jobs" class="Panel">
<div class="List-header">
<div class="List-title">
<div class="List-titleText" translate>JOBS</div>
</div>
</div>
<div class="PortalMode-filterHolder">
<div class="FormToggle-container">
<div class="btn-group">

View File

@ -17,7 +17,8 @@
}
.List-header {
height: 20px;
height: 14px;
margin-bottom: 20px;
}
}
.PortalMode-panelHeader{

View File

@ -35,7 +35,7 @@ export default ['i18n', function(i18n) {
name: {
key: true,
label: i18n._('Name'),
columnClass: "col-lg-4 col-md-4 col-sm-5 col-xs-7 List-staticColumnAdjacent",
columnClass: "col-lg-4 col-md-4 col-sm-4 col-xs-7 List-staticColumnAdjacent",
modalColumnClass: 'col-md-8',
awToolTip: '{{project.description | sanitize}}',
dataPlacement: 'top'
@ -44,18 +44,18 @@ export default ['i18n', function(i18n) {
label: i18n._('Type'),
ngBind: 'project.type_label',
excludeModal: true,
columnClass: 'col-lg-2 col-md-2 col-sm-3 hidden-xs'
columnClass: 'col-lg-2 col-md-2 col-sm-2 hidden-xs'
},
scm_revision: {
label: i18n._('Revision'),
excludeModal: true,
columnClass: 'List-tableCell col-lg-4 col-md-2 col-sm-3 hidden-xs',
columnClass: 'List-tableCell col-lg-2 col-md-2 hidden-sm hidden-xs',
type: 'revision'
},
last_updated: {
label: i18n._('Last Updated'),
filter: "longDate",
columnClass: "col-lg-3 col-md-3 hidden-sm hidden-xs",
columnClass: "col-lg-3 hidden-md hidden-sm hidden-xs",
excludeModal: true,
nosort: true
}
@ -82,8 +82,13 @@ export default ['i18n', function(i18n) {
fieldActions: {
columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-5',
columnClass: 'col-lg-4 col-md-3 col-sm-4 col-xs-5',
edit: {
ngClick: "editProject(project.id)",
awToolTip: i18n._('Edit the project'),
dataPlacement: 'top',
ngShow: "project.summary_fields.user_capabilities.edit"
},
scm_update: {
ngClick: 'SCMUpdate(project.id, $event)',
awToolTip: "{{ project.scm_update_tooltip }}",
@ -108,12 +113,6 @@ export default ['i18n', function(i18n) {
dataPlacement: 'top',
ngShow: 'project.summary_fields.user_capabilities.copy'
},
edit: {
ngClick: "editProject(project.id)",
awToolTip: i18n._('Edit the project'),
dataPlacement: 'top',
ngShow: "project.summary_fields.user_capabilities.edit"
},
view: {
ngClick: "editProject(project.id)",
awToolTip: i18n._('View the project'),

View File

@ -15,8 +15,9 @@
background-color: @default-link;
margin-top: 2px;
cursor: pointer;
display: inline-block;
min-width: 42px;
display: flex;
justify-content: flex-end;
width: 42px;
&.ScheduleToggle--disabled {
cursor: not-allowed;
@ -32,30 +33,27 @@
.ScheduleToggle-switch {
color: @default-link;
background-color: @default-bg;
margin-left: 7px;
border-left: 1px solid @default-link;
margin-right: 0px;
text-align: center;
text-transform: uppercase;
font-size: 11px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
padding-top: 0px;
padding: 0px 5px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px;
display: inline-block;
height: 22px;
height: 16px;
line-height: 16px;
}
.ScheduleToggle.is-on {
border-color: @default-link;
background-color: @default-bg;
justify-content: flex-start;
}
.ScheduleToggle-switch.is-on {
margin-right: 5px;
margin-left: 0px;
background-color: @default-link;
color: @default-bg;
border-left: 0;
@ -63,6 +61,7 @@
border-bottom-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding: 0 7px;
}
.ScheduleToggle-switch:hover {

View File

@ -76,6 +76,15 @@ export default ['i18n', function(i18n) {
columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-3',
edit: {
label: i18n._('Edit'),
ngClick: "editJobTemplate(template)",
awToolTip: i18n._('Edit template'),
"class": 'btn-default btn-xs',
dataPlacement: 'top',
ngShow: 'template.summary_fields.user_capabilities.edit',
editStateParams: ['job_template_id', 'workflow_job_template_id']
},
submit: {
// The submit key lets the list generator know that we want to use the
// at-launch-template directive
@ -95,15 +104,6 @@ export default ['i18n', function(i18n) {
dataPlacement: 'top',
ngShow: 'template.summary_fields.user_capabilities.copy'
},
edit: {
label: i18n._('Edit'),
ngClick: "editJobTemplate(template)",
awToolTip: i18n._('Edit template'),
"class": 'btn-default btn-xs',
dataPlacement: 'top',
ngShow: 'template.summary_fields.user_capabilities.edit',
editStateParams: ['job_template_id', 'workflow_job_template_id']
},
view: {
label: i18n._('View'),
ngClick: "editJobTemplate(template)",

View File

@ -2,122 +2,10 @@
@breakpoint-md: 1180px;
standard-out-log {
flex: 5;
display: flex;
min-height: 0;
}
.StandardOut-preContent{
font-size: 12px;
padding: 0 20px 0 20px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
.StandardOut-container {
.OnePlusOne-container(100%, @breakpoint-md);
&.fullscreen {
.StandardOut-rightPanel {
max-width: 100%;
}
}
}
.StandardOut-leftPanel {
.OnePlusOne-panel--left(100%, @breakpoint-md);
max-width: 600px;
display: flex;
@media (max-width: @breakpoint-md - 1px) {
max-width: 100%;
}
.Panel {
height: ~"calc(100% - 20px)";
overflow-y: scroll;
}
}
.StandardOut-rightPanel {
.OnePlusOne-panel--right(100%, @breakpoint-md);
max-width: ~"calc(100% - 615px)";
@media (max-width: @breakpoint-md - 1px) {
padding-right: 15px;
}
.Panel {
display: flex;
flex-direction: column;
height: ~"calc(100% - 20px)";
}
}
.StandardOut-panelHeader {
.OnePlusOne-panelHeader
}
.StandardOut-consoleOutput {
margin-top: 25px;
border-radius: 5px;
width: 100%;
overflow: auto;
}
.StandardOut-details {
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding-top: 25px;
}
.StandardOut-detailsRow {
width: 100%;
display: flex;
margin: 0 -15px;
}
.StandardOut-detailsRow + .StandardOut-detailsRow {
margin-top: 20px;
}
.StandardOut-detailsRow--extraVars {
margin: 20px 0;
width: 100%;
}
.StandardOut-extraVarsContainer {
width: 100%;
padding-right: 15px;
}
.StandardOut-detailsLabel {
text-transform: uppercase;
color: @default-interface-txt;
}
.StandardOut-detailsContent {
width: 40%;
flex: 1 0 auto;
padding: 0px 29px;
text-transform: none;
word-wrap: break-word;
}
.StandardOut-statusText {
margin-left: 6px;
}
.StandardOut--capitalize {
text-transform: capitalize;
}
.StandardOut-preContainer {
height: 100%;
border: 1px solid @d7grey;
background: @default-secondary-bg;
color: @default-interface-txt;
}
.StandardOut-panelHeaderText {
align-items: center;
flex: 1 0 auto;
@ -130,10 +18,6 @@ standard-out-log {
font-size: 12px;
}
.StandardOut-actions {
display: flex;
}
.StandardOut-actionButton {
font-size: 16px;
height: 20px;
@ -160,13 +44,3 @@ standard-out-log {
.StandardOut-actionButton + a {
margin-left: 15px;
}
.StandardOut-seeMoreLess {
color: #337AB7;
margin: 4px 0px;
text-transform: uppercase;
padding: 2px 0px;
cursor: pointer;
border-radius: 5px;
font-size: 11px;
}