CSS and code fixes for upload progress indicator.

horde · Jan 7, 2016 · 5258198 · 5258198
1 parent 6fb18fb
commit 5258198
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/kronolith/js/kronolith.js b/kronolith/js/kronolith.js
@@ -6291,7 +6291,7 @@ KronolithCore = {
         });
         d_link.store({file: { source: $F('kronolithEventCalendar'), key: $F('kronolithEventId'), name: f.name }});
 
-        $('kronolithEventFileList').insert(new Element('div').insert(view_link.update(f.name.escapeHTML())).insert(dl_link).insert(d_link));
+        $('kronolithEventFileList').insert(new Element('div', { class: 'fileName' }).insert(view_link.update(f.name.escapeHTML())).insert(dl_link).insert(d_link));
     },
 
     eventAttendanceChange: function(x)

diff --git a/kronolith/themes/default/dynamic/screen.css b/kronolith/themes/default/dynamic/screen.css
@@ -827,6 +827,61 @@ div.kronolithEditable:hover .kronolithDragger,
     color: #000;
 }
 
+#kronolithEventFileList {
+    list-style: none;
+    max-height: 125px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+#kronolithEventFileList canvas {
+    margin-bottom: -4px;
+    padding-right: 4px;
+}
+#kronolithEventFileList li {
+    padding: 5px 0 1px;
+}
+#kronolithEventFileList div.fileName.a {
+    color: #36525d;
+    cursor: pointer;
+}
+#kronolithEventFileList div.fileName:hover {
+    color: red;
+}
+
+#kronolithEventFileList span.file_upload_text {
+    display: inline-block;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    white-space: nowrap;
+}
+#kronolithEventFileList span.file_upload_text span {
+    padding-left: 5px;
+}
+#kronolithEventFileList span.file_upload_text_progress {
+    max-width: 290px;
+    margin-right: 8px;
+}
+#kronolithEventFileList span.file_upload_progress {
+    background-color: #1a1a1a;
+    border-radius: 5px;
+    bottom: 4px;
+    display: inline-block;
+    height: 6px;
+    padding: 2px;
+    position: relative;
+    width: 200px;
+}
+#kronolithEventFileList span.file_upload_progress span {
+    background-color: #34c2e3;
+    border-radius: 3px;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
+    display: inline-block;
+    height: 100%;
+    transition: width 0.2s ease-in-out 0s;
+}
+
 @media print {
     #kronolithMenu, #kronolithBar, #kronolithHeader {
         display: none;