style improvements

fullcalendar · May 31, 2020 · d512895 · d512895
1 parent cc02fcc
commit d512895
Show file tree

Hide file tree

Showing 15 changed files with 131 additions and 114 deletions.
diff --git a/packages-premium b/packages-premium
diff --git a/packages/bootstrap/src/main.css b/packages/bootstrap/src/main.css
@@ -1,19 +1,8 @@
 
 .fc-theme-bootstrap {
-  // TODO: force event hovering on navlink!!
 
-  & .table {
-    margin-bottom: 0;
-  }
-
-  & .fc-timegrid-slots table {
-    /* some themes have background color. see through to cols */
-    background: none;
-  }
-
-  & .fc-bootstrap-bordered { // we provide this alongside "card card-primary"
-    background: transparent; // some themes provide background. undo
-    border-radius: 0; // some themes provide border-radius. undo
+  & a:not([href]) {
+    color: inherit; // natural color for navlinks
   }
 
 }
diff --git a/packages/bootstrap/src/main.ts b/packages/bootstrap/src/main.ts
@@ -6,15 +6,14 @@ export class BootstrapTheme extends Theme {
 
 BootstrapTheme.prototype.classes = {
   root: 'fc-theme-bootstrap', // TODO: compute this off of registered theme name
-  table: 'table-bordered',
+  table: 'table-bordered', // don't attache the `table` class. we only want the borders, not any layout
   tableCellShaded: 'table-active',
   buttonGroup: 'btn-group',
   button: 'btn btn-primary',
   buttonActive: 'active',
-  popover: 'card card-primary',
-  popoverHeader: 'card-header',
-  popoverContent: 'card-body',
-  bordered: 'card card-primary fc-bootstrap-bordered'
+  popover: 'popover',
+  popoverHeader: 'popover-header',
+  popoverContent: 'popover-body'
 }
 
 BootstrapTheme.prototype.baseIconClass = 'fa'

diff --git a/packages/common/src/common/TableDateCell.tsx b/packages/common/src/common/TableDateCell.tsx
@@ -41,9 +41,9 @@ export class TableDateCell extends BaseComponent<TableDateCellProps> { // BAD na
     let text = dateEnv.format(date, props.dayHeaderFormat)
 
     // if colCnt is 1, we are already in a day-view and don't need a navlink
-    let navLinkData = (options.navLinks && !dayMeta.isDisabled && props.colCnt > 1)
-      ? buildNavLinkData(date)
-      : null
+    let navLinkAttrs = (options.navLinks && !dayMeta.isDisabled && props.colCnt > 1)
+      ? { 'data-navlink': buildNavLinkData(date), tabIndex: 0 }
+      : {}
 
     let hookProps: DayHeaderHookProps = {
       date: dateEnv.toDate(date),
@@ -70,18 +70,20 @@ export class TableDateCell extends BaseComponent<TableDateCellProps> { // BAD na
             colSpan={props.colSpan}
             {...props.extraDataAttrs}
           >
-            {!dayMeta.isDisabled &&
-              <a
-                data-navlink={navLinkData}
-                className={[
-                  'fc-col-header-cell-cushion',
-                  props.isSticky ? 'fc-sticky' : ''
-                ].join(' ')}
-                ref={innerElRef}
-              >
-                {innerContent}
-              </a>
-            }
+            <div className='fc-scrollgrid-sync-inner'>
+              {!dayMeta.isDisabled &&
+                <a
+                  ref={innerElRef}
+                  className={[
+                    'fc-col-header-cell-cushion',
+                    props.isSticky ? 'fc-sticky' : ''
+                  ].join(' ')}
+                  {...navLinkAttrs}
+                >
+                  {innerContent}
+                </a>
+              }
+            </div>
           </th>
         )}
       </RenderHook>
@@ -149,15 +151,17 @@ export class TableDowCell extends BaseComponent<TableDowCellProps> {
             colSpan={props.colSpan}
             {...props.extraDataAttrs}
           >
-            <a
-              className={[
-                'fc-col-header-cell-cushion',
-                props.isSticky ? 'fc-sticky' : ''
-              ].join(' ')}
-              ref={innerElRef}
-            >
-              {innerContent}
-            </a>
+            <div className='fc-scrollgrid-sync-inner'>
+              <a
+                className={[
+                  'fc-col-header-cell-cushion',
+                  props.isSticky ? 'fc-sticky' : ''
+                ].join(' ')}
+                ref={innerElRef}
+              >
+                {innerContent}
+              </a>
+            </div>
           </th>
         )}
       </RenderHook>

diff --git a/packages/common/src/styles/bg.css b/packages/common/src/styles/bg.css
@@ -10,41 +10,32 @@
     left: 0;
     right: 0;
     bottom: 0;
-
-    opacity: .3;
   }
 
-
   & .fc-non-business {
-    background: #d7d7d7;
+    background: var(--fc-non-business-color);
   }
 
   & .fc-bg-event {
-    background: rgb(143, 223, 130);
+    background: var(--fc-bg-event-color);
   }
 
   & .fc-highlight {
-    background: #bce8f1;
+    background: var(--fc-highlight-color);
   }
 
-
   & .fc-bg-event .fc-event-title {
     margin: .5em;
-    font-size: .85em;
+    font-size: var(--fc-smaller-font-size);
     font-style: italic;
   }
 
-
-  // today <td>
-  // DIFFERENT SYSTEM, not within a shared container
-
-  // for all themes. bootstrap didn't provide a good semi-transparent color for this
   & .fc-day-today {
-    background: rgba(255, 220, 40, 0.15);
+    background: var(--fc-today-color); // for all themes. bootstrap didn't provide a good semi-transparent color for this
   }
 
   & .fc-day-disabled {
-    background: #f2f2f2; // TODO: let theme style
+    background: var(--fc-neutral-color);
   }
 
 }
