Unverified Commit 389ca89d authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3096566 by huzooka, aleevas, Dinesh18, ravi.shankar, phenaproxima,... 

Issue #3096566 by huzooka, aleevas, Dinesh18, ravi.shankar, phenaproxima, lauriii: Copy media library styles from Seven to Claro
parent 5a9de596

core/themes/claro/claro.info.yml

+10 −0
Original line number Diff line number Diff line
@@ -119,6 +119,12 @@ libraries-override: 
      theme:

        /core/themes/stable/css/views_ui/views_ui.admin.theme.css: css/theme/views_ui.admin.theme.css



  # Drupal throws an IncompleteLibraryDefinitionException if a base theme

  # defined library is set to false in a subtheme's libraries-override. We use

  # 'claro/empty' for working around this behavior.

  # @see https://www.drupal.org/node/3098375

  classy/media_library: claro/empty



libraries-extend:

  ckeditor/drupal.ckeditor:

    - claro/ckeditor-editor
@@ -152,6 +158,10 @@ libraries-extend: 
    - claro/ajax

  views/views.module:

    - claro/views

  media_library/view:

    - claro/media_library.theme

  media_library/widget:

    - claro/media_library.theme



quickedit_stylesheets:

  - css/components/quickedit.css

core/themes/claro/claro.libraries.yml

+14 −0
Original line number Diff line number Diff line
@@ -64,6 +64,14 @@ global-styling: 
    # it has to be always attached.

    - core/modernizr



# Drupal throws an IncompleteLibraryDefinitionException if a base theme defined

# library is set to false in a subtheme's libraries-override. This empty

# library is used as a workaround.

# @see https://www.drupal.org/node/3098375

empty:

  version: VERSION

  css: {}



node-form:

  version: VERSION

  css:
@@ -244,3 +252,9 @@ file: 
  css:

    component:

      css/components/file.css: {}



media_library.theme:

  version: VERSION

  css:

    theme:

      css/theme/media-library.css: {}

core/themes/claro/claro.theme

+190 −5
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ 
use Drupal\Core\Url;

use Drupal\media\MediaForm;

use Drupal\file\FileInterface;

use Drupal\views\ViewExecutable;



/**

 * Implements hook_theme_suggestions_HOOK_alter() for form_element.
@@ -358,13 +359,22 @@ function claro_preprocess_details(&$variables) { 
/**

 * Implements hook_form_alter().

 */

function claro_form_alter(&$form, FormStateInterface $form_state) {

function claro_form_alter(array &$form, FormStateInterface $form_state, $form_id) {

  $build_info = $form_state->getBuildInfo();

  $form_object = $form_state->getFormObject();



  // Make entity forms delete link use the action-link component.

  if (isset($form['actions']['delete']['#type']) && $form['actions']['delete']['#type'] === 'link' && !empty($build_info['callback_object']) && $build_info['callback_object'] instanceof EntityForm) {

    $form['actions']['delete'] = _claro_convert_link_to_action_link($form['actions']['delete'], 'trash', 'default', 'danger');

  }



  if ($form_object instanceof ViewsForm && strpos($form_object->getBaseFormId(), 'views_form_media_library') === 0) {

    if (isset($form['header'])) {

      $form['header']['#attributes']['class'][] = 'media-library-views-form__header';

      $form['header']['media_bulk_form']['#attributes']['class'][] = 'media-library-views-form__bulk_form';

    }

    $form['actions']['submit']['#attributes']['class'] = ['media-library-select'];

  }

}



/**
@@ -597,11 +607,10 @@ function claro_views_ui_display_tab_alter(&$element) { 
}



/**

 * Implements hook_form_FORM_ID_alter() for views_exposed_form.

 * Implements hook_preprocess_HOOK for views_exposed_form.

 */

function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_state) {

  $view = $form_state->getStorage()['view'];

  $view_title = $view->getTitle();

function claro_preprocess_views_exposed_form(&$variables) {

  $form = &$variables['form'];



  // Add BEM classes for items in the form.

  // Sorted keys.
@@ -629,6 +638,14 @@ function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_st 
    // Add a modifier class to the item that precedes the form actions.

    $form[$child_before_actions_key]['#wrapper_attributes']['class'][] = 'views-exposed-form__item--preceding-actions';

  }

}



