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 {
<slot v-if="isListEmpty && !isLoading" name="empty-state"></slot>
<div v-else-if="isLoading">
<packages-list-loader :is-group="isGroupPage" />
<packages-list-loader />
</div>
<template v-else>
......
app/assets/javascripts/packages/shared/components/package_list_row.vue
View file @ b5eb5df1
<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';
......@@ -13,6 +13,7 @@ export default {
GlIcon,
GlLink,
GlSprintf,
GlTruncate,
PackageTags,
PublishMethod,
ListItem,
......@@ -63,9 +64,13 @@ export default {
<template>
<list-item data-qa-selector="package_row">
<template #left-primary>
<div class="gl-display-flex gl-align-items-center gl-mr-3">
<gl-link :href="packageLink" class="gl-text-body" data-qa-selector="package_link">
{{ packageEntity.name }}
<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"
>
<gl-truncate :text="packageEntity.name" />
</gl-link>
<package-tags
......@@ -88,14 +93,14 @@ export default {
</div>
<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
class="gl-text-body"
class="gl-text-body gl-min-w-0"
data-testid="packages-row-project"
:href="`/${packageEntity.project_path}`"
>
{{ packageEntity.projectPathName }}
<gl-truncate :text="packageEntity.projectPathName" />
</gl-link>
</div>
......
app/assets/javascripts/packages/shared/components/packages_list_loader.vue
View file @ b5eb5df1
......@@ -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="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
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="gl-display-none gl-display-md-flex gl-flex-direction-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"
......
app/assets/javascripts/vue_shared/components/registry/list_item.vue
View file @ b5eb5df1
......@@ -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"
>
<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
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>
<gl-button
......@@ -81,12 +81,15 @@ export default {
@click="toggleDetails"
/>
</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>
</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
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")
- @content_class = "limit-container-width" unless fluid_layout
.row
.col-12
......
app/views/projects/packages/packages/index.html.haml
View file @ b5eb5df1
- page_title _("Package Registry")
- @content_class = "limit-container-width" unless fluid_layout
.row
.col-12
......
app/views/projects/packages/packages/show.html.haml
View file @ b5eb5df1
......@@ -2,6 +2,7 @@
- add_to_breadcrumbs @package.name, project_packages_path(@project)
- breadcrumb_title @package.version
- page_title _("Package Registry")
- @content_class = "limit-container-width" unless fluid_layout
.row
.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 = {
name: 'Test package',
package_type: 'maven',
project_path: 'foo/bar/baz',
projectPathName: 'foo/bar/baz',
project_id: 1,
updated_at: '2015-12-10',
version: '1.0.0',
......@@ -59,6 +60,7 @@ export const npmPackage = {
name: '@Test/package',
package_type: 'npm',
project_path: 'foo/bar/baz',
projectPathName: 'foo/bar/baz',
project_id: 1,
updated_at: '2015-12-10',
version: '',
......@@ -86,6 +88,7 @@ export const conanPackage = {
id: 3,
name: 'conan-package',
project_path: 'foo/bar/baz',
projectPathName: 'foo/bar/baz',
package_files: [],
package_type: 'conan',
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`] = `
class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
>
<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
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
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
class="gl-text-body"
class="gl-text-body gl-min-w-0"
data-qa-selector="package_link"
href="foo"
>
Test package
<gl-truncate-stub
position="end"
text="Test package"
/>
</gl-link-stub>
<!---->
......@@ -39,7 +40,7 @@ exports[`packages_list_row renders 1`] = `
</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
class="gl-display-flex"
......@@ -54,19 +55,20 @@ exports[`packages_list_row renders 1`] = `
class="gl-display-flex gl-align-items-center"
>
<gl-icon-stub
class="gl-ml-3 gl-mr-2"
class="gl-ml-3 gl-mr-2 gl-min-w-0"
name="review-list"
size="16"
/>
<gl-link-stub
class="gl-text-body"
class="gl-text-body gl-min-w-0"
data-testid="packages-row-project"
href="/foo/bar/baz"
>
<gl-truncate-stub
position="end"
text="foo/bar/baz"
/>
</gl-link-stub>
</div>
......@@ -89,7 +91,7 @@ exports[`packages_list_row renders 1`] = `
</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
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', () => {
});
};
const getShapes = () => wrapper.vm.desktopShapes;
const findSquareButton = () => wrapper.find({ ref: 'button-loader' });
const findDesktopShapes = () => wrapper.find('[data-testid="desktop-loader"]');
const findMobileShapes = () => wrapper.find('[data-testid="mobile-loader"]');
beforeEach(createComponent);
......@@ -22,21 +22,30 @@ describe('PackagesListLoader', () => {
wrapper = null;
});
describe('when used for projects', () => {
it('should return 5 rects with last one being a square', () => {
expect(getShapes()).toHaveLength(5);
expect(findSquareButton().exists()).toBe(true);
describe('desktop loader', () => {
it('produces the right loader', () => {
expect(findDesktopShapes().findAll('rect[width="1000"]')).toHaveLength(20);
});
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', () => {
beforeEach(() => {
createComponent({ isGroup: true });
describe('mobile loader', () => {
it('produces the right loader', () => {
expect(findMobileShapes().findAll('rect[height="170"]')).toHaveLength(5);
});
it('should return 5 rects with no square', () => {
expect(getShapes()).toHaveLength(5);
expect(findSquareButton().exists()).toBe(false);
it('has the correct classes', () => {
expect(findMobileShapes().classes()).toEqual([
'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