Skip to content

Style and UX fixes for push UI #589

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

Merged
helen merged 4 commits into from
Jun 12, 2020
Merged

Style and UX fixes for push UI #589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7bd9ee7
Style and UX fixes for push UI
helen Jun 9, 2020
4d5f9e2
Show a "no results" message when filtering connections
helen Jun 10, 2020
1694cf3
Fix one PHPCS error
helen Jun 10, 2020
5deb0e9
Make sure buttons are the correct height
helen Jun 11, 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
114 changes: 89 additions & 25 deletions assets/css/push.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,17 @@

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

& .no-results {
margin: 0 !important;
padding: 0.5em;
}
}

#wpadminbar #distributor-push-wrapper .selected-connections-list {
margin-bottom: 1em;
margin-bottom: 0.5em;
max-height: 145px;
overflow: auto;
}
Expand All @@ -95,13 +100,15 @@
display: none;
}
}
#wpadminbar #distributor-push-wrapper .selectall-connections.unavailable,
#wpadminbar #distributor-push-wrapper .selectno-connections.unavailable {
opacity: .5;

#wpadminbar #distributor-push-wrapper .connections-selected button.selectno-connections {
margin-left: 10px;
}

#wpadminbar #distributor-push-wrapper .connections-selected label {
color: inherit;
}

#wpadminbar #distributor-push-wrapper .connections-selected input[type="checkbox"] {
vertical-align: middle;
margin-right: 2px;
Expand Down Expand Up @@ -170,9 +177,9 @@
#wpadminbar #distributor-push-wrapper input[type=text] {
font-size: inherit;
padding: 0.5278em;
width: 96%;
width: calc( 100% - 1.0556em - 2px );
background-color: var(--backgroundColor);
border: 3px solid var(--borderColor);
border: 2px solid var(--borderColor);
color: var(--fontColor);
margin-bottom: .5em;

Expand All @@ -183,17 +190,47 @@
&:focus {
color: var(--fontColor);
background-color: var(--backgroundColor);
border: 2px solid var(--borderColor);
border-color: color(var(--fontColor) blackness(50%));
}
}

#wpadminbar #distributor-push-wrapper button {
padding: 0 10px;
padding: .5em 1em;
border-radius: 3px;
}
min-height: 0;

&.button-link {
margin: 0;
padding: 0;
box-shadow: none;
border: 0;
border-radius: 0;
background: none;
cursor: pointer;
text-align: left;
/* Mimics the default link style in common.css but brighter due to dark bg */
color: #00a0d2;
text-decoration: underline;
transition-property: border, background, color;
transition-duration: .05s;
transition-timing-function: ease-in-out;

&:hover {
color: #fff;
text-decoration: none;
}
}

#wpadminbar #distributor-push-wrapper .selectall-connections {
margin-bottom: 1em;
/* avoid being overridden by themes, darker than admin due to dark bg */
&.button-primary:hover {
background-color: #005b85;
border-color: #005b85;
}

&.selectall-connections {
margin-top: .5em;
margin-bottom: -10px; /* compensation for margin above messages div to reduce jumping */
}
}

#wpadminbar #distributor-push-wrapper .new-connections-list > .add-connection:nth-child(odd) {
Expand All @@ -204,6 +241,7 @@
#wpadminbar #distributor-push-wrapper .added-connection {
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: block;
width: 100%;
Expand All @@ -218,28 +256,46 @@
outline: 2px solid transparent;
outline-offset: 0;
}

&:hover {
text-decoration: underline;
}
}

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

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

#wpadminbar #distributor-push-wrapper .add-connection.syndicated span {
color: var(--borderColor);
}
&:after {
content: "\f147";
font-family: dashicons;
color: var(--borderColor);
}

#wpadminbar #distributor-push-wrapper .add-connection.syndicated a {
color: inherit;
text-decoration: underline;
float: right;
height: auto;
&:hover {
text-decoration: none;
}

&:focus {
box-shadow: inset 0 0 0 1px #fff;
& span {
color: var(--borderColor);
}

& a {
color: inherit;
text-decoration: underline;
float: right;
height: auto;

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

&:hover {
text-decoration: none;
}
}
}

Expand All @@ -249,6 +305,14 @@
cursor: normal;
position: relative;

&:hover {
text-decoration: none;

& .remove-connection:after {
color: #f00;
}
}

& .remove-connection {
cursor: pointer;
top: 1px;
Expand All @@ -258,7 +322,7 @@
line-height: 19px;
vertical-align: middle;
margin-left: 6px;
position: relative;
position: relative;
}

& .remove-connection:after {
Expand Down
4 changes: 4 additions & 0 deletions assets/js/push.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,10 @@ jQuery( window ).on( 'load', () => {

connectionsNewList.innerHTML += showConnection;
} );

if ( '' === connectionsNewList.innerHTML ) {
connectionsNewList.innerHTML = '<p class="no-results">No results</p>';
}
}

/**
Expand Down
8 changes: 4 additions & 4 deletions includes/push-ui.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ function ajax_push() {
'time' => time(),
);

$internal_push_results[ (int) $connection['id'] ] = array(
$internal_push_results[ (int) $connection['id'] ] = array(
'post_id' => (int) $remote_id,
'url' => esc_url_raw( $remote_url ),
'date' => date( 'F j, Y g:i a' ),
Expand Down Expand Up @@ -506,12 +506,9 @@ function menu_content() {

<div class="connections-selector">
<div>
<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 ) { #>
<button
Expand All @@ -532,11 +529,14 @@ class="add-connection<# if ( ! _.isEmpty( connections[ key ]['syndicated'] ) ) {
<# } #>
</div>

<button class="button button-primary selectall-connections unavailable"><?php esc_html_e( 'Select All', 'distributor' ); ?></button>

</div>
</div>
<div class="connections-selected empty">
<header class="with-selected">
<?php esc_html_e( 'Selected connections', 'distributor' ); ?>
<button class="button button-link selectno-connections unavailable"><?php esc_html_e( 'Clear', 'distributor' ); ?></button>
</header>
<header class="no-selected">
<?php esc_html_e( 'No connections selected', 'distributor' ); ?>
Expand Down