/**

 * Implements hook_form_FORM_ID_alter() for views_exposed_form.

 */

function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_state) {

  $view = $form_state->getStorage()['view'];

  $view_title = $view->getTitle();



  // Add a label so screenreaders can identify the purpose of the exposed form

  // without having to scan content that appears further down the page.
@@ -1236,3 +1253,171 @@ function _claro_preprocess_file_and_image_widget(array &$variables) { 
    }

  }

}



/**

 * Implements hook_preprocess_views_view_fields().

 *

 * This targets each rendered media item in the grid display of the media

 * library's modal dialog.

 */

function claro_preprocess_views_view_fields__media_library(array &$variables) {

  // Add classes to media rendered entity field so it can be targeted for

  // styling. Adding this class in a template is very difficult to do.

  if (isset($variables['fields']['rendered_entity']->wrapper_attributes)) {

    $variables['fields']['rendered_entity']->wrapper_attributes->addClass('media-library-item__click-to-select-trigger');

  }

}



/**

 * Implements hook_form_BASE_FORM_ID_alter().

 */

function claro_form_media_library_add_form_alter(array &$form, FormStateInterface $form_state) {

  $form['#attributes']['class'][] = 'media-library-add-form';

  $form['#attached']['library'][] = 'claro/media_library.theme';



  // If there are unsaved media items, apply styling classes to various parts

  // of the form.

  if (isset($form['media'])) {

    $form['#attributes']['class'][] = 'media-library-add-form--with-input';



    // Put a wrapper around the informational message above the unsaved media

    // items.

    $form['description']['#template'] = '<p class="media-library-add-form__description">{{ text }}</p>';

  }

  else {

    $form['#attributes']['class'][] = 'media-library-add-form--without-input';

  }

}



/**

 * Implements hook_form_FORM_ID_alter().

 */

function claro_form_media_library_add_form_upload_alter(array &$form, FormStateInterface $form_state) {

  $form['#attributes']['class'][] = 'media-library-add-form--upload';



  if (isset($form['container'])) {

    $form['container']['#attributes']['class'][] = 'media-library-add-form__input-wrapper';

  }

}



/**

 * Implements hook_form_FORM_ID_alter().

 */

function claro_form_media_library_add_form_oembed_alter(array &$form, FormStateInterface $form_state) {

  $form['attributes']['class'][] = 'media-library-add-form--oembed';



  // If no media items have been added yet, add a couple of styling classes

  // to the initial URL form.

  if (isset($form['container'])) {

    $form['container']['#attributes']['class'][] = 'media-library-add-form__input-wrapper';

    $form['container']['url']['#attributes']['class'][] = 'media-library-add-form-oembed-url';

    $form['container']['submit']['#attributes']['class'][] = 'media-library-add-form-oembed-submit';

  }

}



/**

 * Implements hook_preprocess_item_list__media_library_add_form_media_list().

 *

 * This targets each new, unsaved media item added to the media library, before

 * they are saved.

 */

function claro_preprocess_item_list__media_library_add_form_media_list(array &$variables) {

  foreach ($variables['items'] as &$item) {

    $item['value']['preview']['#attributes']['class'][] = 'media-library-add-form__preview';

    $item['value']['fields']['#attributes']['class'][] = 'media-library-add-form__fields';

    $item['value']['remove_button']['#attributes']['class'][] = 'media-library-add-form__remove-button';



    // #source_field_name is set by AddFormBase::buildEntityFormElement()

    // to help themes and form_alter hooks identify the source field.

    $fields = &$item['value']['fields'];

    $source_field_name = $fields['#source_field_name'];

    if (isset($fields[$source_field_name])) {

      $fields[$source_field_name]['#attributes']['class'][] = 'media-library-add-form__source-field';

    }

  }

}



