Better attachment gallery

client/components/cards/attachments.css

@@ -7,69 +7,76 @@
   text-align: center;
   font-weight: bold;
 }
-.attachments-gallery {
+.attachment-gallery {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
 }
-.attachments-gallery .attachment-item {
-  width: 31.33%;
-  margin: 10px 1% 0;
-  text-align: center;
-  border-radius: 3px;
-  overflow: auto;
-  background: #ededed;
-  min-height: 120px;
-}
-.attachments-gallery .attachment-item:hover {
-  background: #e0e0e0;
-}
-.attachments-gallery .attachment-item.add-attachment {
+.attachment-item {
   display: flex;
+  flex-direction: row;
   align-items: center;
+  margin-top: 16px;
 }
-.attachments-gallery .attachment-item.add-attachment a {
+.attachment-item:hover {
+  background: #e0e0e0;
+}
+.attachment-thumbnail-container {
   display: block;
-  margin: auto;
+  width: 150px;
+  min-width: 150px;
+  max-height: 150px;
+  padding-right: 16px;
+
+}
+.attachment-thumbnail {
+  max-width: 150px;
+  max-height: 150px;
+  min-height: 2em;
+  cursor: pointer;
 }
-.attachments-gallery .attachment-item .attachment-thumbnail {
-  height: 80px;
+.attachment-thumbnail-text {
+  min-height: 2em;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
-}
-.attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
-  max-height: 100%;
-  max-width: 100%;
+  font-size: 2em;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
-.attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
-  text-transform: uppercase;
-  font-size: 1.6em;
+.attachment-details-container {
+  display: block;
+  flex-grow: 1;
 }
-.attachments-gallery .attachment-item .attachment-details {
-  font-size: 0.75em;
-  margin: 3px;
+.attachment-details {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 25px; /* Make sure the icons are not to far to the right */
 }
-.attachments-gallery .attachment-item .attachment-details .attachment-details-actions a {
-  display: block;
+.attachment-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.attachments-gallery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
-  padding-top: 10px;
+.add-attachment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #555;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+  margin-top: 16px;
 }
-.attachment-image-preview {
-  max-width: 100px;
-  display: block;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+.icon {
+  font-size: 1.5em;
+  cursor: pointer;
+  margin-left: 10px;
 }
-.preview-clipboard-image {
-  width: 280px;
-  max-width: 100%;
-  height: 200px;
-  display: block;
-  border: 1px solid #000;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+.icon:hover {
+  color: #666;
 }
-#viewer-overlay{
+#viewer-overlay {
   width: 100%;
   height: 100vh;
   position: fixed;
@@ -92,40 +99,43 @@
   position: absolute;
   padding: 20 20;
 }
-#viewer-container{
+#viewer-container {
   text-align: center;
 }
 #pdf-viewer {
-  margin-top: 4vh;
-  width: 100%;
+  width: 40vw;
   height: 100vh;
 }
-.pdf-preview-error{
+.pdf-preview-error {
   margin-top: 20vh;
   display: block;
   font-size: 2em;
   color: white;
 }
-@media screen and (max-width: 800px) {
-  .attachments-gallery .attachment-item {
-    width: 48%;
-  }
-  .attachments-gallery .attachment-item .attachment-thumbnail {
-    height: 130px;
-  }
-  .attachments-gallery .attachment-item .attachment-details {
-    font-size: 1.1em;
+
+@media screen and (max-width: 1600px) {
+  #pdf-viewer {
+    width: 60vw;
   }
 }
-@media screen and (max-width: 360px) {
+
+@media screen and (max-width: 800px) {
   #pdf-viewer {
-    margin-top: 5vh;
-    width: 100%;
+    width: 100vh;
+  }
+  .attachment-thumbnail-container {
+    width: 100px;
+    min-width: 100px;
+  }
+  .attachment-thumbnail {
+    max-width: 100px;
   }
-  .attachments-gallery .attachment-item {
-    width: 100%;
+  .attachment-details {
+    flex-direction: column;
+    margin-right: 0px;
   }
-  .attachments-gallery .attachment-item .attachment-thumbnail {
-    height: 200px;
+  .attachment-actions {
+    flex-direction: row;
+    margin-top: 10px;
   }
 }

client/components/cards/attachments.jade

@@ -30,54 +30,63 @@ template(name="attachmentDeletePopup")
   p {{_ "attachment-delete-pop"}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
-template(name="attachmentsGallery")
+template(name="attachmentViewer")
   #viewer-overlay.hidden
     #viewer-container
       object#pdf-viewer(type="application/pdf")
         span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
       a#viewer-close.fa.fa-times-thin
 
-  .attachments-gallery
-    if currentUser.isBoardMember
-      unless currentUser.isCommentOnly
-        unless currentUser.isWorker
-          //li.attachment-item.add-attachment
-          a.js-add-attachment(title="{{_ 'add-attachment' }}")
-            i.fa.fa-plus
+template(name="attachmentGallery")
+
+  .attachment-gallery
+
+    a.attachment-item.add-attachment.js-add-attachment
+      i.fa.fa-plus.icon
+
     each attachments
-      .attachment-item
 
-        span.attachment-thumbnail(href="{{link}}" title="{{sanitize name}}" class="{{#if isImage}}swipebox{{/if}} {{#if $eq extension 'pdf'}}pdf{{/if}}")
+      .attachment-item
+        .attachment-thumbnail-container(href="{{link}}" class="{{#if isImage}}swipebox{{/if}} {{#if $eq extension 'pdf'}}pdf{{/if}}")
           if link
-            if($eq extension 'svg')
-              img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")
-            else if isImage
-              img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}")
+            if(isImage)
+              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}")
+            else if($eq extension 'svg')
+              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")
             else if($eq extension 'mp3')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                 source(src="{{link}}" type="audio/mpeg")
             else if($eq extension 'ogg')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                 source(src="{{link}}" type="video/ogg")
             else if($eq extension 'webm')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                 source(src="{{link}}" type="video/webm")
             else if($eq extension 'mp4')
-              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+              video.attachment-thumbnail(title="{{sanitize name}}")
                 source(src="{{link}}" type="video/mp4")
             else
-              span.attachment-thumbnail-ext= extension
-        p.attachment-details
-          = name
-          span.file-size ({{fileSize size}})
-          span.attachment-details-actions
-            a.js-download(href="{{link}}?download=true", download="{{name}}")
-              i.fa.fa-download
-              | {{_ 'download'}}
-            if currentUser.isBoardMember
-              unless currentUser.isCommentOnly
-                unless currentUser.isWorker
-                  a.fa.fa-navicon.attachment-details-menu.js-open-attachment-menu(title="{{_ 'attachmentActionsPopup-title'}}")
+              span.attachment-thumbnail-text= extension
+
+        .attachment-details-container
+          .attachment-details
+            div
+              b
+                = name
+              span.file-size ({{fileSize size}})
+            .attachment-actions
+              a.js-download(href="{{link}}?download=true", download="{{name}}")
+                i.fa.fa-download.icon(title="{{_ 'download'}}")
+              if currentUser.isBoardAdmin
+                a.js-rename
+                  i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
+                a.js-confirm-delete
+                  i.fa.fa-trash.icon(title="{{_ 'delete'}}")
+              if currentUser.isBoardMember
+                unless currentUser.isCommentOnly
+                  unless currentUser.isWorker
+                    a.fa.fa-navicon.icon.js-open-attachment-menu(title="{{_ 'attachmentActionsPopup-title'}}")
+
 
 template(name="attachmentActionsPopup")
   ul.pop-over-list
@@ -98,12 +107,6 @@ template(name="attachmentActionsPopup")
               | {{_ 'remove-background-image'}}
             else
               | {{_ 'add-background-image'}}
-        a.js-rename
-          i.fa.fa-pencil-square-o
-          | {{_ 'rename'}}
-        a.js-confirm-delete
-          i.fa.fa-close
-          | {{_ 'delete'}}
         p.attachment-storage
           | {{versions.original.storage}}
 

client/components/cards/attachments.js

@@ -4,18 +4,12 @@ import DOMPurify from 'dompurify';
 const filesize = require('filesize');
 const prettyMilliseconds = require('pretty-ms');
 
-Template.attachmentsGallery.events({
+Template.attachmentGallery.events({
   'click .pdf'(event) {
     let link = $(event.currentTarget).attr("href");
     $("#pdf-viewer").attr("data", link);
     $("#viewer-overlay").removeClass("hidden");
   },
-  'click #viewer-container'(event) {
-    $("#viewer-overlay").addClass("hidden");
-  },
-  'click #viewer-close'(event) {
-    $("#viewer-overlay").addClass("hidden");
-  },
   'click .js-add-attachment': Popup.open('cardAttachments'),
   // If we let this event bubble, FlowRouter will handle it and empty the page
   // content, see #101.
@@ -23,9 +17,23 @@ Template.attachmentsGallery.events({
     event.stopPropagation();
   },
   'click .js-open-attachment-menu': Popup.open('attachmentActions'),
+  'click .js-rename': Popup.open('attachmentRename'),
+  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
+    Attachments.remove(this._id);
+    Popup.back(2);
+  }),
 });
 
-Template.attachmentsGallery.helpers({
+Template.attachmentViewer.events({
+  'click #viewer-container'(event) {
+    $("#viewer-overlay").addClass("hidden");
+  },
+  'click #viewer-close'(event) {
+    $("#viewer-overlay").addClass("hidden");
+  },
+});
+
+Template.attachmentGallery.helpers({
   isBoardAdmin() {
     return Meteor.user().isBoardAdmin();
   },
@@ -194,11 +202,6 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
-        'click .js-rename': Popup.open('attachmentRename'),
-        'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
-          Attachments.remove(this._id);
-          Popup.back(2);
-        }),
         'click .js-add-cover'() {
           Cards.findOne(this.data().meta.cardId).setCover(this.data()._id);
           Popup.back();

client/components/cards/cardDetails.jade

@@ -562,7 +562,8 @@ template(name="cardDetails")
             br
           | {{_ 'invalid-file'}}
           .card-checklist-attachmentGallery.card-attachmentGallery
-            +attachmentsGallery
+            +attachmentViewer
+            +attachmentGallery
       hr
 
     .card-details-right