Update/Install: Shiny Updates v2.

Gone are the days of isolation and feelings of "meh", brought on by The Bleak Screen of Sadness. For a shiny knight has arrived to usher our plugins and themes along their arduous journey of installation, updates, and the inevitable fate of ultimate deletion.

Props swissspidy, adamsilverstein, mapk, afragen, ocean90, ryelle, j-falk, michael-arestad, melchoyce, DrewAPicture, AdamSoucie, ethitter, pento, dd32, kraftbj, Ipstenu, jorbin, afercia, stephdau, paulwilde, jipmoors, khag7, svovaf, jipmoors, obenland.
Fixes #22029, #25828, #31002, #31529, #31530, #31773, #33637, #35032.



git-svn-id: https://develop.svn.wordpress.org/trunk@37714 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Konstantin Obenland
2016-06-15 16:36:07 +00:00
parent 1d115078eb
commit 4dd1d9bef9
30 changed files with 3653 additions and 769 deletions
+98 -4
View File
@@ -1397,6 +1397,21 @@ div.error {
background-color: #e5f5fa;
}
.update-message p:before,
.updating-message p:before,
.updated-message p:before,
.import-php .updating-message:before,
.button.updating-message:before,
.button.updated-message:before,
.button.installed:before,
.button.installing:before {
display: inline-block;
font: normal 20px/1 'dashicons';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: top;
}
.wrap .notice,
.wrap div.updated,
.wrap div.error,
@@ -1405,6 +1420,45 @@ div.error {
margin: 5px 0 15px;
}
/* Update icon. */
.update-message p:before,
.updating-message p:before,
.import-php .updating-message:before,
.button.updating-message:before,
.button.installing:before {
color: #f56e28;
content: "\f463";
}
/* Spins the update icon. */
.updating-message p:before,
.import-php .updating-message:before,
.button.updating-message:before,
.button.installing:before {
-webkit-animation: rotation 2s infinite linear;
animation: rotation 2s infinite linear;
}
/* Updated icon (check mark). */
.updated-message p:before,
.installed p:before,
.button.updated-message:before {
color: #79ba49;
content: '\f147';
}
/* Error icon. */
.update-message.notice-error p:before {
color: #dc3232;
content: "\f534";
}
.wrap .notice p:before,
.import-php .updating-message:before {
margin-right: 6px;
vertical-align: bottom;
}
#update-nag,
.update-nag {
display: inline-block;
@@ -1419,10 +1473,6 @@ div.error {
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}
.update-message {
color: #000;
}
ul#dismissed-updates {
display: none;
}
@@ -1454,6 +1504,50 @@ form.upgrade .hint {
margin-left: 2em;
}
.button.updating-message:before,
.button.updated-message:before,
.button.installed:before,
.button.installing:before {
margin: 3px 5px 0 -2px;
}
.button-primary.updating-message:before {
color: #fff;
}
.button-primary.updated-message:before {
color: #66c6e4;
}
.button.updated-message,
.notice .button-link {
-webkit-transition-property: border, background, color;
transition-property: border, background, color;
-webkit-transition-duration: .05s;
transition-duration: .05s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.notice .button-link {
color: #0073aa;
}
.notice .button-link:hover,
.notice .button-link:active {
color: #00a0d2;
}
@media aural {
.wrap .notice p:before,
.button.installing:before,
.button.installed:before,
.update-message p:before {
speak: none;
}
}
/* @todo: this does not need its own section anymore */
/*------------------------------------------------------------------------------
6.0 - Admin Header
+37
View File
@@ -1044,6 +1044,43 @@ table.form-table td .updated p {
display: inline;
}
.request-filesystem-credentials-dialog .ftp-username,
.request-filesystem-credentials-dialog .ftp-password {
float: none;
width: auto;
}
.request-filesystem-credentials-dialog .ftp-username {
margin-bottom: 1em;
}
.request-filesystem-credentials-dialog .ftp-password {
margin: 0;
}
.request-filesystem-credentials-dialog .ftp-password em {
color: #888;
}
.request-filesystem-credentials-dialog label {
display: block;
line-height: 1.5;
margin-bottom: 1em;
}
.request-filesystem-credentials-form legend {
padding-bottom: 0;
}
.request-filesystem-credentials-form #ssh-keys legend {
font-size: 1.3em;
}
.request-filesystem-credentials-form .notice {
margin: 0 0 20px 0;
clear: both;
}
/* =Media Queries
-------------------------------------------------------------- */
+26 -58
View File
@@ -1271,10 +1271,6 @@ ul.cat-checklist {
border-bottom: 0;
}
.plugin-update-tr td {
border-top: 0;
}
.plugins .inactive td,
.plugins .inactive th,
.plugins .active td,
@@ -1309,22 +1305,11 @@ ul.cat-checklist {
box-shadow: none;
}
.plugins .active.update td,
.plugins .active.update th,
tr.active.update + tr.plugin-update-tr .plugin-update {
background-color: #fef7f1;
}
.plugins .active th.check-column,
.plugin-update-tr.active td {
border-left: 4px solid #00a0d2;
}
.plugins .active.update th.check-column,
.plugins .active.update + .plugin-update-tr .plugin-update {
border-left: 4px solid #d54e21;
}
#wpbody-content .plugins .plugin-title,
#wpbody-content .plugins .theme-title {
padding-right: 12px;
@@ -1358,42 +1343,33 @@ tr.active.update + tr.plugin-update-tr .plugin-update {
border-top-width: 1px;
}
.plugin-update-tr .update-message {
font-size: 13px;
font-weight: normal;
margin: 0 10px 8px 31px;
padding: 6px 12px 8px 40px;
background-color: #f7f7f7;
background-color: rgba(0,0,0,0.03);
.plugins .plugin-update-tr .plugin-update {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
overflow: hidden; /* clearfix */
padding: 0;
}
.plugin-update-tr .update-message:before,
.plugin-card .update-now:before,
.plugin-card .install-now:before {
color: #d54e21;
.plugins .plugin-update-tr .notice {
margin: 5px 20px 15px 40px;
}
.plugins .notice p {
margin: 0.5em 0;
}
.plugin-card .update-now:before {
color: #f56e28;
content: "\f463";
display: inline-block;
font: normal 20px/1 dashicons;
margin: 3px 5px 0 -2px;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: top;
}
.plugin-update-tr .update-message:before,
.plugin-card .update-now:before {
content: "\f463";
}
.plugin-update-tr .update-message:before {
margin: 0 10px 0 -30px;
}
.plugin-card .update-now:before,
.plugin-card .install-now:before {
margin: 3px 5px 0 -2px;
}
.plugin-update-tr .updating-message:before,
.plugin-card .updating-message:before {
content: "\f463";
-webkit-animation: rotation 2s infinite linear;
@@ -1422,28 +1398,11 @@ tr.active.update + tr.plugin-update-tr .plugin-update {
}
}
.plugin-update-tr .updated-message:before,
.plugin-card .updated-message:before {
color: #79ba49;
content: "\f147";
}
.wp-list-table.plugins tbody tr.plugin-update-tr td.plugin-update {
overflow: hidden; /* clearfix */
padding: 0;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}
/* update notices for active plugins */
tr.active + tr.plugin-update-tr .plugin-update {
background-color: #f7fcfe;
}
tr.active + tr.plugin-update-tr:not(.updated) .plugin-update .update-message {
background-color: #fcf3ef;
}
.plugin-install-php h2 {
clear: both;
}
@@ -2140,6 +2099,15 @@ div.action-links,
margin-left: 0;
}
.plugins .active.update + .plugin-update-tr:before {
background-color: #f7fcfe;
border-left: 4px solid #00a0d2;
}
.plugins .plugin-update-tr .update-message {
margin-left: 0;
}
.wp-list-table.plugins .plugin-title strong,
.wp-list-table.plugins .theme-title strong {
font-size: 1.4em;
+43 -53
View File
@@ -11,15 +11,10 @@
clear: both;
}
.themes-php .wrap h1 {
float: left;
.themes-php:not(.network-admin) .wrap h1 {
margin-bottom: 15px;
}
.network-admin.themes-php .wrap h1 {
margin-bottom: 0;
}
.themes-php .wrap h1 .button {
margin-left: 20px;
}
@@ -37,11 +32,13 @@
}
/* Position admin messages */
.themes-php div.updated,
.themes-php div.error,
.themes-php div.notice {
margin: 0 0 20px 0;
clear: both;
.theme .notice,
.theme .notice.is-dismissible {
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
}
/**
@@ -206,43 +203,6 @@
opacity: 1;
}
/**
* Displays a theme update notice
* when an update is available.
*/
.theme-browser .theme .theme-update,
.theme-browser .theme .theme-installed {
background: #d54e21;
background: rgba(213, 78, 33, 0.95);
color: #fff;
display: block;
font-size: 13px;
font-weight: 400;
height: 48px;
line-height: 48px;
padding: 0 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
border-bottom: 1px solid rgba(0,0,0,0.25);
overflow: hidden;
}
.theme-browser .theme .theme-update:before,
.theme-browser .theme .theme-installed:before {
content: "\f463";
display: inline-block;
font: normal 20px/1 dashicons;
margin: 0 6px 0 0;
opacity: 0.8;
position: relative;
top: 5px;
speak: none;
-webkit-font-smoothing: antialiased;
}
/**
* The currently active theme
*/
@@ -951,7 +911,6 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
}
@media only screen and (max-width: 650px) {
.theme-overlay .theme-update,
.theme-overlay .theme-description {
margin-left: 0;
}
@@ -1041,11 +1000,18 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
.theme-browser .theme .theme-installed {
background: #0073aa;
}
.theme-browser .theme .theme-installed:before {
.theme-browser .theme .notice-success p:before {
color: #79ba49;
content: "\f147";
display: inline-block;
font: normal 20px/1 'dashicons';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: top;
}
.theme-browser .theme.is-installed .theme-actions .button-primary {
display: none !important;
.theme-install.updated-message:before {
content: '';
}
.theme-install-php .wp-filter {
@@ -1394,6 +1360,21 @@ body.full-overlay-active {
pointer-events: none;
}
.theme-install-overlay .close-full-overlay,
.theme-install-overlay .previous-theme,
.theme-install-overlay .next-theme {
border-left: 0;
border-top: 0;
border-bottom: 0;
}
.theme-install-overlay .close-full-overlay:before,
.theme-install-overlay .previous-theme:before,
.theme-install-overlay .next-theme:before {
top: 2px;
left: 0;
}
/* Collapse Button */
.wp-core-ui .wp-full-overlay .collapse-sidebar {
position: fixed;
@@ -1708,7 +1689,7 @@ body.full-overlay-active {
max-width: 100%;
}
.theme-install-overlay .wp-full-overlay-header .theme-install {
.theme-install-overlay .wp-full-overlay-header .button {
float: right;
margin: 8px 10px 0 0;
/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
@@ -1803,3 +1784,12 @@ body.full-overlay-active {
line-height: normal;
}
}
@media aural {
.theme .notice:before,
.theme-info .updating-message:before,
.theme-info .updated-message:before,
.theme-install.updating-message:before {
speak: none;
}
}