From 0b5d09ca0c4bedf90335bae0f188200f0aa73044 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 12 May 2015 11:50:58 +0200
Subject: [PATCH] Add Timeline style fixes for images and items

---
 .../profile-timeline-attachment-image.jade    |  5 +-
 .../profile-timeline-attachment.jade          |  8 +-
 .../profile-timeline-item.jade                |  6 +-
 .../profile-timeline/profile-timeline.scss    | 93 ++++++++-----------
 4 files changed, 50 insertions(+), 62 deletions(-)

diff --git a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade
index dbdaa186..f1ee5b4a 100644
--- a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade
+++ b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade
@@ -1,3 +1,4 @@
 // timeline-attachment directive
-div.activity-comment-attachment
-    img(ng-src="{{::attachment.url}}", alt="{{::attachment.filename}}")
\ No newline at end of file
+div.activity-image-attachment
+    blockquote
+        img(ng-src="{{::attachment.url}}", alt="{{::attachment.filename}}")
diff --git a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade
index 8deca77a..f8639519 100644
--- a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade
+++ b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade
@@ -1,3 +1,5 @@
-p TODO: ATTACHMENT
-p
-    a(ng-href="attachment.url") {{attachment.filename}}
\ No newline at end of file
+div.single-attachment
+    blockquote
+        a(ng-href="{{ attachment.url }}", title="Click to download {{ attachment.filename }}")
+            span.icon.icon-document
+            span {{attachment.filename}}
diff --git a/app/modules/profile/profile-timeline-item/profile-timeline-item.jade b/app/modules/profile/profile-timeline-item/profile-timeline-item.jade
index 44d06484..218eaf1e 100644
--- a/app/modules/profile/profile-timeline-item/profile-timeline-item.jade
+++ b/app/modules/profile/profile-timeline-item/profile-timeline-item.jade
@@ -1,4 +1,4 @@
-div.activity-image
+div.activity-item
     span.activity-date {{::vm.activity.created_formated}}
     div.activity-info
         div.profile-contact-picture
@@ -18,5 +18,5 @@ div.activity-image
                 span {{::vm.activity.member.user.name}}
             p {{::vm.activity.member.role.name}}
 
-div(ng-repeat="attachment in vm.activity.attachments")
-        div(tg-profile-timeline-attachment="attachment")
+    div(ng-repeat="attachment in vm.activity.attachments")
+            div(tg-profile-timeline-attachment="attachment")
diff --git a/app/modules/profile/profile-timeline/profile-timeline.scss b/app/modules/profile/profile-timeline/profile-timeline.scss
index 36477703..b5df11cb 100644
--- a/app/modules/profile/profile-timeline/profile-timeline.scss
+++ b/app/modules/profile/profile-timeline/profile-timeline.scss
@@ -1,9 +1,31 @@
 .profile-timeline {
     border-top: 1px solid $whitish;
-    %profile-activity {
+    .activity-item {
         border-bottom: 1px solid $whitish;
-        padding: .8rem 1rem;
+        padding: 1rem .5rem;
         position: relative;
+        p {
+            margin-bottom: .5rem;
+        }
+        a {
+            color: $green-taiga;
+            &:first-child {
+                @extend %bold;
+                color: $gray;
+            }
+            &:hover {
+                color: $fresh-taiga;
+            }
+        }
+        blockquote {
+            margin-bottom: 0;
+            margin-left: calc(35px + 1rem);
+            margin-top: .5rem;
+        }
+        img {
+            max-height: 640px;
+            max-width: 100%;
+        }
         .activity-info {
             align-items: center;
             color: $gray-light;
@@ -27,52 +49,6 @@
                 width: 100%;
             }
         }
-        p {
-            margin-bottom: .5rem;
-        }
-        a {
-            color: $green-taiga;
-            &:first-child {
-                @extend %bold;
-                color: $gray;
-            }
-            &:hover {
-                color: $fresh-taiga;
-            }
-        }
-    }
-    .activity-simple,
-    .activity-comment,
-    .activity-image,
-    .activity-notification,
-    .activity-member,
-    .activity-project {
-        @extend %profile-activity;
-    }
-    .activity-comment,
-    .activity-project,
-    .activity-image {
-        blockquote {
-            margin-bottom: .5rem;
-            margin-left: calc(35px + 1rem);
-            margin-top: .5rem;
-            img {
-                max-height: 640px;
-                max-width: 100%;
-            }
-        }
-    }
-    .activity-notification {
-        .activity-notification-list {
-            border-left: 2px solid $whitish;
-            margin-bottom: .5rem;
-            margin-left: calc(35px + 1rem);
-            margin-top: .5rem;
-            padding: .2rem 1rem;
-            li {
-                margin-bottom: .5rem;
-            }
-        }
     }
     .activity-member-view {
         display: flex;
@@ -89,12 +65,21 @@
             color: $gray-light;
         }
     }
-    .profile-member-picture {
-        img {
-            margin-right: 1rem;
-            max-width: 64px;
-            min-width: 32px;
-            width: 100%;
+    .single-attachment {
+        border: 0;
+        padding: 0;
+        span {
+            @extend %text;
+            @extend %medium;
+            display: inline-block;
+            max-width: 95%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: middle;
+            white-space: nowrap;
+        }
+        .icon {
+            margin-right: .3rem;
         }
     }
 }