stop using flexbox within table cells for more link. more even heights

packages/__tests__/src/legacy/eventLimit.js

@@ -190,7 +190,7 @@ describe('dayMaxEventRows', function() { // TODO: rename file
 
         rowHeights.forEach((rowHeight) => {
           let diff = Math.abs(rowHeight - aveHeight)
-          expect(diff).toBeLessThan(4)
+          expect(diff).toBeLessThan(2)
         })
       })
 

packages/daygrid/src/Table.tsx

@@ -72,6 +72,7 @@ export default class Table extends DateComponent<TableProps, TableState> {
 
 
   render(props: TableProps, state: TableState, context: ComponentContext) {
+    let { dayMaxEventRows, dayMaxEvents, expandRows } = props
     let { morePopoverState } = state
     let rowCnt = props.cells.length
 
@@ -83,11 +84,22 @@ export default class Table extends DateComponent<TableProps, TableState> {
     let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt)
     let buildMoreLinkText = this.buildBuildMoreLinkText(context.options.moreLinkText)
 
-    let classNames = [ 'fc-daygrid-body' ]
-    if (props.expandRows && (props.dayMaxEvents === true || props.dayMaxEventRows === true)) {
-      classNames.push('fc-daygrid-body-balanced')
+    let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true
+
+    // if rows can't expand to fill fixed height, can't do balanced-height event limit
+    // TODO: best place to normalize these options?
+    if (limitViaBalanced && !expandRows) {
+      limitViaBalanced = false
+      dayMaxEventRows = null
+      dayMaxEvents = null
     }
 
+    let classNames = [
+      'fc-daygrid-body',
+      limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced', // will all row heights be equal?
+      expandRows ? '' : 'fc-daygrid-body-natural' // will height of one row depend on the others?
+    ]
+
     return (
       <div class={classNames.join(' ')} ref={this.handleRootEl} style={{
         // these props are important to give this wrapper correct dimensions for interactions
@@ -101,7 +113,7 @@ export default class Table extends DateComponent<TableProps, TableState> {
             style={{
               width: props.clientWidth,
               minWidth: props.tableMinWidth,
-              height: props.expandRows ? props.clientHeight : ''
+              height: expandRows ? props.clientHeight : ''
             }}
           >
             {props.colGroupNode}
@@ -127,8 +139,8 @@ export default class Table extends DateComponent<TableProps, TableState> {
                   dateSelectionSegs={dateSelectionSegsByRow[row]}
                   eventDrag={eventDragByRow[row]}
                   eventResize={eventResizeByRow[row]}
-                  dayMaxEvents={props.dayMaxEvents}
-                  dayMaxEventRows={props.dayMaxEventRows}
+                  dayMaxEvents={dayMaxEvents}
+                  dayMaxEventRows={dayMaxEventRows}
                   clientWidth={props.clientWidth}
                   buildMoreLinkText={buildMoreLinkText}
                   onMoreClick={this.handleMoreLinkClick}

packages/daygrid/src/TableCell.tsx

@@ -110,37 +110,35 @@ export default class TableCell extends DateComponent<TableCellProps> {
                   )}
                 </WeekNumberRoot>
               }
-              <div class='fc-daygrid-day-fg'>
-                {!isDisabled &&
-                  <TableCellTop
-                    date={date}
-                    showDayNumber={props.showDayNumber}
-                    dateProfile={props.dateProfile}
-                    todayRange={props.todayRange}
-                    extraHookProps={props.extraHookProps}
-                  />
+              {!isDisabled &&
+                <TableCellTop
+                  date={date}
+                  showDayNumber={props.showDayNumber}
+                  dateProfile={props.dateProfile}
+                  todayRange={props.todayRange}
+                  extraHookProps={props.extraHookProps}
+                />
+              }
+              <div
+                class='fc-daygrid-day-events'
+                ref={props.fgContentElRef}
+                style={{ paddingBottom: props.fgPaddingBottom }}
+              >
+                {props.fgContent}
+                {Boolean(props.moreCnt) &&
+                  <div class='fc-daygrid-day-bottom' style={{ marginTop: props.moreMarginTop }}>
+                    <RenderHook name='moreLink'
+                      hookProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: context.view }}
+                      defaultContent={renderMoreLinkInner}
+                    >
+                      {(rootElRef, classNames, innerElRef, innerContent) => (
+                        <a onClick={this.handleMoreLink} ref={rootElRef} className={[ 'fc-daygrid-more-link' ].concat(classNames).join(' ')}>
+                          {innerContent}
+                        </a>
+                      )}
+                    </RenderHook>
+                  </div>
                 }
-                <div
-                  class='fc-daygrid-day-events'
-                  ref={props.fgContentElRef}
-                  style={{ paddingBottom: props.fgPaddingBottom }}
-                >
-                  {props.fgContent}
-                  {Boolean(props.moreCnt) &&
-                    <div class='fc-daygrid-day-bottom' style={{ marginTop: props.moreMarginTop }}>
-                      <RenderHook name='moreLink'
-                        hookProps={{ num: props.moreCnt, text: props.buildMoreLinkText(props.moreCnt), view: context.view }}
-                        defaultContent={renderMoreLinkInner}
-                      >
-                        {(rootElRef, classNames, innerElRef, innerContent) => (
-                          <a onClick={this.handleMoreLink} ref={rootElRef} className={[ 'fc-daygrid-more-link' ].concat(classNames).join(' ')}>
-                            {innerContent}
-                          </a>
-                        )}
-                      </RenderHook>
-                    </div>
-                  }
-                </div>
               </div>
               <div class='fc-daygrid-day-bg'>
                 {props.bgContent}

packages/daygrid/src/TableRow.tsx

@@ -56,9 +56,9 @@ interface TableRowState {
 
 export default class TableRow extends DateComponent<TableRowProps, TableRowState> {
 
-  private cellElRefs = new RefMap<HTMLTableCellElement>()
-  private cellInnerElRefs = new RefMap<HTMLElement>()
-  private cellContentElRefs = new RefMap<HTMLDivElement>()
+  private cellElRefs = new RefMap<HTMLTableCellElement>() // the <td>
+  private cellInnerElRefs = new RefMap<HTMLElement>() // the fc-daygrid-day-frame
+  private cellContentElRefs = new RefMap<HTMLDivElement>() // the fc-daygrid-day-events
   private segHarnessRefs = new RefMap<HTMLDivElement>()
 
   state: TableRowState = {
@@ -231,7 +231,7 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
         let isMirror = isDragging || isResizing || isDateSelecting
         let isSelected = selectedInstanceHash[instanceId]
         let isInvisible = segIsHidden[instanceId] || isSelected
-        let isAbsolute = isMirror || isInvisible || seg.firstCol !== seg.lastCol || !seg.isStart || !seg.isEnd // TODO: simpler way? NOT DRY
+        let isAbsolute = segIsHidden[instanceId] || isMirror || seg.firstCol !== seg.lastCol || !seg.isStart || !seg.isEnd // TODO: simpler way? NOT DRY
         let marginTop: CssDimValue
         let top: CssDimValue
         let left: CssDimValue
@@ -374,8 +374,11 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
 
 
   computeMaxContentHeight() {
-    let contentEl = this.cellContentElRefs.currentMap[this.props.cells[0].key]
-    return contentEl.getBoundingClientRect().height
+    let firstKey = this.props.cells[0].key
+    let frameEl = this.cellInnerElRefs.currentMap[firstKey]
+    let eventsEl = this.cellContentElRefs.currentMap[firstKey]
+
+    return frameEl.getBoundingClientRect().bottom - eventsEl.getBoundingClientRect().top
   }
 
 

packages/daygrid/src/styles/_daygrid.scss

@@ -1,8 +1,7 @@
 
-$daygrid-top-z: 4; // one more than .fc-highlight's z-index. WEIRD solution
-$daygrid-week-num-z: 5;
-$daygrid-fg-event-z: 6;
-$daygrid-popover-z: 7;
+$daygrid-text-z: 4; // one more than .fc-highlight's z-index. WEIRD solution
+$daygrid-event-z: 5;
+$daygrid-popover-z: 6;
 
 
 .fc-daygrid-body { // a <div> that wraps the table
@@ -10,16 +9,16 @@ $daygrid-popover-z: 7;
   z-index: 1; // container inner z-index's because <tr>s can't do it
 }
 
-.fc-daygrid-day {
-  height: 1px; // IE and FF need a non-zero height assigned to the <td> so that the inner flexboxes don't confuse it
-}
-
 
 // cell inner-wrappers
 
 .fc-daygrid-day-frame {
   position: relative;
-  min-height: 100%; // more optimal than height
+  min-height: 100%; // seems to work better than `height` because sets height after rows/cells naturally do it
+
+  &:before {
+    @include clearfix; // clear top-margin of event-container when first child
+  }
 }
 
 .fc-liquid-hack .fc-daygrid-day-frame {
@@ -27,20 +26,30 @@ $daygrid-popover-z: 7;
 }
 
 
-// flexbox wrapper for day-top and day-events
+// positioning for balanced vs natural
 
-.fc-daygrid-day-fg {
-  display: flex;
-  flex-direction: column;
-}
-
-.fc-daygrid-body-balanced { // for when all row heights are equal
-  .fc-daygrid-day-fg {
+.fc-daygrid-body-balanced {
+  .fc-daygrid-day-events {
     position: absolute;
-    top: 0;
     left: 0;
     right: 0;
-    bottom: 0; // TODO: make a mixin for all this
+  }
+}
+
+.fc-daygrid-body-unbalanced {
+  .fc-daygrid-day-events {
+    position: relative; // for containing abs positioned event harnesses
+    min-height: 3em; // in addition to being a min-height during natural height, equalizes the heights a little bit
+
+    &:before {
+      @include clearfix; // clear top-margin of event harnesses
+    }
+  }
+}
+
+.fc-daygrid-body-natural { // can coexist with -unbalanced
+  .fc-daygrid-day-events {
+    padding-bottom: 1em;
   }
 }
 
@@ -49,8 +58,11 @@ $daygrid-popover-z: 7;
 
 .fc-daygrid-day-top {
   position: relative;
-  z-index: $daygrid-top-z;
-  flex-shrink: 0;
+  z-index: $daygrid-text-z;
+
+  &:after {
+    @include clearfix;
+  }
 }
 
 .fc-day-other .fc-daygrid-day-top {
@@ -76,23 +88,14 @@ $daygrid-popover-z: 7;
 // fg events
 
 .fc-daygrid-day-events {
-  flex-grow: 1;
-  position: relative; // for absolutely positioning event-harnesses
-  min-height: 2em;
-  margin: 0 2px 1em; // want bottom margin to allow space for selecting
+  margin-left: 2px;
+  margin-right: 2px;
 
   &:first-child { // only add top margin if no fc-daygrid-day-top
     margin-top: 2px;
   }
 }
 
-.fc-daygrid-body-balanced { // for when all row heights are equal
-  .fc-daygrid-day-events {
-    min-height: 0;
-    margin-bottom: 0; // don't need margin-bottom because there's space around the more link for selecting
-  }
-}
-
 
 // fg event harness
 
@@ -110,19 +113,19 @@ $daygrid-popover-z: 7;
 }
 
 .fc-daygrid-event:not(.fc-event-mirror) { // TODO: should be in daygrid-event file? needs var
-  z-index: $daygrid-fg-event-z; // is already position:relative
+  z-index: $daygrid-event-z; // is already position:relative
 }
 
 
 // cell bottom (within day-events)
 
 .fc-daygrid-day-bottom {
+  position: relative;
+  z-index: $daygrid-text-z;
   font-size: .85em;
 }
 
 .fc-daygrid-more-link {
-  position: relative;
-  z-index: $daygrid-fg-event-z; // treat as an event
   cursor: pointer;
 }
 
@@ -145,7 +148,7 @@ $daygrid-popover-z: 7;
 
 .fc-daygrid-week-number {
   position: absolute;
-  z-index: $daygrid-week-num-z;
+  z-index: $daygrid-text-z;
   top: 0;
   padding: 2px;
   min-width: 1.5em;