diff --git a/packages/common/src/styles/button.css b/packages/common/src/styles/button.css
@@ -6,10 +6,10 @@ These styles only apply when the standard-theme is activated.
 When it's NOT activated, the fc-button classes won't even be in the DOM.
 */
 
-// reset
-
 .fc {
 
+  // reset
+
   & .fc-button {
     border-radius: 0;
     overflow: visible;
@@ -43,7 +43,6 @@ When it's NOT activated, the fc-button classes won't even be in the DOM.
   & .fc-button {
     display: inline-block;
     font-weight: 400;
-    color: #212529;
     text-align: center;
     vertical-align: middle;
     user-select: none;
@@ -56,7 +55,6 @@ When it's NOT activated, the fc-button classes won't even be in the DOM.
   }
 
   & .fc-button:hover {
-    color: #212529;
     text-decoration: none;
   }
 
@@ -72,32 +70,32 @@ When it's NOT activated, the fc-button classes won't even be in the DOM.
   // "primary" coloring
 
   & .fc-button-primary {
-    color: #fff;
-    background-color: #2C3E50;
-    border-color: #2C3E50;
+    color: var(--fc-button-text-color);
+    background-color: var(--fc-button-bg-color);
+    border-color: var(--fc-button-border-color);
   }
 
   & .fc-button-primary:hover {
-    color: #fff;
-    background-color: #1e2b37;
-    border-color: #1a252f;
+    color: var(--fc-button-text-color);
+    background-color: var(--fc-button-hover-bg-color);
+    border-color: var(--fc-button-hover-border-color);
   }
 
-  & .fc-button-primary:focus {
-    box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
+  & .fc-button-primary:disabled { // not DRY
+    color: var(--fc-button-text-color);
+    background-color: var(--fc-button-bg-color);
+    border-color: var(--fc-button-border-color); // overrides :hover
   }
 
-  & .fc-button-primary:disabled {
-    color: #fff;
-    background-color: #2C3E50;
-    border-color: #2C3E50;
+  & .fc-button-primary:focus {
+    box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
   }
 
   & .fc-button-primary:not(:disabled):active,
   & .fc-button-primary:not(:disabled).fc-button-active {
-    color: #fff;
-    background-color: #1a252f;
-    border-color: #151e27;
+    color: var(--fc-button-text-color);
+    background-color: var(--fc-button-active-bg-color);
+    border-color: var(--fc-button-active-border-color);
   }
 
   & .fc-button-primary:not(:disabled):active:focus,

diff --git a/packages/common/src/styles/calendar-root.css b/packages/common/src/styles/calendar-root.css
@@ -1,7 +1,10 @@
 
-// resets
-
 .fc {
+  // layout of immediate children
+  display: flex;
+  flex-direction: column;
+
+  font-size: 1em;
 
   &,
   & *,
@@ -10,15 +13,14 @@
     box-sizing: border-box;
   }
 
-
   & table {
-    border-spacing: 0;
-    font-size: 1em; /* normalize cross-browser */
     border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 1em; // normalize cross-browser
   }
 
   & th {
-    text-align: center; // is this needed?
+    text-align: center;
   }
 
   & th,
@@ -34,13 +36,6 @@
   & a[data-navlink]:hover {
     text-decoration: underline;
   }
-
-  font-size: 1em;
-
-  // layout of immediate children
-  display: flex;
-  flex-direction: column;
-
 }
 
 .fc-direction-ltr {

diff --git a/packages/common/src/styles/col-header.css b/packages/common/src/styles/col-header.css
@@ -2,7 +2,7 @@
 .fc {
 
   & .fc-col-header-cell-cushion {
-    display: inline-block; // mostly for sticky
+    display: inline-block; // x-browser for when sticky (when multi-tier header)
     padding: 2px 4px;
   }
 

diff --git a/packages/common/src/styles/vars.css b/packages/common/src/styles/vars.css
@@ -5,9 +5,26 @@ these values are automatically known in all stylesheets.
 the :root statement itself is only included in the common stylesheet.
 this file is not processed by postcss when imported into the postcss-custom-properties plugin,
 so only write standard css!
+
+NOTE: for old browsers, will need to start after changing a variable
 */
 
 :root {
-  --fc-theme-standard-border-color: #ddd;
-  --fc-theme-standard-muted-bg-color: #eee;
+  --fc-theme-standard-border-color: #ddd; /* TODO: rename */
+  --fc-theme-standard-muted-bg-color: #eee; /* TODO: rename */
+  --fc-non-business-color: rgba(215, 215, 215, 0.3);
+  --fc-bg-event-color: rgb(143, 223, 130, 0.3);
+  --fc-highlight-color: rgba(188, 232, 241, 0.3);
+  --fc-today-color: rgba(255, 220, 40, 0.15);
+  --fc-neutral-color: rgba(208, 208, 208, 0.3);
+  --fc-smaller-font-size: .85em;
+
+  --fc-button-text-color: #fff;
+  --fc-button-bg-color: #2C3E50;
+  --fc-button-border-color: #2C3E50;
+  --fc-button-hover-bg-color: #1e2b37;
+  --fc-button-hover-border-color: #1a252f;
+  --fc-button-active-bg-color: #1a252f;
+  --fc-button-active-border-color: #151e27;
+
 }
diff --git a/packages/daygrid/src/TableCell.tsx b/packages/daygrid/src/TableCell.tsx
@@ -95,6 +95,10 @@ export class TableCell extends DateComponent<TableCellProps> {
       view: viewApi
     }
 
+    let navLinkAttrs = options.navLinks
+      ? { 'data-navlink': buildNavLinkData(date, 'week'), tabIndex: 0 }
+      : {}
+
     return (
       <DayCellRoot
         date={date}
@@ -118,7 +122,7 @@ export class TableCell extends DateComponent<TableCellProps> {
                     <a
                       ref={rootElRef}
                       className={[ 'fc-daygrid-week-number' ].concat(classNames).join(' ')}
-                      data-navlink={options.navLinks ? buildNavLinkData(date, 'week') : null}
+                      {...navLinkAttrs}
                     >
                       {innerContent}
                     </a>
@@ -223,6 +227,10 @@ class TableCellTop extends BaseComponent<TableCellTopProps> {
   render() {
     let { props } = this
 
+    let navLinkAttrs = this.context.options.navLinks
+      ? { 'data-navlink': buildNavLinkData(props.date), tabIndex: 0 }
+      : {}
+
     return (
       <DayCellContent
         date={props.date}
@@ -235,10 +243,7 @@ class TableCellTop extends BaseComponent<TableCellTopProps> {
         {(innerElRef, innerContent) => (
           innerContent &&
             <div className='fc-daygrid-day-top' ref={innerElRef}>
-              <a
-                className='fc-daygrid-day-number'
-                data-navlink={this.context.options.navLinks ? buildNavLinkData(props.date) : null}
-              >
+              <a className='fc-daygrid-day-number' {...navLinkAttrs}>
                 {innerContent}
               </a>
             </div>

diff --git a/packages/daygrid/src/TableView.tsx b/packages/daygrid/src/TableView.tsx
@@ -11,7 +11,8 @@ import {
   RefObject,
   renderScrollShim,
   getStickyHeaderDates,
-  getStickyFooterScrollbar
+  getStickyFooterScrollbar,
+  ChunkConfigRowContent
 } from '@fullcalendar/common'
 
 
@@ -27,7 +28,7 @@ export abstract class TableView<State={}> extends DateComponent<ViewProps, State
 
 
   renderSimpleLayout(
-    headerRowContent: VNode | null,
+    headerRowContent: ChunkConfigRowContent,
     bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode
   ) {
     let { props, context } = this
@@ -71,7 +72,7 @@ export abstract class TableView<State={}> extends DateComponent<ViewProps, State
 
 
   renderHScrollLayout(
-    headerRowContent: VNode | null,
+    headerRowContent: ChunkConfigRowContent,
     bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode,
     colCnt: number,
     dayMinWidth: number