diff options
Diffstat (limited to 'app/assets/javascripts/packages/shared/components')
4 files changed, 61 insertions, 79 deletions
diff --git a/app/assets/javascripts/packages/shared/components/package_list_row.vue b/app/assets/javascripts/packages/shared/components/package_list_row.vue index e000279b794..f93bc51d185 100644 --- a/app/assets/javascripts/packages/shared/components/package_list_row.vue +++ b/app/assets/javascripts/packages/shared/components/package_list_row.vue @@ -1,9 +1,10 @@ <script> -import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui'; import PackageTags from './package_tags.vue'; import PublishMethod from './publish_method.vue'; import { getPackageTypeLabel } from '../utils'; import timeagoMixin from '~/vue_shared/mixins/timeago'; +import ListItem from '~/vue_shared/components/registry/list_item.vue'; export default { name: 'PackageListRow', @@ -12,8 +13,10 @@ export default { GlIcon, GlLink, GlSprintf, + GlTruncate, PackageTags, PublishMethod, + ListItem, }, directives: { GlTooltip: GlTooltipDirective, @@ -59,15 +62,15 @@ export default { </script> <template> - <div class="gl-responsive-table-row" data-qa-selector="packages-row"> - <div class="table-section section-50 d-flex flex-md-column justify-content-between flex-wrap"> - <div class="d-flex align-items-center mr-2"> + <list-item data-qa-selector="package_row"> + <template #left-primary> + <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"> <gl-link :href="packageLink" + class="gl-text-body gl-min-w-0" data-qa-selector="package_link" - class="text-dark font-weight-bold mb-md-1" > - {{ packageEntity.name }} + <gl-truncate :text="packageEntity.name" /> </gl-link> <package-tags @@ -78,41 +81,42 @@ export default { :tag-display-limit="1" /> </div> - - <div class="d-flex text-secondary text-truncate mt-md-2"> + </template> + <template #left-secondary> + <div class="gl-display-flex"> <span>{{ packageEntity.version }}</span> - <div v-if="hasPipeline" class="d-none d-md-inline-block ml-1"> + <div v-if="hasPipeline" class="gl-display-none gl-display-sm-flex gl-ml-2"> <gl-sprintf :message="s__('PackageRegistry|published by %{author}')"> <template #author>{{ packageEntity.pipeline.user.name }}</template> </gl-sprintf> </div> - <div v-if="hasProjectLink" class="d-flex align-items-center"> - <gl-icon name="review-list" class="text-secondary ml-2 mr-1" /> + <div v-if="hasProjectLink" class="gl-display-flex gl-align-items-center"> + <gl-icon name="review-list" class="gl-ml-3 gl-mr-2 gl-min-w-0" /> <gl-link + class="gl-text-body gl-min-w-0" data-testid="packages-row-project" :href="`/${packageEntity.project_path}`" - class="text-secondary" - >{{ packageEntity.projectPathName }}</gl-link > + <gl-truncate :text="packageEntity.projectPathName" /> + </gl-link> </div> <div v-if="showPackageType" class="d-flex align-items-center" data-testid="package-type"> - <gl-icon name="package" class="text-secondary ml-2 mr-1" /> + <gl-icon name="package" class="gl-ml-3 gl-mr-2" /> <span>{{ packageType }}</span> </div> </div> - </div> + </template> - <div - class="table-section d-flex flex-md-column justify-content-between align-items-md-end" - :class="disableDelete ? 'section-50' : 'section-40'" - > + <template #right-primary> <publish-method :package-entity="packageEntity" :is-group="isGroup" /> + </template> - <div class="text-secondary order-0 order-md-1 mt-md-2"> + <template #right-secondary> + <span> <gl-sprintf :message="__('Created %{timestamp}')"> <template #timestamp> <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)"> @@ -120,10 +124,10 @@ export default { </span> </template> </gl-sprintf> - </div> - </div> + </span> + </template> - <div v-if="!disableDelete" class="table-section section-10 d-flex justify-content-end"> + <template v-if="!disableDelete" #right-action> <gl-button data-testid="action-delete" icon="remove" @@ -134,6 +138,6 @@ export default { :disabled="!packageEntity._links.delete_api_path" @click="$emit('packageToDelete', packageEntity)" /> - </div> - </div> + </template> + </list-item> </template> diff --git a/app/assets/javascripts/packages/shared/components/package_tags.vue b/app/assets/javascripts/packages/shared/components/package_tags.vue index 391f53c225b..3d7e233c1ba 100644 --- a/app/assets/javascripts/packages/shared/components/package_tags.vue +++ b/app/assets/javascripts/packages/shared/components/package_tags.vue @@ -80,6 +80,7 @@ export default { data-testid="tagBadge" :class="tagBadgeClass(index)" variant="info" + size="sm" >{{ tag.name }}</gl-badge > @@ -89,7 +90,8 @@ export default { data-testid="moreBadge" variant="muted" :title="moreTagsTooltip" - class="gl-display-none d-md-flex gl-ml-2" + size="sm" + class="gl-display-none gl-display-md-flex gl-ml-2" ><gl-sprintf :message="__('+%{tags} more')"> <template #tags> {{ moreTagsDisplay }} @@ -101,7 +103,7 @@ export default { v-if="moreTagsDisplay && hideLabel" data-testid="moreBadge" variant="muted" - class="d-md-none gl-ml-2" + class="gl-display-md-none gl-ml-2" >{{ tagsDisplay }}</gl-badge > </div> diff --git a/app/assets/javascripts/packages/shared/components/packages_list_loader.vue b/app/assets/javascripts/packages/shared/components/packages_list_loader.vue index cd9ef74d467..efd9f8db908 100644 --- a/app/assets/javascripts/packages/shared/components/packages_list_loader.vue +++ b/app/assets/javascripts/packages/shared/components/packages_list_loader.vue @@ -5,40 +5,13 @@ export default { components: { GlSkeletonLoader, }, - props: { - isGroup: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - desktopShapes() { - return this.isGroup ? this.$options.shapes.groups : this.$options.shapes.projects; - }, - desktopHeight() { - return this.isGroup ? 38 : 54; - }, - mobileHeight() { - return this.isGroup ? 160 : 170; - }, - }, - shapes: { - groups: [ - { type: 'rect', width: '100', height: '10', x: '0', y: '15' }, - { type: 'rect', width: '100', height: '10', x: '195', y: '15' }, - { type: 'rect', width: '60', height: '10', x: '475', y: '15' }, - { type: 'rect', width: '60', height: '10', x: '675', y: '15' }, - { type: 'rect', width: '100', height: '10', x: '900', y: '15' }, - ], - projects: [ - { type: 'rect', width: '220', height: '10', x: '0', y: '20' }, - { type: 'rect', width: '60', height: '10', x: '305', y: '20' }, - { type: 'rect', width: '60', height: '10', x: '535', y: '20' }, - { type: 'rect', width: '100', height: '10', x: '760', y: '20' }, - { type: 'rect', width: '30', height: '30', x: '970', y: '10', ref: 'button-loader' }, - ], - }, + shapes: [ + { type: 'rect', width: '220', height: '10', x: '0', y: '20' }, + { type: 'rect', width: '60', height: '10', x: '305', y: '20' }, + { type: 'rect', width: '60', height: '10', x: '535', y: '20' }, + { type: 'rect', width: '100', height: '10', x: '760', y: '20' }, + { type: 'rect', width: '30', height: '30', x: '970', y: '10', ref: 'button-loader' }, + ], rowsToRender: { mobile: 5, desktop: 20, @@ -48,34 +21,35 @@ export default { <template> <div> - <div class="d-xs-flex flex-column d-md-none"> + <div class="gl-flex-direction-column gl-display-sm-none" data-testid="mobile-loader"> <gl-skeleton-loader v-for="index in $options.rowsToRender.mobile" :key="index" :width="500" - :height="mobileHeight" + :height="170" preserve-aspect-ratio="xMinYMax meet" > <rect width="500" height="10" x="0" y="15" rx="4" /> <rect width="500" height="10" x="0" y="45" rx="4" /> <rect width="500" height="10" x="0" y="75" rx="4" /> <rect width="500" height="10" x="0" y="105" rx="4" /> - <rect v-if="isGroup" width="500" height="10" x="0" y="135" rx="4" /> - <rect v-else width="30" height="30" x="470" y="135" rx="4" /> + <rect width="500" height="10" x="0" y="135" rx="4" /> </gl-skeleton-loader> </div> - - <div class="d-none d-md-flex flex-column"> + <div + class="gl-display-none gl-display-sm-flex gl-flex-direction-column" + data-testid="desktop-loader" + > <gl-skeleton-loader v-for="index in $options.rowsToRender.desktop" :key="index" :width="1000" - :height="desktopHeight" + :height="54" preserve-aspect-ratio="xMinYMax meet" > <component :is="r.type" - v-for="(r, rIndex) in desktopShapes" + v-for="(r, rIndex) in $options.shapes" :key="rIndex" rx="4" v-bind="r" diff --git a/app/assets/javascripts/packages/shared/components/publish_method.vue b/app/assets/javascripts/packages/shared/components/publish_method.vue index 1e18562a421..d17e23c4032 100644 --- a/app/assets/javascripts/packages/shared/components/publish_method.vue +++ b/app/assets/javascripts/packages/shared/components/publish_method.vue @@ -36,26 +36,28 @@ export default { </script> <template> - <div class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1"> + <div class="gl-display-flex gl-align-items-center"> <template v-if="hasPipeline"> - <gl-icon name="git-merge" class="mr-1" /> - <strong ref="pipeline-ref" class="mr-1 text-dark">{{ packageEntity.pipeline.ref }}</strong> + <gl-icon name="git-merge" class="gl-mr-2" /> + <span data-testid="pipeline-ref" class="gl-mr-2">{{ packageEntity.pipeline.ref }}</span> - <gl-icon name="commit" class="mr-1" /> - <gl-link ref="pipeline-sha" :href="linkToCommit" class="mr-1">{{ packageShaShort }}</gl-link> + <gl-icon name="commit" class="gl-mr-2" /> + <gl-link data-testid="pipeline-sha" :href="linkToCommit" class="gl-mr-2">{{ + packageShaShort + }}</gl-link> <clipboard-button :text="packageEntity.pipeline.sha" :title="__('Copy commit SHA')" - css-class="border-0 text-secondary py-0 px-1" + css-class="gl-border-0 gl-py-0 gl-px-2" /> </template> <template v-else> - <gl-icon name="upload" class="mr-1" /> - <strong ref="manual-ref" class="text-dark">{{ - s__('PackageRegistry|Manually Published') - }}</strong> + <gl-icon name="upload" class="gl-mr-2" /> + <span data-testid="manually-published"> + {{ s__('PackageRegistry|Manually Published') }} + </span> </template> </div> </template> |