Merge pull request #4067 from movilla/multiphoto

Add multiphoto for mobile post. Close #4053

Changelog.md

@@ -31,6 +31,7 @@
 * Add the ability to upload photos from the mobile site. [#4004](https://github.com/diaspora/diaspora/issues/4004)
 * Show timestamp when hovering on comment time-ago string. [#4042](https://github.com/diaspora/diaspora/issues/4042)
 * If sharing a post with photos to Facebook, always include URL to post [#3706](https://github.com/diaspora/diaspora/issues/3706)
+* Add multiphoto for mobile post. [#4065](https://github.com/diaspora/diaspora/issues/4065)
 
 # 0.0.3.4
 

app/assets/stylesheets/mobile.css.scss

@@ -217,47 +217,68 @@ body {
   margin: {
     top: -2px; }; }
 
-#show_content {
-  padding: 12px;
-  padding-bottom: 24px;
-  border: {
-    bottom: 1px solid #bbb; };
-  background: {
-    color: #fff; };
+.photo_mobile {
+  border-radius: 0px 0px 5px 5px !important;
+  font-size: 14px;
+}
 
-  font: {
-    size: larger; };
+#show_content {
+  padding-bottom: 24px;
+  border-bottom: 1px solid #bbb;
+  font-size: larger;
+  text-align: center;
 
   img {
-    max-width: 100%; }
+    max-width: 100%;
+  }
 
   .photo {
-    text-align: center; }
+    text-align: center;
+    background-color: #FFFFFF; 
+    border-style: solid; 
+    border-width: 1px; 
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    border-color: #DDDDDD #BBBBBB #AAAAAA;
+    border-bottom-width: 0px;
+    margin-top: 12px;
+    min-height: 100px;
+    line-height: 5;
+  }
 
   .controls {
     font: {
       size: smaller; };
   }
 
-  &.photo {
-    background: {
-      color: #000; };
+  &.photos {
+    border-bottom: 0px !important;
   }
 }
 
 #photo_controls {
-  margin: {
-    bottom: -42px; };
+  margin-bottom: 5px;
 }
 
 .arrow {
   color: white !important;
-  font: {
-    size: 26pt; };
+  font-size: 26pt;
   text: {
     shadow: 0 1px 2px #333;
     decoration: none; };
   padding: 0;
+  position: fixed; 
+  bottom: 10%;
+  z-index: 1;
+  height: 50px;
+  width: 50px;
+}
+
+#left.arrow {
+  left: 5%;
+}
+
+#right.arrow{
+  right: 5%;
 }
 
 #author_info {

app/helpers/mobile_helper.rb

@@ -39,4 +39,23 @@ module MobileHelper
       html << "</span>"
     end
   end
+
+  def additional_photos
+    if photo.status_message_guid?
+      @additional_photos ||= photo.status_message.photos
+    end
+  end
+
+  def next_photo
+    @next_photo ||= additional_photos[additional_photos.index(photo)+1]
+    @next_photo ||= additional_photos.first
+  end
+
+  def previous_photo
+    @previous_photo ||= additional_photos[additional_photos.index(photo)-1]
+  end
+
+  def photo
+    @photo ||= current_user.find_visible_shareable_by_id(Photo, params[:id])
+  end
 end

app/views/photos/show.mobile.haml

@@ -0,0 +1,30 @@
+-#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+:css
+  footer{display: none;}
+
+#show_content.photos
+  .photo
+    = image_tag photo.url(:scaled_full)
+  .stream_element{:class => "photo_mobile"}
+    .content
+      .from
+        = person_image_link(photo.author, :size => :thumb_small)
+        = person_link(photo.author)
+        .info
+          %span.time{:integer => photo.created_at.to_i}
+            = link_to(t('ago', :time => time_ago_in_words(photo.created_at)), post_path(photo))
+
+-if additional_photos && additional_photos.length > 1
+  #photo_controls
+  %table
+    %tr
+      %td
+        - if previous_photo != additional_photos.last
+          = link_to(image_tag('arrow-left.png', :id => 'arrow-left'), previous_photo, :rel => 'prefetch', :class => 'arrow', :id => 'left')
+      %td{:width => '100%'}
+      %td
+        - if next_photo == additional_photos[additional_photos.index(photo)+1]
+          = link_to(image_tag('arrow-right.png', :id => 'arrow-right'), next_photo, :rel => 'prefetch', :class => 'arrow', :id => 'right')

app/views/shared/_photo_area.mobile.haml

@@ -9,7 +9,7 @@
         - if post.photos.size > 1
           .additional_photo_count
             = "+ #{post.photos.size-1}"
-        = image_tag post.first_photo_url(:thumb_large), :class => "stream-photo big-stream-photo"
+        = link_to (image_tag post.photos.first.url(:thumb_large), :class => "stream-photo big-stream-photo"), photo_path(post.photos.first), :class => "stream-photo-link"
   - elsif post.activity_streams?
     = image_tag post.image_url
 

features/multiphoto_mobile.feature

@@ -0,0 +1,34 @@
+@javascript
+Feature: viewing photos on the mobile main page
+  In order to navigate Diaspora*
+  As a mobile user
+  I want to view some photos
+
+  Background:
+    Given a user with username "bob"
+    When I sign in as "bob@bob.bob"
+    And I toggle the mobile view
+    And I click on selector "img.compose_icon"
+
+  Scenario: view full size image
+    Given I attach the file "spec/fixtures/button.png" to hidden element "file" within "#file-upload-publisher"
+    And I wait for the ajax to finish
+    When I press "Share"
+    And I wait for the ajax to finish
+    And I click on selector "img.stream-photo"
+    Then I should see a "img" within "#show_content"
+    And I should not see a "#right" within ".row"
+
+  Scenario: view multiphoto post
+    Given I attach the file "spec/fixtures/button.png" to hidden element "file" within "#file-upload-publisher"
+    And I wait for the ajax to finish
+    And I attach the file "spec/fixtures/button.gif" to hidden element "file" within "#file-upload-publisher"
+    And I wait for the ajax to finish
+    When I press "Share"
+    And I wait for the ajax to finish
+    And I should see "+ 1" within ".additional_photo_count"
+    And I click on selector "img.stream-photo"
+    Then I should see a "#right" within "tbody"
+    And I click on selector "img#arrow-right"
+    And I should see a "#left" within "tbody"
+    And I should not see a "#right" within "tbody"