client/lanes/components/grid/PopOverMixin.cjsx in lanes-0.1.9.5 vs client/lanes/components/grid/PopOverMixin.cjsx in lanes-0.3.0

@@ -4,23 +4,33 @@
 
     mixins: [
         Lanes.Components.Grid.EditingMixin
     ]
 
+    propTypes:
+        width:  React.PropTypes.number.isRequired
+        height: React.PropTypes.number.isRequired
+
+    getDefaultProps: ->
+        width:  280, height: 350
+
     renderPopover: (child) ->
-        props = if @props.editingEl
-            xpos = @props.editingEl.offsetLeft + this.props.editingEl.scrollWidth / 2
-            if @props.editingEl.offsetLeft + 20 > @props.grid.width() / 2
-                { placement: 'left', positionLeft: @props.editingEl.offsetLeft }
-            else
-                { placement: 'right', positionLeft: @props.editingEl.offsetLeft + (this.props.editingEl.offsetWidth / 2) }
+        props = _.extend({}, @props)
+        {position} = @props
+        if position.left > ((position.container.width / 2) - 150)
+            props.placement = 'left'
+            props.positionLeft = position.left - @props.width
         else
-            { placement: 'right', positionLeft: 200 }
+            props.placement = 'right'
+            props.positionLeft = position.left
+        props.arrowOffsetTop = Math.min(position.top, (@props.height - 75))
+        props.positionTop    = Math.max(5, position.top - props.arrowOffsetTop + (position.rowHeight / 2))
+
         <div className="editor po">
             <BS.Popover
+                id="editing-form"
                 {...props}
-                positionTop={@topOffset() - 100}
-                arrowOffsetTop={100 + @props.rowHeight / 2}
+                style={height: @props.height, width: @props.width}
                 title = "Edit #{@model.name || 'Record'}"
             >
                 {@renderEditingBody()}
             </BS.Popover>
         </div>