Shipping Settings: Update table styles (#40724)
This commit is contained in:
Paul Sealock
paul sealock
parent
7822326a98
commit
3ec81818d1
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: update
|
||||
|
||||
Update table styles in Shipping Settings.
|
||||
|
|
@ -4080,8 +4080,13 @@ table {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.wc-shipping-zones-heading .page-title-action {
|
||||
.wc-shipping-zones-heading {
|
||||
display: flex;
|
||||
|
||||
.page-title-action {
|
||||
display: inline-block;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-shipping-zone-heading-help-text {
|
||||
|
|
@ -4109,14 +4114,52 @@ table {
|
|||
table.wc-shipping-zones,
|
||||
table.wc-shipping-zone-methods,
|
||||
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,
|
||||
th {
|
||||
vertical-align: top;
|
||||
line-height: 24px;
|
||||
padding: 1em !important;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
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 {
|
||||
line-height: 24px;
|
||||
|
|
@ -4129,10 +4172,6 @@ table.wc-shipping-classes {
|
|||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wc-shipping-zone-sort {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -4197,22 +4236,9 @@ table.wc-shipping-classes {
|
|||
}
|
||||
}
|
||||
|
||||
.wc-shipping-zone-method-rows {
|
||||
tr:nth-child(even) td {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
tr.odd,
|
||||
.wc-shipping-class-rows tr:nth-child(odd) {
|
||||
tbody.wc-shipping-tables-tbody {
|
||||
td {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
tbody.wc-shipping-zone-rows {
|
||||
td {
|
||||
border-top: 2px solid #f9f9f9;
|
||||
border-top: 1px solid #C3C4C7;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
|
|
@ -4220,6 +4246,13 @@ table.wc-shipping-classes {
|
|||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-shipping-zone-name,
|
||||
.wc-shipping-zone-method-title,
|
||||
.wc-shipping-class-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
tr.wc-shipping-zone-worldwide {
|
||||
|
|
@ -4243,7 +4276,7 @@ table.wc-shipping-classes {
|
|||
&::before {
|
||||
content: "";
|
||||
mask: url(../images/icons/move-icon.svg);
|
||||
background-color: #999;
|
||||
background-color: #1E1E1E;
|
||||
display: block;
|
||||
width: 17px;
|
||||
float: left;
|
||||
|
|
@ -4251,7 +4284,7 @@ table.wc-shipping-classes {
|
|||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: #333;
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4263,7 +4296,7 @@ table.wc-shipping-classes {
|
|||
font-family: "dashicons";
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
color: #000;
|
||||
display: block;
|
||||
width: 17px;
|
||||
float: left;
|
||||
|
|
@ -4277,13 +4310,18 @@ table.wc-shipping-classes {
|
|||
width: 25%;
|
||||
}
|
||||
|
||||
.shipping-zone-actions {
|
||||
.wc-shipping-zone-actions {
|
||||
width: 13%;
|
||||
text-align: right;
|
||||
|
||||
a.wc-shipping-zone-delete,
|
||||
a.wc-shipping-zone-method-delete,
|
||||
a.wc-shipping-class-delete {
|
||||
color: #a00;
|
||||
a.wc-shipping-zone-actions,
|
||||
a.wc-shipping-zone-actions:hover {
|
||||
color: #D63638;
|
||||
}
|
||||
|
||||
a.wc-shipping-zone-action-edit,
|
||||
a.wc-shipping-zone-action-edit:hover {
|
||||
color: #0675C4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4298,11 +4336,6 @@ table.wc-shipping-classes {
|
|||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.wc-shipping-zone-delete:hover,
|
||||
a.wc-shipping-class-delete:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-shipping-class-count {
|
||||
|
|
@ -4323,14 +4356,14 @@ table.wc-shipping-classes {
|
|||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
color: #555;
|
||||
color: #000;
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-shipping-zone-method {
|
||||
background-color: #dcdcdc;
|
||||
background-color: #F0F0F0;
|
||||
margin: 0 3px 3px 0;
|
||||
padding: 5px 9px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -4373,7 +4406,7 @@ table.wc-shipping-classes {
|
|||
text-align: center;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.woocommerce-input-toggle {
|
||||
|
|
@ -4722,10 +4755,6 @@ img.help_tip {
|
|||
margin-top: 8px;
|
||||
}
|
||||
|
||||
table.widefat th {
|
||||
padding-right: inherit;
|
||||
}
|
||||
|
||||
.wp-list-table .woocommerce-help-tip {
|
||||
float: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
|
||||
?>
|
||||
|
||||
<h2>
|
||||
<?php esc_html_e( 'Shipping classes', 'woocommerce' ); ?>
|
||||
<a class="button button-primary wc-shipping-class-add-new" href="#"><?php esc_html_e( 'Add shipping class', 'woocommerce' ); ?></a>
|
||||
<h2 class="wc-shipping-zones-heading">
|
||||
<span><?php esc_html_e( 'Shipping classes', 'woocommerce' ); ?></span>
|
||||
<a class="button button-primary wc-shipping-class-add-new page-title-action" href="#"><?php esc_html_e( 'Add shipping class', 'woocommerce' ); ?></a>
|
||||
</h2>
|
||||
|
||||
<p class="wc-shipping-zone-help-text">
|
||||
|
|
@ -29,7 +29,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="wc-shipping-class-rows"></tbody>
|
||||
<tbody class="wc-shipping-class-rows wc-shipping-tables-tbody"></tbody>
|
||||
</table>
|
||||
|
||||
<script type="text/html" id="tmpl-wc-shipping-class-row-blank">
|
||||
|
|
@ -157,9 +157,9 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
echo '</td>';
|
||||
}
|
||||
?>
|
||||
<td class="shipping-zone-actions">
|
||||
<td class="wc-shipping-zone-actions">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -77,15 +77,14 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<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>
|
||||
<tbody class="wc-shipping-zone-method-rows wc-shipping-tables-tbody"></tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody class="wc-shipping-zone-method-rows"></tbody>
|
||||
</table>
|
||||
<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>
|
||||
|
|
@ -109,16 +108,15 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<tr data-id="{{ data.instance_id }}" data-enabled="{{ data.enabled }}">
|
||||
<td width="1%" class="wc-shipping-zone-method-sort"></td>
|
||||
<td class="wc-shipping-zone-method-title">
|
||||
<a class="wc-shipping-zone-method-settings" href="admin.php?page=wc-settings&tab=shipping&instance_id={{ data.instance_id }}">{{{ data.title }}}</a>
|
||||
{{{ data.title }}}
|
||||
</td>
|
||||
<td width="1%" class="wc-shipping-zone-method-enabled"><a href="#">{{{ data.enabled_icon }}}</a></td>
|
||||
<td class="wc-shipping-zone-method-description">
|
||||
<strong class="wc-shipping-zone-method-type">{{ data.method_title }}</strong>
|
||||
{{{ data.method_description }}}
|
||||
</td>
|
||||
<td class="shipping-zone-actions">
|
||||
<td class="wc-shipping-zone-actions">
|
||||
<div>
|
||||
<a class="wc-shipping-zone-method-settings" href="admin.php?page=wc-settings&tab=shipping&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&tab=shipping&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>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
?>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
|
@ -19,14 +19,14 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="wc-shipping-zone-rows"></tbody>
|
||||
<tbody>
|
||||
<tr data-id="0" class="wc-shipping-zone-worldwide">
|
||||
<tbody class="wc-shipping-zone-rows wc-shipping-tables-tbody"></tbody>
|
||||
|
||||
<tfoot 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>
|
||||
<?php esc_html_e( 'Locations not covered by your other zones', 'woocommerce' ); ?>
|
||||
</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-region"><?php esc_html_e( 'This zone is optionally used for regions that are not included in any other shipping zone.', 'woocommerce' ); ?></td>
|
||||
<td class="wc-shipping-zone-methods">
|
||||
<ul>
|
||||
<?php
|
||||
|
|
@ -40,16 +40,16 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
echo '<li class="wc-shipping-zone-method ' . esc_attr( $class_name ) . '">' . esc_html( $method->get_title() ) . '</li>';
|
||||
}
|
||||
} else {
|
||||
echo '<li>' . __( 'No shipping methods offered to this zone.', 'woocommerce' ) . '</li>';
|
||||
echo '<li>' . esc_html_e( 'No shipping methods offered to this zone.', 'woocommerce' ) . '</li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="shipping-zone-actions">
|
||||
<a href="admin.php?page=wc-settings&tab=shipping&zone_id=0"><?php _e( 'Edit', 'woocommerce' ); ?></a>
|
||||
<td class="wc-shipping-zone-actions">
|
||||
<a class="wc-shipping-zone-action-edit" href="admin.php?page=wc-settings&tab=shipping&zone_id=0"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tfoot>
|
||||
|
||||
</table>
|
||||
|
||||
<script type="text/html" id="tmpl-wc-shipping-zone-row-blank">
|
||||
|
|
@ -74,7 +74,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<tr data-id="{{ data.zone_id }}">
|
||||
<td width="1%" class="wc-shipping-zone-sort"></td>
|
||||
<td class="wc-shipping-zone-name">
|
||||
<a href="admin.php?page=wc-settings&tab=shipping&zone_id={{ data.zone_id }}">{{ data.zone_name }}</a>
|
||||
{{ data.zone_name }}
|
||||
</td>
|
||||
<td class="wc-shipping-zone-region">
|
||||
{{ data.formatted_zone_location }}
|
||||
|
|
@ -82,9 +82,9 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<td class="wc-shipping-zone-methods">
|
||||
<div><ul></ul></div>
|
||||
</td>
|
||||
<td class="shipping-zone-actions">
|
||||
<td class="wc-shipping-zone-actions">
|
||||
<div>
|
||||
<a href="admin.php?page=wc-settings&tab=shipping&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&tab=shipping&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>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
|
|||
.filter( { hasText: 'Flat rate' } )
|
||||
).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.getByRole( 'button', { name: 'Save' } ).last().click();
|
||||
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
|
||||
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
|
||||
await page.getByRole( 'button', { name: 'Remove' } ).click();
|
||||
|
|
@ -341,12 +341,11 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
|
|||
.filter( { hasText: 'Flat rate' } )
|
||||
).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( '#btn-ok' ).click();
|
||||
await page.waitForLoadState( 'networkidle' );
|
||||
|
||||
await page.getByRole( 'link', { name: 'Flat rate' } ).hover();
|
||||
await page.locator( 'text=Delete' ).waitFor();
|
||||
|
||||
page.on( 'dialog', ( dialog ) => dialog.accept() );
|
||||
|
|
|
|||
Loading…
Reference in New Issue