From 844fe9d6b9566c7ac4c07defa0acefb8a7101b3d Mon Sep 17 00:00:00 2001
From: op48 <lianne.tan@gmail.com>
Date: Fri, 15 Aug 2014 10:25:41 +0100
Subject: [PATCH] Allow users to delete own photos from gallery

Added delete label to photos in gallery

added an event to delete photos of current user

Added css for hiding/revealing the delete label

Included the photo stylesheet

Added cucumber test for deleting your own photos

Removed wip
---
 .../javascripts/app/views/photo_view.js       | 13 +++++++-
 app/assets/stylesheets/application.css.sass   |  1 +
 app/assets/stylesheets/photo.css.scss         | 19 +++++++++++
 app/assets/templates/photo_tpl.jst.hbs        | 32 +++++++++++++++++--
 features/desktop/profile_photos.feature       |  9 ++++++
 features/step_definitions/profile_steps.rb    |  5 +++
 features/support/paths.rb                     |  3 ++
 7 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/stylesheets/photo.css.scss

diff --git a/app/assets/javascripts/app/views/photo_view.js b/app/assets/javascripts/app/views/photo_view.js
index e4035be87..9bf77602b 100644
--- a/app/assets/javascripts/app/views/photo_view.js
+++ b/app/assets/javascripts/app/views/photo_view.js
@@ -4,10 +4,21 @@ app.views.Photo = app.views.Base.extend({
 
   className : "photo loaded",
 
+  events: {
+    "click .remove_post": "destroyModel"
+  },
+
+  tooltipSelector : ".block_user, .delete",
+
   initialize : function() {
     $(this.el).attr("id", this.model.get("guid"));
     this.model.bind('remove', this.remove, this);
     return this;
+  },
+
+  presenter : function() {
+    return _.extend(this.defaultPresenter(), {
+      authorIsCurrentUser : this.authorIsCurrentUser(),
+    });
   }
-  
 });
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 51ed2c419..3b3cab6e1 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -21,6 +21,7 @@
 @import 'report'
 @import 'new_styles/_forms'
 @import 'tag'
+@import 'photo'
 
 /* ====== media ====== */
 .media
diff --git a/app/assets/stylesheets/photo.css.scss b/app/assets/stylesheets/photo.css.scss
new file mode 100644
index 000000000..5450bff44
--- /dev/null
+++ b/app/assets/stylesheets/photo.css.scss
@@ -0,0 +1,19 @@
+.photo {
+  .controls:first-child {
+    .control_icon {
+      @include transition(opacity);
+      @include opacity(0);
+    }
+  }
+
+  &:hover {
+    .controls:first-child {
+      .control_icon {
+        @include opacity(0.3);
+      }
+      .control_icon:hover {
+        @include opacity(1);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/templates/photo_tpl.jst.hbs b/app/assets/templates/photo_tpl.jst.hbs
index 375d6869e..534b9b998 100644
--- a/app/assets/templates/photo_tpl.jst.hbs
+++ b/app/assets/templates/photo_tpl.jst.hbs
@@ -1,3 +1,29 @@
-<a href="#" class="photo-link">
-  <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
-</a>
\ No newline at end of file
+<div class="media">
+  <div class="bd">
+    {{#if loggedIn}}
+      <div class="controls">
+        {{#unless authorIsCurrentUser}}
+          <a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}">
+            <div class="icons-report control_icon"/>
+          </a>
+          <a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
+            <div class="icons-ignoreuser control_icon"></div>
+          </a>
+          <a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
+            <div class="icons-deletelabel delete control_icon"/>
+          </a>
+        {{else}}
+          <a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
+            <div class="icons-deletelabel delete control_icon"/>
+          </a>
+        {{/unless}}
+      </div>
+    {{/if}}
+  
+  <a href="#" class="photo-link">
+    <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
+  </a>
+
+ 
+
+</div>
\ No newline at end of file
diff --git a/features/desktop/profile_photos.feature b/features/desktop/profile_photos.feature
index ea146196c..8042dfa0c 100644
--- a/features/desktop/profile_photos.feature
+++ b/features/desktop/profile_photos.feature
@@ -23,3 +23,12 @@ Feature: show photos
       When I sign in as "alice@alice.alice"
       And I am on "robert@grimm.grimm"'s page
       Then I should not see "photos" within "div#profile"
+
+   
+    Scenario: I delete a photo
+      Given I am on "robert@grimm.grimm"'s photos page
+        When I delete a photo
+        And I confirm the alert
+      Then I should not see "photos" within "div#profile"
+
+
diff --git a/features/step_definitions/profile_steps.rb b/features/step_definitions/profile_steps.rb
index 80b148d9b..7fdc31ba1 100644
--- a/features/step_definitions/profile_steps.rb
+++ b/features/step_definitions/profile_steps.rb
@@ -6,3 +6,8 @@ And /^I mark myself as safe for work$/ do
   uncheck('profile[nsfw]')
 end
 
+When(/^I delete a photo$/) do
+  find('.photo.loaded').hover
+  find('.delete', :match => :first).click
+end
+
diff --git a/features/support/paths.rb b/features/support/paths.rb
index 1b2fa1790..df6774164 100644
--- a/features/support/paths.rb
+++ b/features/support/paths.rb
@@ -31,6 +31,9 @@ module NavigationHelpers
           # '.diaspora_handle' on desktop, '.description' on mobile
           special_elem: { selector: '.diaspora_handle, .description', text: p.diaspora_handle }
         }
+      when /^"([^\"]*)"'s photos page$/
+        p = User.find_by_email($1).person
+        person_photos_path p
       when /^my account settings page$/
         edit_user_path
       when /^my new profile page$/