Fixing row height on browser scaling (#615)

Fixing row height on browser scaling

Author: Ilaiwi

__tests__/components/GroupRow/GroupRows.test.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { noop } from 'test-utility'
+import GroupRows from 'lib/row/GroupRows'
+
+const defaultProps = {
+  groups: [
+    {
+        bgColor: '#e8ccff',
+        id: '2998',
+        label: 'Label Dustin"',
+        rightTitle: 'Wolff',
+        title: 'Carlotta',
+    },
+    {
+        bgColor: '#e8ccff',
+        id: '2999',
+        label: 'Label Myrtle"',
+        rightTitle: '"Sauer"',
+        title: 'Elmer',
+    }
+  ],
+  canvasWidth: 10,
+  lineCount: 2,
+  groupHeights: [30, 27],
+  onRowClick: noop,
+  onRowDoubleClick: noop,
+  clickTolerance: 0,
+  onRowContextClick: noop,
+}
+
+describe('GroupRows', () => {
+  it('passes props and get right height for first group', () => {
+    const wrapper = mount(<GroupRows {...defaultProps} />);
+
+    const component = wrapper.find('GroupRow').first();
+    expect(component.prop('style').height).toBe('30px');
+  })
+})

__tests__/components/Sidebar/Sidebar.test.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Sidebar from 'lib/layout/Sidebar'
+
+const defaultProps = {
+  groups: [
+    {
+        bgColor: '#e8ccff',
+        id: '2998',
+        label: 'Label Dustin"',
+        rightTitle: 'Wolff',
+        title: 'Carlotta',
+    },
+    {
+        bgColor: '#e8ccff',
+        id: '2999',
+        label: 'Label Myrtle"',
+        rightTitle: '"Sauer"',
+        title: 'Elmer',
+    }
+  ],
+  width: 10,
+  height: 10,
+  groupHeights: [30, 27],
+  keys: {
+    groupIdKey: 'id',
+    groupRightTitleKey: 'rightTitle',
+    groupTitleKey: 'title',
+    itemDivTitleKey: 'title',
+    itemGroupKey: 'group',
+    itemIdKey: 'id',
+    itemTimeEndKey: 'end',
+    itemTimeStartKey: 'start',
+    itemTitleKey: 'title'
+  }
+}
+
+describe('GroupRows', () => {
+  it('passes props and get right height for first group', () => {
+    const wrapper = mount(<Sidebar {...defaultProps} />);
+
+    const component = wrapper.find('div.rct-sidebar-row').first();
+    expect(component.prop('style').height).toBe('30px');
+  })
+})

src/lib/Timeline.scss

@@ -75,7 +75,7 @@ $weekend: rgba(250, 246, 225, 0.5);
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      box-sizing: content-box;
+      box-sizing: border-box;
       margin: 0;
       border-bottom: $border-width solid $border-color;
 
@@ -114,7 +114,7 @@ $weekend: rgba(250, 246, 225, 0.5);
     .rct-hl-even,
     .rct-hl-odd {
       border-bottom: $border-width solid $border-color;
-      box-sizing: content-box;
+      box-sizing: border-box;
       z-index: 40;
     }
     .rct-hl-odd {

src/lib/layout/Sidebar.js

@@ -51,8 +51,8 @@ export default class Sidebar extends Component {
 
     let groupLines = this.props.groups.map((group, index) => {
       const elementStyle = {
-        height: `${groupHeights[index] - 1}px`,
-        lineHeight: `${groupHeights[index] - 1}px`
+        height: `${groupHeights[index]}px`,
+        lineHeight: `${groupHeights[index]}px`
       }
 
       return (

src/lib/row/GroupRows.js

@@ -51,7 +51,7 @@ export default class GroupRows extends Component {
           horizontalLineClassNamesForGroup={horizontalLineClassNamesForGroup}
           style={{
             width: `${canvasWidth}px`,
-            height: `${groupHeights[i] - 1}px`
+            height: `${groupHeights[i]}px`
           }}
         />
       )