Condense views table UI #713

This commit is contained in:
Michael Stenta 2023-10-06 14:40:46 -04:00
commit 953c001491
8 changed files with 115 additions and 14 deletions

View File

@ -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

View File

@ -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);
}

View File

@ -42,3 +42,7 @@ toolbar:
css/toolbar.css: { }
js:
js/toolbar.js: { weight: -50 }
views:
css:
theme:
css/views.css: { }

View File

@ -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.
*

View File

@ -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

View File

@ -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

View File

@ -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;

View File

@ -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' => '',
];
}
}