Pledge form: Style the form

This commit is contained in:
Kelly Dwan 2024-08-27 21:25:50 -04:00
parent 942de224c3
commit 5d76b97557
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
6 changed files with 200 additions and 35 deletions

View file

@ -26,10 +26,10 @@ require __DIR__ . '/partial-result-messages.php';
require get_views_path() . 'inputs-pledge-org-email.php';
?>
<div>
<div class="wp-block-button">
<input
type="submit"
class="button button-primary"
class="button button-primary wp-block-button__link"
id="5ftf-pledge-submit"
name="action"
value="<?php esc_attr_e( 'Update Pledge', 'wporg-5ftf' ); ?>"

View file

@ -1,8 +1,8 @@
<?php
namespace WordPressDotOrg\FiveForTheFuture\View;
use function WordPressDotOrg\FiveForTheFuture\get_views_path;
use WP_Post;
use function WordPressDotOrg\FiveForTheFuture\get_views_path;
/**
* @var array $messages
@ -54,10 +54,10 @@ require __DIR__ . '/partial-result-messages.php';
require get_views_path() . 'inputs-pledge-new-misc.php';
?>
<div>
<div class="wp-block-button">
<input
type="submit"
class="button"
class="button wp-block-button__link"
id="5ftf-pledge-submit"
name="action"
value="<?php esc_attr_e( 'Submit Pledge', 'wporg-5ftf' ); ?>"

View file

@ -10,7 +10,7 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
?>
<hr />
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<form class="pledge-form" id="5ftf-form-pledge-remove" action="" method="post">
<h2><?php esc_html_e( 'Remove Pledge', 'wporg-5ftf' ); ?></h2>
@ -24,8 +24,15 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
<input type="hidden" name="action" value="remove-pledge" />
<input type="hidden" name="auth_token" value="<?php echo esc_attr( $auth_token ); ?>" />
<input type="hidden" name="pledge_id" value="<?php echo absint( $pledge_id ); ?>" />
<button type="submit" class="button button-danger" id="5ftf-pledge-remove">
<?php esc_html_e( 'Remove Pledge', 'wporg-5ftf' ); ?>
</button>
<div class="wp-block-button is-style-outline is-small is-destructive">
<button
type="submit"
class="button button-danger wp-block-button__link"
id="5ftf-pledge-remove"
>
<?php esc_html_e( 'Remove Pledge', 'wporg-5ftf' ); ?>
</button>
</div>
</p>
</form>

View file

@ -6,7 +6,11 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
/** @var array $contributors */
/** @var int $pledge_id */
/** @var bool $readonly */
?>
add_action(
is_admin() ? 'admin_footer' : 'wp_footer',
function () use ( $readonly ) {
?>
<script type="text/template" id="tmpl-5ftf-contributor-lists">
<# if ( data.publish.length ) { #>
<h3 class="contributor-list-heading"><?php esc_html_e( 'Confirmed', 'wporg-5ftf' ); ?></h3>
@ -51,36 +55,44 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
</th>
<# if ( 'pending' === data.status ) { #>
<td class="resend-confirm">
<button
class="button"
data-action="resend-contributor-confirmation"
data-contributor-post="{{ data.contributorId }}"
>
{{ data.resendLabel }}
</button>
<div class="wp-block-button is-style-outline is-small">
<button
class="button wp-block-button__link"
data-action="resend-contributor-confirmation"
data-contributor-post="{{ data.contributorId }}"
>
{{ data.resendLabel }}
</button>
</div>
</td>
<# } else { #>
<td>{{ data.publishDate }}</td>
<# } #>
<?php if ( ! $readonly ) : ?>
<td>
<button
class="button-link button-link-delete"
data-action="remove-contributor"
data-contributor-post="{{ data.contributorId }}"
data-confirm="{{ data.removeConfirm }}"
aria-label="{{ data.removeLabel }}"
>
<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
<?php esc_html_e( 'Remove', 'wporg-5ftf' ); ?>
</button>
<div class="wp-block-button is-style-outline is-small is-destructive">
<button
class="button-link button-link-delete wp-block-button__link"
data-action="remove-contributor"
data-contributor-post="{{ data.contributorId }}"
data-confirm="{{ data.removeConfirm }}"
aria-label="{{ data.removeLabel }}"
>
<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
<?php esc_html_e( 'Remove', 'wporg-5ftf' ); ?>
</button>
</div>
</td>
<?php endif; ?>
</tr>
</script>
</script>
<?php
}
);
?>
<div id="5ftf-contributors">
<div class="pledge-contributors pledge-status__<?php echo esc_attr( get_post_status( $pledge_id ) ); ?>">
<div class="pledge-contributors pledge-status__<?php echo esc_attr( get_post_status( $pledge_id ) ); ?> wp-block-table">
<?php if ( ! empty( $contributors ) ) : ?>
<?php
printf(
@ -101,11 +113,13 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
<div id="add-contrib-message" role="alert" aria-atomic="true"></div>
<button
class="button button-secondary"
data-action="add-contributor"
>
<?php esc_html_e( 'Add new contributors', 'wporg-5ftf' ); ?>
</button>
<div class="wp-block-button is-style-outline is-small">
<button
class="button button-secondary wp-block-button__link"
data-action="add-contributor"
>
<?php esc_html_e( 'Add new contributors', 'wporg-5ftf' ); ?>
</button>
</div>
<?php endif; ?>
</div>