Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New button design #310

Closed
wants to merge 6 commits into from
Closed

New button design #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fde7b48
Add preset color to css
trymebytes May 28, 2024
0c3d39f
Add more css styles for button
trymebytes May 30, 2024
7676be6
Set the create event button to inline
trymebytes May 31, 2024
921f22b
Update button designs for attendees page
trymebytes May 31, 2024
b059040
Update create event button design
trymebytes May 31, 2024
9b8d120
Add back new button classes
trymebytes Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions assets/css/new-design.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/* This style is copied from
https://github.com/WordPress/wporg-mu-plugins/blob/4ab57d37d930c8b8526458fc510568d0fb0050f8/mu-plugins/blocks/global-header-footer/postcss/_common.pcss
*/
body {
--wp--preset--color--charcoal-2: #23282d;
--wp-global-header--background-color: var(--wp--preset--color--charcoal-2);
--wp--preset--color--charcoal-4: #656a71;
--wp--preset--color--white-opacity-15: #ffffff26;
--wp--preset--color--blueberry-1: #3858e9;
--wp--preset--spacing--30: 30px;

Check failure on line 10 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--color--background: var(--wp--preset--color--blueberry-1);

Check failure on line 11 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--color--text: var(--wp--preset--color--white);

Check failure on line 12 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--border--color: var(--wp--preset--color--blueberry-1);

Check failure on line 13 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--border--radius: 2px;

Check failure on line 14 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--border--style: solid;

Check failure on line 15 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--border--width: 1px;

Check failure on line 16 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--hover--color--background: var(--wp--preset--color--deep-blueberry);

Check failure on line 17 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--hover--color--text: var(--wp--preset--color--white);

Check failure on line 18 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--focus--border--color: var(--wp--preset--color--blueberry-1);

Check failure on line 19 in assets/css/new-design.css

View workflow job for this annotation

GitHub Actions / phpcs 

Tabs must be used to indent lines; spaces are not allowed
--wp--custom--button--active--border--color: var(--wp--preset--color--blueberry-1);
--wp--custom--button--active--color--background: var(--wp--preset--color--charcoal-1);
--wp--custom--button--active--color--text: var(--wp--preset--color--white);
--wp--custom--button--outline--border--color: currentColor;
--wp--custom--button--outline--color--background: transparent;
--wp--custom--button--outline--color--text: var(--wp--preset--color--blueberry-1);
--wp--custom--button--outline--hover--border--color: var(--wp--preset--color--blueberry-1);
--wp--custom--button--outline--hover--color--background: var(--wp--preset--color--deep-blueberry);
--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white);
--wp--custom--button--outline--focus--border--color: var(--wp--preset--color--blueberry-1);
--wp--custom--button--outline--focus--color--background: var(--wp--preset--color--blueberry-1);
--wp--custom--button--outline--focus--color--text: var(--wp--preset--color--white);
--wp--custom--button--outline--active--border--color: var(--wp--preset--color--charcoal-1);
--wp--custom--button--outline--active--color--background: var(--wp--preset--color--charcoal-1);
--wp--custom--button--outline--active--color--text: var(--wp--preset--color--white);
--wp--custom--button--spacing--padding--top: 16px;
--wp--custom--button--spacing--padding--bottom: 16px;
--wp--custom--button--spacing--padding--left: 32px;
--wp--custom--button--spacing--padding--right: 32px;
--wp--custom--button--text--typography--font-weight: 400;
--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
--wp--custom--button--typography--font-weight: 600;
--wp--custom--button--typography--line-height: var(--wp--custom--body--small--typography--line-height);

}

header#masthead.site-header {
height: 60px;
gap: 80px;
border-top: 1px solid var(--wp--preset--color--white-opacity-15);
background-color: var(--wp-global-header--background-color);
div.site-branding {
p.site-title {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 24px;
text-align: left;
}

ul#menu-headline-nav.menu li {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 24px;
text-align: left;
a {
text-decoration: none;
}
}
}
}

ul.breadcrumb {
font-family: Inter;
height: 24px;
li, li a {
font-size: 14px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: var(--wp--preset--color--charcoal-4);
text-decoration: none;
}
li:after {
color: rgba(217, 217, 217, 1);
margin: 0 8px;
}
}
[class*="wp-block"].is-style-outline .wp-block-button__link, [class*="wp-block"].is-style-outline-on-dark .wp-block-button__link {
opacity: 1;
background-color: var(--wp--custom--button--outline--color--background);
color: var(--wp--custom--button--outline--color--text);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
padding-left: var(--wp--custom--button--spacing--padding--left);
padding-right: var(--wp--custom--button--spacing--padding--right);
border: var(--wp--custom--button--border--width) solid var(--wp--custom--button--outline--border--color);
}
.wp-block-button .wp-block-button__link {
background-color: var(--wp--custom--button--color--background);
color: var(--wp--custom--button--color--text);
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--custom--button--typography--font-size);
font-weight: var(--wp--custom--button--typography--font-weight);
line-height: var(--wp--custom--button--typography--line-height);
border-radius: var(--wp--custom--button--border--radius);
}
.create-event-btn {
display: inline !important;
}
12 changes: 8 additions & 4 deletions templates/event-attendees.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,21 @@
</td>
<td>
<form class="add-remove-user-as-host" method="post" action="<?php echo esc_url( Urls::event_toggle_host( $event->id(), $attendee->user_id() ) ); ?>">
<?php if ( $attendee->is_host() ) : ?>
<input type="submit" class="button is-primary remove-as-host" value="<?php echo esc_attr__( 'Remove as host', 'gp-translation-events' ); ?>"/>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex create-event-btn" style="margin-top:var(--wp--preset--spacing--30)">
<div class="wp-block-button is-style-outline">
<?php if ( $attendee->is_host() ) : ?>
<button class="wp-block-button__link wp-element-button remove-as-host" type="submit"><?php echo esc_html__( 'Remove as host', 'gp-translation-events' ); ?></button>
<?php else : ?>
<input type="submit" class="button is-secondary convert-to-host" value="<?php echo esc_attr__( 'Make co-host', 'gp-translation-events' ); ?>"/>
<button class="wp-block-button__link wp-element-button convert-to-host" type="submit"><?php echo esc_html__( 'Make co-host', 'gp-translation-events' ); ?></button>
<?php endif; ?>
<?php if ( $event->is_hybrid() ) : ?>
<a href="<?php echo esc_url( Urls::event_toggle_attendance_mode( $event->id(), $attendee->user_id() ) ); ?>" class="button set-attendance-mode"><?php $attendee->is_remote() ? esc_html_e( 'Set as on-site', 'gp-translation-events' ) : esc_html_e( 'Set as remote', 'gp-translation-events' ); ?></a>
<?php endif; ?>
<?php if ( ! $attendee->is_host() ) : ?>
<a href="<?php echo esc_url( Urls::event_remove_attendee( $event->id(), $attendee->user_id() ) ); ?>" class="button remove-attendee"><?php esc_html_e( 'Remove', 'gp-translation-events' ); ?></a>
<a href="<?php echo esc_url( Urls::event_remove_attendee( $event->id(), $attendee->user_id() ) ); ?>" class="wp-block-button__link wp-element-button remove-attendee"><?php esc_html_e( 'Remove', 'gp-translation-events' ); ?></a>
<?php endif; ?>
</div>
</div>
</form>
</td>
</tr>
Expand Down
35 changes: 20 additions & 15 deletions templates/parts/event-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,21 +88,26 @@
</div>
<div class="submit-btn-group">
<label for="event-status"></label>
<?php if ( $event->id() ) : ?>
<?php if ( $event->is_draft() ) : ?>
<button class="button is-primary save-draft submit-event" type="submit" data-event-status="draft">Update Draft</button>
<?php endif; ?>
<button class="button is-primary submit-event" type="submit" data-event-status="publish">
<?php echo ( $event->is_published() ) ? esc_html( 'Update Event' ) : esc_html( 'Publish Event' ); ?>
</button>
<?php else : ?>
<button class="button is-primary save-draft submit-event" type="submit" data-event-status="draft">Save Draft</button>
<button class="button is-primary submit-event" type="submit" data-event-status="publish">Publish Event</button>
<?php endif; ?>
<?php $visibility_trash_button = current_user_can( 'trash_translation_event', $event->id() ) ? 'inline-flex' : 'none'; ?>
<button id="trash-button" class="button is-destructive trash-event" type="submit" name="submit" value="Delete" style="display: <?php echo esc_attr( $visibility_trash_button ); ?>">Delete Event</button>
</div>
<div class="clear"></div>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex create-event-btn" style="margin-top:var(--wp--preset--spacing--30)">
<div class="wp-block-button is-style-outline">
<?php if ( $event->id() ) : ?>
<?php if ( $event->is_draft() ) : ?>
<button class="wp-block-button__link wp-element-button save-draft submit-event" type="submit" data-event-status="draft">Save Draft</button>
<?php endif; ?>
<button class="wp-block-button__link wp-element-button submit-event" type="submit" data-event-status="publish">

<?php echo ( $event->is_published() ) ? esc_html( 'Update Event' ) : esc_html( 'Publish Event' ); ?>
</button>
<?php else : ?>
<button class="wp-block-button__link wp-element-button save-draft submit-event" type="submit" data-event-status="draft">Save Draft</button>
<button class="wp-block-button__link wp-element-button submit-event" type="submit" data-event-status="publish">Publish Event</button>
<?php endif; ?>
<?php $visibility_trash_button = current_user_can( 'trash_translation_event', $event->id() ) ? 'inline-flex' : 'none'; ?>
<button id="trash-button" class="wp-block-button__link wp-element-button trash-event" type="submit" name="submit" value="Delete" style="display: <?php echo esc_attr( $visibility_trash_button ); ?>">Delete Event</button>
</div>
</div>
</div>
<div class="clear"></div>
<div class="published-update-text">
<?php
$visibility_published_button = 'none';
Expand Down
8 changes: 7 additions & 1 deletion templates/parts/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,13 @@ function () use ( $html_title, $url, $html_description, $image_url ) {
<?php endif; ?>
<li><a href="<?php echo esc_url( Urls::my_events() ); ?>">My Events</a></li>
<?php if ( current_user_can( 'create_translation_event' ) ) : ?>
<li><a class="button is-primary" href="<?php echo esc_url( Urls::event_create() ); ?>">Create Event</a></li>
<li>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex create-event-btn" style="margin-top:var(--wp--preset--spacing--30)">
<div class="wp-block-button is-style-outline">
<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( Urls::event_create() ); ?>">Create Event</a>
</div>
</div>
</li>
<?php endif; ?>
<?php endif; ?>
</ul>
Expand Down
Loading