Problem/Motivation

Gin 8.x-3.0-rc2 was released on: 12 Mar 2023 by:
https://www.drupal.org/project/gin/releases/8.x-3.0-rc2


#3309113: Change CSS3 variables from camelCase to kebab-case

Having issues with nested gin-layer-wrapper

Before the fix:
My Dashboard sandbox with Drupal 10 - before the fix with The Gin Admin theme

Proposed resolution

  • Reset for nested gin-layer-wrapper
  • Switch to support admin themes (Base themes and Sub admin themes)
  • Use new Gin theme spacing
  • Fix style of empty blocks which have empty text
  • Fix style of un-formatted views blocks

Issue #3276164 by saschaeggi: Added style overrides for The Gin admin theme

Having the following logic would be better for sure as Sascha helped with a module.


      $active_theme = \Drupal::theme()->getActiveTheme();
      $base_themes = (array) $active_theme->getBaseThemeExtensions();

      if ($active_theme->getName() === 'gin' || array_key_exists('gin', $base_themes)) {

        // Overrides to support Gin's CSS3 variables for Light/Dark mode, Accent etc.
        $element['#attached']['library'][] = 'dashboards/assets.gin';
      }
      elseif ($active_theme->getName() === 'claro' || array_key_exists('claro', $base_themes)) {
        // Overrides to support Claro's CSS3 variables.
        $element['#attached']['library'][] = 'dashboards/assets.claro';
      }

Remaining tasks

  • File an issue
  • Patch/MR
  • Test
  • Review

User interface changes

After the fix:

Light mode - My Dashboard sandbox with Drupal 10 - after the fix with The Gin Admin theme

My Dashboard sandbox with Drupal 10 - after the fix with The Gin Admin theme


My Dashboard sandbox with Drupal 10 - after the fix with The Claro Admin theme

My Dashboard sandbox with Drupal 10 - after the fix with The Claro Admin theme


Dark mode - My Dashboard sandbox with Drupal 10 - after the fix with The Gin Admin theme

My Dashboard sandbox with Drupal 10 - after the fix with The Gin Admin theme - Dark mode

API changes

  • N/A

Data model changes

  • N/A

Issue fork dashboards-3349570

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Rajab Natshah created an issue. See original summary.

Rajab Natshah’s picture

Rajab Natshah’s picture

FileSize
2.13 KB

Rajab Natshah’s picture

Rajab Natshah’s picture

Issue summary: View changes

This is a quick fix for the issue

Having the following logic would be better for sure as Sascha helped with a module in Issue #3276164 by saschaeggi: Added style overrides for The Gin admin theme.

Which had to support Gin, Claro and their sub themes with the same code base.


      $active_theme = \Drupal::theme()->getActiveTheme();
      $base_themes = (array) $active_theme->getBaseThemeExtensions();

      if ($active_theme->getName() === 'gin' || array_key_exists('gin', $base_themes)) {

        // Overrides to support Gin's CSS3 variables for Light/Dark mode, Accent etc.
        $element['#attached']['library'][] = 'dashboards/assets.gin';
      }
      elseif ($active_theme->getName() === 'claro' || array_key_exists('claro', $base_themes)) {
        // Overrides to support Claro's CSS3 variables.
        $element['#attached']['library'][] = 'dashboards/assets.claro';
      }
Erik Seifert’s picture

Does it also applies to 2.1.x ?

Rajab Natshah’s picture

Version: 2.0.x-dev » 2.1.x-dev

It is for the 2.1.x branch

Testing with Support for Claro and Gin

    $active_theme = \Drupal::theme()->getActiveTheme();
    $base_themes = (array) $active_theme->getBaseThemeExtensions();
  
    if ($active_theme->getName() === 'gin'|| array_key_exists('gin', $base_themes)) {
      $build['#attributes']['class'][] = 'dashboard-gin-panel';
      $build['#attributes']['class'][] = 'gin-layer-wrapper';
    }
    elseif ($active_theme->getName() === 'claro' || array_key_exists('claro', $base_themes)) {
      $build['#attributes']['class'][] = 'dashboard-claro-panel';
      $build['#attributes']['class'][] = 'card';
    }

Rajab Natshah’s picture

This patch has support for Claro too

My Dashboard sandbox with Drupal 10 - after the fix with The Claro Admin theme

My Dashboard sandbox with Drupal 10 - after the fix with The Claro Admin theme

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Assigned: Rajab Natshah » Unassigned
Status: Active » Needs review
Rajab Natshah’s picture

Issue summary: View changes

This is a quick basic fix to have the Dashboards with Layout Builder works with Gin or Claro.
I would love to separate the logic and libraries, not to have dashboard-gin-panel for all admin themes.

Rajab Natshah’s picture

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Thank you, Erik for this so nice and important module!

Erik Seifert’s picture

Thank you for support and work on this module. And after your patch is looking very nice. I like it ;-) Seems your MR does not have any changes, so i commit the patch.

Erik Seifert’s picture

Status: Needs review » Fixed
Erik Seifert’s picture

Version: 2.1.x-dev » 2.1.4

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.