fix bugs, esp with theming

packages-premium

@@ -1 +1 @@
-Subproject commit 1cd7d28cf175e8c8fa7b97abc7c9a6d6407489b6
+Subproject commit b483620b230c22efee01b6a92308bfd243ad05be

packages/bootstrap/src/main.scss

@@ -28,6 +28,10 @@
   position: absolute; // because .card sets it to position:relative
 }
 
+.fc .fc-bootstrap-bordered {
+  background: transparent; // some themes provide background. undo
+}
+
 
 /* Popover
 --------------------------------------------------------------------------------------------------*/

packages/bootstrap/src/main.ts

@@ -6,16 +6,16 @@ export class BootstrapTheme extends Theme {
 
 BootstrapTheme.prototype.classes = {
   root: 'fc-bootstrap',
-  table: 'table table-bordered',
-  tableCellActive: 'table-active',
+  table: 'table-bordered',
+  tableCellShaded: 'table-active',
   buttonGroup: 'btn-group',
   button: 'btn btn-primary',
   buttonActive: 'active',
   popover: 'card card-primary',
   popoverHeader: 'card-header',
   popoverContent: 'card-body',
-  today: 'alert alert-info', // the plain `info` class requires `.table`, too much to ask
-  bordered: 'card card-primary'
+  today: 'alert alert-info',
+  bordered: 'card card-primary fc-bootstrap-bordered'
 }
 
 BootstrapTheme.prototype.baseIconClass = 'fa'

packages/core/src/common/TableDateCell.tsx

@@ -23,13 +23,10 @@ export interface TableDateCellProps {
 export default class TableDateCell extends BaseComponent<TableDateCellProps> {
 
   render(props: TableDateCellProps, state: {}, context: ComponentContext) {
-    let { dateEnv, theme, options } = context
+    let { dateEnv, options } = context
     let { dateMarker, dateProfile, datesRepDistinctDays } = props
     let isDateValid = rangeContainsMarker(dateProfile.activeRange, dateMarker) // TODO: called too frequently. cache somehow.
-    let classNames = [
-      'fc-day-header',
-      theme.getClass('tableCellHeader')
-    ]
+    let classNames = [ 'fc-day-header' ]
     let innerText
     let innerHtml
 

packages/core/src/scrollgrid/util.tsx

@@ -178,9 +178,7 @@ export function getSectionClassNames(sectionConfig: SectionConfig, wholeTableVGr
 }
 
 
+// need a method for this still?
 export function getChunkClassNames(sectionConfig: SectionConfig, chunkConfig: ChunkConfig, context: ComponentContext) {
-  return [
-    chunkConfig.className,
-    context.theme.getClass(sectionConfig.type === 'body' ? 'tableCellNormal' : 'tableCellHeader')
-  ].join(' ')
+  return chunkConfig.className
 }

packages/daygrid/src/DayBgCell.tsx

@@ -29,7 +29,7 @@ export default class DayBgCell extends BaseComponent<DayBgCellProps> {
     let dateStr = context.dateEnv.formatIso(date, { omitTime: true })
     let dataAttrs = isDateValid ? { 'data-date': dateStr } : {}
 
-    classes.unshift('fc-day', context.theme.getClass('tableCellNormal'))
+    classes.unshift('fc-day')
 
     return (
       <td

packages/daygrid/src/DayBgRow.tsx

@@ -50,7 +50,7 @@ export default class DayBgRow extends BaseComponent<DayBgRowProps> {
 
     if (!cells.length) {
       parts.push(
-        <td class={'fc-day ' + context.theme.getClass('tableCellNormal')}></td>
+        <td class='fc-day'></td>
       )
     }
 

packages/daygrid/src/TableView.tsx

@@ -99,11 +99,11 @@ export default abstract class TableView<State={}> extends View<State> {
 
   // Generates the HTML that will go before the day-of week header cells
   renderHeadIntro = (): VNode[] => {
-    let { theme, options } = this.context
+    let { options } = this.context
 
     if (this.colWeekNumbersVisible) {
       return [
-        <th class={'shrink fc-week-number ' + theme.getClass('tableCellHeader')}>
+        <th class='shrink fc-week-number'>
           <div data-fc-width-all={1}>
             <span data-fc-width-content={1}>
               {options.weekLabel}
@@ -149,11 +149,9 @@ export default abstract class TableView<State={}> extends View<State> {
 
   // Generates the HTML that goes before the day bg cells for each day-row
   renderBgIntro = (): VNode[] => {
-    let { theme } = this.context
-
     if (this.colWeekNumbersVisible) {
       return [
-        <td class={'fc-week-number ' + theme.getClass('tableCellNormal')}></td>
+        <td class='fc-week-number'></td>
       ]
     }
 

packages/daygrid/src/styles/_day-grid.scss

@@ -1,5 +1,12 @@
 
-/* DayGridView
+// for the VIEW (TODO: put in other file
+
+.fc-dayGrid-view .fc-week-number {
+  white-space: nowrap;
+}
+
+
+/* DayGridV
 --------------------------------------------------------------------------------------------------*/
 
 .fc-day-grid {

packages/list/src/ListViewEvents.tsx

@@ -47,7 +47,7 @@ export default class ListViewEvents extends FgEventRenderer<ListViewEventsProps>
 
   // generates the HTML for a single event row
   renderSegHtml(seg: Seg) {
-    let { theme, options } = this.context
+    let { options } = this.context
     let eventRange = seg.eventRange
     let eventDef = eventRange.def
     let eventInstance = eventRange.instance
@@ -98,18 +98,18 @@ export default class ListViewEvents extends FgEventRenderer<ListViewEventsProps>
 
     return '<tr class="' + classes.join(' ') + '">' +
       (this.displayEventTime ?
-        '<td class="fc-list-item-time ' + theme.getClass('tableCellNormal') + '">' +
+        '<td class="fc-list-item-time">' +
           (timeHtml || '') +
         '</td>' :
         '') +
-      '<td class="fc-list-item-marker ' + theme.getClass('tableCellNormal') + '">' +
+      '<td class="fc-list-item-marker">' +
         '<span class="fc-event-dot"' +
         (bgColor ?
           ' style="background-color:' + bgColor + '"' :
           '') +
         '></span>' +
       '</td>' +
-      '<td class="fc-list-item-title ' + theme.getClass('tableCellNormal') + '">' +
+      '<td class="fc-list-item-title">' +
         '<a' + (url ? ' href="' + htmlEscape(url) + '"' : '') + '>' +
           htmlEscape(eventDef.title || '') +
         '</a>' +
@@ -200,7 +200,7 @@ function buildDayHeaderRow(dayDate, context: ComponentContext) {
   tr.setAttribute('data-date', dateEnv.formatIso(dayDate, { omitTime: true }))
 
   let td = document.createElement('td')
-  td.className = theme.getClass('tableCellActive') + ' ' + theme.getClass('tableCellHeader')
+  td.className = theme.getClass('tableCellShaded')
   td.colSpan = 3
   tr.appendChild(td)
 

packages/timegrid/src/TimeColsSlats.tsx

@@ -44,7 +44,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
 
 
   render(props: TimeColsSlatsProps, state: {}, context: ComponentContext) {
-    let { dateEnv, theme, isRtl, options } = context
+    let { dateEnv, isRtl, options } = context
     let { dateProfile, slotDuration } = props
 
     let labelInterval = this.getLabelInterval(options.slotLabelInterval, slotDuration)
@@ -63,7 +63,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
       slotDate = dateEnv.add(dayStart, slotTime)
       isLabeled = wholeDivideDurations(slotIterator, labelInterval) !== null
 
-      let classNames = [ 'fc-axis', 'fc-time', theme.getClass('tableCellNormal') ]
+      let classNames = [ 'fc-axis', 'fc-time' ]
       let axisNode =
         isLabeled ?
           <td class={classNames.concat('shrink').join(' ')}>
@@ -83,7 +83,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
           class={isLabeled ? '' : 'fc-minor'}
         >
           {!isRtl && axisNode}
-          <td class={theme.getClass('tableCellNormal')}></td>
+          <td />
           {isRtl && axisNode}
         </tr>
       )

packages/timegrid/src/TimeColsView.tsx

@@ -52,7 +52,6 @@ export default abstract class TimeColsView extends View {
     timeContent: ((contentArg: ChunkContentCallbackArgs) => VNode) | null
   ) {
     let { props } = this
-    let { theme } = this.context
     let classNames = getViewClassNames(props.viewSpec).concat('fc-timeGrid-view')
     let sections: SimpleScrollGridSection[] = []
 
@@ -75,7 +74,11 @@ export default abstract class TimeColsView extends View {
       sections.push({
         outerContent: (
           <tr>
-            <td class={'fc-divider ' + theme.getClass('tableCellHeader')} ref={this.dividerElRef} colSpan={0} />
+            <td
+              ref={this.dividerElRef}
+              class={'fc-divider ' + this.context.theme.getClass('tableCellShaded')}
+              colSpan={0}
+            />
           </tr>
         )
       })
@@ -168,7 +171,7 @@ export default abstract class TimeColsView extends View {
 
   // Generates the HTML that will go before the day-of week header cells
   renderHeadIntro = () => {
-    let { theme, dateEnv, options } = this.context
+    let { dateEnv, options } = this.context
     let range = this.props.dateProfile.renderRange
     let dayCnt = diffDays(range.start, range.end)
     let weekText
@@ -177,7 +180,7 @@ export default abstract class TimeColsView extends View {
       weekText = dateEnv.format(range.start, WEEK_HEADER_FORMAT)
 
       return [
-        <th class={'fc-axis shrink fc-week-number' + theme.getClass('tableCellHeader')} style={this.getAxisStyles()}>
+        <th class={'fc-axis shrink fc-week-number'} style={this.getAxisStyles()}>
           <div data-fc-width-all={1}>
             <GotoAnchor
               navLinks={options.navLinks}
@@ -190,7 +193,7 @@ export default abstract class TimeColsView extends View {
     }
 
     return [
-      <th class={'fc-axis' + theme.getClass('tableCellHeader')} style={this.getAxisStyles()}></th>
+      <th class='fc-axis' style={this.getAxisStyles()}></th>
     ]
   }
 
@@ -210,10 +213,8 @@ export default abstract class TimeColsView extends View {
 
   // Generates the HTML that goes before the bg of the TimeCols slot area. Long vertical column.
   renderTimeColsBgIntro = () => {
-    let { theme } = this.context
-
     return [
-      <td class={'fc-axis' + theme.getClass('tableCellNormal')} style={this.getAxisStyles()}></td>
+      <td class='fc-axis' style={this.getAxisStyles()}></td>
     ]
   }
 
@@ -233,7 +234,7 @@ export default abstract class TimeColsView extends View {
 
   // Generates the HTML that goes before the all-day cells
   renderTableBgIntro = () => {
-    let { theme, options } = this.context
+    let { options } = this.context
     let spanAttrs = {} as any
     let child = options.allDayText
 
@@ -243,7 +244,7 @@ export default abstract class TimeColsView extends View {
     }
 
     return [
-      <td class={'shrink fc-axis' + theme.getClass('tableCellNormal')} style={this.getAxisStyles()}>
+      <td class='shrink fc-axis' style={this.getAxisStyles()}>
         <div data-fc-width-all={1}>
           <span {...spanAttrs} data-fc-width-content={1}>
             {child}