diff options
| author | Tim Zallmann <tzallmann@gitlab.com> | 2017-09-22 08:39:47 +0000 |
|---|---|---|
| committer | Phil Hughes <me@iamphill.com> | 2017-09-22 08:39:47 +0000 |
| commit | 55f772bb98a67ad346442a2cacb5646f6719b987 (patch) | |
| tree | fdcda42d5ee9c746b5654a50fa88a0fd1464d3a8 /app/assets/javascripts/pipelines | |
| parent | d103e95513704314a38ab8ae441851524031c4a1 (diff) | |
| download | gitlab-ce-55f772bb98a67ad346442a2cacb5646f6719b987.tar.gz | |
Resolve "Better SVG Usage in the Frontend"
Diffstat (limited to 'app/assets/javascripts/pipelines')
3 files changed, 23 insertions, 9 deletions
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue index 3db64339a62..0eaac8dd64f 100644 --- a/app/assets/javascripts/pipelines/components/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/empty_state.vue @@ -1,21 +1,24 @@ <script> -import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg'; - export default { props: { helpPagePath: { type: String, required: true, }, + emptyStateSvgPath: { + type: String, + required: true, + }, }, - data: () => ({ pipelinesEmptyStateSVG }), }; </script> <template> <div class="row empty-state js-empty-state"> <div class="col-xs-12"> - <div class="svg-content" v-html="pipelinesEmptyStateSVG" /> + <div class="svg-content"> + <img :src="emptyStateSvgPath"/> + </div> </div> <div class="col-xs-12 text-center"> diff --git a/app/assets/javascripts/pipelines/components/error_state.vue b/app/assets/javascripts/pipelines/components/error_state.vue index 90cee68163e..012853b201d 100644 --- a/app/assets/javascripts/pipelines/components/error_state.vue +++ b/app/assets/javascripts/pipelines/components/error_state.vue @@ -1,15 +1,20 @@ <script> -import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg'; - export default { - data: () => ({ pipelinesErrorStateSVG }), + props: { + errorStateSvgPath: { + type: String, + required: true, + }, + }, }; </script> <template> <div class="row empty-state js-pipelines-error-state"> <div class="col-xs-12"> - <div class="svg-content" v-html="pipelinesErrorStateSVG" /> + <div class="svg-content"> + <img :src="errorStateSvgPath"/> + </div> </div> <div class="col-xs-12 text-center"> diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 4c53e2541fc..085bd20cefe 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -27,6 +27,8 @@ return { endpoint: pipelinesData.endpoint, helpPagePath: pipelinesData.helpPagePath, + emptyStateSvgPath: pipelinesData.emptyStateSvgPath, + errorStateSvgPath: pipelinesData.errorStateSvgPath, autoDevopsPath: pipelinesData.helpAutoDevopsPath, newPipelinePath: pipelinesData.newPipelinePath, canCreatePipeline: pipelinesData.canCreatePipeline, @@ -182,9 +184,13 @@ <empty-state v-if="shouldRenderEmptyState" :help-page-path="helpPagePath" + :empty-state-svg-path="emptyStateSvgPath" /> - <error-state v-if="shouldRenderErrorState" /> + <error-state + v-if="shouldRenderErrorState" + :error-state-svg-path="errorStateSvgPath" + /> <div class="blank-state blank-state-no-icon" |