diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-24 19:02:57 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-25 00:44:18 +0000 |
commit | f17109c04610489cc7fd1f760e83b2bca3c56f3c (patch) | |
tree | 86817bc079b4c36143d282e59d40da5a4476ee7a | |
parent | e50375298e1f799e60f5a2e4ee3eb006d1a008a5 (diff) | |
download | gitlab-ce-f17109c04610489cc7fd1f760e83b2bca3c56f3c.tar.gz |
Load SVGs into Pipelines
8 files changed, 81 insertions, 92 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index e7432afb56e..a90bd1518e9 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -11,15 +11,10 @@ $(() => new Vue({ data() { const project = document.querySelector('.pipelines'); - const svgs = document.querySelector('.pipeline-svgs').dataset; - - // Transform svgs DOMStringMap to a plain Object. - const svgsObject = gl.utils.DOMStringMapToObject(svgs); return { scope: project.dataset.url, store: new gl.PipelineStore(), - svgs: svgsObject, }; }, components: { @@ -27,10 +22,8 @@ $(() => new Vue({ }, template: ` <vue-pipelines - :scope='scope' - :store='store' - :svgs='svgs' - > + :scope="scope" + :store="store"> </vue-pipelines> `, })); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 54e8f977a47..34ea7512d2b 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -1,9 +1,10 @@ /* global Vue, Flash, gl */ /* eslint-disable no-param-reassign */ +const playIconSvg = require('../../../views/shared/icons/_icon_play.svg'); ((gl) => { gl.VuePipelineActions = Vue.extend({ - props: ['pipeline', 'svgs'], + props: ['pipeline'], computed: { actions() { return this.pipeline.details.manual_actions.length > 0; @@ -17,6 +18,11 @@ return `Download ${name} artifacts`; }, }, + + data() { + return { playIconSvg }; + }, + template: ` <td class="pipeline-actions hidden-xs"> <div class="controls pull-right"> @@ -30,7 +36,7 @@ data-placement="top" aria-label="Manual job" > - <span v-html='svgs.iconPlay' aria-hidden="true"></span> + <span v-html="playIconSvg" aria-hidden="true"></span> <i class="fa fa-caret-down" aria-hidden="true"></i> </button> <ul class="dropdown-menu dropdown-menu-align-right"> @@ -40,7 +46,7 @@ data-method="post" :href='action.path' > - <span v-html='svgs.iconPlay' aria-hidden="true"></span> + <span v-html="playIconSvg" aria-hidden="true"></span> <span>{{action.name}}</span> </a> </li> diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 9d66d28cc62..9d78b02fcd5 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -27,7 +27,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s pageRequest: false, }; }, - props: ['scope', 'store', 'svgs'], + props: ['scope', 'store'], created() { const pagenum = gl.utils.getParameterByName('page'); const scope = gl.utils.getParameterByName('scope'); @@ -73,10 +73,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s </div> <div class="table-holder" v-if='!pageRequest && pipelines.length'> - <pipelines-table-component - :pipelines='pipelines' - :svgs='svgs'> - </pipelines-table-component> + <pipelines-table-component :pipelines='pipelines'/> </div> <gl-pagination diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 67fdd729e41..d04421a6169 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -1,27 +1,42 @@ /* global Vue, Flash, gl */ /* eslint-disable no-param-reassign */ +import canceledSvg from '../../../views/shared/icons/_icon_status_canceled_borderless.svg'; +import createdSvg from '../../../views/shared/icons/_icon_status_created_borderless.svg'; +import failedSvg from '../../../views/shared/icons/_icon_status_failed_borderless.svg'; +import manualSvg from '../../../views/shared/icons/_icon_status_manual_borderless.svg'; +import pendingSvg from '../../../views/shared/icons/_icon_status_pending_borderless.svg'; +import runningSvg from '../../../views/shared/icons/_icon_status_running_borderless.svg'; +import skippedSvg from '../../../views/shared/icons/_icon_status_skipped_borderless.svg'; +import successSvg from '../../../views/shared/icons/_icon_status_success_borderless.svg'; +import warningSvg from '../../../views/shared/icons/_icon_status_warning_borderless.svg'; ((gl) => { gl.VueStage = Vue.extend({ data() { + const svgsDictionary = { + icon_status_canceled: canceledSvg, + icon_status_created: createdSvg, + icon_status_failed: failedSvg, + icon_status_manual: manualSvg, + icon_status_pending: pendingSvg, + icon_status_running: runningSvg, + icon_status_skipped: skippedSvg, + icon_status_success: successSvg, + icon_status_warning: warningSvg, + }; + return { builds: '', spinner: '<span class="fa fa-spinner fa-spin"></span>', + svg: svgsDictionary[this.stage.status.icon], }; }, + props: { stage: { type: Object, required: true, }, - svgs: { - type: Object, - required: true, - }, - match: { - type: Function, - required: true, - }, }, updated() { @@ -73,11 +88,6 @@ tooltip() { return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`; }, - svg() { - const { icon } = this.stage.status; - const stageIcon = icon.replace(/icon/i, 'stage_icon'); - return this.svgs[this.match(stageIcon)]; - }, triggerButtonClass() { return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`; }, @@ -91,8 +101,7 @@ data-placement="top" data-toggle="dropdown" type="button" - :aria-label="stage.title" - > + :aria-label="stage.title"> <span v-html="svg" aria-hidden="true"></span> <i class="fa fa-caret-down" aria-hidden="true"></i> </button> @@ -101,8 +110,7 @@ <div :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" - v-html="buildsOrSpinner" - > + v-html="buildsOrSpinner"> </div> </ul> </div> diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 05175082704..acdd82a480e 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -1,20 +1,47 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign */ +import canceledSvg from '../../../views/shared/icons/_icon_status_canceled.svg'; +import createdSvg from '../../../views/shared/icons/_icon_status_created.svg'; +import failedSvg from '../../../views/shared/icons/_icon_status_failed.svg'; +import manualSvg from '../../../views/shared/icons/_icon_status_manual.svg'; +import pendingSvg from '../../../views/shared/icons/_icon_status_pending.svg'; +import runningSvg from '../../../views/shared/icons/_icon_status_running.svg'; +import skippedSvg from '../../../views/shared/icons/_icon_status_skipped.svg'; +import successSvg from '../../../views/shared/icons/_icon_status_success.svg'; +import warningSvg from '../../../views/shared/icons/_icon_status_warning.svg'; + ((gl) => { gl.VueStatusScope = Vue.extend({ props: [ - 'pipeline', 'svgs', 'match', + 'pipeline', ], + + data() { + const svgsDictionary = { + icon_status_canceled: canceledSvg, + icon_status_created: createdSvg, + icon_status_failed: failedSvg, + icon_status_manual: manualSvg, + icon_status_pending: pendingSvg, + icon_status_running: runningSvg, + icon_status_skipped: skippedSvg, + icon_status_success: successSvg, + icon_status_warning: warningSvg, + }; + + return { + svg: svgsDictionary[this.pipeline.details.status.icon], + }; + }, + computed: { cssClasses() { const cssObject = { 'ci-status': true }; cssObject[`ci-${this.pipeline.details.status.group}`] = true; return cssObject; }, - svg() { - return this.svgs[this.match(this.pipeline.details.status.icon)]; - }, + detailsPath() { const { status } = this.pipeline.details; return status.has_details ? status.details_path : false; @@ -25,8 +52,7 @@ <a :class='cssClasses' :href='detailsPath' - v-html='svg + pipeline.details.status.text' - > + v-html="svg + pipeline.details.status.text"> </a> </td> `, diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 3598da11573..22f1b1a8483 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -4,14 +4,17 @@ window.Vue = require('vue'); require('../lib/utils/datetime_utility'); +const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg'); + ((gl) => { gl.VueTimeAgo = Vue.extend({ data() { return { currentTime: new Date(), + iconTimerSvg, }; }, - props: ['pipeline', 'svgs'], + props: ['pipeline'], computed: { timeAgo() { return gl.utils.getTimeago(); @@ -56,7 +59,7 @@ require('../lib/utils/datetime_utility'); template: ` <td> <p class="duration" v-if='duration'> - <span v-html='svgs.iconTimer'></span> + <span v-html="iconTimerSvg"></span> {{duration}} </p> <p class="finished-at" v-if='timeStopped'> diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 b/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 index 4bdaef31ee9..1c41f8b437d 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 +++ b/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 @@ -21,14 +21,6 @@ require('./pipelines_table_row'); default: () => ([]), }, - /** - * TODO: Remove this when we have webpack. - */ - svgs: { - type: Object, - required: true, - default: () => ({}), - }, }, components: { @@ -51,8 +43,7 @@ require('./pipelines_table_row'); <template v-for="model in pipelines" v-bind:model="model"> <tr is="pipelines-table-row-component" - :pipeline="model" - :svgs="svgs"></tr> + :pipeline="model"></tr> </template> </tbody> </table> diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6 b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6 index 61c1b72d9d2..e5e88186a85 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6 +++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6 @@ -25,14 +25,6 @@ require('./commit'); default: () => ({}), }, - /** - * TODO: Remove this when we have webpack; - */ - svgs: { - type: Object, - required: true, - default: () => ({}), - }, }, components: { @@ -174,30 +166,9 @@ require('./commit'); }, }, - methods: { - /** - * FIXME: This should not be in this component but in the components that - * need this function. - * - * Used to render SVGs in the following components: - * - status-scope - * - dropdown-stage - * - * @param {String} string - * @return {String} - */ - match(string) { - return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase()); - }, - }, - template: ` <tr class="commit"> - <status-scope - :pipeline="pipeline" - :svgs="svgs" - :match="match"> - </status-scope> + <status-scope :pipeline="pipeline"/> <pipeline-url :pipeline="pipeline"></pipeline-url> @@ -208,26 +179,20 @@ require('./commit'); :commit-url="commitUrl" :short-sha="commitShortSha" :title="commitTitle" - :author="commitAuthor" - :commit-icon-svg="svgs.commitIconSvg"> - </commit-component> + :author="commitAuthor"/> </td> <td class="stage-cell"> <div class="stage-container dropdown js-mini-pipeline-graph" v-if="pipeline.details.stages.length > 0" v-for="stage in pipeline.details.stages"> - <dropdown-stage - :stage="stage" - :svgs="svgs" - :match="match"> - </dropdown-stage> + <dropdown-stage :stage="stage"/> </div> </td> - <time-ago :pipeline="pipeline" :svgs="svgs"></time-ago> + <time-ago :pipeline="pipeline"/> - <pipeline-actions :pipeline="pipeline" :svgs="svgs"></pipeline-actions> + <pipeline-actions :pipeline="pipeline" /> </tr> `, }); |