Skip to content

Commit

Permalink
Draft dashboard enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
albinazs committed Aug 16, 2024
1 parent afc58f7 commit 5628d7e
Show file tree
Hide file tree
Showing 23 changed files with 254 additions and 138 deletions.
37 changes: 37 additions & 0 deletions client/scss/components/_avatar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
5 changes: 0 additions & 5 deletions client/scss/components/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
18 changes: 4 additions & 14 deletions client/scss/components/_indicator.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}
15 changes: 14 additions & 1 deletion client/scss/components/_listing.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down
18 changes: 18 additions & 0 deletions client/scss/components/_panel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
5 changes: 4 additions & 1 deletion client/scss/components/_status-tag.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

&.w-status--primary {
color: theme('colors.text-meta');
border: 1px solid theme('colors.text-meta');
background: theme('colors.surface-page');
}

Expand All @@ -37,6 +36,10 @@
border-radius: theme('borderRadius.xl');
// stylelint-disable-next-line property-disallowed-list
text-transform: none;

.w-dashboard & {
float: inline-end;
}
}
}

Expand Down
51 changes: 7 additions & 44 deletions client/scss/components/_summary.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
24 changes: 24 additions & 0 deletions client/src/tokens/colorThemes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
},
{
Expand Down Expand Up @@ -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',
},
},
},
{
Expand Down Expand Up @@ -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',
},
},
},
{
Expand Down Expand Up @@ -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',
},
},
},
{
Expand Down
4 changes: 4 additions & 0 deletions client/src/tokens/colorVariables.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand All @@ -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)",
Expand Down Expand Up @@ -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)",
Expand All @@ -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)",
Expand Down
1 change: 0 additions & 1 deletion wagtail/admin/site_summary.py
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 13 additions & 7 deletions wagtail/admin/templates/wagtailadmin/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}


<div class="nice-padding w-mt-14">
{% avatar_url user 70 as avatar %}
{% include "wagtailadmin/shared/header.html" with title=header_title description=user|user_display_name avatar=avatar merged=1 %}

{% component upgrade_notification %}
<div class="w-dashboard w-px-6 sm:w-px-[3.75rem] w-pt-8 sm:w-pt-10 lg:w-pt-[3.75rem]">
<header class="w-flex w-flex-col lg:w-flex-row">
<div class="md:w-pr-20">
<h1 class="w-h1 w-mt-0">{{ header_title }}</h1>
{% component site_summary %}
</div>
{% include "wagtailadmin/home/account_summary.html" %}
</header>
{% if panels %}
{% for panel in panels %}
{% component panel fallback_render_method=True %}
{% component panel %}
{% endfor %}
{% else %}
<p>{% trans "This is your dashboard on which helpful information about content you've created will be displayed." %}</p>
Expand Down
31 changes: 31 additions & 0 deletions wagtail/admin/templates/wagtailadmin/home/account_summary.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{% load wagtailadmin_tags wagtailcore_tags i18n %}
{% wagtail_version as current_version %}
<div class="w-flex w-gap-5 w-mb-[3.5rem] lg:w-pl-[3.75rem] lg:w-border-l w-border-border-furniture">
{% avatar_url user 80 as avatar %}
<div class="w-header__glyph avatar xlarge">
<img src="{{ avatar }}" alt="" />
<a class="edit-link"
href="{{ base_url }}{% url 'wagtailadmin_account' %}#avatar-section">{% icon name="edit" %}</a>
</div>
<div>
<div class="w-text-16 w-font-bold w-text-text-label w-mb-1">{{ user|user_display_name }}</div>
<ul class="w-list-none w-p-0 w-m-0 w-flex w-flex-col w-gap-1">
<li>
<a class="w-underline w-underline-offset-[3px]"
href="{{ base_url }}{% url 'wagtailadmin_account' %}">{% trans 'Account' %}</a>
</li>
{% wagtail_feature_release_editor_guide_link as editor_guide_link %}
<li>
<a class="w-underline w-underline-offset-[3px] w-flex w-items-center w-gap-1"
href="{{ editor_guide_link }}"
target="_blank"
rel="noreferrer">
{% blocktrans trimmed %}
Wagtail {{ current_version }} editor's guide
{% endblocktrans %}
{% icon name="link-external" classname="w-a11y-result__icon" %}
</a>
</li>
</ul>
</div>
</div>
Loading

0 comments on commit 5628d7e

Please sign in to comment.