diff options
| author | Fatih Acet <acetfatih@gmail.com> | 2017-01-18 20:57:17 +0000 |
|---|---|---|
| committer | James Lopez <james@jameslopez.es> | 2017-01-19 11:01:46 +0100 |
| commit | 78418c8941fc9a0154201e06ded2d6f9786de318 (patch) | |
| tree | d5709bb69d3d35c57df58968fc70a09255296d32 | |
| parent | 64e94048b662e032045d97ac772f2d0d9327035a (diff) | |
| download | gitlab-ce-78418c8941fc9a0154201e06ded2d6f9786de318.tar.gz | |
Merge branch 'ui_pipelines_mini_graph' into 'master'
better UI fix - simple solution - pipelines#index mini_graph in Vue
See merge request !8614
| -rw-r--r-- | app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 24 |
1 files changed, 16 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index f075a995846..32973132174 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -5,18 +5,19 @@ gl.VueStage = Vue.extend({ data() { return { - count: 0, builds: '', spinner: '<span class="fa fa-spinner fa-spin"></span>', }; }, props: ['stage', 'svgs', 'match'], methods: { - fetchBuilds() { - if (this.count > 0) return null; + fetchBuilds(e) { + const areaExpanded = e.currentTarget.attributes['aria-expanded']; + + if (areaExpanded && (areaExpanded.textContent === 'true')) return null; + return this.$http.get(this.stage.dropdown_path) .then((response) => { - this.count += 1; this.builds = JSON.parse(response.body).html; }, () => { const flash = new Flash('Something went wrong on our end.'); @@ -39,7 +40,7 @@ return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`; }, svg() { - const icon = this.stage.status.icon; + const { icon } = this.stage.status; const stageIcon = icon.replace(/icon/i, 'stage_icon'); return this.svgs[this.match(stageIcon)]; }, @@ -50,18 +51,25 @@ template: ` <div> <button - @click='fetchBuilds' + @click='fetchBuilds($event)' :class="triggerButtonClass" :title='stage.title' data-placement="top" data-toggle="dropdown" - type="button"> + type="button" + > <span v-html="svg"></span> <i class="fa fa-caret-down "></i> </button> <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"> <div class="arrow-up"></div> - <div :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" v-html="buildsOrSpinner"></div> + <div + @click='' + :class="dropdownClass" + class="js-builds-dropdown-list scrollable-menu" + v-html="buildsOrSpinner" + > + </div> </ul> </div> `, |