Changeset 29394 for trunk

Timestamp:

Sep 3, 2014, 9:56:59 PM (10 years ago)

Author:

mistic100

Message:

feature:2616 add custom big progressbar

Location:

trunk/admin/themes

Files:

• clear/theme.css (modified) (1 diff)
• default/template/photos_add_direct.tpl (modified) (5 diffs)
• default/theme.css (modified) (1 diff)
• roma/theme.css (modified) (1 diff)

trunk/admin/themes/clear/theme.css

@@ -368 +368 @@
 .userPropertiesContainer {border-color:#ddd;}
 .userPrefs {border-color:#ddd;}
+
+.big-progressbar {
+  background:#DFDFDF;
+  border:1px solid #ccc;
+}
+.big-progressbar .progressbar {
+  background:#005E89;
+  background:#42A4CE linear-gradient(135deg, rgba(14,114,158,0) 44%,rgba(14,114,158,0.4) 44%,rgba(14,114,158,0.4) 57%,rgba(14,114,158,0) 57%);
+  background-size:25px 25px;
+  box-shadow:inset 0px 1px 3px 0px rgba(255,255,255,0.4);
+}

trunk/admin/themes/default/template/photos_add_direct.tpl

@@ -97 +97 @@
             up.start();
           });
+        
+        jQuery('#cancelUpload').on('click', function(e) {
+            e.preventDefault();
+            up.stop();
+            up.trigger('UploadComplete', up.files);
+          });
       }
     },
@@ -106 +112 @@
       },
       
+      UploadProgress: function(up, file) {
+        jQuery('#uploadingActions .progressbar').width(up.total.percent+'%');
+      },
+      
       BeforeUpload: function(up, file) {
         //console.log('[BeforeUpload]', file);
@@ -111 +121 @@
         // hide buttons
         jQuery('#startUpload, #addFiles').hide();
+        jQuery('#uploadingActions').show();
 
         // warn user if she wants to leave page while upload is running
@@ -181 +192 @@
 
         jQuery(".afterUploadActions").show();
+        jQuery('#uploadingActions').hide();
 
         // user can safely leave page without warning
@@ -266 +278 @@
         <p>Your browser doesn't have HTML5 support.</p>
       </div>
-      
-      <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
 
     </fieldset>
+    
+    <div id="uploadingActions" style="display:none">
+      <button id="cancelUpload" class="buttonLike icon-cancel-circled">{'Cancel'|translate}</button>
+      
+      <div class="big-progressbar">
+        <div class="progressbar" style="width:0%"></div>
+      </div>
+    </div>
+      
+    <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
 
 </form>

trunk/admin/themes/default/theme.css

@@ -1009 +1009 @@
 #photosAddContent p.showFieldset {text-align:left;margin: 1em;}
 
-#uploadForm .plupload_buttons { display:none; }
-#startUpload { margin:10px 0; padding:5px 10px; font-size:1.1em; }
-#startUpload:before { margin-right:0.5em; }
-#addFiles { margin-bottom:10px; }
-
-#uploadProgress {width:650px; margin:10px auto;font-size:90%;}
-#progressbar {border:1px solid #ccc; background-color:#eee;}
-.ui-progressbar-value { background-image: url(images/pbar-ani.gif); height:10px;margin:-1px;border:1px solid #E78F08;}
+#uploadForm .plupload_buttons, #uploadForm .plupload_progress { display:none; }
+#uploadForm #startUpload { margin:5px 0 15px 15px; padding:5px 10px; font-size:1.1em; }
+#uploadForm #startUpload:before { margin-right:0.5em; }
+#uploadForm #addFiles { margin-right:10px; float:left; }
+#uploadForm #uploadingActions { margin:10px 10px 10px 15px; }
+#uploadForm .big-progressbar { vertical-align:middle; display:inline-block; margin-left:10px; }
+
+.big-progressbar {
+  width:100%;
+  max-width:600px;
+  background:#DFDFDF;
+  padding:3px;
+  border-radius:16px;
+  position:relative;
+}
+.big-progressbar .progressbar {
+  height:20px;
+  min-width:20px;
+  background:#444;
+  border-radius:10px;
+}
+
 
 /* Tag Manager */

trunk/admin/themes/roma/theme.css

@@ -297 +297 @@
 div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800 !important;}
 
-#progressbar {border:1px solid #666; background-color:#666;}
+.big-progressbar {
+  background:#1a1e22;
+  box-shadow:inset 0px 1px 1px 0px black, 0px 1px 1px 0px #36393F;
+}
+.big-progressbar .progressbar {
+  background:#f70;
+  background:#f70 linear-gradient(135deg, rgba(255,51,51,0) 44%,rgba(255,51,51,0.4) 44%,rgba(255,51,51,0.4) 57%,rgba(255,51,51,0) 57%);
+  background-size:25px 25px;
+  box-shadow:inset 0px 1px 3px 0px rgba(255,255,255,0.6);
+}
 
 /* Album Properties */