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
7339cf59
Commit
7339cf59
authored
Apr 02, 2018
by
Kushal Pandya
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update template, add itemWidth, cleanup methods
parent
e1513f8f
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
21 additions
and
14 deletions
+21
-14
ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue
...ets/javascripts/roadmap/components/epic_item_timeline.vue
+15
-10
spec/javascripts/roadmap/components/epic_item_timeline_spec.js
...javascripts/roadmap/components/epic_item_timeline_spec.js
+6
-4
No files found.
ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue
View file @
7339cf59
...
...
@@ -30,6 +30,10 @@
type
:
Number
,
required
:
true
,
},
itemWidth
:
{
type
:
Number
,
required
:
true
,
},
},
data
()
{
return
{
...
...
@@ -38,8 +42,10 @@
};
},
computed
:
{
tdStyles
()
{
return
`min-width:
${
this
.
getCellWidth
()}
px;`
;
itemStyles
()
{
return
{
width
:
`
${
this
.
itemWidth
}
px`
,
};
},
showTimelineBar
()
{
return
this
.
hasStartDate
();
...
...
@@ -53,15 +59,14 @@
},
methods
:
{
/**
* Gets cell width based on total number
cell
s for
* current timeframe and shellWidth.
* Gets cell width based on total number
month
s for
* current timeframe and shellWidth
excluding details cell width
.
*
* In case cell width is too narrow, we have fixed minimum
* cell width (TIMELINE_CELL_MIN_WIDTH) to obey.
*/
getCellWidth
()
{
const
minWidth
=
Math
.
ceil
((
this
.
shellWidth
-
EPIC_DETAILS_CELL_WIDTH
)
/
this
.
timeframe
.
length
);
const
minWidth
=
(
this
.
shellWidth
-
EPIC_DETAILS_CELL_WIDTH
)
/
this
.
timeframe
.
length
;
return
Math
.
max
(
minWidth
,
TIMELINE_CELL_MIN_WIDTH
);
},
...
...
@@ -229,7 +234,7 @@
}
// Reduce any offset from total width and round it off.
return
Math
.
round
(
timelineBarWidth
-
offsetEnd
)
;
return
timelineBarWidth
-
offsetEnd
;
},
/**
* Renders timeline bar only if current
...
...
@@ -246,9 +251,9 @@
</
script
>
<
template
>
<
td
<
span
class=
"epic-timeline-cell"
:style=
"
td
Styles"
:style=
"
item
Styles"
>
<div
class=
"timeline-bar-wrapper"
>
<a
...
...
@@ -265,5 +270,5 @@
>
</a>
</div>
</
td
>
</
span
>
</
template
>
spec/javascripts/roadmap/components/epic_item_timeline_spec.js
View file @
7339cf59
...
...
@@ -4,13 +4,14 @@ import epicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.
import
{
TIMELINE_CELL_MIN_WIDTH
,
TIMELINE_END_OFFSET_FULL
,
TIMELINE_END_OFFSET_HALF
}
from
'
ee/roadmap/constants
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
import
{
mockTimeframe
,
mockEpic
,
mockShellWidth
}
from
'
../mock_data
'
;
import
{
mockTimeframe
,
mockEpic
,
mockShellWidth
,
mockItemWidth
}
from
'
../mock_data
'
;
const
createComponent
=
({
timeframe
=
mockTimeframe
,
timeframeItem
=
mockTimeframe
[
0
],
epic
=
mockEpic
,
shellWidth
=
mockShellWidth
,
itemWidth
=
mockItemWidth
,
})
=>
{
const
Component
=
Vue
.
extend
(
epicItemTimelineComponent
);
...
...
@@ -19,6 +20,7 @@ const createComponent = ({
timeframeItem
,
epic
,
shellWidth
,
itemWidth
,
});
};
...
...
@@ -38,10 +40,10 @@ describe('EpicItemTimelineComponent', () => {
});
describe
(
'
computed
'
,
()
=>
{
describe
(
'
td
Styles
'
,
()
=>
{
describe
(
'
item
Styles
'
,
()
=>
{
it
(
'
returns CSS min-width based on getCellWidth() method
'
,
()
=>
{
vm
=
createComponent
({});
expect
(
vm
.
tdStyles
).
toBe
(
'
min-width: 280px;
'
);
expect
(
vm
.
itemStyles
.
width
).
toBe
(
`
${
mockItemWidth
}
px`
);
});
});
});
...
...
@@ -224,7 +226,7 @@ describe('EpicItemTimelineComponent', () => {
it
(
'
renders component container element with `min-width` property applied via style attribute
'
,
()
=>
{
vm
=
createComponent
({});
expect
(
vm
.
$el
.
getAttribute
(
'
style
'
)).
toBe
(
'
min-width: 280px;
'
);
expect
(
vm
.
$el
.
getAttribute
(
'
style
'
)).
toBe
(
`width:
${
mockItemWidth
}
px;`
);
});
it
(
'
renders timeline bar element with class `timeline-bar` and class `timeline-bar-wrapper` as container element
'
,
()
=>
{
...
...
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