Try to use slots

3 files changed, 29 insertions, 24 deletions

diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index ca1a5861f30..2bac40b3c6f 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -23,39 +23,38 @@
      *
      */
     mounted() {
-      const playIcon = document.querySelector('.play-icon-svg.hidden svg');
-
-      const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
-      const actionContainers = this.$el.querySelectorAll('.action-play-icon-container');
-      // Phantomjs does not have support to iterate a nodelist.
-      const actionsArray = [].slice.call(actionContainers);
-
-      if (playIcon && actionsArray && dropdownContainer) {
-        dropdownContainer.appendChild(playIcon.cloneNode(true));
-
-        actionsArray.forEach((element) => {
-          element.appendChild(playIcon.cloneNode(true));
-        });
-      }
+      // const playIcon = document.querySelector('.play-icon-svg.hidden svg');
+      //
+      // const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
+      // const actionContainers = this.$el.querySelectorAll('.action-play-icon-container');
+      // // Phantomjs does not have support to iterate a nodelist.
+      // const actionsArray = [].slice.call(actionContainers);
+      //
+      // if (playIcon && actionsArray && dropdownContainer) {
+      //   dropdownContainer.appendChild(playIcon.cloneNode(true));
+      //
+      //   actionsArray.forEach((element) => {
+      //     element.appendChild(playIcon.cloneNode(true));
+      //   });
+      // }
     },
 
     template: `
       <div class="inline">
         <div class="dropdown">
           <a class="dropdown-new btn btn-default" data-toggle="dropdown">
-            <span class="dropdown-play-icon-container">
-              <!-- svg goes here -->
-            </span>
+            <slot name="actionplayicon"></slot>
             <i class="fa fa-caret-down"></i>
           </a>
 
           <ul class="dropdown-menu dropdown-menu-align-right">
             <li v-for="action in actions">
-              <a :href="action.play_path" data-method="post" rel="nofollow" class="js-manual-action-link">
-              <span class="action-play-icon-container">
-                <!-- svg goes here -->
-              </span>
-              <span v-html="action.name"></span>
+              <a :href="action.play_path"
+                data-method="post"
+                rel="nofollow"
+                class="js-manual-action-link">
+                <slot name="actionplayicon"></slot>
+                <span v-html="action.name"></span>
               </a>
             </li>
           </ul>
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index e9ff43a8adb..cecf3f325fd 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -15,6 +15,10 @@
   }
 }
 
+.play-icon-svg span  {
+  display: inline-block;
+}
+
 .environments {
   table-layout: fixed;
 
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index b641d2cec34..df94fa9cfb5 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -6,8 +6,10 @@
   = page_specific_javascript_tag("environments/environments_bundle.js")
 .commit-icon-svg.hidden
   = custom_icon("icon_commit")
-.play-icon-svg.hidden
-  = custom_icon("icon_play")
+
+.play-icon-svg{ slot: "actionplayicon" }
+  %span.hide
+    = custom_icon("icon_play")
 
 #environments-list-view{ data: { environments_data: environments_list_data,
   "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,