Move copy story url to clipboard button to the story dropdown menu (#232)

* Move copy story url to clipboard button to the story dropdown menu

* Fix copy-to-clipboard popup alert position

* Shift location of popup

* fix css of the copy link message

* fixed the options under the menu on the project show page

---------

Co-authored-by: rishijain <[email protected]>

Author: mcelaney

app/assets/stylesheets/project.scss

@@ -267,24 +267,7 @@
   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;
-    }
+    padding-right: 5px;
   }
 }
 

app/assets/stylesheets/stories.scss

@@ -118,8 +118,8 @@
 .popup {
   display: none;
   position: absolute;
-  top: 5px;
-  left: 30px;
+  right: 30px;
+  z-index: 50;
   background: #d9f1f1;
   height: 30px;
   width: 140px;

app/views/projects/show.html.erb

@@ -27,9 +27,9 @@
             <% @stories.each do | story | %>
               <tr class="project-table__row project-table__row--story" id="<%= dom_id(story)%>" >
                 <td class="project-table__cell">
+                  <span class="popup">Copied to clipboard</span>
                   <input type="checkbox" name="stories[]" value="<%= story.id %>">
                   <%= link_to "#{story.id} - #{story.title}", [story.project, story] %>
-                  <button class="copy-link btn-clipboard" data-clipboard-text="<%= project_story_url(@project, story) %>" title='Copy story'><i class="fa fa-link"></i><span class= "popup">Copied to clipboard</span></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>
@@ -46,6 +46,10 @@
                       <i class="fa fa-ellipsis-v"></i>
                     </button>
                     <div class="dropdown">
+
+                      <button class="copy-link btn-clipboard" data-clipboard-text="<%= project_story_url(@project, story) %>" title='Copy story'>
+                        <i class="fa fa-link"></i>Copy Link</button>
+
                       <%= link_unless_archived(@project, "Edit", edit_project_story_path(@project, story), classes: "edit", icon: 'pencil-square-o') %>
 
                       <% if @siblings.any? %>
@@ -63,12 +67,6 @@
                       <% end %>
 
                       <%= link_unless_archived(@project, "Delete", project_story_path(@project.id, story), classes: "delete", icon: 'trash-o', method: :delete, remote: true, data_attr: { confirm: 'Are you sure?', story_id: story.id }) %>
-
-                      <% link_to new_project_story_path(@project.id, story_id: story.id), class: "clone", title: "Clone" do %>
-                        <i class="fa fa-files-o"></i>
-                        <span>Clone</span>
-                      <% end %>
-
                       <%= link_unless_archived(@project, "Clone", new_project_story_path(@project.id, story_id: story.id), classes: "clone", icon: 'files-o') %>
                     </div>
                   </div>
@@ -102,11 +100,9 @@
 
   <div class="btn-group actions">
     <%= link_to 'Return to Projects Page', projects_path, id: :back, class: "button" %>
-
     <% if current_user.admin? %>
       <%= button_to is_unlocked?(@project) ? 'Lock Project' : 'Unlock Project', toggle_locked_project_path(@project.id), method: :patch, class: "button magenta", id: "lock-btn", remote: true %>
     <% end %>
-
     <%= link_to 'Clone Project', new_clone_project_path(@project.id), class: "button green" %>
     <%= link_to 'Edit Project', edit_project_path(@project.id), class: "button green" %>