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

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(),
+    });
   }
-  
 });

app/assets/stylesheets/application.css.sass

@@ -21,6 +21,7 @@
 @import 'report'
 @import 'new_styles/_forms'
 @import 'tag'
+@import 'photo'
 
 /* ====== media ====== */
 .media

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);
+      }
+    }
+  }
+}

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>
+<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>

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"
+
+

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
+

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$/