/**

 * Implements hook_preprocess_media_library_item__widget().

 *

 * This targets each media item selected in an entity reference field.

 */

function claro_preprocess_media_library_item__widget(array &$variables) {

  $variables['content']['remove_button']['#attributes']['class'][] = 'media-library-item__remove';

}



/**

 * Implements hook_preprocess_media_library_item__small().

 *

 * This targets each pre-selected media item selected when adding new media in

 * the modal media library dialog.

 */

function claro_preprocess_media_library_item__small(array &$variables) {

  $variables['content']['select']['#attributes']['class'][] = 'media-library-item__click-to-select-checkbox';

}



/**

 * @todo Remove this when https://www.drupal.org/project/drupal/issues/2999549

 * lands.

 *

 * @see \Drupal\media_library\Plugin\Field\FieldWidget\MediaLibraryWidget::formElement()

 */

function claro_preprocess_fieldset__media_library_widget(array &$variables) {

  if (isset($variables['prefix']['weight_toggle'])) {

    $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'media-library-widget__toggle-weight';

  }

  if (isset($variables['suffix']['open_button'])) {

    $variables['suffix']['open_button']['#attributes']['class'][] = 'media-library-open-button';

  }

}



/**

 * Implements hook_views_pre_render().

 */

function claro_views_pre_render(ViewExecutable $view) {

  $add_classes = function (&$option, array $classes_to_add) {

    $classes = preg_split('/\s+/', $option);

    $classes = array_filter($classes);

    $classes = array_merge($classes, $classes_to_add);

    $option = implode(' ', array_unique($classes));

  };



  if ($view->id() === 'media_library') {

    if ($view->display_handler->options['defaults']['css_class']) {

      $add_classes($view->displayHandlers->get('default')->options['css_class'], ['media-library-view']);

    }

    else {

      $add_classes($view->display_handler->options['css_class'], ['media-library-view']);

    }



    if ($view->current_display === 'page') {

      if (array_key_exists('media_bulk_form', $view->field)) {

        $add_classes($view->field['media_bulk_form']->options['element_class'], ['media-library-item__click-to-select-checkbox']);

      }

      if (array_key_exists('rendered_entity', $view->field)) {

        $add_classes($view->field['rendered_entity']->options['element_class'], ['media-library-item__content']);

      }

      if (array_key_exists('edit_media', $view->field)) {

        $add_classes($view->field['edit_media']->options['alter']['link_class'], ['media-library-item__edit']);

      }

      if (array_key_exists('delete_media', $view->field)) {

        $add_classes($view->field['delete_media']->options['alter']['link_class'], ['media-library-item__remove']);

      }

    }

    elseif (strpos($view->current_display, 'widget') === 0) {

      if (array_key_exists('rendered_entity', $view->field)) {

        $add_classes($view->field['rendered_entity']->options['element_class'], ['media-library-item__content']);

      }

      if (array_key_exists('media_library_select_form', $view->field)) {

        $add_classes($view->field['media_library_select_form']->options['element_wrapper_class'], ['media-library-item__click-to-select-checkbox']);

      }



      if ($view->display_handler->options['defaults']['css_class']) {

        $add_classes($view->displayHandlers->get('default')->options['css_class'], ['media-library-view--widget']);

      }

      else {

        $add_classes($view->display_handler->options['css_class'], ['media-library-view--widget']);

      }

    }

  }

}

core/themes/claro/css/components/views-exposed-form.css

+20 −9
Original line number Diff line number Diff line
@@ -6,6 +6,7 @@ 
 */



/**

 * @file

 * Visual styles for views exposed form.

 */
@@ -54,10 +55,20 @@ 
}



/**

 * Use flexbox and some margin resets to make the fields + actions go inline

 * Use flexbox and some margin resets to make the fields + actions go inline.

 *

 * For (at least) Media Library, this file is typically inserted by AJAX add_css

 * command when the dialog is opened. The AJAX add_css command always adds the

 * missing-but-required CSS assets to the beginning of the HTML <head>. Because

 * of this, we cannot rely on the expected loading order of the CSS assets.

 * This is why we have to double these selectors: we have to get the expected

 * output even for the Media Library modal.

 *

 * @todo Remove double selectors after https://www.drupal.org/node/1461322

 * has been resolved.

 */



.views-exposed-form {

.views-exposed-form.views-exposed-form {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;
@@ -73,32 +84,32 @@ 
rgba(0, 0, 0, 0.1);

}



.views-exposed-form__item {

.views-exposed-form__item.views-exposed-form__item {

  margin: 0.75rem 0.5rem 0 0; /* LTR */

}



[dir="rtl"] .views-exposed-form__item {

[dir="rtl"] .views-exposed-form__item.views-exposed-form__item {

  margin-right: 0;

  margin-left: 0.5rem;

}



.views-exposed-form__item--preceding-actions {

.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {

  margin-right: 1rem; /* LTR */

}



[dir="rtl"] .views-exposed-form__item--preceding-actions {

[dir="rtl"] .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {

  margin-right: 0;

  margin-left: 1rem;

}



.views-exposed-form__item--actions .button {

.views-exposed-form__item--actions.views-exposed-form__item--actions .button {

  margin-bottom: 0;

}



.views-exposed-form__item--actions .button:last-child {

.views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {

  margin-right: 0;

}



[dir="rtl"] .views-exposed-form__item--actions:last-child {

[dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {

  margin-left: 0;

}

core/themes/claro/css/components/views-exposed-form.pcss.css

+20 −9
Original line number Diff line number Diff line 
/**

 * @file

 * Visual styles for views exposed form.

 */



@import "../base/variables.pcss.css";



/**

 * Use flexbox and some margin resets to make the fields + actions go inline

 * Use flexbox and some margin resets to make the fields + actions go inline.

 *

 * For (at least) Media Library, this file is typically inserted by AJAX add_css

 * command when the dialog is opened. The AJAX add_css command always adds the

 * missing-but-required CSS assets to the beginning of the HTML <head>. Because

 * of this, we cannot rely on the expected loading order of the CSS assets.

 * This is why we have to double these selectors: we have to get the expected

 * output even for the Media Library modal.

 *

 * @todo Remove double selectors after https://www.drupal.org/node/1461322

 * has been resolved.

 */



.views-exposed-form {

.views-exposed-form.views-exposed-form {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;
@@ -21,29 +32,29 @@ 
  box-shadow: var(--details-box-shadow);

}



.views-exposed-form__item {

.views-exposed-form__item.views-exposed-form__item {

  margin: var(--space-s) var(--space-xs) 0 0; /* LTR */

}

[dir="rtl"] .views-exposed-form__item {

[dir="rtl"] .views-exposed-form__item.views-exposed-form__item {

  margin-right: 0;

  margin-left: var(--space-xs);

}



.views-exposed-form__item--preceding-actions {

.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {

  margin-right: var(--space-m); /* LTR */

}

[dir="rtl"] .views-exposed-form__item--preceding-actions {

[dir="rtl"] .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {

  margin-right: 0;

  margin-left: var(--space-m);

}



.views-exposed-form__item--actions .button {

.views-exposed-form__item--actions.views-exposed-form__item--actions .button {

  margin-bottom: 0;

}



.views-exposed-form__item--actions .button:last-child {

.views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {

  margin-right: 0;

}

[dir="rtl"] .views-exposed-form__item--actions:last-child {

[dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {

  margin-left: 0;

}