Merge pull request #1415 from cozy/background-mobile-upload-queue

Fix background color UploadQueue on mobile

react/UploadQueue/Readme.md

@@ -1,5 +1,20 @@
+Dumb component to display a list of files being uploaded.
+
+On mobile, the list of files being displayed is not shown, only
+a small banner is shown.
+
+The popover attribute should be used to automatically layout
+the upload queue:
+
+- in a fixed bottom-right position on desktop
+- underneath the top-bar on mobile  
+
 ```
-const state = {
+const initialState = {
+  popover: false
+}
+
+const data = {
   queue: [{
     file: { name: 'Photo.jpg' },
     status: 'created'
@@ -18,13 +33,16 @@ const state = {
   successCount: 1
 };
 
-<UploadQueue
-  lang='fr'
-  app='Cozy Drive'
-  getMimeTypeIcon={() => 'file'}
-  queue={state.queue}
-  doneCount={state.doneCount}
-  successCount={state.successCount}
-  popover={false}
-/>
+<>
+  popover: <input type="checkbox" value={state.popover} onChange={() => setState({ popover: !state.popover })} />
+  <UploadQueue
+    lang='fr'
+    app='Cozy Drive'
+    getMimeTypeIcon={() => 'file'}
+    queue={data.queue}
+    doneCount={data.doneCount}
+    successCount={data.successCount}
+    popover={state.popover}
+  />
+</>
 ```

react/UploadQueue/styles.styl

@@ -164,10 +164,7 @@ progress.upload-queue-progress::-moz-progress-bar
             content ''
             background var(--white)
 
-        .upload-queue--visible
-            max-height 30%
-
-        .upload-queue--visible
+        &.upload-queue--visible
             max-height 30%
 
         .upload-queue-content