Media Modal: Show progress bars for uploading images, and adjust progress bar styles to compensate for the darker attachment background. see #21390.

git-svn-id: http://core.svn.wordpress.org/trunk@22176 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-10-11 00:36:42 +00:00
parent ce36b0b5f0
commit 22ad35710b
2 changed files with 6 additions and 5 deletions

View File

@ -442,15 +442,16 @@
width: 70%; width: 70%;
margin: 10px auto; margin: 10px auto;
padding: 2px; padding: 2px;
border: 2px solid #dfdfdf; border: 2px solid #ccc;
border-radius: 8px; border-radius: 8px;
background: #fff;
} }
.media-progress-bar div { .media-progress-bar div {
height: 8px; height: 8px;
min-width: 8px; min-width: 8px;
width: 0; width: 0;
background: #dfdfdf; background: #ccc;
border-radius: 10px; border-radius: 10px;
-webkit-transition: width 200ms; -webkit-transition: width 200ms;
-moz-transition: width 200ms; -moz-transition: width 200ms;

View File

@ -1329,13 +1329,13 @@ function wp_print_media_templates( $attachment ) {
<script type="text/html" id="tmpl-attachment"> <script type="text/html" id="tmpl-attachment">
<div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>"> <div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
<% if ( 'image' === type ) { %> <% if ( uploading ) { %>
<div class="media-progress-bar"><div></div></div>
<% } else if ( 'image' === type ) { %>
<div class="thumbnail"> <div class="thumbnail">
<img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false"
style="top:<%- top %>px; left:<%- left %>px;" /> style="top:<%- top %>px; left:<%- left %>px;" />
</div> </div>
<% } else if ( uploading ) { %>
<div class="media-progress-bar"><div></div></div>
<% } else { %> <% } else { %>
<img src="<%- icon %>" class="icon" draggable="false" /> <img src="<%- icon %>" class="icon" draggable="false" />
<div class="filename"><%- filename %></div> <div class="filename"><%- filename %></div>