Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Shipping Settings: Update table styles (#40724)

This commit is contained in:
Paul Sealock 2023-10-17 12:42:04 +13:00 committed by paul sealock
parent 7822326a98
commit 3ec81818d1
6 changed files with 131 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/update-shipping-table-styles Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Update table styles in Shipping Settings.

119
plugins/woocommerce/client/legacy/css/admin.scss
View File

@ -4080,8 +4080,13 @@ table {
display: none; display: none;
} }
.wc-shipping-zones-heading .page-title-action { .wc-shipping-zones-heading {
display: inline-block; display: flex;
.page-title-action {
display: inline-block;
margin: 0 12px;
}
} }
.wc-shipping-zone-heading-help-text { .wc-shipping-zone-heading-help-text {
@ -4109,14 +4114,52 @@ table {
table.wc-shipping-zones, table.wc-shipping-zones,
table.wc-shipping-zone-methods, table.wc-shipping-zone-methods,
table.wc-shipping-classes { table.wc-shipping-classes {
font-family: $font-sf-pro-text;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #000000;
&.widefat p {
color: #000000;
}
thead tr th {
color: #646970;
vertical-align: middle;
padding: 12px;
}
tbody tr td {
padding: 24px 12px;
&:last-child {
padding: 24px 32px 24px 12px;
}
}
tfoot tr td {
padding: 24px 12px;
background-color: #F6F7F7;
color: #000000;
vertical-align: top;
&:last-child {
padding: 24px 32px 24px 12px;
}
}
td, td,
th { th {
vertical-align: top;
line-height: 24px;
padding: 1em !important;
font-size: 14px;
background: #fff; background: #fff;
display: table-cell !important; display: table-cell !important;
font-family: $font-sf-pro-text;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #000000;
vertical-align: middle;
padding: 24px 12px;
li { li {
line-height: 24px; line-height: 24px;
@ -4129,10 +4172,6 @@ table.wc-shipping-classes {
} }
thead { thead {
th {
vertical-align: middle;
}
.wc-shipping-zone-sort { .wc-shipping-zone-sort {
text-align: center; text-align: center;
} }
@ -4197,22 +4236,9 @@ table.wc-shipping-classes {
} }
} }
.wc-shipping-zone-method-rows { tbody.wc-shipping-tables-tbody {
tr:nth-child(even) td {
background: #f9f9f9;
}
}
tr.odd,
.wc-shipping-class-rows tr:nth-child(odd) {
td { td {
background: #f9f9f9; border-top: 1px solid #C3C4C7;
}
}
tbody.wc-shipping-zone-rows {
td {
border-top: 2px solid #f9f9f9;
} }
tr:first-child { tr:first-child {
@ -4220,6 +4246,13 @@ table.wc-shipping-classes {
border-top: 0; border-top: 0;
} }
} }
.wc-shipping-zone-name,
.wc-shipping-zone-method-title,
.wc-shipping-class-name {
font-weight: 500;
}
} }
tr.wc-shipping-zone-worldwide { tr.wc-shipping-zone-worldwide {
@ -4243,7 +4276,7 @@ table.wc-shipping-classes {
&::before { &::before {
content: ""; content: "";
mask: url(../images/icons/move-icon.svg); mask: url(../images/icons/move-icon.svg);
background-color: #999; background-color: #1E1E1E;
display: block; display: block;
width: 17px; width: 17px;
float: left; float: left;
@ -4251,7 +4284,7 @@ table.wc-shipping-classes {
} }
&:hover::before { &:hover::before {
background-color: #333; background-color: #999;
} }
} }
@ -4263,7 +4296,7 @@ table.wc-shipping-classes {
font-family: "dashicons"; font-family: "dashicons";
text-align: center; text-align: center;
line-height: 1; line-height: 1;
color: #999; color: #000;
display: block; display: block;
width: 17px; width: 17px;
float: left; float: left;
@ -4277,13 +4310,18 @@ table.wc-shipping-classes {
width: 25%; width: 25%;
} }
.shipping-zone-actions { .wc-shipping-zone-actions {
width: 13%; width: 13%;
text-align: right;
a.wc-shipping-zone-delete, a.wc-shipping-zone-actions,
a.wc-shipping-zone-method-delete, a.wc-shipping-zone-actions:hover {
a.wc-shipping-class-delete { color: #D63638;
color: #a00; }
a.wc-shipping-zone-action-edit,
a.wc-shipping-zone-action-edit:hover {
color: #0675C4;
} }
} }
@ -4298,11 +4336,6 @@ table.wc-shipping-classes {
textarea { textarea {
width: 100%; width: 100%;
} }
a.wc-shipping-zone-delete:hover,
a.wc-shipping-class-delete:hover {
color: red;
}
} }
.wc-shipping-class-count { .wc-shipping-class-count {
@ -4323,14 +4356,14 @@ table.wc-shipping-classes {
flex-wrap: wrap; flex-wrap: wrap;
li { li {
color: #555; color: #000;
display: inline; display: inline;
margin: 0; margin: 0;
} }
} }
.wc-shipping-zone-method { .wc-shipping-zone-method {
background-color: #dcdcdc; background-color: #F0F0F0;
margin: 0 3px 3px 0; margin: 0 3px 3px 0;
padding: 5px 9px; padding: 5px 9px;
border-radius: 5px; border-radius: 5px;
@ -4373,7 +4406,7 @@ table.wc-shipping-classes {
text-align: center; text-align: center;
a { a {
display: inline-block; float: left;
} }
.woocommerce-input-toggle { .woocommerce-input-toggle {
@ -4722,10 +4755,6 @@ img.help_tip {
margin-top: 8px; margin-top: 8px;
} }
table.widefat th {
padding-right: inherit;
}
.wp-list-table .woocommerce-help-tip { .wp-list-table .woocommerce-help-tip {
float: none; float: none;
} }

12
plugins/woocommerce/includes/admin/settings/views/html-admin-page-shipping-classes.php
View File

@ -11,9 +11,9 @@ if ( ! defined( 'ABSPATH' ) ) {
?> ?>
<h2> <h2 class="wc-shipping-zones-heading">
<?php esc_html_e( 'Shipping classes', 'woocommerce' ); ?> <span><?php esc_html_e( 'Shipping classes', 'woocommerce' ); ?></span>
<a class="button button-primary wc-shipping-class-add-new" href="#"><?php esc_html_e( 'Add shipping class', 'woocommerce' ); ?></a> <a class="button button-primary wc-shipping-class-add-new page-title-action" href="#"><?php esc_html_e( 'Add shipping class', 'woocommerce' ); ?></a>
</h2> </h2>
<p class="wc-shipping-zone-help-text"> <p class="wc-shipping-zone-help-text">
@ -29,7 +29,7 @@ if ( ! defined( 'ABSPATH' ) ) {
<th /> <th />
</tr> </tr>
</thead> </thead>
<tbody class="wc-shipping-class-rows"></tbody> <tbody class="wc-shipping-class-rows wc-shipping-tables-tbody"></tbody>
</table> </table>
<script type="text/html" id="tmpl-wc-shipping-class-row-blank"> <script type="text/html" id="tmpl-wc-shipping-class-row-blank">
@ -157,9 +157,9 @@ if ( ! defined( 'ABSPATH' ) ) {
echo '</td>'; echo '</td>';
} }
?> ?>
<td class="shipping-zone-actions"> <td class="wc-shipping-zone-actions">
<div> <div>
<a class="wc-shipping-class-edit" href="#"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-class-delete"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a> <a class="wc-shipping-class-edit wc-shipping-zone-action-edit" href="#"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-class-delete wc-shipping-zone-actions"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</div> </div>
</td> </td>
</tr> </tr>

22
plugins/woocommerce/includes/admin/settings/views/html-admin-page-shipping-zone-methods.php
View File

@ -77,17 +77,16 @@ if ( ! defined( 'ABSPATH' ) ) {
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tfoot> <tbody class="wc-shipping-zone-method-rows wc-shipping-tables-tbody"></tbody>
<tr>
<td colspan="5">
<button type="submit" class="button button-primary wc-shipping-zone-add-method" value="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>"><?php esc_html_e( 'Add shipping method', 'woocommerce' ); ?></button>
</td>
</tr>
</tfoot>
<tbody class="wc-shipping-zone-method-rows"></tbody>
</table> </table>
</td> </td>
</tr> </tr>
<tr>
<th scope="row"></th>
<td>
<button type="submit" class="button button-primary wc-shipping-zone-add-method" value="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>"><?php esc_html_e( 'Add shipping method', 'woocommerce' ); ?></button>
</td>
</tr>
</tbody> </tbody>
</table> </table>
@ -109,16 +108,15 @@ if ( ! defined( 'ABSPATH' ) ) {
<tr data-id="{{ data.instance_id }}" data-enabled="{{ data.enabled }}"> <tr data-id="{{ data.instance_id }}" data-enabled="{{ data.enabled }}">
<td width="1%" class="wc-shipping-zone-method-sort"></td> <td width="1%" class="wc-shipping-zone-method-sort"></td>
<td class="wc-shipping-zone-method-title"> <td class="wc-shipping-zone-method-title">
<a class="wc-shipping-zone-method-settings" href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id={{ data.instance_id }}">{{{ data.title }}}</a> {{{ data.title }}}
</td> </td>
<td width="1%" class="wc-shipping-zone-method-enabled"><a href="#">{{{ data.enabled_icon }}}</a></td> <td width="1%" class="wc-shipping-zone-method-enabled"><a href="#">{{{ data.enabled_icon }}}</a></td>
<td class="wc-shipping-zone-method-description"> <td class="wc-shipping-zone-method-description">
<strong class="wc-shipping-zone-method-type">{{ data.method_title }}</strong>
{{{ data.method_description }}} {{{ data.method_description }}}
</td> </td>
<td class="shipping-zone-actions"> <td class="wc-shipping-zone-actions">
<div> <div>
<a class="wc-shipping-zone-method-settings" href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id={{ data.instance_id }}"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-method-delete"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a> <a class="wc-shipping-zone-method-settings wc-shipping-zone-action-edit" href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id={{ data.instance_id }}"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-method-delete wc-shipping-zone-actions"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</div> </div>
</td> </td>
</tr> </tr>

66
plugins/woocommerce/includes/admin/settings/views/html-admin-page-shipping-zones.php
View File

@ -5,7 +5,7 @@ if ( ! defined( 'ABSPATH' ) ) {
?> ?>
<h2 class="wc-shipping-zones-heading"> <h2 class="wc-shipping-zones-heading">
<?php _e( 'Shipping zones', 'woocommerce' ); ?> <span><?php esc_html_e( 'Shipping zones', 'woocommerce' ); ?></span>
<a href="<?php echo admin_url( 'admin.php?page=wc-settings&tab=shipping&zone_id=new' ); ?>" class="page-title-action button-primary"><?php esc_html_e( 'Add shipping zone', 'woocommerce' ); ?></a> <a href="<?php echo admin_url( 'admin.php?page=wc-settings&tab=shipping&zone_id=new' ); ?>" class="page-title-action button-primary"><?php esc_html_e( 'Add shipping zone', 'woocommerce' ); ?></a>
</h2> </h2>
<p class="wc-shipping-zone-heading-help-text"><?php echo __( 'A shipping zone is a geographic region where a certain set of shipping methods are offered.', 'woocommerce' ) . ' ' . __( 'WooCommerce will match a customer to a single zone using their shipping address and present the shipping methods within that zone to them.', 'woocommerce' ); ?></p> <p class="wc-shipping-zone-heading-help-text"><?php echo __( 'A shipping zone is a geographic region where a certain set of shipping methods are offered.', 'woocommerce' ) . ' ' . __( 'WooCommerce will match a customer to a single zone using their shipping address and present the shipping methods within that zone to them.', 'woocommerce' ); ?></p>
@ -19,37 +19,37 @@ if ( ! defined( 'ABSPATH' ) ) {
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody class="wc-shipping-zone-rows"></tbody> <tbody class="wc-shipping-zone-rows wc-shipping-tables-tbody"></tbody>
<tbody>
<tr data-id="0" class="wc-shipping-zone-worldwide">
<td width="1%" class="wc-shipping-zone-worldwide"></td>
<td class="wc-shipping-zone-name">
<a href="<?php echo esc_url( admin_url( 'admin.php?page=wc-settings&tab=shipping&zone_id=0' ) ); ?>"><?php esc_html_e( 'Locations not covered by your other zones', 'woocommerce' ); ?></a>
</td>
<td class="wc-shipping-zone-region"><?php _e( 'This zone is <b>optionally</b> used for regions that are not included in any other shipping zone.', 'woocommerce' ); ?></td>
<td class="wc-shipping-zone-methods">
<ul>
<?php
$worldwide = new WC_Shipping_Zone( 0 );
$methods = $worldwide->get_shipping_methods();
uasort( $methods, 'wc_shipping_zone_method_order_uasort_comparison' );
if ( ! empty( $methods ) ) { <tfoot data-id="0" class="wc-shipping-zone-worldwide">
foreach ( $methods as $method ) { <td width="1%" class="wc-shipping-zone-worldwide"></td>
$class_name = 'yes' === $method->enabled ? 'method_enabled' : 'method_disabled'; <td class="wc-shipping-zone-name">
echo '<li class="wc-shipping-zone-method ' . esc_attr( $class_name ) . '">' . esc_html( $method->get_title() ) . '</li>'; <?php esc_html_e( 'Locations not covered by your other zones', 'woocommerce' ); ?>
} </td>
} else { <td class="wc-shipping-zone-region"><?php esc_html_e( 'This zone is optionally used for regions that are not included in any other shipping zone.', 'woocommerce' ); ?></td>
echo '<li>' . __( 'No shipping methods offered to this zone.', 'woocommerce' ) . '</li>'; <td class="wc-shipping-zone-methods">
<ul>
<?php
$worldwide = new WC_Shipping_Zone( 0 );
$methods = $worldwide->get_shipping_methods();
uasort( $methods, 'wc_shipping_zone_method_order_uasort_comparison' );
if ( ! empty( $methods ) ) {
foreach ( $methods as $method ) {
$class_name = 'yes' === $method->enabled ? 'method_enabled' : 'method_disabled';
echo '<li class="wc-shipping-zone-method ' . esc_attr( $class_name ) . '">' . esc_html( $method->get_title() ) . '</li>';
} }
?> } else {
</ul> echo '<li>' . esc_html_e( 'No shipping methods offered to this zone.', 'woocommerce' ) . '</li>';
</td> }
<td class="shipping-zone-actions"> ?>
<a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id=0"><?php _e( 'Edit', 'woocommerce' ); ?></a> </ul>
</td> </td>
</tr> <td class="wc-shipping-zone-actions">
</tbody> <a class="wc-shipping-zone-action-edit" href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id=0"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a>
</td>
</tfoot>
</table> </table>
<script type="text/html" id="tmpl-wc-shipping-zone-row-blank"> <script type="text/html" id="tmpl-wc-shipping-zone-row-blank">
@ -74,7 +74,7 @@ if ( ! defined( 'ABSPATH' ) ) {
<tr data-id="{{ data.zone_id }}"> <tr data-id="{{ data.zone_id }}">
<td width="1%" class="wc-shipping-zone-sort"></td> <td width="1%" class="wc-shipping-zone-sort"></td>
<td class="wc-shipping-zone-name"> <td class="wc-shipping-zone-name">
<a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}">{{ data.zone_name }}</a> {{ data.zone_name }}
</td> </td>
<td class="wc-shipping-zone-region"> <td class="wc-shipping-zone-region">
{{ data.formatted_zone_location }} {{ data.formatted_zone_location }}
@ -82,9 +82,9 @@ if ( ! defined( 'ABSPATH' ) ) {
<td class="wc-shipping-zone-methods"> <td class="wc-shipping-zone-methods">
<div><ul></ul></div> <div><ul></ul></div>
</td> </td>
<td class="shipping-zone-actions"> <td class="wc-shipping-zone-actions">
<div> <div>
<a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php _e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-delete"><?php _e( 'Delete', 'woocommerce' ); ?></a> <a class="wc-shipping-zone-action-edit" href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-delete wc-shipping-zone-actions"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</div> </div>
</td> </td>
</tr> </tr>

7
plugins/woocommerce/tests/e2e-pw/tests/merchant/create-shipping-zones.spec.js
View File

@ -214,7 +214,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
.filter( { hasText: 'Flat rate' } ) .filter( { hasText: 'Flat rate' } )
).toBeVisible(); ).toBeVisible();
await page.getByRole( 'link', { name: 'Flat rate' } ).click(); await page.locator( 'td:has-text("Flat rate") ~ td.wc-shipping-zone-actions a.wc-shipping-zone-action-edit' ).click();
await page.getByLabel( 'Cost', { exact: true } ).fill( '10' ); await page.getByLabel( 'Cost', { exact: true } ).fill( '10' );
await page.getByRole( 'button', { name: 'Save' } ).last().click(); await page.getByRole( 'button', { name: 'Save' } ).last().click();
await page.waitForLoadState( 'networkidle' ); await page.waitForLoadState( 'networkidle' );
@ -280,7 +280,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
//delete created shipping zone region after confirmation it exists //delete created shipping zone region after confirmation it exists
await page.goto( 'wp-admin/admin.php?page=wc-settings&tab=shipping' ); await page.goto( 'wp-admin/admin.php?page=wc-settings&tab=shipping' );
await page.locator( 'a:has-text("USA Zone") >> nth=0' ).click(); await page.locator( 'td:has-text("USA Zone") ~ td.wc-shipping-zone-actions a.wc-shipping-zone-action-edit' ).click();
//delete //delete
await page.getByRole( 'button', { name: 'Remove' } ).click(); await page.getByRole( 'button', { name: 'Remove' } ).click();
@ -341,12 +341,11 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
.filter( { hasText: 'Flat rate' } ) .filter( { hasText: 'Flat rate' } )
).toBeVisible(); ).toBeVisible();
await page.getByRole( 'link', { name: 'Flat rate' } ).click(); await page.locator( 'td:has-text("Flat rate") ~ td.wc-shipping-zone-actions a.wc-shipping-zone-action-edit' ).click();
await page.locator( '#woocommerce_flat_rate_cost' ).fill( '10' ); await page.locator( '#woocommerce_flat_rate_cost' ).fill( '10' );
await page.locator( '#btn-ok' ).click(); await page.locator( '#btn-ok' ).click();
await page.waitForLoadState( 'networkidle' ); await page.waitForLoadState( 'networkidle' );
await page.getByRole( 'link', { name: 'Flat rate' } ).hover();
await page.locator( 'text=Delete' ).waitFor(); await page.locator( 'text=Delete' ).waitFor();
page.on( 'dialog', ( dialog ) => dialog.accept() ); page.on( 'dialog', ( dialog ) => dialog.accept() );