Skip to content

G
gitlab-ce
Commit b5eb5df1 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Kushal Pandya
Browse files
Options

Limit package page width to fluid layout 

- package group list
- package project list
- package details
parent 29ac2713
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 139 deletions
app/assets/javascripts/packages/list/components/packages_list.vue
View file @ b5eb5df1
...@@ -86,7 +86,7 @@ export default { ...@@ -86,7 +86,7 @@ export default {
<slot v-if="isListEmpty && !isLoading" name="empty-state"></slot> <slot v-if="isListEmpty && !isLoading" name="empty-state"></slot>
<div v-else-if="isLoading"> <div v-else-if="isLoading">
<packages-list-loader :is-group="isGroupPage" /> <packages-list-loader />
</div> </div>
<template v-else> <template v-else>
......
app/assets/javascripts/packages/shared/components/package_list_row.vue
View file @ b5eb5df1
<script> <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 PackageTags from './package_tags.vue';
import PublishMethod from './publish_method.vue'; import PublishMethod from './publish_method.vue';
import { getPackageTypeLabel } from '../utils'; import { getPackageTypeLabel } from '../utils';
...@@ -13,6 +13,7 @@ export default { ...@@ -13,6 +13,7 @@ export default {
GlIcon, GlIcon,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTruncate,
PackageTags, PackageTags,
PublishMethod, PublishMethod,
ListItem, ListItem,
...@@ -63,9 +64,13 @@ export default { ...@@ -63,9 +64,13 @@ export default {
<template> <template>
<list-item data-qa-selector="package_row"> <list-item data-qa-selector="package_row">
<template #left-primary> <template #left-primary>
<div class="gl-display-flex gl-align-items-center gl-mr-3"> <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
<gl-link :href="packageLink" class="gl-text-body" data-qa-selector="package_link"> <gl-link
{{ packageEntity.name }} :href="packageLink"
class="gl-text-body gl-min-w-0"
data-qa-selector="package_link"
>
<gl-truncate :text="packageEntity.name" />
</gl-link> </gl-link>
<package-tags <package-tags
...@@ -88,14 +93,14 @@ export default { ...@@ -88,14 +93,14 @@ export default {
</div> </div>
<div v-if="hasProjectLink" class="gl-display-flex gl-align-items-center"> <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-icon name="review-list" class="gl-ml-3 gl-mr-2 gl-min-w-0" />
<gl-link <gl-link
class="gl-text-body" class="gl-text-body gl-min-w-0"
data-testid="packages-row-project" data-testid="packages-row-project"
:href="`/${packageEntity.project_path}`" :href="`/${packageEntity.project_path}`"
> >
{{ packageEntity.projectPathName }} <gl-truncate :text="packageEntity.projectPathName" />
</gl-link> </gl-link>
</div> </div>
......
app/assets/javascripts/packages/shared/components/packages_list_loader.vue
View file @ b5eb5df1
...@@ -5,40 +5,13 @@ export default { ...@@ -5,40 +5,13 @@ export default {
components: { components: {
GlSkeletonLoader, GlSkeletonLoader,
}, },
props: { shapes: [
isGroup: { { type: 'rect', width: '220', height: '10', x: '0', y: '20' },
type: Boolean, { type: 'rect', width: '60', height: '10', x: '305', y: '20' },
required: false, { type: 'rect', width: '60', height: '10', x: '535', y: '20' },
default: false, { type: 'rect', width: '100', height: '10', x: '760', y: '20' },
}, { type: 'rect', width: '30', height: '30', x: '970', y: '10', ref: 'button-loader' },
}, ],
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' },
],
},
rowsToRender: { rowsToRender: {
mobile: 5, mobile: 5,
desktop: 20, desktop: 20,
...@@ -48,34 +21,35 @@ export default { ...@@ -48,34 +21,35 @@ export default {
<template> <template>
<div> <div>
<div class="gl-display-sm-flex gl-flex-direction-column gl-display-md-none"> <div class="gl-flex-direction-column gl-display-sm-none" data-testid="mobile-loader">
<gl-skeleton-loader <gl-skeleton-loader
v-for="index in $options.rowsToRender.mobile" v-for="index in $options.rowsToRender.mobile"
:key="index" :key="index"
:width="500" :width="500"
:height="mobileHeight" :height="170"
preserve-aspect-ratio="xMinYMax meet" preserve-aspect-ratio="xMinYMax meet"
> >
<rect width="500" height="10" x="0" y="15" rx="4" /> <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="45" rx="4" />
<rect width="500" height="10" x="0" y="75" 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 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 width="500" height="10" x="0" y="135" rx="4" />
<rect v-else width="30" height="30" x="470" y="135" rx="4" />
</gl-skeleton-loader> </gl-skeleton-loader>
</div> </div>
<div
<div class="gl-display-none gl-display-md-flex gl-flex-direction-column"> class="gl-display-none gl-display-sm-flex gl-flex-direction-column"
data-testid="desktop-loader"
>
<gl-skeleton-loader <gl-skeleton-loader
v-for="index in $options.rowsToRender.desktop" v-for="index in $options.rowsToRender.desktop"
:key="index" :key="index"
:width="1000" :width="1000"
:height="desktopHeight" :height="54"
preserve-aspect-ratio="xMinYMax meet" preserve-aspect-ratio="xMinYMax meet"
> >
<component <component
:is="r.type" :is="r.type"
v-for="(r, rIndex) in desktopShapes" v-for="(r, rIndex) in $options.shapes"
:key="rIndex" :key="rIndex"
rx="4" rx="4"
v-bind="r" v-bind="r"
......
app/assets/javascripts/vue_shared/components/registry/list_item.vue
View file @ b5eb5df1
...@@ -65,11 +65,11 @@ export default { ...@@ -65,11 +65,11 @@ export default {
class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1" class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
> >
<div <div
class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3" class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
> >
<div <div
v-if="$slots['left-primary']" v-if="$slots['left-primary']"
class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6" class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
> >
<slot name="left-primary"></slot> <slot name="left-primary"></slot>
<gl-button <gl-button
...@@ -81,12 +81,15 @@ export default { ...@@ -81,12 +81,15 @@ export default {
@click="toggleDetails" @click="toggleDetails"
/> />
</div> </div>
<div v-if="$slots['left-secondary']" class="gl-text-gray-500 gl-mt-1 gl-min-h-6"> <div
v-if="$slots['left-secondary']"
class="gl-text-gray-500 gl-mt-1 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
>
<slot name="left-secondary"></slot> <slot name="left-secondary"></slot>
</div> </div>
</div> </div>
<div <div
class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500" class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
> >
<div <div
v-if="$slots['right-primary']" v-if="$slots['right-primary']"
......
app/views/groups/packages/_legacy_package_list.haml deleted 100644 → 0
View file @ 29ac2713
- sort_value = @sort
- sort_title = packages_sort_option_title(sort_value)
- if @packages.any?
.d-flex.justify-content-end
.dropdown.inline.gl-mt-3.gl-mb-3.package-sort-dropdown
.btn-group{ role: 'group' }
.btn-group{ role: 'group' }
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static', 'qa-selector': 'sort-dropdown-button' }, class: 'btn btn-default' }
= sort_title
= icon('chevron-down')
%ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
%li
= sortable_item(sort_title_created_date, package_sort_path(sort: sort_value_recently_created), sort_title)
= sortable_item(sort_title_name, package_sort_path(sort: sort_value_name_desc), sort_title)
= sortable_item(sort_title_project_name, package_sort_path(sort: sort_value_project_name_desc), sort_title)
= sortable_item(sort_title_version, package_sort_path(sort: sort_value_version_desc), sort_title)
= sortable_item(sort_title_type, package_sort_path(sort: sort_value_type_desc), sort_title)
= packages_sort_direction_button(sort_value)
.table-holder
.gl-responsive-table-row.table-row-header.bg-secondary-50.px-2.border-top{ role: 'row' }
.table-section.section-30{ role: 'rowheader' }
= _('Name')
.table-section.section-20{ role: 'rowheader' }
= _('Project')
.table-section.section-20{ role: 'rowheader' }
= _('Version')
.table-section.section-10{ role: 'rowheader' }
= _('Type')
.table-section.section-20{ role: 'rowheader' }
= _('Created')
- @packages.each do |package|
.gl-responsive-table-row{ data: { 'qa-selector': 'package-row' } }
.table-section.section-30
.table-mobile-header{ role: "rowheader" }= _("Name")
.table-mobile-content.flex-truncate-parent
= link_to package.name, project_package_path(package.project, package), class: 'flex-truncate-child'
.table-section.section-20
.table-mobile-header{ role: "rowheader" }= _("Project")
.table-mobile-content
= link_to_project(package.project)
.table-section.section-20
.table-mobile-header{ role: "rowheader" }= _("Version")
.table-mobile-content
= package.version
.table-section.section-10
.table-mobile-header{ role: "rowheader" }= _("Type")
.table-mobile-content
= package.package_type
.table-section.section-20
.table-mobile-header{ role: "rowheader" }= _("Created")
.table-mobile-content
= time_ago_with_tooltip(package.created_at)
= paginate @packages, theme: "gitlab"
- else
.row.empty-state
.col-12
= render 'shared/packages/no_packages'
app/views/groups/packages/index.html.haml
View file @ b5eb5df1
- page_title _("Package Registry") - page_title _("Package Registry")
- @content_class = "limit-container-width" unless fluid_layout
.row .row
.col-12 .col-12
......
app/views/projects/packages/packages/index.html.haml
View file @ b5eb5df1
- page_title _("Package Registry") - page_title _("Package Registry")
- @content_class = "limit-container-width" unless fluid_layout
.row .row
.col-12 .col-12
......
app/views/projects/packages/packages/show.html.haml
View file @ b5eb5df1
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
- add_to_breadcrumbs @package.name, project_packages_path(@project) - add_to_breadcrumbs @package.name, project_packages_path(@project)
- breadcrumb_title @package.version - breadcrumb_title @package.version
- page_title _("Package Registry") - page_title _("Package Registry")
- @content_class = "limit-container-width" unless fluid_layout
.row .row
.col-12 .col-12
......
changelogs/unreleased/225467-package-registry-adjust-the-max-width-for-non-fluid-screens-to-be-.yml 0 → 100644
View file @ b5eb5df1
---
title: 'Package Registry: Adjust the max width for non-fluid screens to be 990'
merge_request: 41549
author:
type: changed
spec/frontend/packages/mock_data.js
View file @ b5eb5df1
...@@ -30,6 +30,7 @@ export const mavenPackage = { ...@@ -30,6 +30,7 @@ export const mavenPackage = {
name: 'Test package', name: 'Test package',
package_type: 'maven', package_type: 'maven',
project_path: 'foo/bar/baz', project_path: 'foo/bar/baz',
projectPathName: 'foo/bar/baz',
project_id: 1, project_id: 1,
updated_at: '2015-12-10', updated_at: '2015-12-10',
version: '1.0.0', version: '1.0.0',
...@@ -59,6 +60,7 @@ export const npmPackage = { ...@@ -59,6 +60,7 @@ export const npmPackage = {
name: '@Test/package', name: '@Test/package',
package_type: 'npm', package_type: 'npm',
project_path: 'foo/bar/baz', project_path: 'foo/bar/baz',
projectPathName: 'foo/bar/baz',
project_id: 1, project_id: 1,
updated_at: '2015-12-10', updated_at: '2015-12-10',
version: '', version: '',
...@@ -86,6 +88,7 @@ export const conanPackage = { ...@@ -86,6 +88,7 @@ export const conanPackage = {
id: 3, id: 3,
name: 'conan-package', name: 'conan-package',
project_path: 'foo/bar/baz', project_path: 'foo/bar/baz',
projectPathName: 'foo/bar/baz',
package_files: [], package_files: [],
package_type: 'conan', package_type: 'conan',
project_id: 1, project_id: 1,
......
spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
View file @ b5eb5df1
...@@ -14,22 +14,23 @@ exports[`packages_list_row renders 1`] = ` ...@@ -14,22 +14,23 @@ exports[`packages_list_row renders 1`] = `
class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1" class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
> >
<div <div
class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3" class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6" class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-mr-3" class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"
> >
<gl-link-stub <gl-link-stub
class="gl-text-body" class="gl-text-body gl-min-w-0"
data-qa-selector="package_link" data-qa-selector="package_link"
href="foo" href="foo"
> >
<gl-truncate-stub
Test package position="end"
text="Test package"
/>
</gl-link-stub> </gl-link-stub>
<!----> <!---->
...@@ -39,7 +40,7 @@ exports[`packages_list_row renders 1`] = ` ...@@ -39,7 +40,7 @@ exports[`packages_list_row renders 1`] = `
</div> </div>
<div <div
class="gl-text-gray-500 gl-mt-1 gl-min-h-6" class="gl-text-gray-500 gl-mt-1 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
> >
<div <div
class="gl-display-flex" class="gl-display-flex"
...@@ -54,19 +55,20 @@ exports[`packages_list_row renders 1`] = ` ...@@ -54,19 +55,20 @@ exports[`packages_list_row renders 1`] = `
class="gl-display-flex gl-align-items-center" class="gl-display-flex gl-align-items-center"
> >
<gl-icon-stub <gl-icon-stub
class="gl-ml-3 gl-mr-2" class="gl-ml-3 gl-mr-2 gl-min-w-0"
name="review-list" name="review-list"
size="16" size="16"
/> />
<gl-link-stub <gl-link-stub
class="gl-text-body" class="gl-text-body gl-min-w-0"
data-testid="packages-row-project" data-testid="packages-row-project"
href="/foo/bar/baz" href="/foo/bar/baz"
> >
<gl-truncate-stub
position="end"
text="foo/bar/baz"
/>
</gl-link-stub> </gl-link-stub>
</div> </div>
...@@ -89,7 +91,7 @@ exports[`packages_list_row renders 1`] = ` ...@@ -89,7 +91,7 @@ exports[`packages_list_row renders 1`] = `
</div> </div>
<div <div
class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500" class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
> >
<div <div
class="gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6" class="gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
......
spec/frontend/packages/shared/components/packages_list_loader_spec.js
View file @ b5eb5df1
...@@ -12,8 +12,8 @@ describe('PackagesListLoader', () => { ...@@ -12,8 +12,8 @@ describe('PackagesListLoader', () => {
}); });
}; };
const getShapes = () => wrapper.vm.desktopShapes; const findDesktopShapes = () => wrapper.find('[data-testid="desktop-loader"]');
const findSquareButton = () => wrapper.find({ ref: 'button-loader' }); const findMobileShapes = () => wrapper.find('[data-testid="mobile-loader"]');
beforeEach(createComponent); beforeEach(createComponent);
...@@ -22,21 +22,30 @@ describe('PackagesListLoader', () => { ...@@ -22,21 +22,30 @@ describe('PackagesListLoader', () => {
wrapper = null; wrapper = null;
}); });
describe('when used for projects', () => { describe('desktop loader', () => {
it('should return 5 rects with last one being a square', () => { it('produces the right loader', () => {
expect(getShapes()).toHaveLength(5); expect(findDesktopShapes().findAll('rect[width="1000"]')).toHaveLength(20);
expect(findSquareButton().exists()).toBe(true); });
it('has the correct classes', () => {
expect(findDesktopShapes().classes()).toEqual([
'gl-display-none',
'gl-display-sm-flex',
'gl-flex-direction-column',
]);
}); });
}); });
describe('when used for groups', () => { describe('mobile loader', () => {
beforeEach(() => { it('produces the right loader', () => {
createComponent({ isGroup: true }); expect(findMobileShapes().findAll('rect[height="170"]')).toHaveLength(5);
}); });
it('should return 5 rects with no square', () => { it('has the correct classes', () => {
expect(getShapes()).toHaveLength(5); expect(findMobileShapes().classes()).toEqual([
expect(findSquareButton().exists()).toBe(false); 'gl-flex-direction-column',
'gl-display-sm-none',
]);
}); });
}); });
}); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7