SHOR-124: Style Pivot Reports extension

Overview

This PR:

Enables SASS in the extension
Provides a CSS builder tool via Gulp
Adds Shoreditch styling to the report if Shoreditch is enabled

Note: please use NodeJS v8.9.4 for building SASS files.

Before

After

Technical Details

Gulp & SASS

Gulp file was added for SASS compilation, minification etc + linters. We have 2 standard tasks here: sass and watch:

gulp.task('sass', () => {
  return gulp.src('scss/shoreditch-only.scss')
    .pipe(sass({
      outputStyle: 'compressed',
      includePaths: civicrmScssRoot.getPath(), // to get Shoreditch vars
      precision: 10
    }).on('error', sass.logError)) // SASS compilation
    .pipe(stripCssComments({ preserve: false })) // comments stripping
    .pipe(cssmin()) // minification
    .pipe(rename({ suffix: '.min' })) // renaming
    .pipe(gulp.dest('css/')); // putting
});

// standard watcher
gulp.task('watch', () => {
  gulp.watch('scss/**/*.scss', gulp.series(['sass']));
});

So, as usual, npx gulp or npx gulp sass or npx gulp watch are your tools for working with SASS in this extension.

Of course, this means new npm dependencies:

Styling

A separate page partial was created. Please note, not all the code is presented in the snippet below.

// we use this border a lot in this file, so a var was created
$pivot-report-border: solid 1px $gray-light;
// same as above
$crm-standard-half-gap: $crm-standard-gap / 2;

#pivot-report-config {
  // we'd like content be on a white background
  background-color: $crm-white;
  border-radius: $border-radius-child;
  padding: $crm-standard-half-gap;

  .report-config-save-new-btn,
  .report-config-save-btn,
  .report-config-delete-btn {
    // Aligns the top of the button with the top of the selector
    margin-bottom: -14px;

  .pivot-report-export-button {
    margin-left: $crm-standard-half-gap;
    // Makes the gap exactly 20px between buttons and bottom edge
    margin-top: -$crm-standard-half-gap;

#pivot-report-preloader {
  ...

  .progress {
    box-shadow: none;
    margin-bottom: 0;
    margin-top: $crm-standard-half-gap;

#pivot-report-table {
  border: 0;
  margin-top: $crm-standard-gap;

  .pvtUi {
    border: 0;

  .pvtAxisContainer,
  .pvtVals,
  .pvtRendererArea {
    background-color: $crm-white;
    border: 0;

  .pvtAxisContainer {
    > li {
      background-color: $gray-lighter;
      border: $pivot-report-border;
      border: 0;
      margin-bottom: $padding-base-vertical;

      &:last-of-type {
        margin-bottom: 0;

      // hovering is very important, this tells you that the elem is interactive
      &:hover {
        background-color: $gray-light;

      // to feel the depth while dragging
      &.ui-sortable-helper {
        box-shadow: $box-shadow;

      &.pvtPlaceholder {
        background-color: transparent;
        // dashed because it is a placeholder for a drop
        border: dashed 1px $crm-gray-matte;
        // has the same height as 1 text-line elem, so no UI jumping
        height: $font-size-medium + $crm-standard-gap;

    &.pvtRows {
      // this is a TD so we need to explicitly say where the rounding is
      border-radius: 0 0 0 4px;
      // also add a border so it is separated from other TD
      border-right: $pivot-report-border;

Conditional styling inclusion

We include the styling only if Shoreditch is enabled:

if (isExtensionEnabled('org.civicrm.shoreditch')) {
  CRM_Core_Resources::singleton()
    ->addStyleFile('uk.co.compucorp.civicrm.pivotreport', 'css/shoreditch-only.min.css', 10);

// ...

function isExtensionEnabled($key) {
  $isEnabled = CRM_Core_DAO::getFieldValue(
    'CRM_Core_DAO_Extension',
    $key,
    'is_active',
    'full_name'
  );

  return !empty($isEnabled);

Refactoring

Existing CSS files were automatically fixed with a linter. No manual changes were applied.

Testing

The styling is isolated to specific IDs and classes, so only manual tests were performed.

compucorp / uk.co.compucorp.civicrm.pivotreport