Condense views table UI #713
This commit is contained in:
commit
953c001491
|
@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
- [Dashboard improvements #712](https://github.com/farmOS/farmOS/pull/712)
|
||||
- [Condense metrics UI #711](https://github.com/farmOS/farmOS/pull/711)
|
||||
- [Condense views table UI #713](https://github.com/farmOS/farmOS/pull/713)
|
||||
- [Misc quick form code and documentation improvements #703](https://github.com/farmOS/farmOS/pull/703)
|
||||
|
||||
### Deprecated
|
||||
|
|
|
@ -0,0 +1,68 @@
|
|||
/* Add spacing below views attachments like the map. */
|
||||
.view .view-filters,
|
||||
.view .attachment.attachment-before {
|
||||
margin-bottom: var(--gin-spacing-s);
|
||||
}
|
||||
|
||||
/* Decrease space after exposed filter form. */
|
||||
.view .view-filters form.views-exposed-form {
|
||||
margin-bottom: var(--gin-spacing-s);
|
||||
}
|
||||
|
||||
/* Decrease padding within the view-content wrapper. */
|
||||
.view .view-content.gin-layer-wrapper {
|
||||
padding: var(--gin-spacing-xs);
|
||||
}
|
||||
|
||||
/* Do not wrap text within views table cells. */
|
||||
.view table.views-table th,
|
||||
.view table.views-table td {
|
||||
max-width: 15em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/*
|
||||
Decrease size of elements in views exposed form.
|
||||
This is inspired by the claro/gin form-element--extrasmall but does not make
|
||||
elements quite as small. Specifically a min-height of 2.5 instead of 1.5.
|
||||
*/
|
||||
.view form.views-exposed-form .form-element {
|
||||
font-size: var(--gin-font-size-s);
|
||||
line-height: 1.5;
|
||||
border-radius: var(--gin-border-s);
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
/* Styling for text and date elements in exposed form. */
|
||||
.view form.views-exposed-form .form-element--type-text,
|
||||
.view form.views-exposed-form .form-element--type-date {
|
||||
padding: var(--gin-spacing-xxs) var(--gin-spacing-xs);
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
/* Styling for select elements in exposed form. */
|
||||
.view form.views-exposed-form .form-element--type-select,
|
||||
.view form.views-exposed-form .form-element--type-select-multiple {
|
||||
padding: var(--gin-spacing-xxs) var(--gin-spacing-xs);
|
||||
min-width: 3.5rem;
|
||||
}
|
||||
.view form.views-exposed-form .form-element--type-select {
|
||||
background-size: 1.75rem 0.4375rem;
|
||||
padding-right: calc(1.5rem - 1px);
|
||||
}
|
||||
|
||||
/* Decrease height of views bulk form action. */
|
||||
.view form.views-form div[data-drupal-selector='edit-header'] > div.form-wrapper {
|
||||
padding: 0 0 0 var(--gin-spacing-xs);
|
||||
}
|
||||
|
||||
/* Specify gin variables for collapsible filter styles. */
|
||||
div.view-filters details > summary {
|
||||
padding: var(--gin-spacing-m);
|
||||
font-weight: var(--gin-font-weight-semibold);
|
||||
}
|
||||
div.view-filters details > div {
|
||||
margin: 0 0 0 var(--gin-spacing-s);
|
||||
}
|
|
@ -42,3 +42,7 @@ toolbar:
|
|||
css/toolbar.css: { }
|
||||
js:
|
||||
js/toolbar.js: { weight: -50 }
|
||||
views:
|
||||
css:
|
||||
theme:
|
||||
css/views.css: { }
|
||||
|
|
|
@ -124,6 +124,13 @@ function farm_ui_theme_preprocess_plan__full(&$variables) {
|
|||
$variables['#attached']['library'][] = 'farm_ui_theme/layout';
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements hook_preprocess_HOOK().
|
||||
*/
|
||||
function farm_ui_theme_preprocess_views_view(&$variables) {
|
||||
$variables['#attached']['library'][] = 'farm_ui_theme/views';
|
||||
}
|
||||
|
||||
/**
|
||||
* Splits content into a stacked two-column layout.
|
||||
*
|
||||
|
|
|
@ -1061,7 +1061,7 @@ display:
|
|||
image_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
id:
|
||||
sortable: true
|
||||
|
@ -1087,22 +1087,22 @@ display:
|
|||
flag_value:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
parent_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
owner_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
location:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
status:
|
||||
sortable: true
|
||||
|
|
|
@ -1358,32 +1358,32 @@ display:
|
|||
asset_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
location_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
quantity_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
flag_value:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
category_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
owner_target_id:
|
||||
align: ''
|
||||
separator: ''
|
||||
empty_column: false
|
||||
empty_column: true
|
||||
responsive: ''
|
||||
override: true
|
||||
sticky: false
|
||||
|
|
|
@ -1,8 +1,14 @@
|
|||
/* Improve style of exposed filters form within details element. */
|
||||
div.view-filters details div {
|
||||
margin-top: 0;
|
||||
div.view-filters details {
|
||||
margin: 0;
|
||||
}
|
||||
div.view-filters details div form.views-exposed-form {
|
||||
div.view-filters details > summary {
|
||||
padding: 1rem;
|
||||
}
|
||||
div.view-filters details > div {
|
||||
margin: 0 0 0 .75rem;
|
||||
}
|
||||
div.view-filters details > div form.views-exposed-form {
|
||||
border: none;
|
||||
padding: 0;
|
||||
-webkit-box-shadow: none;
|
||||
|
|
|
@ -253,6 +253,7 @@ function farm_ui_views_add_bundle_handlers(ViewExecutable $view, string $display
|
|||
|
||||
// Build field options for the field type.
|
||||
$field_options = [];
|
||||
$sort_order = 'asc';
|
||||
|
||||
// Get the field label.
|
||||
$field_options['label'] = $field_definition->getLabel();
|
||||
|
@ -264,6 +265,9 @@ function farm_ui_views_add_bundle_handlers(ViewExecutable $view, string $display
|
|||
// Render timestamp fields in the html_date format.
|
||||
$field_options['type'] = 'timestamp';
|
||||
$field_options['settings']['date_format'] = 'html_date';
|
||||
|
||||
// Sort timestamps descending so new dates are on top by default.
|
||||
$sort_order = 'desc';
|
||||
break;
|
||||
|
||||
case 'boolean':
|
||||
|
@ -303,6 +307,17 @@ function farm_ui_views_add_bundle_handlers(ViewExecutable $view, string $display
|
|||
if (!empty($sort_field)) {
|
||||
farm_ui_views_sort_field($view, $display_id, $new_field_id, $sort_field);
|
||||
}
|
||||
|
||||
// Add the field to the table style options.
|
||||
$view->getStyle()->options['columns'][$new_field_id] = $new_field_id;
|
||||
$view->getStyle()->options['info'][$new_field_id] = [
|
||||
'sortable' => TRUE,
|
||||
'default_sort_order' => $sort_order,
|
||||
'align' => '',
|
||||
'separator' => '',
|
||||
'empty_column' => TRUE,
|
||||
'responsive' => '',
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue