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

Better keyboard support for distributor admin menu #569

Merged
merged 8 commits into from
May 19, 2020
Merged

Better keyboard support for distributor admin menu #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5037e70
First pass of using buttons.
samikeijonen Mar 26, 2020
2da8754
Use button where needed.
samikeijonen Mar 26, 2020
7bb58e9
Tweak target.
samikeijonen Mar 26, 2020
44f2e24
Add disabled.
samikeijonen Mar 26, 2020
058d743
Merge branch 'develop' into tweak/distributor-menu-a11y-v2
dinhtungdu May 14, 2020
c1b5a06
feat: improve focus style for connection list and view link
dinhtungdu May 14, 2020
6116061
feat: add border radius to push pane buttons
dinhtungdu May 14, 2020
a92a861
fix: handle the list with more than 4 connections
dinhtungdu May 16, 2020
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
47 changes: 20 additions & 27 deletions assets/css/push.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,15 @@
}

#wpadminbar #distributor-push-wrapper .new-connections-list {
overflow: auto;
border: 1px solid var(--borderColor);
max-height: 125px;
overflow: auto;
}

#wpadminbar #distributor-push-wrapper .selected-connections-list {
margin-bottom: 1em;
max-height: 145px;
overflow: auto;
max-height: 145px;
}

#wpadminbar #distributor-push-wrapper .connections-selected {
Expand Down Expand Up @@ -177,55 +177,44 @@
}

#wpadminbar #distributor-push-wrapper button {
background: #0085ba;
border-color: #0073aa #006799 #006799;
border-width: 1px;
border-style: solid;
box-shadow: 0 1px 0 #006799;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
height: 30px;
line-height: 28px;
padding: 0 12px 2px;
padding: 0 10px;
border-radius: 3px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should keep the border-radius and text-shadow because they're overridden by admin bar style.

text-transform: none;
font-size: 13px;
vertical-align: top;
font-weight: normal;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

&:hover,
&:focus {
background-color: #0085ba;
outline: none;
}
}

#wpadminbar #distributor-push-wrapper .selectall-connections {
margin-bottom: 1em;
}

#wpadminbar #distributor-push-wrapper .new-connections-list > div:nth-child(odd) {
#wpadminbar #distributor-push-wrapper .new-connections-list > .add-connection:nth-child(odd) {
background-color: var(--backgroundColorDark);
}

#wpadminbar #distributor-push-wrapper .add-connection,
#wpadminbar #distributor-push-wrapper .added-connection {
background-color: transparent;
border: 0;
box-shadow: none;
display: block;
width: 100%;
padding: .5em;
box-sizing: border-box;
color: inherit;
cursor: pointer;
text-align: left;

&:focus {
box-shadow: inset 0 0 0 2px #fff;
outline: 2px solid transparent;
outline-offset: 0;
}
}

#wpadminbar #distributor-push-wrapper .new-connections-list .add-connection.added {
background-color: color(var(--backgroundColor) lightness(25%));
}

#wpadminbar #distributor-push-wrapper .add-connection.syndicated {
cursor: default;
cursor: not-allowed;
}

#wpadminbar #distributor-push-wrapper .add-connection.syndicated span {
Expand All @@ -237,6 +226,10 @@
text-decoration: underline;
float: right;
height: auto;

&:focus {
box-shadow: inset 0 0 0 1px #fff;
}
}

#wpadminbar #distributor-push-wrapper .added-connection {
Expand Down
11 changes: 5 additions & 6 deletions assets/js/push.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,8 +322,7 @@ jQuery( window ).on( 'load', () => {

selectedConnections[type + id] = dtConnections[type + id];

const element = event.currentTarget.cloneNode();
element.innerText = event.currentTarget.innerText;
const element = event.currentTarget.cloneNode( true );

const removeLink = document.createElement( 'span' );
removeLink.classList.add( 'remove-connection' );
Expand Down Expand Up @@ -410,10 +409,10 @@ jQuery( window ).on( 'load', () => {
/**
* Remove a connection from selected connections and the UI list
*/
jQuery( distributorPushWrapper ).on( 'click', '.remove-connection', ( event ) => {
event.currentTarget.parentNode.parentNode.removeChild( event.currentTarget.parentNode );
const type = event.currentTarget.parentNode.getAttribute( 'data-connection-type' );
const id = event.currentTarget.parentNode.getAttribute( 'data-connection-id' );
jQuery( distributorPushWrapper ).on( 'click', '.added-connection', ( event ) => {
event.currentTarget.parentNode.removeChild( event.currentTarget );
const type = event.currentTarget.getAttribute( 'data-connection-type' );
const id = event.currentTarget.getAttribute( 'data-connection-id' );

delete selectedConnections[type + id];

Expand Down
20 changes: 13 additions & 7 deletions includes/push-ui.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -506,15 +506,20 @@ function menu_content() {

<div class="connections-selector">
<div>
<button class="selectall-connections unavailable"><?php esc_html_e( 'Select All', 'distributor' ); ?></button>
<button class="selectno-connections unavailable"><?php esc_html_e( 'None', 'distributor' ); ?></button>
<button class="button button-primary selectall-connections unavailable"><?php esc_html_e( 'Select All', 'distributor' ); ?></button>
<button class="button button-secondary selectno-connections unavailable"><?php esc_html_e( 'None', 'distributor' ); ?></button>
<# if ( 5 < _.keys( connections ).length ) { #>
<input type="text" id="dt-connection-search" placeholder="<?php esc_attr_e( 'Search available connections', 'distributor' ); ?>">
<# } #>

<div class="new-connections-list">
<# for ( var key in connections ) { #>
<div class="add-connection<# if ( ! _.isEmpty( connections[ key ]['syndicated'] ) ) { #> syndicated<# } #>" data-connection-type="{{ connections[ key ]['type'] }}" data-connection-id="{{ connections[ key ]['id'] }}">
<button
class="add-connection<# if ( ! _.isEmpty( connections[ key ]['syndicated'] ) ) { #> syndicated<# } #>"
data-connection-type="{{ connections[ key ]['type'] }}"
data-connection-id="{{ connections[ key ]['id'] }}"
<# if ( ! _.isEmpty( connections[ key ]['syndicated'] ) && connections[ key ]['syndicated'] ) { #>disabled<# } #>
>
<# if ( 'external' === connections[ key ]['type'] ) { #>
<span>{{ connections[ key ]['name'] }}</span>
<# } else { #>
Expand All @@ -523,9 +528,10 @@ function menu_content() {
<# if ( ! _.isEmpty( connections[ key ]['syndicated'] ) && connections[ key ]['syndicated'] ) { #>
<a href="{{ connections[ key ]['syndicated'] }}"><?php esc_html_e( 'View', 'distributor' ); ?></a>
<# } #>
</div>
</button>
<# } #>
</div>

</div>
</div>
<div class="connections-selected empty">
Expand Down Expand Up @@ -555,7 +561,7 @@ function menu_content() {
*/
$as_draft = apply_filters( 'dt_allow_as_draft_distribute', $as_draft, $connection = null, $post );
?>
<button class="syndicate-button"><?php esc_html_e( 'Distribute', 'distributor' ); ?></button> <?php if ( $as_draft ) : ?><label class="as-draft" for="dt-as-draft"><input type="checkbox" id="dt-as-draft" checked> <?php esc_html_e( 'As draft', 'distributor' ); ?></label><?php endif; ?>
<button class="button button-primary syndicate-button"><?php esc_html_e( 'Distribute', 'distributor' ); ?></button> <?php if ( $as_draft ) : ?><label class="as-draft" for="dt-as-draft"><input type="checkbox" id="dt-as-draft" checked> <?php esc_html_e( 'As draft', 'distributor' ); ?></label><?php endif; ?>
</div>

</div>
Expand All @@ -578,7 +584,7 @@ function menu_content() {
</script>

<script id="dt-add-connection" type="text/html">
<div class="<# if (selectedConnections[connection.type + connection.id]) { #>added<# }#> add-connection <# if (connection.syndicated) { #>syndicated<# } #>" data-connection-type="{{ connection.type }}" data-connection-id="{{ connection.id }}">
<button class="<# if (selectedConnections[connection.type + connection.id]) { #>added<# }#> add-connection <# if (connection.syndicated) { #>syndicated<# } #>" data-connection-type="{{ connection.type }}" data-connection-id="{{ connection.id }}" <# if (connection.syndicated) { #>disabled<# } #>>
<# if ('internal' === connection.type) { #>
<span>{{ connection.url }}</span>
<# } else { #>
Expand All @@ -588,7 +594,7 @@ function menu_content() {
<# if (connection.syndicated) { #>
<a href="{{ connection.syndicated }}"><?php esc_html_e( 'View', 'distributor' ); ?></a>
<# } #>
</div>
</button>
</script>

<div id="distributor-push-wrapper">
Expand Down