Merge pull request #9273 from guerler/list_icons

Add icons to dropdowns in dataset and workflow list
This commit is contained in:
Björn Grüning
2020-02-09 21:20:40 +01:00
committed by GitHub
3 changed files with 72 additions and 27 deletions
@@ -4,7 +4,7 @@ import DatasetName from "./DatasetName";
describe("Dataset Name", () => {
it("test dataset default", async () => {
const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "success" } } });
const state = wrapper.findAll("span");
const state = wrapper.findAll(".name");
expect(state.length).to.equal(1);
expect(state.at(0).text()).to.equal("name");
const $linkShow = wrapper.find(".dropdown-item:first-child");
@@ -16,16 +16,20 @@ describe("Dataset Name", () => {
});
it("test dataset error", async () => {
const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "error" } } });
const state = wrapper.findAll("span");
expect(state.length).to.equal(2);
expect(state.at(0).classes()).to.include("text-danger");
expect(state.at(1).text()).to.equal("name");
const state = wrapper.findAll(".name");
expect(state.length).to.equal(1);
expect(state.at(0).text()).to.equal("name");
const errorstate = wrapper.findAll(".error");
expect(errorstate.length).to.equal(1);
expect(errorstate.at(0).classes()).to.include("text-danger");
});
it("test dataset paused", async () => {
const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "paused" } } });
const state = wrapper.findAll("span");
expect(state.length).to.equal(2);
expect(state.at(0).classes()).to.include("text-info");
expect(state.at(1).text()).to.equal("name");
const state = wrapper.findAll(".name");
expect(state.length).to.equal(1);
expect(state.at(0).text()).to.equal("name");
const pausestate = wrapper.findAll(".pause");
expect(pausestate.length).to.equal(1);
expect(pausestate.at(0).classes()).to.include("text-info");
});
});
@@ -2,28 +2,35 @@
<div>
<b-link
id="dataset-dropdown"
class="workflow-dropdown font-weight-bold"
class="workflow-dropdown font-weight-bold p-2"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span
v-if="isError"
class="fa fa-times-circle text-danger mr-1"
class="dataset-icon error fa fa-times-circle text-danger"
v-b-tooltip.hover
title="An error occurred for this dataset."
/>
<span
v-if="isPaused"
class="fa fa-pause text-info mr-1"
v-else-if="isPaused"
class="dataset-icon pause fa fa-pause text-info"
v-b-tooltip.hover
title="The creation of this dataset has been paused."
/>
<span> {{ this.getName }}</span>
<span v-else class="dataset-icon fa fa-caret-down" />
<span class="name">{{ this.getName }}</span>
</b-link>
<div class="dropdown-menu" aria-labelledby="dataset-dropdown">
<a class="dropdown-item" href="#" @click.prevent="showDataset">Show in History</a>
<a class="dropdown-item" href="#" @click.prevent="copyDataset">Copy to History</a>
<a class="dropdown-item" href="#" @click.prevent="showDataset">
<span class="fa fa-eye fa-fw mr-1" />
<span>Show in History</span>
</a>
<a class="dropdown-item" href="#" @click.prevent="copyDataset">
<span class="fa fa-copy fa-fw mr-1" />
<span>Copy to History</span>
</a>
</div>
</div>
</template>
@@ -58,3 +65,10 @@ export default {
}
};
</script>
<style scoped>
.dataset-icon {
position: relative;
margin-left: -1rem;
}
</style>
@@ -8,21 +8,48 @@
aria-expanded="false"
>
<span :class="icon" />
{{ workflow.name }}
<span>{{ workflow.name }}</span>
</b-link>
<p v-if="workflow.description">{{ workflow.description }}</p>
<div v-if="workflow.shared" class="dropdown-menu" aria-labelledby="workflow-dropdown">
<a class="dropdown-item" href="#" @click.prevent="onCopy">Copy</a>
<a class="dropdown-item" :href="urlViewShared">View</a>
<a class="dropdown-item" href="#" @click.prevent="onCopy">
<span class="fa fa-copy fa-fw mr-1" />
<span>Copy</span>
</a>
<a class="dropdown-item" :href="urlViewShared">
<span class="fa fa-eye fa-fw mr-1" />
<span>View</span>
</a>
</div>
<div v-else class="dropdown-menu" aria-labelledby="workflow-dropdown">
<a class="dropdown-item" :href="urlEdit">Edit</a>
<a class="dropdown-item" href="#" @click.prevent="onCopy">Copy</a>
<a class="dropdown-item" :href="urlDownload">Download</a>
<a class="dropdown-item" href="#" @click.prevent="onRename">Rename</a>
<a class="dropdown-item" :href="urlShare">Share</a>
<a class="dropdown-item" :href="urlView">View</a>
<a class="dropdown-item" href="#" @click.prevent="onDelete">Delete</a>
<a class="dropdown-item" :href="urlEdit">
<span class="fa fa-edit fa-fw mr-1" />
<span>Edit</span>
</a>
<a class="dropdown-item" href="#" @click.prevent="onCopy">
<span class="fa fa-copy fa-fw mr-1" />
<span>Copy</span>
</a>
<a class="dropdown-item" :href="urlDownload">
<span class="fa fa-download fa-fw mr-1" />
<span>Download</span>
</a>
<a class="dropdown-item" href="#" @click.prevent="onRename">
<span class="fa fa-signature fa-fw mr-1" />
<span>Rename</span>
</a>
<a class="dropdown-item" :href="urlShare">
<span class="fa fa-share-alt fa-fw mr-1" />
<span>Share</span>
</a>
<a class="dropdown-item" :href="urlView">
<span class="fa fa-eye fa-fw mr-1" />
<span>View</span>
</a>
<a class="dropdown-item" href="#" @click.prevent="onDelete">
<span class="fa fa-trash fa-fw mr-1" />
<span>Delete</span>
</a>
</div>
</div>
</template>
@@ -47,7 +74,7 @@ export default {
if (this.workflow.shared) {
return "fa fa-share-alt";
}
return null;
return "fa fa-caret-down";
}
},
created() {