Commit 7339cf59 authored by Kushal Pandya's avatar Kushal Pandya

Update template, add itemWidth, cleanup methods

parent e1513f8f
......@@ -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 cells for
* current timeframe and shellWidth.
* Gets cell width based on total number months 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="tdStyles"
:style="itemStyles"
>
<div class="timeline-bar-wrapper">
<a
......@@ -265,5 +270,5 @@
>
</a>
</div>
</td>
</span>
</template>
......@@ -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('tdStyles', () => {
describe('itemStyles', () => {
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', () => {
......
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