SHOR-125: Styling GDPR extension

Created by: igorpavlov-zz

Overview

This PR styles the extension for Shoreditch theme.

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

.page-civicrm-gdpr-settings {
  // just using the mixin for the table
  .crm-gdpr-settings-form-block {
    @include block-form();

    // help icons are either IDs or classes on this page...
    #help,
    .help {
      margin-left: $crm-standard-gap;
      margin-right: $crm-standard-gap;

.page-civicrm-gdpr-dashboard {
  .crm-gdpr-dashboard-search-form-block {
    // same, mixin
    @include block-form();

    padding-left: $crm-standard-gap !important;
    padding-right: $crm-standard-gap !important;

  .crm-gdpr-dashboard-activities-list-form-block {
    table.selector {
      @include table-selector();

// this selector may not be stable
// but there is no other way to select this particular table
// ℹ️this is fine, because we include the Shoreditch CSS file
// only at a specific page, please see below
table.selector#SummaryTable {
  @include table-selector();

// this is adhoc and will be fixed globally soon
#GroupSubscriptionListTable_wrapper {
  .dataTables_length {
    padding-left: $crm-standard-gap;
    padding-top: $crm-standard-gap / 2;

Conditional styling inclusion

We include the styling only if Shoreditch is enabled:

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

function includeShoreditchStylingIfEnabled () {
  if (!isExtensionEnabled('org.civicrm.shoreditch')) return;

  CRM_Core_Resources::singleton()->
    addStyleFile('uk.co.vedaconsulting.gdpr', 'css/shoreditch-only.min.css', 10);
}

function gdpr_civicrm_pageRun( &$page ) {
  ...

  includeShoreditchStylingIfEnabled();
}

function gdpr_civicrm_buildForm($formName, $form) {
  ...

  includeShoreditchStylingIfEnabled();
}

Testing

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