Commit 23024a70 authored by Filipa Lacerda's avatar Filipa Lacerda

Adds clipboard button component

parent 13c86bb4
<script>
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
export default {
name: 'collapsibeContainerRegisty',
props: {
canDelete: {
type: Boolean,
title: {
type: String,
required: true,
},
title: {
clipboardContent: {
type: String,
required: true,
},
repoData: {
type: Object,
required: true,
},
},
components: {
clipboardButton,
},
data() {
return {
......@@ -20,23 +26,106 @@
};
},
methods: {
itemSize(item) {
const pluralize = gl.text.pluralize('layer', item.layers);
return `${item.size}&middot;${item.layers}${pluralize}`;
}
}
}
</script>
<template>
<div class="container-image">
<i
class="fa"
:class="{
'chevron-left': !isOpen,
'chevron-up': isOpen,
}"
aria-hidden="true">
</i>
{{title}}
<div class="container-image-head">
<i
class="fa"
:class="{
'chevron-left': !isOpen,
'chevron-up': isOpen,
}"
aria-hidden="true">
</i>
{{title}}
<clipboard-button
:text=""
:title=""
/>
</div>
<div
class="container-image-tags"
:class="{ hide: !isOpen }">
<table class="table tags" v-if="true">
<thead>
<tr>
<th>{{__("Tag")}}</th>
<th>{{__("Tag ID")}}</th>
<th>{{__("Size")}}</th>
<th>{{__("Created")}}</th>
<th v-if="true"></th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, i) in repo.list"
:key="i">
<td>
{{item.name}}
<clipboard-button
:title="item.location"
:text="item.location"
/>
</td>
<td>
<span
v-tooltip
:title="item.revision"
>
{{item.shortRevision}}
</span>
</td>
<td>
<template v-if="item.size">
{{itemSize(item)}}
</template>
<div v-else class="light">
\-
</div>
</td>
<td>
<template v-if="item.createdAt">
format {{item.createdAt}}
</template>
<div v-else class="light">
\-
</div>
</td>
<td>
<button
type="button"
class="btn btn-remove"
title="Remove tag"
v-tooltip
@click="deleteTag(item)">
<i
class="fa fa-trash cred"
aria-hidden="true">
</i>
</button>
</td>
</tr>
</tbody>
</table>
<div
v-else
class="nothing-here-block">
{{__("No tags in Container Registry for this container image.")}}
</div>
</div>
</div>
</template>
import Clipboard from 'vendor/clipboard';
<script>
import Clipboard from 'vendor/clipboard';
export default {
name: 'clipboardButton',
props: {
......
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