Adds clipboard button component
This commit is contained in:
parent
13c86bb4ad
commit
23024a70db
3 changed files with 106 additions and 18 deletions
|
@ -1,18 +1,24 @@
|
||||||
<script>
|
<script>
|
||||||
|
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'collapsibeContainerRegisty',
|
name: 'collapsibeContainerRegisty',
|
||||||
props: {
|
props: {
|
||||||
canDelete: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
clipboardContent: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
repoData: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
clipboardButton,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -20,23 +26,106 @@
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
itemSize(item) {
|
||||||
|
const pluralize = gl.text.pluralize('layer', item.layers);
|
||||||
|
return `${item.size}·${item.layers}${pluralize}`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container-image">
|
<div class="container-image">
|
||||||
<i
|
<div class="container-image-head">
|
||||||
class="fa"
|
<i
|
||||||
:class="{
|
class="fa"
|
||||||
'chevron-left': !isOpen,
|
:class="{
|
||||||
'chevron-up': isOpen,
|
'chevron-left': !isOpen,
|
||||||
}"
|
'chevron-up': isOpen,
|
||||||
aria-hidden="true">
|
}"
|
||||||
</i>
|
aria-hidden="true">
|
||||||
{{title}}
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
import Clipboard from 'vendor/clipboard';
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Clipboard from 'vendor/clipboard';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'clipboardButton',
|
name: 'clipboardButton',
|
||||||
props: {
|
props: {
|
||||||
|
|
Loading…
Reference in a new issue