EZP-28922: Multi-file upload modal design consistency (#56)

ezsystems · Mar 19, 2018 · 7c263f2 · 7c263f2
1 parent 2248d5c
commit 7c263f2
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 17 deletions.
diff --git a/Resources/public/js/MultiFileUpload.module.js b/Resources/public/js/MultiFileUpload.module.js
diff --git a/Resources/public/js/MultiFileUpload.module.js.map b/Resources/public/js/MultiFileUpload.module.js.map
diff --git a/Resources/public/js/SubItems.module.js.map b/Resources/public/js/SubItems.module.js.map
diff --git a/Resources/public/js/UniversalDiscovery.module.js b/Resources/public/js/UniversalDiscovery.module.js
diff --git a/Resources/public/js/UniversalDiscovery.module.js.map b/Resources/public/js/UniversalDiscovery.module.js.map
diff --git a/src/modules/common/popup/css/popup.component.css b/src/modules/common/popup/css/popup.component.css
@@ -1,8 +1,9 @@
 .c-popup {
-    background: #eee;
+    background: #ededed;
     padding: 16px;
     box-shadow: 0 0 30px 0 rgba(0,0,0,.35);
     position: relative;
+    border-radius: 4px;
 }
 
 .c-popup__header {

diff --git a/src/modules/multi-file-upload/components/drop-area/css/drop.area.component.css b/src/modules/multi-file-upload/components/drop-area/css/drop.area.component.css
@@ -5,13 +5,12 @@
 
 .c-drop-area__btn--select {
     display: inline-flex;
-    padding: 7px 20px;
+    padding: 0 20px;
     border-radius: 4px;
     text-align: center;
     cursor: pointer;
-    letter-spacing: .5px;
     color: #fff;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
     border: 1px solid #f15a10;
     background-color: #f15a10;

diff --git a/src/modules/multi-file-upload/components/progress-bar/css/progress.bar.component.css b/src/modules/multi-file-upload/components/progress-bar/css/progress.bar.component.css
@@ -1,6 +1,6 @@
 .c-progress-bar {
     background: #d8d8d8;
-    height: 16px;
+    height: 6px;
     width: 100%;
     border-radius: 4px;
     position: relative;
@@ -31,5 +31,8 @@
 }
 
 .c-progress-bar__progress-uploaded {
+    margin-top: -7px;
     transform: translate(-50%, 150%);
+    font-weight: 400;
+    font-size: 10px;
 }
diff --git a/src/modules/multi-file-upload/components/upload-list/css/upload.item.component.css b/src/modules/multi-file-upload/components/upload-list/css/upload.item.component.css
@@ -42,35 +42,66 @@
 [class*="c-upload-list-item__message--"] {
     font-style: italic;
     font-size: 12px;
+    color: #00825c;
+}
+
+.c-upload-list-item__message--error {
+    padding-top: 3px;
+    color: #aa0000;
+    font-weight: 700;
 }
 
 .c-upload-list-item__actions {
     flex: 1 1 44px;
     max-width: 88px;
+    padding-top: 8px;
     text-align: right;
 }
 
 [class*="c-upload-list-item__action--"] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    margin-right: 15px;
     width: 44px;
     height: 44px;
     cursor: pointer;
 }
 
-[class*="c-upload-list-item__action--"] .ez-icon {
+[class*="c-upload-list-item__action--"]:last-child {
+    margin-right: 0;
+}
+
+.c-upload-list-item__action--edit {
     fill: #f15a10;
     transition: all .3s ease-in-out;
     width: 20px;
     height: 20px;
 }
 
-[class*="c-upload-list-item__action--"] .ez-icon:hover,
-[class*="c-upload-list-item__action--"] .ez-icon:focus {
+.c-upload-list-item__action--edit:hover,
+.c-upload-list-item__action--edit:focus {
     fill: #c3480b;
 }
 
+.c-upload-list-item__action--delete {
+    fill: #d92d42;
+}
+
+.c-upload-list-item__action--delete:hover,
+.c-upload-list-item__action--delete:focus {
+    fill: #b32032;
+}
+
+.c-upload-list-item__action--abort {
+    fill: #878787;
+}
+
+.c-upload-list-item__action--abort:hover,
+.c-upload-list-item__action--abort:focus {
+    fill: #555;
+}
+
 .c-upload-list-item .c-progress-bar {
     max-width: 200px;
     float: right;

diff --git a/src/modules/multi-file-upload/components/upload-popup/css/upload.popup.component.css b/src/modules/multi-file-upload/components/upload-popup/css/upload.popup.component.css
@@ -21,12 +21,12 @@
 }
 
 .c-upload-popup .c-popup__title {
-    background: #bfbfbf;
+    background: #dbdbdb;
     height: 60px;
-    letter-spacing: 1px;
     margin: 0;
     padding: 0 16px;
-    font-size: 20px;
+    font-size: 24px;
+    font-weight: bold;
     line-height: 60px;
     border-radius: 4px 4px 0 0;
 }