From c75ebeae586063ad12c36495a41c2804e54db0b6 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 25 Aug 2023 15:06:29 -0700 Subject: [PATCH 1/5] Condense styling of views --- modules/core/ui/theme/css/views.css | 59 +++++++++++++++++++ .../core/ui/theme/farm_ui_theme.libraries.yml | 4 ++ modules/core/ui/theme/farm_ui_theme.module | 7 +++ 3 files changed, 70 insertions(+) create mode 100644 modules/core/ui/theme/css/views.css diff --git a/modules/core/ui/theme/css/views.css b/modules/core/ui/theme/css/views.css new file mode 100644 index 000000000..53f5ce4c8 --- /dev/null +++ b/modules/core/ui/theme/css/views.css @@ -0,0 +1,59 @@ +/* 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); +} diff --git a/modules/core/ui/theme/farm_ui_theme.libraries.yml b/modules/core/ui/theme/farm_ui_theme.libraries.yml index 8545f23e5..7f54ebf56 100644 --- a/modules/core/ui/theme/farm_ui_theme.libraries.yml +++ b/modules/core/ui/theme/farm_ui_theme.libraries.yml @@ -42,3 +42,7 @@ toolbar: css/toolbar.css: { } js: js/toolbar.js: { weight: -50 } +views: + css: + theme: + css/views.css: { } diff --git a/modules/core/ui/theme/farm_ui_theme.module b/modules/core/ui/theme/farm_ui_theme.module index 5e6a1b510..5d01d0da1 100644 --- a/modules/core/ui/theme/farm_ui_theme.module +++ b/modules/core/ui/theme/farm_ui_theme.module @@ -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. * From 7f9f9dcd75d323704f9876a1e1d9ea6549c9692e Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 25 Aug 2023 15:07:01 -0700 Subject: [PATCH 2/5] Decrease size of views collapsible filter --- modules/core/ui/theme/css/views.css | 9 +++++++++ .../core/ui/views/css/views_collapsible_filters.css | 12 +++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/modules/core/ui/theme/css/views.css b/modules/core/ui/theme/css/views.css index 53f5ce4c8..5b046e3a5 100644 --- a/modules/core/ui/theme/css/views.css +++ b/modules/core/ui/theme/css/views.css @@ -57,3 +57,12 @@ .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); +} diff --git a/modules/core/ui/views/css/views_collapsible_filters.css b/modules/core/ui/views/css/views_collapsible_filters.css index 7b5f0c524..549b4de7e 100644 --- a/modules/core/ui/views/css/views_collapsible_filters.css +++ b/modules/core/ui/views/css/views_collapsible_filters.css @@ -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; From 6a0e27914f9b82befbf9d47327fc3901a2c83f0a Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 25 Aug 2023 15:30:58 -0700 Subject: [PATCH 3/5] Hide views table columns when they do not contain any data --- .../views/config/install/views.view.farm_asset.yml | 10 +++++----- .../ui/views/config/install/views.view.farm_log.yml | 12 ++++++------ .../core/ui/views/farm_ui_views.views_execution.inc | 9 +++++++++ 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/modules/core/ui/views/config/install/views.view.farm_asset.yml b/modules/core/ui/views/config/install/views.view.farm_asset.yml index 90be748aa..d27fdc81f 100644 --- a/modules/core/ui/views/config/install/views.view.farm_asset.yml +++ b/modules/core/ui/views/config/install/views.view.farm_asset.yml @@ -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 diff --git a/modules/core/ui/views/config/install/views.view.farm_log.yml b/modules/core/ui/views/config/install/views.view.farm_log.yml index a9f80e2ca..d415a39f9 100644 --- a/modules/core/ui/views/config/install/views.view.farm_log.yml +++ b/modules/core/ui/views/config/install/views.view.farm_log.yml @@ -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 diff --git a/modules/core/ui/views/farm_ui_views.views_execution.inc b/modules/core/ui/views/farm_ui_views.views_execution.inc index 04cbf5a80..1a6ee042c 100644 --- a/modules/core/ui/views/farm_ui_views.views_execution.inc +++ b/modules/core/ui/views/farm_ui_views.views_execution.inc @@ -303,6 +303,15 @@ 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] = [ + 'align' => '', + 'separator' => '', + 'empty_column' => TRUE, + 'responsive' => '', + ]; } } From c05875f9f3b998b7388d26220b91ce068765fb51 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Thu, 7 Sep 2023 11:29:05 -0700 Subject: [PATCH 4/5] Allow bundle fields to be sorted in views tables --- modules/core/ui/views/farm_ui_views.views_execution.inc | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/modules/core/ui/views/farm_ui_views.views_execution.inc b/modules/core/ui/views/farm_ui_views.views_execution.inc index 1a6ee042c..06e3d544b 100644 --- a/modules/core/ui/views/farm_ui_views.views_execution.inc +++ b/modules/core/ui/views/farm_ui_views.views_execution.inc @@ -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': @@ -307,6 +311,8 @@ function farm_ui_views_add_bundle_handlers(ViewExecutable $view, string $display // 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, From 03876d4fd345c99bd346ce63ab4ad3b8bc0d0094 Mon Sep 17 00:00:00 2001 From: Michael Stenta Date: Thu, 5 Oct 2023 10:45:31 -0400 Subject: [PATCH 5/5] Add CHANGELOG.md line for #713. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 827777578..953bd99d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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