From 0530aeb7e7e656e26040926dec9f62c9f10760c6 Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Sat, 14 Sep 2024 21:21:43 +0200 Subject: [PATCH] Dashboard enhancements baed on design & code review --- client/scss/components/_avatar.scss | 2 +- client/scss/components/_header.scss | 14 ---- client/scss/components/_indicator.scss | 6 +- client/scss/components/_listing.scss | 69 +++++++++++++++++-- client/scss/components/_panel.scss | 12 ++-- client/scss/components/_status-tag.scss | 4 -- client/scss/components/_summary.scss | 2 +- client/scss/core.scss | 1 - client/scss/layouts/_home.scss | 10 --- wagtail/admin/site_summary.py | 1 - .../admin/templates/wagtailadmin/home.html | 23 +++++-- .../wagtailadmin/home/account_summary.html | 14 ++-- .../wagtailadmin/home/locked_pages.html | 31 +++++---- .../wagtailadmin/home/recent_edits.html | 29 ++++---- .../home/upgrade_notification.html | 2 +- .../user_objects_in_workflow_moderation.html | 25 ++++--- .../home/workflow_objects_to_moderate.html | 56 +++++++-------- .../pages/listing/_locked_indicator.html | 2 +- .../templates/wagtailadmin/shared/header.html | 4 -- wagtail/admin/views/home.py | 6 +- 20 files changed, 183 insertions(+), 130 deletions(-) delete mode 100644 client/scss/layouts/_home.scss diff --git a/client/scss/components/_avatar.scss b/client/scss/components/_avatar.scss index 0435c9f5cfe2..172a6e4cdc7e 100644 --- a/client/scss/components/_avatar.scss +++ b/client/scss/components/_avatar.scss @@ -62,7 +62,7 @@ position: absolute; top: 100%; inset-inline-start: 50%; - transform: translate(-50%, -50%); + transform: translate(calc(var(--w-direction-factor) * -50%), -50%); background-color: theme('colors.surface-page'); .icon { diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss index 7c605427ab01..ad126efeb984 100644 --- a/client/scss/components/_header.scss +++ b/client/scss/components/_header.scss @@ -27,10 +27,6 @@ max-width: 1em; max-height: 1em; } - - &.avatar { - margin-inline-start: calc(0 - theme('spacing.2')); - } } .w-header__subtitle { @@ -99,10 +95,6 @@ margin-inline-end: 2em; } - .avatar.small { - margin-inline-start: 0; - } - a { font-weight: theme('fontWeight.bold'); } @@ -121,12 +113,6 @@ padding-inline-start: 0; } - .w-header__glyph { - &.avatar { - margin-inline-start: calc(0 - theme('spacing.9')); - } - } - .left { float: inline-start; margin-inline-end: 0; diff --git a/client/scss/components/_indicator.scss b/client/scss/components/_indicator.scss index fb311149962b..38f4da1aebb4 100644 --- a/client/scss/components/_indicator.scss +++ b/client/scss/components/_indicator.scss @@ -19,13 +19,9 @@ .icon { padding: 2px; vertical-align: middle; // reset vertical-align set by icon.initial - - .w-dashboard & { - padding: 0; - } } &--is-inverse { - opacity: theme('opacity.30'); + opacity: theme('opacity.50'); } } diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss index ebb25dc240a0..f5a8d44022b3 100644 --- a/client/scss/components/_listing.scss +++ b/client/scss/components/_listing.scss @@ -369,12 +369,73 @@ ul.listing { &--dashboard { margin-bottom: 0; - .title-wrapper { + tbody { + border-bottom: 0; + } + + td:first-child { + padding-inline-start: theme('spacing.6'); + } + + td:last-child { + padding-inline-end: theme('spacing.6'); + } + + .title a { font-weight: theme('fontWeight.medium'); } - .actions { - float: none; + .w-status--label { + float: inline-end; + font-size: inherit; + } + + .indicator .icon { + padding: 0; + } + + .privacy-indicator { + margin-inline-end: theme('spacing.2'); + + // Adjust icon size to closely match the appearance of the adjacent 'locked' icon + .icon-no-view { + width: 1.1em; + height: 1.1em; + } + } + + .tasks { + text-wrap: nowrap; + } + + .actions li { + float: inline-end; + } + + @include media-breakpoint-down(md) { + display: grid; + + tr { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: theme('spacing.2'); + padding: theme('spacing.5'); + } + + td, + td:first-child, + td:last-child { + padding: 0; + } + + .title { + width: 100%; + } + + .actions-container { + margin-inline-start: auto; + } } } } @@ -628,7 +689,7 @@ table.listing { // - no bulk actions are present, // - we're not in the "custom ordering" mode, // then apply the same 80px padding via the first column's left padding. - &:not(.nice-padding &, .w-dashboard &, .report &, .editor-view &):not( + &:not(.nice-padding &, .report &, .editor-view &, .w-dashboard &):not( :has( td:first-child input[type='checkbox']:only-child, th:first-child input[type='checkbox']:only-child, diff --git a/client/scss/components/_panel.scss b/client/scss/components/_panel.scss index 66ab5c5d741a..1974339cc7db 100644 --- a/client/scss/components/_panel.scss +++ b/client/scss/components/_panel.scss @@ -162,15 +162,19 @@ $header-button-size: theme('spacing.6'); } .w-panel--dashboard { - @include box(); - padding-bottom: 0; + border: 1px solid theme('colors.border-furniture'); + border-radius: 5px; margin-bottom: calc( theme('spacing.4') + theme('spacing.4') * var(--w-density-factor) ); .w-panel__header { - margin-inline-start: calc(-1 * theme('spacing.5')); - padding-bottom: theme('spacing.5'); + padding: theme('spacing.5'); + margin-inline-start: 0; + + @include media-breakpoint-up(sm) { + margin-inline-start: calc(-1 * theme('spacing.5')); + } } .w-panel__heading { diff --git a/client/scss/components/_status-tag.scss b/client/scss/components/_status-tag.scss index 2204907324ef..6b0e606afb3a 100644 --- a/client/scss/components/_status-tag.scss +++ b/client/scss/components/_status-tag.scss @@ -36,10 +36,6 @@ border-radius: theme('borderRadius.xl'); // stylelint-disable-next-line property-disallowed-list text-transform: none; - - .w-dashboard & { - float: inline-end; - } } } diff --git a/client/scss/components/_summary.scss b/client/scss/components/_summary.scss index 4b5103c66112..b14178eb9fa3 100644 --- a/client/scss/components/_summary.scss +++ b/client/scss/components/_summary.scss @@ -1,6 +1,6 @@ .w-summary { color: theme('colors.text-link-default'); - margin-bottom: theme('spacing.8'); + margin-bottom: theme('spacing.3'); padding-top: theme('spacing.1'); .w-summary__list { diff --git a/client/scss/core.scss b/client/scss/core.scss index fd3b6c837eb5..51c2750825ec 100644 --- a/client/scss/core.scss +++ b/client/scss/core.scss @@ -176,7 +176,6 @@ These are classes that provide overrides. @import 'layouts/404'; @import 'layouts/compare-revisions'; -@import 'layouts/home'; @import 'layouts/login'; @import 'layouts/account'; @import 'layouts/workflow-progress'; diff --git a/client/scss/layouts/_home.scss b/client/scss/layouts/_home.scss deleted file mode 100644 index 86f430e72e88..000000000000 --- a/client/scss/layouts/_home.scss +++ /dev/null @@ -1,10 +0,0 @@ -.homepage { - .listing tbody { - border-bottom: 0; - } - - .task .icon { - // pull out the icon so it aligns with no-icon text - margin-inline-start: -1.75em; - } -} diff --git a/wagtail/admin/site_summary.py b/wagtail/admin/site_summary.py index 3d585b7221f3..b4671530b106 100644 --- a/wagtail/admin/site_summary.py +++ b/wagtail/admin/site_summary.py @@ -55,7 +55,6 @@ def is_shown(self): class SiteSummaryPanel(Component): - name = "site_summary" template_name = "wagtailadmin/home/site_summary.html" def __init__(self, request): diff --git a/wagtail/admin/templates/wagtailadmin/home.html b/wagtail/admin/templates/wagtailadmin/home.html index 1ff94165a734..c34b308a1188 100644 --- a/wagtail/admin/templates/wagtailadmin/home.html +++ b/wagtail/admin/templates/wagtailadmin/home.html @@ -1,6 +1,5 @@ {% extends "wagtailadmin/generic/base.html" %} {% load wagtailadmin_tags i18n %} -{% block bodyclass %}homepage{% endblock %} {% block extra_css %} {{ block.super }} @@ -10,22 +9,36 @@ {% block content %} {% fragment as header_title %} {% block branding_welcome %} - {% trans site_name|title %} + {{ site_name|title }} {% endblock %} {% endfragment %} {% component upgrade_notification %} -
+
-
+

{{ header_title }}

{% component site_summary %} + + +
{% include "wagtailadmin/home/account_summary.html" %}
{% if panels %} {% for panel in panels %} - {% component panel %} + {% component panel fallback_render_method=True %} {% endfor %} {% else %}

{% trans "This is your dashboard on which helpful information about content you've created will be displayed." %}

diff --git a/wagtail/admin/templates/wagtailadmin/home/account_summary.html b/wagtail/admin/templates/wagtailadmin/home/account_summary.html index 89897b6bf893..1d36d4e3f1b5 100644 --- a/wagtail/admin/templates/wagtailadmin/home/account_summary.html +++ b/wagtail/admin/templates/wagtailadmin/home/account_summary.html @@ -1,14 +1,14 @@ {% load wagtailadmin_tags wagtailcore_tags i18n %} {% wagtail_version as current_version %} -
+
{% avatar_url user 80 as avatar %} -
- - + + {% icon name="edit" %}
-
{{ user|user_display_name }}
+
{{ user|user_display_name }}
diff --git a/wagtail/admin/templates/wagtailadmin/home/locked_pages.html b/wagtail/admin/templates/wagtailadmin/home/locked_pages.html index 2a1e0113ca3d..e6e8ff9fdb24 100644 --- a/wagtail/admin/templates/wagtailadmin/home/locked_pages.html +++ b/wagtail/admin/templates/wagtailadmin/home/locked_pages.html @@ -4,18 +4,19 @@ {% panel id="locked-pages" heading=_("Your locked pages") classname="w-panel--dashboard" %} + + - - - + - - - + + + + @@ -24,18 +25,22 @@ + - + + - - {% endfor %} diff --git a/wagtail/admin/templates/wagtailadmin/home/recent_edits.html b/wagtail/admin/templates/wagtailadmin/home/recent_edits.html index 73bec8405101..2ee281e02aeb 100644 --- a/wagtail/admin/templates/wagtailadmin/home/recent_edits.html +++ b/wagtail/admin/templates/wagtailadmin/home/recent_edits.html @@ -5,17 +5,19 @@ {% panel id="recent-edits" heading=_("Your most recent edits") classname="w-panel--dashboard" %}
{% trans "Title" %}{% trans "Language" %}{% trans "Privacy and access" %}{% trans "Status" %} {% trans "Locked at" %}
{{ page.get_admin_display_title }} - {% i18n_enabled as show_locale_labels %} - {% if show_locale_labels and page.locale_id %} - {% locale_label_from_id page.locale_id as locale_label %} - {% status locale_label classname="w-status--label" %} - {% endif %}
+ {% i18n_enabled as show_locale_labels %} + {% if show_locale_labels and page.locale_id %} + {% locale_label_from_id page.locale_id as locale_label %} + {% status locale_label classname="w-status--label" %} + {% endif %} + {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %} {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %} + {% include "wagtailadmin/shared/page_status_tag.html" with page=page %}{% human_readable_date page.locked_at %}
  • {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") %} @@ -63,8 +68,6 @@
{# Deliberately empty #}{% human_readable_date page.locked_at %}
+ + - - - + + + @@ -24,19 +26,24 @@ + + + - - {% endfor %} diff --git a/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html b/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html index ec004c90a3cf..68a0ac83e463 100644 --- a/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html +++ b/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html @@ -1,6 +1,6 @@ {% load i18n wagtailcore_tags wagtailadmin_tags %} {% wagtail_version as current_version %} -
+ + - - - + + + @@ -34,24 +36,24 @@ {% else %} {% latest_str obj %} {% endif %} - - {% i18n_enabled as show_locale_labels %} - {% if show_locale_labels and obj.locale_id %} - {% locale_label_from_id obj.locale_id as locale_label %} - {% status locale_label classname="w-status--label" %} - {% endif %} + - + {% endwith %} {% endfor %} diff --git a/wagtail/admin/templates/wagtailadmin/home/workflow_objects_to_moderate.html b/wagtail/admin/templates/wagtailadmin/home/workflow_objects_to_moderate.html index 1e6e3f254512..c3d55000f5d7 100644 --- a/wagtail/admin/templates/wagtailadmin/home/workflow_objects_to_moderate.html +++ b/wagtail/admin/templates/wagtailadmin/home/workflow_objects_to_moderate.html @@ -3,19 +3,21 @@ {% panel id="awaiting-review" heading=_("Awaiting your review") classname="w-panel--dashboard" %}
{% trans "Title" %}{% trans "Language" %}{% trans "Privacy and access" %} {% trans "Status" %} {% trans "Date" %}
{{ page.get_admin_display_title }} - - {% i18n_enabled as show_locale_labels %} - {% if show_locale_labels and page.locale_id %} - {% locale_label_from_id page.locale_id as locale_label %} - {% status locale_label classname="w-status--label" %} - {% endif %}
+ {% i18n_enabled as show_locale_labels %} + {% if show_locale_labels and page.locale_id %} + {% locale_label_from_id page.locale_id as locale_label %} + {% status locale_label classname="w-status--label" %} + {% endif %} + {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %} {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %} + {% include "wagtailadmin/shared/page_status_tag.html" with page=page %} + {% human_readable_date last_edited_at %}
  • {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") %} @@ -54,10 +61,6 @@
- {% include "wagtailadmin/shared/page_status_tag.html" with page=page %} - {% human_readable_date last_edited_at %}
{% trans "Title" %}{% trans "Language" %}{% trans "Privacy and access" %} {% trans "Task" %} {% trans "Task started" %}
+ {% i18n_enabled as show_locale_labels %} + {% if show_locale_labels and obj.locale_id %} + {% locale_label_from_id obj.locale_id as locale_label %} + {% status locale_label classname="w-status--label" %} + {% endif %} + {% if is_page %} {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=obj %} {% endif %} {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=obj %} {# Deliberately empty #} {% if workflow_state.current_task_state.status == 'rejected' %} - {% icon name="warning" classname="default" %} + {% icon name="warning" classname="w-h-4 w-w-4 w-align-text-top" %} {% trans "Changes requested at" %} {% elif workflow_state.current_task_state.status == 'in_progress' %} {% trans "Awaiting" %} @@ -59,6 +61,7 @@ {{ workflow_state.current_task_state.task.name }} {% human_readable_date workflow_state.current_task_state.started_at %}{# Deliberately empty #}
+ - + - - + + + @@ -34,22 +36,39 @@ {% else %} {% latest_str obj %} {% endif %} - - {% i18n_enabled as show_locale_labels %} - {% if show_locale_labels and obj.locale_id %} - {% locale_label_from_id obj.locale_id as locale_label %} - {% status locale_label classname="w-status--label" %} - {% endif %} - + + + + - - - {% endwith %} {% endfor %} diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_locked_indicator.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_locked_indicator.html index 998cfca5ecd9..f35c2b88198b 100644 --- a/wagtail/admin/templates/wagtailadmin/pages/listing/_locked_indicator.html +++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_locked_indicator.html @@ -8,7 +8,7 @@ {% if page.locked %} {% icon name="lock" classname="initial" %} diff --git a/wagtail/admin/templates/wagtailadmin/shared/header.html b/wagtail/admin/templates/wagtailadmin/shared/header.html index 67381ec68fe9..8f2400656872 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/header.html +++ b/wagtail/admin/templates/wagtailadmin/shared/header.html @@ -6,7 +6,6 @@ - `classname` - if present, adds classname to the header class list - `title` - Displayed as `h1` - `subtitle` - Within the `h1` tag but smaller - - `description` - if present, displayed as a small text below the `h1` tag title - `search_url` - if present, display a search box. This is a URL route name (taking no parameters) to be used as the action for that search box - `search_form` - form object for the search form. Required if search_url is passed - `search_results_url` - URL to be used for async requests to search results, if not provided, the form's action URL will be used @@ -14,7 +13,6 @@ - `search_disable_async` - If True, the default header async search functionality will not be used - `query_parameters` - a query string (without the '?') to be placed after the search URL - `icon` - name of an icon to place against the title - - `avatar` - if present, display an 'avatar' in place of icon. This is the URL to be used as the img src for avatar - `merged` - if true, add the classname 'w-header--merged' - `action_url` - if present, display an 'action' button. This is the URL to be used as the link URL for the button - `action_text` - text for the 'action' button @@ -36,8 +34,6 @@

{% if icon %} {% icon classname="w-header__glyph" name=icon %} - {% elif avatar %} -
{% endif %} {{ title }}{% if subtitle %} {{ subtitle }}{% endif %}

diff --git a/wagtail/admin/views/home.py b/wagtail/admin/views/home.py index 7485d254aa1c..eac8703fc9df 100644 --- a/wagtail/admin/views/home.py +++ b/wagtail/admin/views/home.py @@ -8,10 +8,11 @@ from django.db.models.functions import Cast from django.forms import Media from django.http import Http404, HttpResponse -from django.utils.translation import gettext_lazy +from django.utils.translation import gettext_lazy as _ from django.views.generic.base import TemplateView from wagtail import hooks +from wagtail.admin.forms.search import SearchForm from wagtail.admin.icons import get_icons from wagtail.admin.navigation import get_site_for_user from wagtail.admin.site_summary import SiteSummaryPanel @@ -282,7 +283,7 @@ def get_context_data(self, parent_context): class HomeView(WagtailAdminTemplateMixin, TemplateView): template_name = "wagtailadmin/home.html" - page_title = gettext_lazy("Dashboard") + page_title = _("Dashboard") def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) @@ -294,6 +295,7 @@ def get_context_data(self, **kwargs): # Panels that are not customizable via `construct_homepage_panels` hook context["upgrade_notification"] = UpgradeNotificationPanel() context["site_summary"] = SiteSummaryPanel(self.request) + context["search_form"] = SearchForm(placeholder=_("Search all pages...")) context["user"] = self.request.user return {**context, **site_details}
{% trans "Title" %}{% trans "Language" %}{% trans "Privacy and access" %} {% trans "Tasks" %} {% trans "Task submitted by" %} {% trans "Task started" %}
+ {% i18n_enabled as show_locale_labels %} + {% if show_locale_labels and obj.locale_id %} + {% locale_label_from_id obj.locale_id as locale_label %} + {% status locale_label classname="w-status--label" %} + {% endif %} + {% if is_page %} {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=obj %} {% endif %} {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=obj %} + {% for task in workflow_tasks %} + + {% if task.status == 'approved' %} + {% icon "success" title=task.status_display classname="default" %} + {% elif task.status == 'rejected' %} + {% icon "error" title=task.status_display classname="default" %} + {% else %} + {% icon "radio-empty" title=status_display classname="default" %} + {% endif %} + + {% endfor %} + + {% if revision.user %}{{ revision.user|user_display_name }}{% endif %} + {% human_readable_date task_state.started_at %} {% if actions %}
  • @@ -74,23 +93,6 @@
{% endif %} 		- {% for task in workflow_tasks %} - - {% if task.status == 'approved' %} - {% icon "success" title=task.status_display classname="default" %} - {% elif task.status == 'rejected' %} - {% icon "error" title=task.status_display classname="default" %} - {% else %} - {% icon "radio-empty" title=status_display classname="default" %} - {% endif %} - - {% endfor %} - - {% if revision.user %}{{ revision.user|user_display_name }}{% endif %} - {% human_readable_date task_state.started_at %}