tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-22 02:53:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pledge form: Style the form

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
plugins/wporg-5ftf/views/form-pledge-manage.php
View file

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

6
plugins/wporg-5ftf/views/form-pledge-new.php
View file

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

15
plugins/wporg-5ftf/views/form-pledge-remove.php
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"> <form class="pledge-form" id="5ftf-form-pledge-remove" action="" method="post">
<h2><?php esc_html_e( 'Remove Pledge', 'wporg-5ftf' ); ?></h2> <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="action" value="remove-pledge" />
<input type="hidden" name="auth_token" value="<?php echo esc_attr( $auth_token ); ?>" /> <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 ); ?>" /> <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' ); ?> <div class="wp-block-button is-style-outline is-small is-destructive">
</button> <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> </p>
</form> </form>

64
plugins/wporg-5ftf/views/manage-contributors.php
View file

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

142
themes/wporg-5ftf-2024/src/style/_pledge-form.scss Normal file
View file

@ -0,0 +1,142 @@
.pledge-form {
.form-field {
margin-bottom: var(--wp--preset--spacing--20);
label {
display: block;
margin-bottom: calc(var(--wp--preset--spacing--10) / 2);
}
input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
textarea {
display: block;
width: 100%;
}
input[type="number"] {
max-width: 10em;
height: auto;
}
[id*="help"] p,
p[id*="help"] {
margin-top: calc(var(--wp--preset--spacing--10) / 2);
font-size: var(--wp--preset--font-size--extra-small);
line-height: var(--wp--custom--body--extra-small--typography--line-height);
}
}
.form-field__logo {
label {
display: inline;
}
input {
padding: 0;
line-height: 1;
&::file-selector-button {
padding-inline: var(--wp--custom--form--padding--inline);
padding-block: var(--wp--custom--form--padding--block);
background: var(--wp--custom--form--color--background);
border:
var(--wp--custom--form--border--width)
var(--wp--custom--form--border--style)
var(--wp--custom--form--border--color);
border-radius: var(--wp--custom--form--border--radius);
}
}
}
.form-field__agree {
display: flex;
gap: var(--wp--preset--spacing--10);
align-items: flex-start;
input {
margin-top: 7px;
}
label {
display: inline;
margin-bottom: 0;
margin-left: 0;
line-height: var(--wp--custom--body--short-text--typography--line-height);
}
}
.contributor-list-heading {
margin: 1rem 0;
}
.contributor-list {
margin-bottom: 1.5rem;
width: 100%;
border-collapse: collapse;
th,
td,
th *,
td * {
vertical-align: middle;
}
thead {
background-color: #fff;
color: inherit;
th {
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
}
}
tr > * {
border-top: 1px solid var(--wp--preset--color--light-grey-1);
&:first-child {
border-left: 1px solid var(--wp--preset--color--light-grey-1);
}
&:last-child {
border-right: 1px solid var(--wp--preset--color--light-grey-1);
}
}
tr:last-child > * {
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
}
.avatar {
margin-right: 8px;
}
.button-link-delete {
text-decoration: none;
.dashicons {
margin-top: -2px;
}
}
}
.pledge-contributors.pledge-status__draft .resend-confirm {
display: none;
}
.wp-block-button.is-destructive {
--wp--custom--button--outline--color--text: #d63638;
--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white);
--wp--custom--button--outline--hover--color--background: var(--wp--custom--button--outline--color--text);
--wp--custom--button--outline--hover--border--color: var(--wp--custom--button--outline--color--text);
.wp-block-button__link:focus {
background-color: var(--wp--custom--button--outline--color--text);
color: var(--wp--preset--color--white);
outline-color: var(--wp--custom--button--outline--hover--border--color);
}
}
}

2
themes/wporg-5ftf-2024/src/style/style.scss
View file

@ -3,6 +3,8 @@
* templates or theme.json settings. * templates or theme.json settings.
*/ */
@import "pledge-form";
/* Add default focus style. */ /* Add default focus style. */
:where(main) a:where(:not(.wp-element-button,.wp-block-wporg-link-wrapper)):focus, :where(main) a:where(:not(.wp-element-button,.wp-block-wporg-link-wrapper)):focus,
:where(main) button:where(:not([class*="wp-block-button"])):focus { :where(main) button:where(:not([class*="wp-block-button"])):focus {