redo theme classnames

packages-premium

@@ -1 +1 @@
-Subproject commit acf121770b64b6b1f164131c0287ec4a9f7a1f4d
+Subproject commit 30ddfdcd90e357e9ce95ffdb048b386eced7fd81

packages/__tests__/src/view-render/DayGridRenderUtils.js

@@ -15,7 +15,7 @@ const MORE_CLASS = 'fc-more'
 const HEADER_CLASS = 'fc-header'
 const TITLE_CLASS = 'fc-title'
 const MORE_POPOVER_CLASS = 'fc-more-popover'
-const WIDGET_HEADER_CLASS = 'fc-widget-header'
+const DAY_HEADER_SELECTOR = '.fc-scrolltable th'
 const HEAD_CONTAINER_CLASS = 'fc-head-container'
 const DIVIDER_CLASS = 'fc-divider'
 const RESIZER_CLASS = 'fc-resizer'
@@ -119,7 +119,7 @@ export function getDayGridRowDayElAtIndex(index) {
 }
 
 export function getHeaderTopEls() {
-  return $(`.${WIDGET_HEADER_CLASS}`)
+  return $(DAY_HEADER_SELECTOR)
     .not(`.${ROW_CLASS}`)
     .not(`.${HEAD_CONTAINER_CLASS}`)
     .not(`.${DIVIDER_CLASS}`)

packages/bootstrap/src/main.scss

@@ -20,6 +20,10 @@
   color: #fff;
 }
 
+.fc-bootstrap .table {
+  margin-bottom: 0;
+}
+
 .fc-bootstrap .fc-popover.card {
   position: absolute; // because .card sets it to position:relative
 }

packages/bootstrap/src/main.ts

@@ -4,24 +4,17 @@ export class BootstrapTheme extends Theme {
 }
 
 BootstrapTheme.prototype.classes = {
-  widget: 'fc-bootstrap',
-
-  tableGrid: 'table-bordered', // avoid `table` class b/c don't want margins. only border color
-  tableList: 'table', // `table` class creates bottom margin but who cares
-  tableListHeading: 'table-active',
-
+  root: 'fc-bootstrap',
+  table: 'table table-bordered',
+  tableCellActive: 'table-active',
   buttonGroup: 'btn-group',
   button: 'btn btn-primary',
   buttonActive: 'active',
-
-  today: 'alert alert-info', // the plain `info` class requires `.table`, too much to ask
-
   popover: 'card card-primary',
   popoverHeader: 'card-header',
   popoverContent: 'card-body',
-
-  // list view
-  listView: 'card card-primary'
+  today: 'alert alert-info', // the plain `info` class requires `.table`, too much to ask
+  bordered: 'card card-primary'
 }
 
 BootstrapTheme.prototype.baseIconClass = 'fa'

packages/core/src/CalendarComponent.tsx

