Commit d0552ade authored by Filipa Lacerda's avatar Filipa Lacerda

Try to use slots

parent 120c53cd
......@@ -23,38 +23,37 @@
*
*/
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>
<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>
......
......@@ -15,6 +15,10 @@
}
}
.play-icon-svg span {
display: inline-block;
}
.environments {
table-layout: fixed;
......
......@@ -6,7 +6,9 @@
= page_specific_javascript_tag("environments/environments_bundle.js")
.commit-icon-svg.hidden
= custom_icon("icon_commit")
.play-icon-svg.hidden
.play-icon-svg{ slot: "actionplayicon" }
%span.hide
= custom_icon("icon_play")
#environments-list-view{ data: { environments_data: environments_list_data,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment