Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
3cd4a7de
Commit
3cd4a7de
authored
Sep 02, 2020
by
Jeremy Elder
Committed by
Martin Wortschack
Sep 02, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Migrate buttons to new components in …settings_dropdown.vue
parent
c9450eab
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
91 additions
and
80 deletions
+91
-80
app/assets/javascripts/diffs/components/settings_dropdown.vue
...assets/javascripts/diffs/components/settings_dropdown.vue
+70
-67
changelogs/unreleased/229320-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml
...trap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml
+5
-0
locale/gitlab.pot
locale/gitlab.pot
+3
-0
spec/frontend/diffs/components/settings_dropdown_spec.js
spec/frontend/diffs/components/settings_dropdown_spec.js
+13
-13
No files found.
app/assets/javascripts/diffs/components/settings_dropdown.vue
View file @
3cd4a7de
<
script
>
import
{
mapActions
,
mapGetters
,
mapState
}
from
'
vuex
'
;
import
{
GlDeprecatedButton
,
GlIcon
}
from
'
@gitlab/ui
'
;
import
{
GlButtonGroup
,
GlButton
,
GlDropdown
}
from
'
@gitlab/ui
'
;
import
{
__
}
from
'
~/locale
'
;
export
default
{
components
:
{
GlDeprecatedButton
,
GlIcon
,
GlButtonGroup
,
GlButton
,
GlDropdown
,
},
computed
:
{
...
mapGetters
(
'
diffs
'
,
[
'
isInlineView
'
,
'
isParallelView
'
]),
...
mapState
(
'
diffs
'
,
[
'
renderTreeList
'
,
'
showWhitespace
'
]),
},
mounted
()
{
this
.
patchAriaLabel
();
},
updated
()
{
this
.
patchAriaLabel
();
},
methods
:
{
...
mapActions
(
'
diffs
'
,
[
'
setInlineDiffViewType
'
,
...
...
@@ -18,74 +26,69 @@ export default {
'
setRenderTreeList
'
,
'
setShowWhitespace
'
,
]),
patchAriaLabel
()
{
this
.
$el
.
querySelector
(
'
.js-show-diff-settings
'
)
.
setAttribute
(
'
aria-label
'
,
__
(
'
Diff view settings
'
));
},
},
};
</
script
>
<
template
>
<div
class=
"dropdown"
>
<button
type=
"button"
class=
"btn btn-default js-show-diff-settings"
data-toggle=
"dropdown"
data-display=
"static"
>
<gl-icon
name=
"settings"
/>
<gl-icon
name=
"chevron-down"
/>
</button>
<div
class=
"dropdown-menu dropdown-menu-right p-2 pt-3 pb-3"
>
<div>
<span
class=
"bold d-block mb-1"
>
{{
__
(
'
File browser
'
)
}}
</span>
<div
class=
"btn-group d-flex"
>
<gl-deprecated-button
:class=
"
{ active: !renderTreeList }"
class="w-100 js-list-view"
@click="setRenderTreeList(false)"
>
{{
__
(
'
List view
'
)
}}
</gl-deprecated-button>
<gl-deprecated-button
:class=
"
{ active: renderTreeList }"
class="w-100 js-tree-view"
@click="setRenderTreeList(true)"
>
{{
__
(
'
Tree view
'
)
}}
</gl-deprecated-button>
</div>
</div>
<div
class=
"mt-2"
>
<span
class=
"bold d-block mb-1"
>
{{
__
(
'
Compare changes
'
)
}}
</span>
<div
class=
"btn-group d-flex js-diff-view-buttons"
>
<gl-deprecated-button
id=
"inline-diff-btn"
:class=
"
{ active: isInlineView }"
class="w-100 js-inline-diff-button"
data-view-type="inline"
@click="setInlineDiffViewType"
>
{{
__
(
'
Inline
'
)
}}
</gl-deprecated-button>
<gl-deprecated-button
id=
"parallel-diff-btn"
:class=
"
{ active: isParallelView }"
class="w-100 js-parallel-diff-button"
data-view-type="parallel"
@click="setParallelDiffViewType"
>
{{
__
(
'
Side-by-side
'
)
}}
</gl-deprecated-button>
</div>
</div>
<div
class=
"mt-2"
>
<label
class=
"mb-0"
>
<input
id=
"show-whitespace"
type=
"checkbox"
:checked=
"showWhitespace"
@
change=
"setShowWhitespace(
{ showWhitespace: $event.target.checked, pushState: true })"
/>
{{
__
(
'
Show whitespace changes
'
)
}}
</label>
</div>
<gl-dropdown
icon=
"settings"
toggle-class=
"js-show-diff-settings"
right
>
<div
class=
"gl-px-3"
>
<span
class=
"gl-font-weight-bold gl-display-block gl-mb-2"
>
{{
__
(
'
File browser
'
)
}}
</span>
<gl-button-group
class=
"gl-display-flex"
>
<gl-button
:class=
"
{ selected: !renderTreeList }"
class="gl-w-half js-list-view"
@click="setRenderTreeList(false)"
>
{{
__
(
'
List view
'
)
}}
</gl-button>
<gl-button
:class=
"
{ selected: renderTreeList }"
class="gl-w-half js-tree-view"
@click="setRenderTreeList(true)"
>
{{
__
(
'
Tree view
'
)
}}
</gl-button>
</gl-button-group>
</div>
<div
class=
"gl-mt-3 gl-px-3"
>
<span
class=
"gl-font-weight-bold gl-display-block gl-mb-2"
>
{{
__
(
'
Compare changes
'
)
}}
</span>
<gl-button-group
class=
"gl-display-flex js-diff-view-buttons"
>
<gl-button
id=
"inline-diff-btn"
:class=
"
{ selected: isInlineView }"
class="gl-w-half js-inline-diff-button"
data-view-type="inline"
@click="setInlineDiffViewType"
>
{{
__
(
'
Inline
'
)
}}
</gl-button>
<gl-button
id=
"parallel-diff-btn"
:class=
"
{ selected: isParallelView }"
class="gl-w-half js-parallel-diff-button"
data-view-type="parallel"
@click="setParallelDiffViewType"
>
{{
__
(
'
Side-by-side
'
)
}}
</gl-button>
</gl-button-group>
</div>
<div
class=
"gl-mt-3 gl-px-3"
>
<label
class=
"gl-mb-0"
>
<input
id=
"show-whitespace"
type=
"checkbox"
:checked=
"showWhitespace"
@
change=
"setShowWhitespace(
{ showWhitespace: $event.target.checked, pushState: true })"
/>
{{
__
(
'
Show whitespace changes
'
)
}}
</label>
</div>
</
div
>
</
gl-dropdown
>
</
template
>
changelogs/unreleased/229320-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml
0 → 100644
View file @
3cd4a7de
---
title
:
Migrating buttons and classes to match GitLab UI
merge_request
:
40409
author
:
type
:
other
locale/gitlab.pot
View file @
3cd4a7de
...
...
@@ -8586,6 +8586,9 @@ msgstr ""
msgid "Diff limits"
msgstr ""
msgid "Diff view settings"
msgstr ""
msgid "Difference between start date and now"
msgstr ""
...
...
spec/frontend/diffs/components/settings_dropdown_spec.js
View file @
3cd4a7de
...
...
@@ -7,7 +7,7 @@ import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constant
const
localVue
=
createLocalVue
();
localVue
.
use
(
Vuex
);
describe
(
'
Diff setti
i
ngs dropdown component
'
,
()
=>
{
describe
(
'
Diff settings dropdown component
'
,
()
=>
{
let
vm
;
let
actions
;
...
...
@@ -61,50 +61,50 @@ describe('Diff settiings dropdown component', () => {
expect
(
actions
.
setRenderTreeList
).
toHaveBeenCalledWith
(
expect
.
anything
(),
true
,
undefined
);
});
it
(
'
sets list button as
active
when renderTreeList is false
'
,
()
=>
{
it
(
'
sets list button as
selected
when renderTreeList is false
'
,
()
=>
{
createComponent
(
store
=>
{
Object
.
assign
(
store
.
state
.
diffs
,
{
renderTreeList
:
false
,
});
});
expect
(
vm
.
find
(
'
.js-list-view
'
).
classes
(
'
active
'
)).
toBe
(
true
);
expect
(
vm
.
find
(
'
.js-tree-view
'
).
classes
(
'
active
'
)).
toBe
(
false
);
expect
(
vm
.
find
(
'
.js-list-view
'
).
classes
(
'
selected
'
)).
toBe
(
true
);
expect
(
vm
.
find
(
'
.js-tree-view
'
).
classes
(
'
selected
'
)).
toBe
(
false
);
});
it
(
'
sets tree button as
active
when renderTreeList is true
'
,
()
=>
{
it
(
'
sets tree button as
selected
when renderTreeList is true
'
,
()
=>
{
createComponent
(
store
=>
{
Object
.
assign
(
store
.
state
.
diffs
,
{
renderTreeList
:
true
,
});
});
expect
(
vm
.
find
(
'
.js-list-view
'
).
classes
(
'
active
'
)).
toBe
(
false
);
expect
(
vm
.
find
(
'
.js-tree-view
'
).
classes
(
'
active
'
)).
toBe
(
true
);
expect
(
vm
.
find
(
'
.js-list-view
'
).
classes
(
'
selected
'
)).
toBe
(
false
);
expect
(
vm
.
find
(
'
.js-tree-view
'
).
classes
(
'
selected
'
)).
toBe
(
true
);
});
});
describe
(
'
compare changes
'
,
()
=>
{
it
(
'
sets inline button as
active
'
,
()
=>
{
it
(
'
sets inline button as
selected
'
,
()
=>
{
createComponent
(
store
=>
{
Object
.
assign
(
store
.
state
.
diffs
,
{
diffViewType
:
INLINE_DIFF_VIEW_TYPE
,
});
});
expect
(
vm
.
find
(
'
.js-inline-diff-button
'
).
classes
(
'
active
'
)).
toBe
(
true
);
expect
(
vm
.
find
(
'
.js-parallel-diff-button
'
).
classes
(
'
active
'
)).
toBe
(
false
);
expect
(
vm
.
find
(
'
.js-inline-diff-button
'
).
classes
(
'
selected
'
)).
toBe
(
true
);
expect
(
vm
.
find
(
'
.js-parallel-diff-button
'
).
classes
(
'
selected
'
)).
toBe
(
false
);
});
it
(
'
sets parallel button as
active
'
,
()
=>
{
it
(
'
sets parallel button as
selected
'
,
()
=>
{
createComponent
(
store
=>
{
Object
.
assign
(
store
.
state
.
diffs
,
{
diffViewType
:
PARALLEL_DIFF_VIEW_TYPE
,
});
});
expect
(
vm
.
find
(
'
.js-inline-diff-button
'
).
classes
(
'
active
'
)).
toBe
(
false
);
expect
(
vm
.
find
(
'
.js-parallel-diff-button
'
).
classes
(
'
active
'
)).
toBe
(
true
);
expect
(
vm
.
find
(
'
.js-inline-diff-button
'
).
classes
(
'
selected
'
)).
toBe
(
false
);
expect
(
vm
.
find
(
'
.js-parallel-diff-button
'
).
classes
(
'
selected
'
)).
toBe
(
true
);
});
it
(
'
calls setInlineDiffViewType when clicking inline button
'
,
()
=>
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment