Merge pull request #180 from fastruby/copy-story-link-to-clipboard

Create button to easily copy a story's link to the clipboard
fastruby · Jan 19, 2022 · 30e08e2 · 30e08e2
2 parents 05f67aa + 24a6c2b
commit 30e08e2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/app/assets/stylesheets/4-molecules/_tables.scss b/app/assets/stylesheets/4-molecules/_tables.scss
@@ -42,11 +42,14 @@
       font-weight: bold;
     }
     &.project-table__row--story {
-      cursor: pointer;
+      cursor: grab;
       border-bottom: 1px solid $medium_grey;
       &:hover {
         background-color: #d9f1f1;
       }
+      &:active {
+        cursor: grabbing;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/project.scss b/app/assets/stylesheets/project.scss
@@ -178,3 +178,35 @@
     color: gray;
   }
 }
+
+.copy-link {
+  background: none;
+  border: none;
+  padding: 8px;
+  color: #F70A7C;
+
+  i {
+    position: relative;
+    border-radius: 50%;
+    padding: 5px;
+    opacity: 0;
+    transition: transform 0.5s,
+                opacity 0.5s;
+    transform: translateX(-100%)
+  }
+
+  &:hover {
+    i {
+      opacity: 1;
+      transform: translateX(0)
+    }
+  }
+
+  &:active {
+    i {
+      background: #F70A7C;
+      color: white;
+    }
+  }
+}
+
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
@@ -30,6 +30,7 @@
                 <td class="project-table__cell">
                   <input type="checkbox" name="stories[]" value=<%= story.id %>>
                   <%= link_to story.title, [story.project, story] %>
+                  <button class="copy-link btn-clipboard" data-clipboard-text="<%= project_story_url(@project, story) %>"><i class="fa fa-link"></i></button>
                 </td>
                 <td class="project-table__cell"><%= story.estimate_for(current_user)&.best_case_points %></td>
                 <td class="project-table__cell"><%= story.estimate_for(current_user)&.worst_case_points %></td>
@@ -38,7 +39,7 @@
                     <%= link_to "Edit Estimate", edit_project_story_estimate_path(@project.id, story, @estimate_id), class: "button edit-estimate", remote: true %>
                   <% else %>
                     <%= link_to "Add Estimate", new_project_story_estimate_path(@project.id, story), class: "button add-estimate", remote: true %>
-                  <% end %>
+                 <% end %>
                   <div class="dropdown-wrapper more-actions">
                     <button class="button" title="More actions">
                       <i class="fa fa-ellipsis-v"></i>