Commit 70cb2792 authored by Filipa Lacerda's avatar Filipa Lacerda

Replace play icon svg logic

parent 1413c94a
...@@ -74,6 +74,8 @@ ...@@ -74,6 +74,8 @@
projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath, projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
newEnvironmentPath: environmentsData.newEnvironmentPath, newEnvironmentPath: environmentsData.newEnvironmentPath,
helpPagePath: environmentsData.helpPagePath, helpPagePath: environmentsData.helpPagePath,
commitIconSvg: environmentsData.commitIconSvg,
playIconSvg: environmentsData.playIconSvg,
}; };
}, },
...@@ -227,7 +229,9 @@ ...@@ -227,7 +229,9 @@
:model="model" :model="model"
:toggleRow="toggleRow.bind(model)" :toggleRow="toggleRow.bind(model)"
:can-create-deployment="canCreateDeploymentParsed" :can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed"></tr> :can-read-environment="canReadEnvironmentParsed"
:play-icon-svg="playIconSvg"
:commit-icon-svg="commitIconSvg"></tr>
<tr v-if="model.isOpen && model.children && model.children.length > 0" <tr v-if="model.isOpen && model.children && model.children.length > 0"
is="environment-item" is="environment-item"
...@@ -235,7 +239,9 @@ ...@@ -235,7 +239,9 @@
:model="children" :model="children"
:toggleRow="toggleRow.bind(children)" :toggleRow="toggleRow.bind(children)"
:can-create-deployment="canCreateDeploymentParsed" :can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed"> :can-read-environment="canReadEnvironmentParsed"
:play-icon-svg="playIconSvg"
:commit-icon-svg="commitIconSvg">
</tr> </tr>
</template> </template>
......
...@@ -12,38 +12,18 @@ ...@@ -12,38 +12,18 @@
required: false, required: false,
default: () => [], default: () => [],
}, },
},
/**
* Appends the svg icon that were render in the index page.
* In order to reuse the svg instead of copy and paste in this template
* we need to render it outside this component using =custom_icon partial.
*
* TODO: Remove this when webpack is merged.
*
*/
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) { playIconSvg: {
dropdownContainer.appendChild(playIcon.cloneNode(true)); type: String,
required: false,
actionsArray.forEach((element) => { },
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"></span> <span v-html='playIconSvg'></span>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
...@@ -53,7 +33,7 @@ ...@@ -53,7 +33,7 @@
data-method="post" data-method="post"
rel="nofollow" rel="nofollow"
class="js-manual-action-link"> class="js-manual-action-link">
<span class="action-play-icon-container"></span> <span v-html='playIconSvg'></span>
<span> <span>
{{action.name}} {{action.name}}
</span> </span>
......
...@@ -58,6 +58,16 @@ ...@@ -58,6 +58,16 @@
required: false, required: false,
default: false, default: false,
}, },
commitIconSvg: {
type: String,
required: false,
},
playIconSvg: {
type: String,
required: false,
},
}, },
data() { data() {
...@@ -476,6 +486,7 @@ ...@@ -476,6 +486,7 @@
<div v-if="hasManualActions && canCreateDeployment" <div v-if="hasManualActions && canCreateDeployment"
class="inline js-manual-actions-container"> class="inline js-manual-actions-container">
<actions-component <actions-component
:play-icon-svg="playIconSvg"
:actions="manualActions"> :actions="manualActions">
</actions-component> </actions-component>
</div> </div>
......
...@@ -17,4 +17,6 @@ ...@@ -17,4 +17,6 @@
"project-stopped-environments-path" => project_environments_path(@project, scope: :stopped), "project-stopped-environments-path" => project_environments_path(@project, scope: :stopped),
"new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project), "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project),
"help-page-path" => help_page_path("ci/environments"), "help-page-path" => help_page_path("ci/environments"),
"css-class" => container_class}} "css-class" => container_class,
"commit-icon-svg" => custom_icon("icon_commit"),
"play-icon-svg" => custom_icon("icon_play")}}
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