Skip to content

G
gitlab-ce
Commit 83bec651 authored by Tom Quirk's avatar Tom Quirk
Browse files
Options

Optimize click area in design version dropdown 

- remove <strong> tag
- use pajamas-conforming dropdown checked icon
- update specs
parent 2353e28f
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 110 deletions
app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
View file @ 83bec651
......@@ -33,12 +33,12 @@ export default {
},
dropdownText() {
if (this.isLatestVersion) {
return __('Showing Latest Version');
return __('Showing latest version');
}
// allVersions is sorted in reverse chronological order (latest first)
const currentVersionNumber = this.allVersions.length - this.currentVersionIdx;
return sprintf(__('Showing Version #%{versionNumber}'), {
return sprintf(__('Showing version #%{versionNumber}'), {
versionNumber: currentVersionNumber,
});
},
......@@ -50,25 +50,20 @@ export default {
</script>
<template>
<gl-new-dropdown :text="dropdownText" size="small" class="design-version-dropdown">
<gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.id">
<router-link
class="d-flex js-version-link"
:to="{ path: $route.path, query: { version: findVersionId(version.id) } }"
<gl-new-dropdown :text="dropdownText" size="small">
<gl-new-dropdown-item
v-for="(version, index) in allVersions"
:key="version.id"
:is-check-item="true"
:is-checked="findVersionId(version.id) === currentVersionId"
@click="$router.push({ path: $route.path, query: { version: findVersionId(version.id) } })"
>
<div class="flex-grow-1 ml-2">
<div>
<strong
>{{ __('Version') }} {{ allVersions.length - index }}
<span v-if="findVersionId(version.id) === latestVersionId">({{ __('latest') }})</span>
</strong>
</div>
</div>
<i
v-if="findVersionId(version.id) === currentVersionId"
class="fa fa-check float-right gl-mr-2"
></i>
</router-link>
<template>
{{ __('Version') }} {{ allVersions.length - index }}
<template v-if="findVersionId(version.id) === latestVersionId"
>({{ __('latest') }})</template
>
</template>
</gl-new-dropdown-item>
</gl-new-dropdown>
</template>
changelogs/unreleased/229505-optimize-click-area-in-design-version-dropdown.yml 0 → 100644
View file @ 83bec651
---
title: Optimize click area in design version dropdown
merge_request: 38747
author:
type: fixed
locale/gitlab.pot
View file @ 83bec651
......@@ -22230,6 +22230,12 @@ msgstr ""
msgid "Showing last %{size} of log -"
msgstr ""
msgid "Showing latest version"
msgstr ""
msgid "Showing version #%{versionNumber}"
msgstr ""
msgid "Side-by-side"
msgstr ""
......
spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
View file @ 83bec651
......@@ -3,12 +3,11 @@
exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
<gl-new-dropdown-stub
category="tertiary"
class="design-version-dropdown"
headertext=""
issueiid=""
projectpath=""
size="small"
text="Showing Latest Version"
text="Showing latest version"
variant="default"
>
<gl-new-dropdown-item-stub
......@@ -16,56 +15,26 @@ exports[`Design management design version dropdown component renders design vers
iconcolor=""
iconname=""
iconrightname=""
ischecked="true"
ischeckitem="true"
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
>
<div
class="flex-grow-1 ml-2"
>
<div>
<strong>
Version 2
<span>
Version 2
(latest)
</span>
</strong>
</div>
</div>
<i
class="fa fa-check float-right gl-mr-2"
/>
</router-link-stub>
</gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
ischeckitem="true"
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
>
<div
class="flex-grow-1 ml-2"
>
<div>
<strong>
Version 1
<!---->
</strong>
</div>
</div>
Version 1
<!---->
</router-link-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
`;
......@@ -73,12 +42,11 @@ exports[`Design management design version dropdown component renders design vers
exports[`Design management design version dropdown component renders design version list 1`] = `
<gl-new-dropdown-stub
category="tertiary"
class="design-version-dropdown"
headertext=""
issueiid=""
projectpath=""
size="small"
text="Showing Latest Version"
text="Showing latest version"
variant="default"
>
<gl-new-dropdown-item-stub
......@@ -86,56 +54,26 @@ exports[`Design management design version dropdown component renders design vers
iconcolor=""
iconname=""
iconrightname=""
ischecked="true"
ischeckitem="true"
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
>
<div
class="flex-grow-1 ml-2"
>
<div>
<strong>
Version 2
<span>
Version 2
(latest)
</span>
</strong>
</div>
</div>
<i
class="fa fa-check float-right gl-mr-2"
/>
</router-link-stub>
</gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
ischeckitem="true"
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
>
<div
class="flex-grow-1 ml-2"
>
<div>
<strong>
Version 1
<!---->
</strong>
</div>
</div>
Version 1
<!---->
</router-link-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
`;
spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
View file @ 83bec651
......@@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => {
wrapper.destroy();
});
const findVersionLink = index => wrapper.findAll('.js-version-link').at(index);
const findVersionLink = index => wrapper.findAll(GlNewDropdownItem).at(index);
it('renders design version dropdown button', () => {
createComponent();
......@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => {
createComponent();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
});
});
......@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ maxVersions: 1 });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
});
});
......@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing Version #1`);
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing version #1`);
});
});
......@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
});
});
......
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