Commit d0552ade authored by Filipa Lacerda's avatar Filipa Lacerda

Try to use slots

parent 120c53cd
...@@ -23,38 +23,37 @@ ...@@ -23,38 +23,37 @@
* *
*/ */
mounted() { mounted() {
const playIcon = document.querySelector('.play-icon-svg.hidden svg'); // const playIcon = document.querySelector('.play-icon-svg.hidden svg');
//
const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container'); // const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
const actionContainers = this.$el.querySelectorAll('.action-play-icon-container'); // const actionContainers = this.$el.querySelectorAll('.action-play-icon-container');
// Phantomjs does not have support to iterate a nodelist. // // Phantomjs does not have support to iterate a nodelist.
const actionsArray = [].slice.call(actionContainers); // const actionsArray = [].slice.call(actionContainers);
//
if (playIcon && actionsArray && dropdownContainer) { // if (playIcon && actionsArray && dropdownContainer) {
dropdownContainer.appendChild(playIcon.cloneNode(true)); // dropdownContainer.appendChild(playIcon.cloneNode(true));
//
actionsArray.forEach((element) => { // actionsArray.forEach((element) => {
element.appendChild(playIcon.cloneNode(true)); // element.appendChild(playIcon.cloneNode(true));
}); // });
} // }
}, },
template: ` template: `
<div class="inline"> <div class="inline">
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-new btn btn-default" data-toggle="dropdown"> <a class="dropdown-new btn btn-default" data-toggle="dropdown">
<span class="dropdown-play-icon-container"> <slot name="actionplayicon"></slot>
<!-- svg goes here -->
</span>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu-align-right"> <ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions"> <li v-for="action in actions">
<a :href="action.play_path" data-method="post" rel="nofollow" class="js-manual-action-link"> <a :href="action.play_path"
<span class="action-play-icon-container"> data-method="post"
<!-- svg goes here --> rel="nofollow"
</span> class="js-manual-action-link">
<slot name="actionplayicon"></slot>
<span v-html="action.name"></span> <span v-html="action.name"></span>
</a> </a>
</li> </li>
......
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
} }
} }
.play-icon-svg span {
display: inline-block;
}
.environments { .environments {
table-layout: fixed; table-layout: fixed;
......
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
= page_specific_javascript_tag("environments/environments_bundle.js") = page_specific_javascript_tag("environments/environments_bundle.js")
.commit-icon-svg.hidden .commit-icon-svg.hidden
= custom_icon("icon_commit") = custom_icon("icon_commit")
.play-icon-svg.hidden
.play-icon-svg{ slot: "actionplayicon" }
%span.hide
= custom_icon("icon_play") = custom_icon("icon_play")
#environments-list-view{ data: { environments_data: environments_list_data, #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