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
0
Merge Requests
0
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
Boxiang Sun
gitlab-ce
Commits
baf07e91
Commit
baf07e91
authored
7 years ago
by
Clement Ho
Committed by
Filipa Lacerda
7 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add inline edit button to issue_show app
parent
951dab3b
Changes
6
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
119 additions
and
17 deletions
+119
-17
app/assets/javascripts/issue_show/components/app.vue
app/assets/javascripts/issue_show/components/app.vue
+13
-3
app/assets/javascripts/issue_show/components/title.vue
app/assets/javascripts/issue_show/components/title.vue
+47
-9
app/assets/stylesheets/pages/issuable.scss
app/assets/stylesheets/pages/issuable.scss
+10
-0
app/assets/stylesheets/pages/notes.scss
app/assets/stylesheets/pages/notes.scss
+2
-2
spec/javascripts/issue_show/components/app_spec.js
spec/javascripts/issue_show/components/app_spec.js
+11
-0
spec/javascripts/issue_show/components/title_spec.js
spec/javascripts/issue_show/components/title_spec.js
+36
-3
No files found.
app/assets/javascripts/issue_show/components/app.vue
View file @
baf07e91
...
...
@@ -24,6 +24,11 @@ export default {
required
:
true
,
type
:
Boolean
,
},
showInlineEditButton
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
issuableRef
:
{
type
:
String
,
required
:
true
,
...
...
@@ -222,20 +227,25 @@ export default {
<div
v-else
>
<title-component
:issuable-ref=
"issuableRef"
:can-update=
"canUpdate"
:title-html=
"state.titleHtml"
:title-text=
"state.titleText"
/>
:title-text=
"state.titleText"
:show-inline-edit-button=
"showInlineEditButton"
/>
<description-component
v-if=
"state.descriptionHtml"
:can-update=
"canUpdate"
:description-html=
"state.descriptionHtml"
:description-text=
"state.descriptionText"
:updated-at=
"state.updatedAt"
:task-status=
"state.taskStatus"
/>
:task-status=
"state.taskStatus"
/>
<edited-component
v-if=
"hasUpdated"
:updated-at=
"state.updatedAt"
:updated-by-name=
"state.updatedByName"
:updated-by-path=
"state.updatedByPath"
/>
:updated-by-path=
"state.updatedByPath"
/>
</div>
</div>
</
template
>
This diff is collapsed.
Click to expand it.
app/assets/javascripts/issue_show/components/title.vue
View file @
baf07e91
<
script
>
import
animateMixin
from
'
../mixins/animate
'
;
import
eventHub
from
'
../event_hub
'
;
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
import
{
spriteIcon
}
from
'
../../lib/utils/common_utils
'
;
export
default
{
mixins
:
[
animateMixin
],
...
...
@@ -15,6 +18,11 @@
type
:
String
,
required
:
true
,
},
canUpdate
:
{
required
:
false
,
type
:
Boolean
,
default
:
false
,
},
titleHtml
:
{
type
:
String
,
required
:
true
,
...
...
@@ -23,6 +31,14 @@
type
:
String
,
required
:
true
,
},
showInlineEditButton
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
},
directives
:
{
tooltip
,
},
watch
:
{
titleHtml
()
{
...
...
@@ -30,17 +46,26 @@
this
.
animateChange
();
},
},
computed
:
{
pencilIcon
()
{
return
spriteIcon
(
'
pencil
'
,
'
link-highlight
'
);
},
},
methods
:
{
setPageTitle
()
{
const
currentPageTitleScope
=
this
.
titleEl
.
innerText
.
split
(
'
·
'
);
currentPageTitleScope
[
0
]
=
`
${
this
.
titleText
}
(
${
this
.
issuableRef
}
) `
;
this
.
titleEl
.
textContent
=
currentPageTitleScope
.
join
(
'
·
'
);
},
edit
()
{
eventHub
.
$emit
(
'
open.form
'
);
},
},
};
</
script
>
<
template
>
<div
class=
"title-container"
>
<h2
class=
"title"
:class=
"
{
...
...
@@ -50,4 +75,17 @@
v-html="titleHtml"
>
</h2>
<button
v-tooltip
v-if=
"showInlineEditButton && canUpdate"
type=
"button"
class=
"btn-blank btn-edit note-action-button"
v-html=
"pencilIcon"
title=
"Edit title and description"
data-placement=
"bottom"
data-container=
"body"
@
click=
"edit"
>
</button>
</div>
</
template
>
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/pages/issuable.scss
View file @
baf07e91
...
...
@@ -72,12 +72,22 @@
}
}
.title-container
{
display
:
flex
;
}
.title
{
padding
:
0
;
margin-bottom
:
16px
;
border-bottom
:
none
;
}
.btn-edit
{
margin-left
:
auto
;
// Set height to match title height
height
:
2em
;
}
// Border around images in issue and MR descriptions.
.description
img
:not
(
.emoji
)
{
border
:
1px
solid
$white-normal
;
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/pages/notes.scss
View file @
baf07e91
...
...
@@ -531,14 +531,13 @@ ul.notes {
padding
:
0
;
min-width
:
16px
;
color
:
$gray-darkest
;
fill
:
$gray-darkest
;
.fa
{
position
:
relative
;
font-size
:
16px
;
}
svg
{
height
:
16px
;
width
:
16px
;
...
...
@@ -566,6 +565,7 @@ ul.notes {
.link-highlight
{
color
:
$gl-link-color
;
fill
:
$gl-link-color
;
svg
{
fill
:
$gl-link-color
;
...
...
This diff is collapsed.
Click to expand it.
spec/javascripts/issue_show/components/app_spec.js
View file @
baf07e91
...
...
@@ -332,4 +332,15 @@ describe('Issuable output', () => {
.
catch
(
done
.
fail
);
});
});
describe
(
'
show inline edit button
'
,
()
=>
{
it
(
'
should not render by default
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.title-container .note-action-button
'
)).
toBeDefined
();
});
it
(
'
should render if showInlineEditButton
'
,
()
=>
{
vm
.
showInlineEditButton
=
true
;
expect
(
vm
.
$el
.
querySelector
(
'
.title-container .note-action-button
'
)).
toBeDefined
();
});
});
});
This diff is collapsed.
Click to expand it.
spec/javascripts/issue_show/components/title_spec.js
View file @
baf07e91
import
Vue
from
'
vue
'
;
import
Store
from
'
~/issue_show/stores
'
;
import
titleComponent
from
'
~/issue_show/components/title.vue
'
;
import
eventHub
from
'
~/issue_show/event_hub
'
;
describe
(
'
Title component
'
,
()
=>
{
let
vm
;
...
...
@@ -25,7 +26,7 @@ describe('Title component', () => {
it
(
'
renders title HTML
'
,
()
=>
{
expect
(
vm
.
$el
.
innerHTML
.
trim
(),
vm
.
$el
.
querySelector
(
'
.title
'
).
innerHTML
.
trim
(),
).
toBe
(
'
Testing <img>
'
);
});
...
...
@@ -47,12 +48,12 @@ describe('Title component', () => {
Vue
.
nextTick
(()
=>
{
expect
(
vm
.
$el
.
classList
.
contains
(
'
issue-realtime-pre-pulse
'
),
vm
.
$el
.
querySelector
(
'
.title
'
).
classList
.
contains
(
'
issue-realtime-pre-pulse
'
),
).
toBeTruthy
();
setTimeout
(()
=>
{
expect
(
vm
.
$el
.
classList
.
contains
(
'
issue-realtime-trigger-pulse
'
),
vm
.
$el
.
querySelector
(
'
.title
'
).
classList
.
contains
(
'
issue-realtime-trigger-pulse
'
),
).
toBeTruthy
();
done
();
...
...
@@ -72,4 +73,36 @@ describe('Title component', () => {
done
();
});
});
describe
(
'
inline edit button
'
,
()
=>
{
beforeEach
(()
=>
{
spyOn
(
eventHub
,
'
$emit
'
);
});
it
(
'
should not show by default
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.note-action-button
'
)).
toBeNull
();
});
it
(
'
should not show if canUpdate is false
'
,
()
=>
{
vm
.
showInlineEditButton
=
true
;
vm
.
canUpdate
=
false
;
expect
(
vm
.
$el
.
querySelector
(
'
.note-action-button
'
)).
toBeNull
();
});
it
(
'
should show if showInlineEditButton and canUpdate
'
,
()
=>
{
vm
.
showInlineEditButton
=
true
;
vm
.
canUpdate
=
true
;
expect
(
vm
.
$el
.
querySelector
(
'
.note-action-button
'
)).
toBeDefined
();
});
it
(
'
should trigger open.form event when clicked
'
,
()
=>
{
vm
.
showInlineEditButton
=
true
;
vm
.
canUpdate
=
true
;
Vue
.
nextTick
(()
=>
{
vm
.
$el
.
querySelector
(
'
.note-action-button
'
).
click
();
expect
(
eventHub
.
$emit
).
toHaveBeenCalledWith
(
'
open.form
'
);
});
});
});
});
This diff is collapsed.
Click to expand it.
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