Skip to content

Commit

Permalink
Merge pull request #589 from 10up/fix/polish-select-all
Browse files Browse the repository at this point in the history 
Style and UX fixes for push UI
  • Loading branch information
@helen
helen authored Jun 12, 2020
2 parents 988f317 + 5deb0e9 commit 9e56b73
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 29 deletions.
114 changes: 89 additions & 25 deletions assets/css/push.css
View file
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
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
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

0 comments on commit 9e56b73

Please sign in to comment.