{% trans "Wagtail upgrade available" %}
++ {% blocktrans trimmed %} + Your version: {{ current_version }}. New version: . + {% endblocktrans %} + {% trans "Read the release notes." %} +
diff --git a/client/scss/components/_avatar.scss b/client/scss/components/_avatar.scss index 19b9fd022a4b..0435c9f5cfe2 100644 --- a/client/scss/components/_avatar.scss +++ b/client/scss/components/_avatar.scss @@ -35,6 +35,43 @@ } } + &.xlarge { + overflow: visible; + width: 60px; + height: 60px; + flex-shrink: 0; + + @include media-breakpoint-up(sm) { + width: 80px; + height: 80px; + } + + img { + border-radius: 50%; + z-index: auto; + } + + .edit-link { + width: theme('spacing.5'); + height: theme('spacing.5'); + border-radius: 50%; + border: theme('spacing.px') solid theme('colors.border-furniture'); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 100%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); + background-color: theme('colors.surface-page'); + + .icon { + width: theme('spacing.[2.5]'); + height: theme('spacing.[2.5]'); + } + } + } + &.square { border-radius: 0; } diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss index 4bbfbb7ab1e6..7c605427ab01 100644 --- a/client/scss/components/_header.scss +++ b/client/scss/components/_header.scss @@ -38,11 +38,6 @@ font-weight: theme('fontWeight.normal'); } - .w-header__description { - font-size: theme('fontSize.18'); - font-weight: theme('fontWeight.normal'); - } - // Give padding to the rows inside of headers so that nested breadcrumbs aren't padded by their parent header el. // Use w-header--with-padding for headers that don't contain .row elements. &.w-header--with-padding, diff --git a/client/scss/components/_indicator.scss b/client/scss/components/_indicator.scss index 96cae0599212..fb311149962b 100644 --- a/client/scss/components/_indicator.scss +++ b/client/scss/components/_indicator.scss @@ -13,29 +13,19 @@ } .indicator { - font-size: 1em; margin-inline-end: 0; opacity: theme('opacity.70'); .icon { - border: 1px solid transparent; - border-radius: 50%; - font-size: 1.25em; padding: 2px; vertical-align: middle; // reset vertical-align set by icon.initial - @media (forced-colors: active) { - background-color: ButtonText; + .w-dashboard & { + padding: 0; } } - &.indicator--is-inverse { - .icon { - border-color: theme( - 'colors.surface-page' - ); // ensure border is available for high contrast mode - background-color: theme('colors.text-context'); - color: theme('colors.surface-page'); - } + &--is-inverse { + opacity: theme('opacity.30'); } } diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss index 6d800aaba544..ebb25dc240a0 100644 --- a/client/scss/components/_listing.scss +++ b/client/scss/components/_listing.scss @@ -365,6 +365,18 @@ ul.listing { @include transition(border-color 0.2s ease); border: 3px solid theme('colors.surface-page'); } + + &--dashboard { + margin-bottom: 0; + + .title-wrapper { + font-weight: theme('fontWeight.medium'); + } + + .actions { + float: none; + } + } } .image-choice { @@ -611,11 +623,12 @@ table.listing { // - no nice padding is applied, // - we're not in a report listing, // - we're not in the editor view, + // - we're not in the dashboard view, // and: // - 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 &, .report &, .editor-view &):not( + &:not(.nice-padding &, .w-dashboard &, .report &, .editor-view &):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 ffe0361c28af..66ab5c5d741a 100644 --- a/client/scss/components/_panel.scss +++ b/client/scss/components/_panel.scss @@ -160,3 +160,21 @@ $header-button-size: theme('spacing.6'); .w-panel__wrapper { @include max-form-width(); } + +.w-panel--dashboard { + @include box(); + padding-bottom: 0; + 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'); + } + + .w-panel__heading { + margin-inline-start: theme('spacing.2'); + white-space: wrap; + } +} diff --git a/client/scss/components/_status-tag.scss b/client/scss/components/_status-tag.scss index 04668865da65..2204907324ef 100644 --- a/client/scss/components/_status-tag.scss +++ b/client/scss/components/_status-tag.scss @@ -19,7 +19,6 @@ &.w-status--primary { color: theme('colors.text-meta'); - border: 1px solid theme('colors.text-meta'); background: theme('colors.surface-page'); } @@ -37,6 +36,10 @@ 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 ee4b91df14bf..4b5103c66112 100644 --- a/client/scss/components/_summary.scss +++ b/client/scss/components/_summary.scss @@ -1,69 +1,32 @@ .w-summary { - // set up responsive font size for icon and number as local custom property - --w-summary-item-font-size: clamp( - theme('fontSize.30') * 1.5, - 6.5vw, - calc(theme('fontSize.30') * 3) - ); - color: theme('colors.text-link-default'); margin-bottom: theme('spacing.8'); - padding-top: theme('spacing.8'); + padding-top: theme('spacing.1'); .w-summary__list { @include unlist(); display: flex; flex-wrap: wrap; - justify-content: space-evenly; - width: 100%; + column-gap: theme('spacing.8'); } /* Summary item */ li { display: flex; align-items: center; - flex: 1 1 auto; flex-wrap: nowrap; + gap: theme('spacing.[2.5]'); margin-bottom: theme('spacing.6'); } - /* Summary icon */ .icon { - font-size: var(--w-summary-item-font-size); - height: 1em; - margin-inline-end: 0.15em; - width: 1em; + @include svg-icon(1.375rem); + color: theme('colors.icon-primary'); } - /* Summary label (a link, use parent colours ) */ a { - color: inherit; - text-align: start; - display: inline-flex; - flex-direction: column; - gap: theme('spacing.[1.5]'); - - @include media-breakpoint-up(sm) { - font-size: theme('fontSize.18'); - } - - /* Summary big number */ - > span { - display: block; - font-size: calc(var(--w-summary-item-font-size) * 0.6); - font-weight: theme('fontWeight.bold'); - line-height: 0.9em; // label underneath to come in tight against the number - } - } -} - -// Media for Windows High Contrast Mode -@media (forced-colors: active) { - .w-summary { - .icon { - color: LinkText; - opacity: 1; - } + text-decoration: underline; + text-underline-offset: 3px; } } diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js index fbae8dd2493d..203b609dd86f 100644 --- a/client/src/tokens/colorThemes.js +++ b/client/src/tokens/colorThemes.js @@ -106,6 +106,12 @@ const light = [ textUtility: 'w-text-surface-status-label', cssVariable: '--w-color-surface-status-label', }, + 'surface-info-panel': { + value: 'var(--w-color-info-50)', + bgUtility: 'w-bg-surface-info-panel', + textUtility: 'w-text-surface-info-panel', + cssVariable: '--w-color-surface-info-panel', + }, }, }, { @@ -201,6 +207,12 @@ const light = [ textUtility: 'w-text-text-status-label', cssVariable: '--w-color-text-status-label', }, + 'text-link-info': { + value: 'var(--w-color-secondary)', + bgUtility: 'w-bg-text-link-info', + textUtility: 'w-text-text-link-info', + cssVariable: '--w-color-text-link-info', + }, }, }, { @@ -376,6 +388,12 @@ const dark = [ textUtility: 'w-text-surface-status-label', cssVariable: '--w-color-surface-status-label', }, + 'surface-info-panel': { + value: 'var(--w-color-info-100)', + bgUtility: 'w-bg-surface-info-panel', + textUtility: 'w-text-surface-info-panel', + cssVariable: '--w-color-surface-info-panel', + }, }, }, { @@ -471,6 +489,12 @@ const dark = [ textUtility: 'w-text-text-status-label', cssVariable: '--w-color-text-status-label', }, + 'text-link-info': { + value: 'var(--w-color-grey-50)', + bgUtility: 'w-bg-text-link-info', + textUtility: 'w-text-text-link-info', + cssVariable: '--w-color-text-link-info', + }, }, }, { diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js index 1785ed457a2a..31cea65931e7 100644 --- a/client/src/tokens/colorVariables.test.js +++ b/client/src/tokens/colorVariables.test.js @@ -214,6 +214,7 @@ describe('generateThemeColorVariables', () => { "--w-color-surface-field": "var(--w-color-white)", "--w-color-surface-field-inactive": "var(--w-color-grey-50)", "--w-color-surface-header": "var(--w-color-grey-50)", + "--w-color-surface-info-panel": "var(--w-color-info-50)", "--w-color-surface-menu-item-active": "var(--w-color-primary-200)", "--w-color-surface-menus": "var(--w-color-primary)", "--w-color-surface-page": "var(--w-color-white)", @@ -231,6 +232,7 @@ describe('generateThemeColorVariables', () => { "--w-color-text-label-menus-default": "var(--w-color-white-80)", "--w-color-text-link-default": "var(--w-color-secondary)", "--w-color-text-link-hover": "var(--w-color-secondary-400)", + "--w-color-text-link-info": "var(--w-color-secondary)", "--w-color-text-meta": "var(--w-color-grey-400)", "--w-color-text-placeholder": "var(--w-color-grey-400)", "--w-color-text-status-label": "var(--w-color-info-100)", @@ -263,6 +265,7 @@ describe('generateThemeColorVariables', () => { "--w-color-surface-field": "var(--w-color-grey-600)", "--w-color-surface-field-inactive": "var(--w-color-grey-500)", "--w-color-surface-header": "var(--w-color-grey-700)", + "--w-color-surface-info-panel": "var(--w-color-info-100)", "--w-color-surface-menu-item-active": "var(--w-color-grey-700)", "--w-color-surface-menus": "var(--w-color-grey-800)", "--w-color-surface-page": "var(--w-color-grey-600)", @@ -280,6 +283,7 @@ describe('generateThemeColorVariables', () => { "--w-color-text-label-menus-default": "var(--w-color-white-80)", "--w-color-text-link-default": "var(--w-color-secondary-100)", "--w-color-text-link-hover": "var(--w-color-secondary-75)", + "--w-color-text-link-info": "var(--w-color-grey-50)", "--w-color-text-meta": "var(--w-color-grey-150)", "--w-color-text-placeholder": "var(--w-color-grey-200)", "--w-color-text-status-label": "var(--w-color-info-75)", diff --git a/wagtail/admin/site_summary.py b/wagtail/admin/site_summary.py index 0230e47de4cf..3d585b7221f3 100644 --- a/wagtail/admin/site_summary.py +++ b/wagtail/admin/site_summary.py @@ -57,7 +57,6 @@ def is_shown(self): class SiteSummaryPanel(Component): name = "site_summary" template_name = "wagtailadmin/home/site_summary.html" - order = 100 def __init__(self, request): self.request = request diff --git a/wagtail/admin/templates/wagtailadmin/home.html b/wagtail/admin/templates/wagtailadmin/home.html index 40a45e6227a7..1ff94165a734 100644 --- a/wagtail/admin/templates/wagtailadmin/home.html +++ b/wagtail/admin/templates/wagtailadmin/home.html @@ -9,17 +9,23 @@ {% block content %} {% fragment as header_title %} - {% block branding_welcome %}{% trans site_name|title %}{% endblock %} + {% block branding_welcome %} + {% trans site_name|title %} + {% endblock %} {% endfragment %} - -
{% 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 new file mode 100644 index 000000000000..edc31e457e44 --- /dev/null +++ b/wagtail/admin/templates/wagtailadmin/home/account_summary.html @@ -0,0 +1,31 @@ +{% load wagtailadmin_tags wagtailcore_tags i18n %} +{% wagtail_version as current_version %} +{% trans "Title" %} | + +{% 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 %}
- {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}
- {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %}
+ |
+ + {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %} + {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %} + | +
|
{# Deliberately empty #} | -{% human_readable_date page.locked_at %} | +{% human_readable_date page.locked_at %} |
{% trans "Title" %} | + +{% trans "Status" %} | {% trans "Date" %} | |||||||
---|---|---|---|---|---|---|---|---|---|
+ |
{{ page.get_admin_display_title }}
@@ -26,9 +30,13 @@
{% 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/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 %} | +{% human_readable_date last_edited_at %} |
{% trans "Title" %} | + +{% trans "Task" %} | {% trans "Task started" %} | |||||||
---|---|---|---|---|---|---|---|---|---|
+ |
{% admin_edit_url obj as edit_url %}
{% if page_perms.can_edit or not is_page and edit_url %}
@@ -36,13 +40,16 @@
{% 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 %}
|
- + | + {% 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" %} {% trans "Changes requested at" %} @@ -51,7 +58,7 @@ {% endif %} {{ workflow_state.current_task_state.task.name }} | -{% human_readable_date workflow_state.current_task_state.started_at %} | +{% human_readable_date workflow_state.current_task_state.started_at %} |
{% trans "Title" %} | + +{% trans "Tasks" %} | {% trans "Task submitted by" %} | {% trans "Task started" %} | @@ -22,7 +26,7 @@ {% page_permissions obj as page_perms %} {% endif %}||||||
---|---|---|---|---|---|---|---|---|---|
+ |
{% admin_edit_url obj as edit_url %}
{% if page_perms.can_edit or not is_page and edit_url %}
@@ -36,11 +40,16 @@
{% 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 %}
+
+ |
+ + {% if is_page %} + {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=obj %} + {% endif %} + {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=obj %} + | +
{% if actions %}
|
- + | {% for task in workflow_tasks %} {% if task.status == 'approved' %} @@ -78,10 +87,10 @@ {% endfor %} | -+ | {% if revision.user %}{{ revision.user|user_display_name }}{% endif %} | -{% human_readable_date task_state.started_at %} | +{% human_readable_date task_state.started_at %} |