Skip to content

Commit b5fbdb8

Browse files
pauloiankoskipauloiankoski
authored
Refactor: Redesign Admin List Tables (#8131)
1 parent 897825a commit b5fbdb8

File tree

28 files changed

+323
-414
lines changed

28 files changed

+323
-414
lines changed

‎src/Admin/components/SummaryTable/styles.module.scss‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ $breakpoint-desktop: 900px;
33
.summaryTableContainer {
44
display: flex;
55
flex-direction: column;
6-
gap: var(--givewp-spacing-2);
76
width: 100%;
87
}
98

@@ -20,13 +19,16 @@ $breakpoint-desktop: 900px;
2019
}
2120
}
2221

22+
.summaryTable {
23+
padding: var(--givewp-spacing-4) 0;
24+
}
25+
2326
.summaryTableLabel {
2427
flex-grow: 1;
2528
font-size: 1rem;
2629
font-weight: 500;
2730
line-height: 1.5;
2831
color: #4b5563;
29-
padding: var(--givewp-spacing-3) 0;
3032
margin: 0;
3133
}
3234

@@ -35,6 +37,22 @@ $breakpoint-desktop: 900px;
3537
font-weight: 600;
3638
line-height: 1.5;
3739
color: #1f2937;
38-
padding: var(--givewp-spacing-3) 0;
3940
text-align: right;
4041
}
42+
43+
.pill {
44+
--border-width: 1px;
45+
--padding-x: calc(var(--givewp-spacing-3) - var(--border-width));
46+
--padding-y: calc(var(--givewp-spacing-1) - var(--border-width));
47+
align-items: center;
48+
background-color: var(--givewp-neutral-25);
49+
border-radius: 1.5rem;
50+
border: var(--border-width) solid var(--givewp-neutral-600);
51+
color: var(--givewp-neutral-900);
52+
display: inline-flex ;
53+
font-size: 0.75rem;
54+
font-weight: 600;
55+
justify-content: center;
56+
line-height: 1.5;
57+
padding: var(--padding-y) var(--padding-x);
58+
}

‎src/Admin/fields/AsyncSelectOption/styles.module.scss‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,12 @@
33
.searchableSelect {
44
&__control {
55
border-radius: var(--givewp-rounded-4);
6-
border: 1px solid #9ca0af;
6+
border: 1px solid var(--givewp-neutral-300);
77

88
&--is-focused {
9-
border-color: var(--givewp-blue-500);
9+
border-color: #2271b1;
1010
outline: none;
11-
box-shadow: var(--givewp-blue-500) 0px 0px 0px 1px;
12-
}
13-
14-
&--menu-is-open {
15-
border-radius: var(--givewp-rounded-4) var(--givewp-rounded-4) 0 0;
11+
box-shadow: #2271b1 0px 0px 0px 1px;
1612
}
1713

1814
&:hover {
@@ -21,27 +17,35 @@
2117
}
2218

2319
&__menu {
24-
border-radius: 0 0 var(--givewp-rounded-4) var(--givewp-rounded-4);
25-
border: 2px solid var(--givewp-blue-500);
26-
border-top: 0;
27-
box-shadow: none;
28-
margin: 0;
29-
transform: translate(-1px, -1px);
20+
border-radius: var(--givewp-rounded-4);
21+
border: 1px solid var(--givewp-neutral-200);
22+
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
23+
margin: var(--givewp-spacing-1) 0;
24+
transform: translate(-1px, 0);
3025
width: calc(100% + 2px);
3126
}
3227

3328
&__menu-list {
34-
padding: 0;
29+
display: flex;
30+
flex-direction: column;
31+
gap: var(--givewp-spacing-1);
32+
padding: var(--givewp-spacing-1);
3533
}
3634

3735
&__option {
36+
border-radius: var(--givewp-rounded-2);
3837
color: var(--givewp-neutral-900);
3938
line-height: 1.5;
4039
padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
4140

41+
&--is-focused {
42+
background-color: var(--givewp-neutral-100);
43+
}
44+
4245
&--is-selected {
4346
color: var(--givewp-shades-white);
44-
background-color: var(--givewp-blue-500);
47+
background-color: #2271b1;
48+
font-weight: 600;
4549
}
4650
}
4751

‎src/Campaigns/ListTable/Columns/DonationsCountColumn.php‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,10 @@ public function getCellValue($model): string
4343

4444
$totalDonations = $campaignsData->getDonationsCount($model);
4545

46-
$label = $totalDonations > 0
47-
? sprintf(
48-
_n(
49-
'%1$s donation',
50-
'%1$s donations',
51-
$totalDonations,
52-
'give'
53-
),
54-
$totalDonations
55-
) : __('No donations', 'give');
56-
46+
$label = sprintf(
47+
'<div class="donationCount"><span>%s</span></div>',
48+
$totalDonations
49+
);
5750

5851
return apply_filters("givewp_list_table_cell_value_{$this::getId()}_content", $label, $model, $this);
5952
}

‎src/DonationForms/V2/ListTable/Columns/DonationCountColumn.php‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -57,22 +57,9 @@ public function getCellValue($model): string
5757

5858
$totalDonations = $donationFormData->getDonationsCount($model);
5959

60-
$label = $totalDonations > 0
61-
? sprintf(
62-
_n(
63-
'%1$s donation',
64-
'%1$s donations',
65-
$totalDonations,
66-
'give'
67-
),
68-
$totalDonations
69-
) : __('No donations', 'give');
70-
7160
return sprintf(
72-
'<a class="column-donations-count-value" href="%s" aria-label="%s">%s</a>',
73-
admin_url("edit.php?post_type=give_forms&page=give-payment-history&form_id=$model->id"),
74-
__('Visit donations page', 'give'),
75-
apply_filters("givewp_list_table_cell_value_{$this::getId()}_content", $label, $model, $this)
61+
'<div class="donationCount"><span>%s</span></div>',
62+
$totalDonations
7663
);
7764
}
7865
}

‎src/Donations/resources/admin/components/DonationDetailsPage/DonationDetailsPage.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@
3333
--statusBadgeTextColor: var(--givewp-red-900);
3434
}
3535

36+
&.statusBadge--give_subscription {
37+
--statusBadgeBgColor: var(--givewp-green-700);
38+
--statusBadgeTextColor: var(--givewp-green-25);
39+
}
40+
41+
&.statusBadge--trash {
42+
--statusBadgeBgColor: var(--givewp-red-700);
43+
--statusBadgeTextColor: var(--givewp-red-25);
44+
}
45+
3646
&.testBadge {
3747
--statusBadgeBgColor: var(--givewp-orange-400);
3848
--statusBadgeTextColor: var(--givewp-shades-white);

‎src/Donations/resources/admin/components/DonationDetailsPage/Tabs/Overview/DonationSummaryGrid/styles.module.scss‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,25 @@
4646
.date {
4747
font-weight: 500;
4848
font-size: 1.125rem;
49+
line-height: calc(28 / 18);
4950
color: var(--givewp-neutral-900);
5051
}
5152

5253
.badge {
53-
display: block;
54-
margin-top: var(--givewp-spacing-2);
55-
color: var(--givewp-neutral-900);
56-
border: 1px solid var(--givewp-neutral-900);
57-
padding: var(--givewp-spacing-1) var(--givewp-spacing-3);
58-
border-radius: 9999px;
59-
font-size: 0.75rem;
60-
font-weight: 500;
61-
text-transform: none;
62-
letter-spacing: 0.05em;
54+
--border-width: 1px;
55+
--padding-x: calc(var(--givewp-spacing-3) - var(--border-width));
56+
--padding-y: calc(var(--givewp-spacing-1) - var(--border-width));
57+
align-items: center;
58+
background-color: var(--givewp-neutral-25);
59+
border-radius: 1.5rem;
60+
border: var(--border-width) solid var(--givewp-neutral-600);
61+
color: var(--givewp-neutral-900);
62+
display: inline-flex ;
63+
font-size: 0.75rem;
64+
font-weight: 600;
65+
justify-content: center;
66+
line-height: 1.5;
67+
padding: var(--padding-y) var(--padding-x);
6368
}
6469

6570
.notice {

‎src/Donations/resources/components/DonationsListTable.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,13 @@ export default function DonationsListTable() {
253253
productRecommendation={rotatingRecommendation}
254254
statsConfig={statsConfig}
255255
>
256+
<button
257+
className={`button button-tertiary ${tableStyles.secondaryActionButton}`}
258+
onClick={showLegacyDonations}
259+
aria-label={__('Switch to the legacy donations table view', 'give')}
260+
>
261+
{__('Switch to Legacy View', 'give')}
262+
</button>
256263
{window.GiveDonations.manualDonations ? (
257264
<a
258265
className={`button button-tertiary ${tableStyles.secondaryActionButton}`}
@@ -290,13 +297,6 @@ export default function DonationsListTable() {
290297
>
291298
{__('Import donations', 'give')}
292299
</a>
293-
<button
294-
className={`button button-tertiary ${tableStyles.secondaryActionButton}`}
295-
onClick={showLegacyDonations}
296-
aria-label={__('Switch to the legacy donations table view', 'give')}
297-
>
298-
{__('Switch to Legacy View', 'give')}
299-
</button>
300300
</ListTablePage>
301301
);
302302
}

‎src/Donors/ListTable/Columns/DonationCountColumn.php‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ public function getLabel(): string
3838
}
3939

4040
/**
41+
* @unreleased Remove link from donation count column
4142
* @since 2.24.0
4243
*
4344
* @inheritDoc
@@ -48,22 +49,9 @@ public function getCellValue($model): string
4849
{
4950
$totalDonations = $model->totalNumberOfDonations;
5051

51-
$label = $totalDonations > 0
52-
? sprintf(
53-
_n(
54-
'%1$s donation',
55-
'%1$s donations',
56-
$totalDonations,
57-
'give'
58-
),
59-
$totalDonations
60-
) : __('No donations', 'give');
61-
6252
return sprintf(
63-
'<a href="%s" aria-label="%s">%s</a>',
64-
admin_url("edit.php?post_type=give_forms&page=give-payment-history&search=$model->email"),
65-
__('Visit donation form page', 'give'),
66-
$label
53+
'<div class="donationCount"><span>%s</span></div>',
54+
$totalDonations
6755
);
6856
}
6957
}

‎src/Donors/ListTable/Columns/DonorInformationColumn.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,18 @@ public static function getId(): string
2929
}
3030

3131
/**
32+
* @unreleased Update column label
3233
* @since 2.24.0
3334
*
3435
* @inheritDoc
3536
*/
3637
public function getLabel(): string
3738
{
38-
return __('Donor Information', 'give');
39+
return __('Name', 'give');
3940
}
4041

4142
/**
43+
* @unreleased Remove gravatar from donor information column
4244
* @since 3.20.0 Use email to get avatar URL
4345
* @since 2.24.0
4446
*
@@ -50,17 +52,15 @@ public function getCellValue($model): string
5052
{
5153
$template = '
5254
<div class="donorInformation">
53-
<img class="donorInformation__gravatar" src="%s" alt="donor name" loading="lazy" />
5455
<a href="%s">%s</a>
55-
<address class="donorInformation__email">%s</address>
56+
<span class="donorInformation__email">%s</span>
5657
</div>
5758
';
5859

5960
$url = DonorsAdminPage::getDetailsPageUrl($model->id);
6061

6162
return sprintf(
6263
$template,
63-
get_avatar_url($model->email, ['size' => 64]),
6464
$url,
6565
trim("$model->firstName $model->lastName"),
6666
$model->email

‎src/Donors/ListTable/DonorsListTable.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ public function id(): string
2727
}
2828

2929
/**
30+
* @unreleased Reorder DonorType column
3031
* @since 2.24.0
3132
*
3233
* @inheritDoc
@@ -36,15 +37,16 @@ public function getDefaultColumns(): array
3637
return [
3738
new IdColumn(),
3839
new DonorInformationColumn(),
40+
new DonorTypeColumn(),
3941
new DonationRevenueColumn(),
4042
new DonationCountColumn(),
4143
new LatestDonationColumn(),
42-
new DonorTypeColumn(),
4344
new DateCreatedColumn(),
4445
];
4546
}
4647

4748
/**
49+
* @unreleased Remove date created column
4850
* @since 2.24.0
4951
*
5052
* @inheritDoc
@@ -57,7 +59,6 @@ public function getDefaultVisibleColumns(): array
5759
DonationCountColumn::getId(),
5860
LatestDonationColumn::getId(),
5961
DonorTypeColumn::getId(),
60-
DateCreatedColumn::getId(),
6162
];
6263
}
6364
}

0 commit comments

Comments
 (0)