diff options
author | Nick Kipling <nkipling@gitlab.com> | 2019-07-24 19:38:39 +0100 |
---|---|---|
committer | Nathan Friend <nathan@gitlab.com> | 2019-07-30 13:49:48 -0300 |
commit | a37d672ff5c4c102a5b507ad744919748cbdcb34 (patch) | |
tree | 32de62b55689bc1b26ed9063b8467dfa382846d0 /app/assets | |
parent | c2d1fbe507cc1732927ca7c656078cf47754ceeb (diff) | |
download | gitlab-ce-a37d672ff5c4c102a5b507ad744919748cbdcb34.tar.gz |
Applying feedback changes
Updated table registry to remove singleItemToBeDeleted
Renamed usages of idx to index
Tidied and simplified css styling
Added clarification comment to test regex
Updated pot file
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/registry/components/table_registry.vue | 66 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/container_registry.scss | 24 |
2 files changed, 45 insertions, 45 deletions
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index ff9f8871a8c..90d6a4ce27f 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -38,7 +38,6 @@ export default { }, data() { return { - singleItemToBeDeleted: null, itemsToBeDeleted: [], modalId: `confirm-image-deletion-modal-${this.repo.id}`, selectAllChecked: false, @@ -52,19 +51,20 @@ export default { return this.repo.pagination.total > this.repo.pagination.perPage; }, modalTitle() { - if (this.singleItemSelected) { - return s__('ContainerRegistry|Remove image'); - } - return s__('ContainerRegistry|Remove images'); + return n__( + 'ContainerRegistry|Remove image', + 'ContainerRegistry|Remove images', + this.singleItemSelected ? 1 : this.itemsToBeDeleted.length, + ); }, modalDescription() { const selectedCount = this.itemsToBeDeleted.length; if (this.singleItemSelected) { - const { tag } = - this.singleItemToBeDeleted !== null - ? this.repo.list[this.singleItemToBeDeleted] - : this.repo.list[this.itemsToBeDeleted[0]]; + // Attempt to pull 'single' property if it's an object in this.itemsToBeDeleted + // Otherwise, simply use the int value of the selected row + const { single: itemIndex = this.itemsToBeDeleted[0] } = this.itemsToBeDeleted[0]; + const { tag } = this.repo.list[itemIndex]; return sprintf( s__(`ContainerRegistry|You are about to delete the image <b>%{title}</b>. This will @@ -80,7 +80,10 @@ export default { ); }, singleItemSelected() { - return this.singleItemToBeDeleted !== null || this.itemsToBeDeleted.length === 1; + return this.findSingleRowToDelete || this.itemsToBeDeleted.length === 1; + }, + findSingleRowToDelete() { + return this.itemsToBeDeleted.find(x => x.single !== undefined); }, }, methods: { @@ -91,22 +94,25 @@ export default { formatSize(size) { return numberToHumanSize(size); }, - setSingleItemToBeDeleted(idx) { - this.singleItemToBeDeleted = idx; + addSingleItemToBeDeleted(index) { + this.itemsToBeDeleted.push({ single: index }); }, - resetSingleItemToBeDeleted() { - this.singleItemToBeDeleted = null; + removeSingleItemToBeDeleted() { + const singleIndex = this.itemsToBeDeleted.findIndex(x => x.single !== undefined); + + if (singleIndex > -1) { + this.itemsToBeDeleted.splice(singleIndex, 1); + } }, handleDeleteRegistry() { let { itemsToBeDeleted } = this; - this.itemsToBeDeleted = []; - if (this.singleItemToBeDeleted !== null) { - const { singleItemToBeDeleted } = this; - this.singleItemToBeDeleted = null; - itemsToBeDeleted = [singleItemToBeDeleted]; + if (this.findSingleRowToDelete) { + itemsToBeDeleted = [this.findSingleRowToDelete.single]; } + this.itemsToBeDeleted = []; + if (this.bulkDeletePath) { this.deleteItems({ path: this.bulkDeletePath, @@ -134,21 +140,21 @@ export default { } }, selectAll() { - this.itemsToBeDeleted = this.repo.list.map((x, idx) => idx); + this.itemsToBeDeleted = this.repo.list.map((x, index) => index); this.selectAllChecked = true; }, deselectAll() { this.itemsToBeDeleted = []; this.selectAllChecked = false; }, - updateItemsToBeDeleted(idx) { - const delIdx = this.itemsToBeDeleted.findIndex(x => x === idx); + updateItemsToBeDeleted(index) { + const delIndex = this.itemsToBeDeleted.findIndex(x => x === index); - if (delIdx > -1) { - this.itemsToBeDeleted.splice(delIdx, 1); + if (delIndex > -1) { + this.itemsToBeDeleted.splice(delIndex, 1); this.selectAllChecked = false; } else { - this.itemsToBeDeleted.push(idx); + this.itemsToBeDeleted.push(index); if (this.itemsToBeDeleted.length === this.repo.list.length) { this.selectAllChecked = true; @@ -191,13 +197,13 @@ export default { </tr> </thead> <tbody> - <tr v-for="(item, idx) in repo.list" :key="item.tag"> + <tr v-for="(item, index) in repo.list" :key="item.tag" class="image-row"> <td class="check"> <gl-form-checkbox v-if="item.canDelete" class="js-select-checkbox" - :checked="itemsToBeDeleted && itemsToBeDeleted.includes(idx)" - @change="updateItemsToBeDeleted(idx)" + :checked="itemsToBeDeleted && itemsToBeDeleted.includes(index)" + @change="updateItemsToBeDeleted(index)" /> </td> <td class="monospace"> @@ -236,7 +242,7 @@ export default { :aria-label="s__('ContainerRegistry|Remove image')" variant="danger" class="js-delete-registry-row float-right btn-inverted btn-border-color btn-icon" - @click="setSingleItemToBeDeleted(idx)" + @click="addSingleItemToBeDeleted(index)" > <icon name="remove" /> </gl-button> @@ -255,7 +261,7 @@ export default { :modal-id="modalId" ok-variant="danger" @ok="handleDeleteRegistry" - @cancel="resetSingleItemToBeDeleted" + @cancel="removeSingleItemToBeDeleted" > <template v-slot:modal-title>{{ modalTitle }}</template> <template v-slot:modal-ok>{{ s__('ContainerRegistry|Remove image(s) and tags') }}</template> diff --git a/app/assets/stylesheets/pages/container_registry.scss b/app/assets/stylesheets/pages/container_registry.scss index ed9de6f7e30..6e6a3a1a394 100644 --- a/app/assets/stylesheets/pages/container_registry.scss +++ b/app/assets/stylesheets/pages/container_registry.scss @@ -32,26 +32,20 @@ .table.tags { margin-bottom: 0; - th { - height: 55px; - } - - tr { - &:hover { - td { - &.action-buttons { - opacity: 1; - } - } - } - - td.check { + .image-row { + .check { padding-right: $gl-padding; width: 5%; } - td.action-buttons { + .action-buttons { opacity: 0; } + + &:hover { + .action-buttons { + opacity: 1; + } + } } } |