@@ -282,7 +282,7 @@ function setClassNames({ el }: { el: HTMLElement }, context: ComponentContext) {
   let classNames: string[] = [
     'fc',
     'fc-' + context.options.dir,
-    context.theme.getClass('widget')
+    context.theme.getClass('root')
   ]
 
   for (let className of classNames) {

packages/core/src/common/TableDateCell.tsx

@@ -28,7 +28,7 @@ export default class TableDateCell extends BaseComponent<TableDateCellProps> {
     let isDateValid = rangeContainsMarker(dateProfile.activeRange, dateMarker) // TODO: called too frequently. cache somehow.
     let classNames = [
       'fc-day-header',
-      theme.getClass('widgetHeader')
+      theme.getClass('tableCellHeader')
     ]
     let innerText
     let innerHtml

packages/core/src/scrollgrid/util.tsx

@@ -182,7 +182,7 @@ export function getScrollGridClassNames(vGrow: boolean, context: ComponentContex
   let classNames = [
     'scrollgrid',
     (context.isRtl ? 'scrollgrid--rtl' : 'scrollgrid--ltr'), // TODO: kill this
-    context.theme.getClass('tableGrid')
+    context.theme.getClass('table')
   ]
 
   if (vGrow) {
@@ -206,6 +206,6 @@ export function getSectionClassNames(sectionConfig: SectionConfig, wholeTableVGr
 
 export function getChunkClassNames(sectionConfig: SectionConfig, context: ComponentContext) {
   return context.theme.getClass(
-    sectionConfig.type === 'body' ? 'widgetContent' : 'widgetHeader'
+    sectionConfig.type === 'body' ? 'tableCellNormal' : 'tableCellHeader'
   )
 }

packages/core/src/theme/StandardTheme.ts

@@ -4,19 +4,10 @@ export default class StandardTheme extends Theme {
 }
 
 StandardTheme.prototype.classes = {
-  widget: 'fc-unthemed',
-  widgetHeader: 'fc-widget-header',
-  widgetContent: 'fc-widget-content',
-
+  root: 'fc-unthemed',
   buttonGroup: 'fc-button-group',
   button: 'fc-button fc-button-primary',
-  buttonActive: 'fc-button-active',
-
-  popoverHeader: 'fc-widget-header',
-  popoverContent: 'fc-widget-content',
-
-  // list view
-  listView: 'fc-widget-content'
+  buttonActive: 'fc-button-active'
 }
 
 StandardTheme.prototype.baseIconClass = 'fc-icon'

packages/daygrid/src/DayBgRow.tsx

@@ -43,7 +43,7 @@ export default class DayBgRow extends BaseComponent<DayBgRowProps> {
 
     if (!props.cells.length) {
       parts.push(
-        <td class={'fc-day ' + context.theme.getClass('widgetContent')}></td>
+        <td class={'fc-day ' + context.theme.getClass('tableCellNormal')}></td>
       )
     }
 
@@ -65,7 +65,7 @@ function renderCell(date: DateMarker, dateProfile: DateProfile, context: Compone
   let classes = getDayClasses(date, dateProfile, context)
   let dataAttrs = isDateValid ? { 'data-date': dateEnv.formatIso(date, { omitTime: true }) } : {}
 
-  classes.unshift('fc-day', theme.getClass('widgetContent'))
+  classes.unshift('fc-day', theme.getClass('tableCellNormal'))
 
   return (
     <td

packages/daygrid/src/TableSkeleton.tsx

@@ -72,7 +72,7 @@ export default class TableSkeleton extends BaseComponent<TableSkeletonProps> {
     return (
       <div class={classes.join(' ')}>
         <div class='fc-bg'>
-          <table class={theme.getClass('tableGrid')}>
+          <table class={theme.getClass('table')}>
             {props.colGroupNode}
             <DayBgRow
               cells={props.cells[row]}

packages/daygrid/src/TableView.tsx

@@ -115,7 +115,7 @@ export default abstract class TableView<State={}> extends View<State> {
 
     if (this.colWeekNumbersVisible) {
       return [
-        <th class={'fc-week-number fc-shrink ' + theme.getClass('widgetHeader')}>
+        <th class={'fc-week-number fc-shrink ' + theme.getClass('tableCellHeader')}>
           <span>
             {options.weekLabel}
           </span>
@@ -158,7 +158,7 @@ export default abstract class TableView<State={}> extends View<State> {
 
     if (this.colWeekNumbersVisible) {
       return [
-        <td class={'fc-week-number fc-shrink ' + theme.getClass('widgetContent')}></td>
+        <td class={'fc-week-number fc-shrink ' + theme.getClass('tableCellNormal')}></td>
       ]
     }
 

packages/list/src/ListView.tsx

@@ -35,7 +35,7 @@ export default class ListView extends View {
 
   render(props: ViewProps, state: {}, context: ComponentContext) {
     let classNames = getViewClassNames(props.viewSpec).concat('fc-list-view')
-    let themeClassName = context.theme.getClass('listView')
+    let themeClassName = context.theme.getClass('bordered')
 
     if (themeClassName) {
       classNames.push(themeClassName)

packages/list/src/ListViewEvents.tsx

@@ -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('widgetContent') + '">' +
+        '<td class="fc-list-item-time ' + theme.getClass('tableCellNormal') + '">' +
           (timeHtml || '') +
         '</td>' :
         '') +
-      '<td class="fc-list-item-marker ' + theme.getClass('widgetContent') + '">' +
+      '<td class="fc-list-item-marker ' + theme.getClass('tableCellNormal') + '">' +
         '<span class="fc-event-dot"' +
         (bgColor ?
           ' style="background-color:' + bgColor + '"' :
           '') +
         '></span>' +
       '</td>' +
-      '<td class="fc-list-item-title ' + theme.getClass('widgetContent') + '">' +
+      '<td class="fc-list-item-title ' + theme.getClass('tableCellNormal') + '">' +
         '<a' + (url ? ' href="' + htmlEscape(url) + '"' : '') + '>' +
           htmlEscape(eventDef.title || '') +
         '</a>' +
@@ -164,7 +164,7 @@ function renderSegList(allSegs, dayDates: Date[], contentEl: HTMLElement, contex
   let dayIndex
   let daySegs
   let i
-  let tableEl = htmlToElement('<table class="fc-list-table ' + theme.getClass('tableList') + '"><tbody></tbody></table>')
+  let tableEl = htmlToElement('<table class="fc-list-table ' + theme.getClass('table') + '"><tbody></tbody></table>')
   let tbodyEl = tableEl.querySelector('tbody')
 
   for (dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
@@ -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('tableListHeading') + ' ' + theme.getClass('widgetHeader')
+  td.className = theme.getClass('tableCellActive') + ' ' + theme.getClass('tableCellHeader')
   td.colSpan = 3
   tr.appendChild(td)
 

packages/timegrid/src/TimeColsBg.tsx

@@ -32,7 +32,7 @@ export default class TimeColsBg extends BaseComponent<TimeColsBgProps> {
 
     return ( // guid rerenders whole DOM every time
       <div class='fc-bg' ref={this.handleRootEl} key={guid()}>
-        <table class={theme.getClass('tableGrid')}>
+        <table class={theme.getClass('table')}>
           {props.colGroupNode}
           <DayBgRow
             cells={props.cells}

packages/timegrid/src/TimeColsSlats.tsx

@@ -62,7 +62,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
       isLabeled = wholeDivideDurations(slotIterator, labelInterval) !== null
 
       let axisNode =
-        <td class={'fc-axis fc-time ' + theme.getClass('widgetContent')}>
+        <td class={'fc-axis fc-time ' + theme.getClass('tableCellNormal')}>
           {isLabeled &&
             <span>
               {dateEnv.format(slotDate, labelFormat)}
@@ -73,7 +73,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
       rowsNodes.push(
         <tr data-time={formatIsoTimeString(slotDate)} class={isLabeled ? '' : 'fc-minor'}>
           {!isRtl && axisNode}
-          <td class={theme.getClass('widgetContent')}></td>
+          <td class={theme.getClass('tableCellNormal')}></td>
           {isRtl && axisNode}
         </tr>
       )
@@ -84,7 +84,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
 
     return ( // guid rerenders whole DOM every time
       <div class='fc-slats' ref={this.handleRootEl} key={guid()}>
-        <table class={theme.getClass('tableGrid')}>
+        <table class={theme.getClass('table')}>
           {rowsNodes}
         </table>
       </div>

packages/timegrid/src/TimeColsView.tsx

@@ -73,7 +73,7 @@ export default abstract class TimeColsView extends View {
         }
       })
       sections.push({
-        outerContent: <hr class={'fc-divider ' + theme.getClass('widgetHeader')} ref={this.dividerElRef} />
+        outerContent: <hr class={'fc-divider ' + theme.getClass('tableCellHeader')} ref={this.dividerElRef} />
       })
     }
 
@@ -174,7 +174,7 @@ export default abstract class TimeColsView extends View {
       weekText = dateEnv.format(range.start, WEEK_HEADER_FORMAT)
 
       return [
-        <th class={'fc-axis fc-week-number fc-shrink ' + theme.getClass('widgetHeader')} style={this.getAxisStyles()}>
+        <th class={'fc-axis fc-week-number fc-shrink ' + theme.getClass('tableCellHeader')} style={this.getAxisStyles()}>
           <GotoAnchor
             navLinks={options.navLinks}
             gotoOptions={{ date: range.start, type: 'week', forceOff: dayCnt > 1 }}
@@ -184,7 +184,7 @@ export default abstract class TimeColsView extends View {
     }
 
     return [
-      <th class={'fc-axis fc-shrink ' + theme.getClass('widgetHeader')} style={this.getAxisStyles()}></th>
+      <th class={'fc-axis fc-shrink ' + theme.getClass('tableCellHeader')} style={this.getAxisStyles()}></th>
     ]
   }
 
@@ -207,7 +207,7 @@ export default abstract class TimeColsView extends View {
     let { theme } = this.context
 
     return [
-      <td class={'fc-axis fc-shrink ' + theme.getClass('widgetContent')} style={this.getAxisStyles()}></td>
+      <td class={'fc-axis fc-shrink ' + theme.getClass('tableCellNormal')} style={this.getAxisStyles()}></td>
     ]
   }
 
@@ -237,7 +237,7 @@ export default abstract class TimeColsView extends View {
     }
 
     return [
-      <td class={'fc-axis fc-shrink ' + theme.getClass('widgetContent')} style={this.getAxisStyles()}>
+      <td class={'fc-axis fc-shrink ' + theme.getClass('tableCellNormal')} style={this.getAxisStyles()}>
         <span {...spanAttrs}>
           {child}
         </span>