Display raw images in gallery

closes #7890

Changelog.md

@@ -5,6 +5,7 @@
 * Improve `web+diaspora://` handler description [#7909](https://github.com/diaspora/diaspora/pull/7909)
 * Move comment timestamp next to author name [#7905](https://github.com/diaspora/diaspora/pull/7905)
 * Sharpen small and medium thumbnails [#7924](https://github.com/diaspora/diaspora/pull/7924)
+* Show full-res image in Desktop's full-screen image view [#7890](https://github.com/diaspora/diaspora/pull/7890)
 
 ## Bug fixes
 * Ignore invalid URLs for camo [#7922](https://github.com/diaspora/diaspora/pull/7922)

app/assets/javascripts/app/views/gallery_view.js

@@ -31,12 +31,20 @@ app.views.Gallery = app.views.Base.extend({
     return {
       index: link,
       event: event,
-      hidePageScrollbars: false,
-      disableScroll: true,
       continuous: true,
       toggleControlsOnReturn: false,
       onopened: this.preventHideControls,
-      slideshowInterval: 2000
+      slideshowInterval: 2000,
+      onslidecomplete: function(index, slide) {
+        // If the image is very tall (more than twice its width), then it is scrollable instead of resized
+        var image = slide.firstElementChild;
+        if (image.naturalHeight > window.innerHeight && image.naturalHeight > image.naturalWidth * 2) {
+          image.classList.add("too-tall");
+        } else {
+          var margins = 95; // Margins are 80px for thumbnails height and 15px for top image margin
+          image.style = "max-height: " + (window.innerHeight - margins) + "px";
+        }
+      }
     };
   }
 });

app/assets/stylesheets/gallery.scss

-$thumbnail-size: 12px;
-$thumbnail-margin: 2px;
-$thumbnail-active-size: $thumbnail-size + $thumbnail-margin;
+$thumbnail-size: 50px;
+$margin: 15px;
 
 #blueimp-gallery {
   .slides {
-    height: calc(100% - 40px);
-    padding: 20px 0 0 0;
     margin: 0;
+
+    .slide {
+      overflow-y: auto;
+    }
+
+    .slide-content {
+      bottom: $margin * 2 + $thumbnail-size;
+      top: $margin;
+    }
+
+    .too-tall {
+      margin-bottom: $margin * 2 + $thumbnail-size;
+      max-height: none;
+      position: static;
+    }
   }
 
   [class^="entypo-"], [class*="entypo-"] {
@@ -37,24 +49,28 @@ $thumbnail-active-size: $thumbnail-size + $thumbnail-margin;
   }
 
   .indicator {
-    margin: 8px 0;
-    position: unset;
-    height: $thumbnail-size + 5px;
+    bottom: 0;
+
     li {
-      border: none;
-      margin: $thumbnail-margin;
+      border: 0;
+      border-radius: $thumbnail-size / 2;
+      height: $thumbnail-size;
+      margin: 6px;
+      margin-bottom: $margin;
       vertical-align: middle;
       width: $thumbnail-size;
-      height: $thumbnail-size;
-      border-radius: $thumbnail-size / 2;
 
-      &.active, &:hover{
-        margin: $thumbnail-margin / 2;
-        width: $thumbnail-active-size;
-        height: $thumbnail-active-size;
-        border-radius: $thumbnail-active-size / 2;
-        transition: linear 0.2s;
-        transition-property: height, width, margin;
+      &.active,
+      &:hover {
+        opacity: 1;
+      }
+
+      &:hover::after {
+        opacity: 0; // We don't want another thumbnail
+      }
+
+      &:only-child {
+        display: none;
       }
     }
   }

app/assets/templates/photo_tpl.jst.hbs

@@ -19,7 +19,7 @@
     </div>
   {{/if}}
 
-  <a href="{{sizes.large}}" class="thumbnail img-thumbnail photo-link gallery-picture">
+  <a href="{{sizes.raw}}" class="thumbnail img-thumbnail photo-link gallery-picture">
     <img src="{{sizes.large}}" class="photo big-photo">
   </a>
 

app/assets/templates/status-message_tpl.jst.hbs

@@ -25,13 +25,13 @@
 {{#if largePhoto}}
   <div class="photo-attachments nsfw-hidden">
     {{#with largePhoto}}
-      <a href="{{sizes.large}}" class="stream-photo-link gallery-picture">
+      <a href="{{sizes.raw}}" class="stream-photo-link gallery-picture">
         <img src="{{sizes.large}}" class="stream-photo big_stream_photo">
       </a>
     {{/with}}
 
     {{#each smallPhotos}}
-      <a href="{{sizes.large}}" class="stream-photo-link gallery-picture">
+      <a href="{{sizes.raw}}" class="stream-photo-link gallery-picture">
         <img src="{{sizes.small}}" class="stream-photo thumb_small">
       </a>
     {{/each}}

app/models/photo.rb

@@ -20,7 +20,8 @@ class Photo < ApplicationRecord
       {
         small:  photo.url(:thumb_small),
         medium: photo.url(:thumb_medium),
-        large:  photo.url(:scaled_full)
+        large:  photo.url(:scaled_full),
+        raw:    photo.url
       }
     }, :as => :sizes
     t.add lambda { |photo|