Merge pull request #6457 from svbergerem/permalink-v1

Add permalink for stream elements

Changelog.md

@@ -79,6 +79,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure.
 * Allow users to view a posts locations on an OpenStreetMap [#6256](https://github.com/diaspora/diaspora/pull/6256)
 * Redesign and unify error pages [#6428](https://github.com/diaspora/diaspora/pull/6428)
 * Redesign and refactor report admin interface [#6378](https://github.com/diaspora/diaspora/pull/6378)
+* Add permalink icon to stream elements [#6457](https://github.com/diaspora/diaspora/pull/6457)
 
 # 0.5.4.0
 

app/assets/javascripts/app/views/stream_post_views.js

@@ -29,7 +29,14 @@ app.views.StreamPost = app.views.Post.extend({
     "click .destroy_participation": "destroyParticipation"
   },
 
-  tooltipSelector : ".timeago, .post_scope, .post_report, .block_user, .delete, .create_participation, .destroy_participation",
+  tooltipSelector : [".timeago",
+                     ".post_scope",
+                     ".post_report",
+                     ".block_user",
+                     ".delete",
+                     ".create_participation",
+                     ".destroy_participation",
+                     ".permalink"].join(", "),
 
   initialize : function(){
     var personId = this.model.get('author').id;

app/assets/stylesheets/_application.scss

 @import 'perfect-scrollbar';
 
-@import "colors";
+@import 'color-variables';
 @import "bootstrap-complete.scss";
 @import 'mixins';
 
@@ -21,6 +21,7 @@
 @import 'vendor/fileuploader';
 @import 'vendor/autoSuggest';
 @import 'typeahead';
+@import 'colors';
 
 /* font overrides */
 @import 'typography';

app/assets/stylesheets/admin.scss

-@import 'colors';
+@import 'color-variables';
 @import 'animations';
 
 /** ADMIN STYlES **/

app/assets/stylesheets/color-variables.scss

+$white: #fff;
+$black: #000;
+
+$text-grey: #999;
+$text-dark-grey: #666;
+$text: #333;
+
+$background-white: $white;
+$background-grey: #eee;
+$background-blue: #e7f2f7;
+
+$grey: #2b2b2b;
+$light-grey: #ddd;
+
+$border-grey: $light-grey;
+$border-dark-grey: $text-grey;
+
+$link-grey: #777;
+$link-disabled-grey: $text-grey;
+
+$green: #8ede3d;
+$light-green: lighten($green, 20%);
+$red: #a80000;
+$blue: #3f8fba;
+
+$sidebars-background: #f0f0f0;
+$sidebars-sub-background: darken($sidebars-background, 12%);
+$left-navbar-drawer-background: darken($sidebars-background, 6%);
+
+$card-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);

app/assets/stylesheets/colors.scss

-$background-white: #FFFFFF;
-$background-grey: #EEEEEE;
-$background-blue: #E7F2F7;
-
-$grey: #2B2B2B;
-$light-grey: #DDDDDD;
-
-$border-grey: #DDDDDD;
-$border-dark-grey: #999999;
-
-$link-grey: #777777;
-$link-disabled-grey: #999999;
-
-$text-grey: #999999;
-$text-dark-grey: #666666;
-$text: #333333;
-
-$white: white;
-$black: black;
-$green: #8EDE3D;
-$light-green: lighten($green,20%);
-$red: #A80000;
-$blue: #3F8FBA;
-$dark-blue: darken(#0984C8,10%);
-
-$sidebars-background: #f0f0f0;
-$sidebars-sub-background: darken($sidebars-background, 12%);
-$left-navbar-drawer-background: darken($sidebars-background, 6%);
-
-$card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+.gray {
+  color: $text-grey;
+
+  [class^="entypo-"],
+  [class*="entypo-"] {
+    color: $text-grey;
+  }
+}

app/assets/stylesheets/error_pages.scss

-@import 'colors';
+@import 'color-variables';
 @import 'mixins';
 
 html { min-height: 100%; }

app/assets/stylesheets/home.scss

-@import "colors";
-@import "bootstrap-variables";
+@import 'color-variables';
+@import 'bootstrap-variables';
 
 body {
   margin-top: $navbar-height;

app/assets/stylesheets/mobile/mobile.scss

-@import "colors";
+@import 'color-variables';
 @import "bootstrap-complete";
 @import "_mixins";
 @import "vendor/autoSuggest";

app/assets/stylesheets/stream_element.scss

@@ -90,7 +90,6 @@
     .leaflet-control-zoom {
       display: block;
     }
-    .grey { color: $text-grey; }
     .post-content p:last-of-type { margin-bottom: 0; }
     .nsfw-shield {
       color: $text-grey;
@@ -101,6 +100,16 @@
     }
   }
 
+  .permalink {
+    @include transition(opacity);
+    opacity: 0;
+  }
+
+  &:hover .permalink {
+    opacity: .8;
+    &:hover { opacity: 1; }
+  }
+
   div.reshare {
     border-left: 2px solid $border-grey;
     margin-top: 3px;

app/assets/templates/feedback_tpl.jst.hbs

-<span class="post_scope grey">
+<span class="post_scope gray">
   {{#if public}}
     {{t "stream.public"}}
   {{else}}

app/assets/templates/likes-info_tpl.jst.hbs

@@ -5,7 +5,7 @@
 
       <div class="bd">
         {{#unless likes_fetched}}
-          <a href="#" class="expand_likes grey">
+          <a href="#" class="expand_likes gray">
             {{t "stream.likes" count=likesCount}}
           </a>
 

app/assets/templates/reshare_tpl.jst.hbs

@@ -12,7 +12,7 @@
               {{name}}
             {{/linkToAuthor}}
 
-            <span class="details grey">
+            <span class="details gray">
               -
               <a href="/posts/{{id}}">
                 <time class="timeago" datetime="{{created_at}}"/>

app/assets/templates/stream-element_tpl.jst.hbs

@@ -40,12 +40,16 @@
         {{name}}
       {{/linkToAuthor}}
 
-      <span class="details grey">
+      <span class="details gray">
         -
         <a href="/posts/{{id}}">
           <time class="timeago" data-original-title="{{{localTime created_at}}}" datetime="{{created_at}}" />
         </a>
 
+        <a href="/posts/{{id}}" class="permalink" title="{{t "stream.permalink"}}">
+          <i class="entypo-link"></i>
+        </a>
+
         {{#if interactions.reshares_count}}
           -
           {{t "stream.reshares" count=interactions.reshares_count}}

config/locales/javascript/javascript.en.yml

@@ -228,6 +228,7 @@ en:
       unfollow: "Unfollow"
       enable_post_notifications: "Enable notifications for this post"
       disable_post_notifications: "Disable notifications for this post"
+      permalink: "Permalink"
       via: "via <%= provider %>"
 
       likes:

features/desktop/comments.feature

@@ -79,7 +79,7 @@ Feature: commenting
     And I fill in the following:
         | text            | I think thats a cat    |
     And I press "Comment"
-    When I follow "less than a minute ago" within "span.details.grey"
+    When I follow "less than a minute ago" within "span.details.gray"
     Then I should see "I think thats a cat" within ".comments .comment:last-child"
     When I follow "less than a minute ago" within ".comments .comment:last-child"
     Then I should see "I think thats a cat" within ".comments .comment .highlighted"