Commit c71a88a7 authored by Filipa Lacerda's avatar Filipa Lacerda

Simplifies the HTML strucutre in the mini pipeline graph to make it as similar...

Simplifies the HTML strucutre in the mini pipeline graph to make it as similar as the one in haml as possible
parent 8181f58d
...@@ -47,46 +47,30 @@ ...@@ -47,46 +47,30 @@
const stageIcon = icon.replace(/icon/i, 'stage_icon'); const stageIcon = icon.replace(/icon/i, 'stage_icon');
return this.svgs[this.match(stageIcon)]; return this.svgs[this.match(stageIcon)];
}, },
spanClass() { triggerButtonClass() {
return `ci-status-icon ci-status-icon-${this.stage.status.group}`; return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
}, },
}, },
template: ` template: `
<div class="dropdown inline build-content"> <div>
<button <button
@click='fetchBuilds' @click='fetchBuilds'
@blur='fetchBuilds' @blur='fetchBuilds'
class="has-tooltip builds-dropdown js-builds-dropdown-button" :class="triggerButtonClass"
data-placement="top"
:title='stage.title' :title='stage.title'
data-placement="top"
data-toggle="dropdown" data-toggle="dropdown"
type="button" type="button">
>
<span :class='tooltip'> <span v-html="svg"></span>
<span class="mini-pipeline-graph-icon-container"> <i class="fa fa-caret-down "></i>
<span
:class='spanClass'
v-html='svg'
>
</span>
<i class="fa fa-caret-down dropdown-caret"></i>
</span>
</span>
</span>
</button>
<div class="js-builds-dropdown-container"> </button>
<div class="dropdown-menu grouped-pipeline-dropdown">
<div class="arrow-up"></div>
<div
:class='dropdownClass'
v-html='buildsOrSpinner'
>
</div>
</div>
</div>
<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>
</ul>
</div> </div>
`, `,
}); });
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
template: ` template: `
<td class="stage-cell"> <td class="stage-cell">
<div <div
class="stage-container mini-pipeline-graph" class="stage-container dropdown js-mini-pipeline-graph"
v-for='stage in pipeline.details.stages' v-for='stage in pipeline.details.stages'
> >
<vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage> <vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
......
...@@ -186,6 +186,7 @@ ...@@ -186,6 +186,7 @@
.stage-cell { .stage-cell {
font-size: 0; font-size: 0;
> .stage-container > div > button > span > svg,
> .stage-container > button > svg { > .stage-container > button > svg {
height: 22px; height: 22px;
width: 22px; width: 22px;
......
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