Unverified Commit b720db29 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Revert "Issue #3023317 by huzooka, lauriii, antonellasevero, saschaeggi, Kami... 

Revert "Issue #3023317 by huzooka, lauriii, antonellasevero, saschaeggi, Kami Amiga, ckrina: Autocomplete Field Style Update"

This reverts commit eb182bed.
parent eb182bed

claro.info.yml

+1 −6
Changes for claro.info.yml: 1 added line, 6 removed lines.
Original line number Diff line number Diff line
@@ -26,7 +26,6 @@ libraries-override: 
    css:

      component:

        /core/themes/stable/css/system/components/ajax-progress.module.css: css/dist/components/ajax-progress.module.css

        /core/themes/stable/css/system/components/autocomplete-loading.module.css: css/dist/components/autocomplete-loading.module.css

        /core/themes/stable/css/system/components/system-status-counter.css: css/dist/components/system-status-counter.css

        /core/themes/stable/css/system/components/system-status-report-counters.css: css/dist/components/system-status-report-counters.css

        /core/themes/stable/css/system/components/system-status-report-general-info.css: css/dist/components/system-status-report-general-info.css
@@ -52,11 +51,9 @@ libraries-override: 
  classy/base:

    css:

      component:

        css/components/breadcrumb.css: false

        css/components/details.css: false

        css/components/form.css: false

        css/components/tableselect.css: css/dist/components/tableselect.css

        css/components/tabledrag.css: css/dist/components/tabledrag.css

        css/components/breadcrumb.css: false

  # @todo Refactor when https://www.drupal.org/node/2642122 is fixed.

  filter/drupal.filter.admin:

    css:
@@ -84,8 +81,6 @@ libraries-extend: 
    - claro/media_library.view

  system/admin:

    - claro/system.admin

  core/drupal.autocomplete:

    - claro/autocomplete

  tour/tour-styling:

    - claro/tour-styling

claro.libraries.yml

+0 −8
Changes for claro.libraries.yml: 0 added lines, 8 removed lines.
Original line number Diff line number Diff line
@@ -166,7 +166,6 @@ system.admin: 
      css/dist/layout/system-admin--layout.css: { weight: -10 }



drupal-theme:

  version: VERSION

  js:

    js/claro.theme.js: {}

  dependencies:
@@ -174,17 +173,10 @@ drupal-theme: 


# @todo Remove after https://www.drupal.org/node/3024975 is in.

drupal.tableselect:

  version: VERSION

  js:

    js/claro.tableselect.js: {}



# @todo Remove after https://www.drupal.org/node/3024975 is in.

media_library.view:

  version: VERSION

  js:

    js/claro.media_library.view.js: {}
 


autocomplete:

  version: VERSION

  js:

    js/claro.autocomplete.js: {}

claro.theme

+0 −67
Changes for claro.theme: 0 added lines, 67 removed lines.
Original line number Diff line number Diff line
@@ -6,9 +6,7 @@ 
 */



use Drupal\Component\Utility\Html;

use Drupal\Component\Utility\UrlHelper;

use Drupal\Core\Form\FormStateInterface;

use Drupal\Core\GeneratedLink;

use Drupal\Core\Link;

use Drupal\Core\Template\Attribute;

use Drupal\Core\Url;
@@ -362,10 +360,6 @@ function claro_preprocess_input(&$variables) { 
    $variables['attributes']['class'][] = 'form-element';

    $variables['attributes']['class'][] = Html::getClass('form-element--type-' . $type_html);

    $variables['attributes']['class'][] = Html::getClass('form-element--api-' . $type_api);



    if (!empty($variables['element']['#autocomplete_route_name'])) {

      $variables['autocomplete_message'] = t('Loading…');

    }

  }



  if (in_array($type_html, ['checkbox', 'radio'])) {
@@ -454,64 +448,3 @@ function claro_preprocess_radios(&$variables) { 
function claro_preprocess_filter_tips(&$variables) {

  $variables['#attached']['library'][] = 'filter/drupal.filter';

}
 


/**

 * Implements template_preprocess_HOOK() for table.

 *

 * @todo Revisit after https://www.drupal.org/node/3025726 or

 * https://www.drupal.org/node/1973418 is in.

 */

function claro_preprocess_table(&$variables) {

  if (!empty($variables['header'])) {

    foreach ($variables['header'] as &$header_cell) {

      // For 8.6.x and below.

      // @todo Remove this after 8.6.x is out of support.

      if ($header_cell['content'] instanceof GeneratedLink) {

        $dom_doc = Html::load($header_cell['content']->getGeneratedLink());

        $anchors = $dom_doc->getElementsByTagName('a');



        if (!empty($anchors)) {

          foreach ($anchors as $anchor) {

            $anchor_href = $anchor->getAttribute('href');

            $parsed_url = UrlHelper::parse($anchor_href);

            $query = !empty($parsed_url['query']) ? $parsed_url['query'] : [];



            if (isset($query['order']) && isset($query['sort'])) {

              $header_cell['attributes']->addClass('sortable-heading');

            }

          }

        }

      }



      // For 8.7.x and above.

      if ($header_cell['content'] instanceof Link) {

        $query = $header_cell['content']->getUrl()->getOption('query') ?: [];



        if (isset($query['order']) && isset($query['sort'])) {

          $header_cell['attributes']->addClass('sortable-heading');

        }

      }

    }

  }

}



/**

 * Implements template_preprocess_HOOK() for views_view_table.

 *

 * @todo Revisit after https://www.drupal.org/node/3025726 or

 * https://www.drupal.org/node/1973418 is in.

 */

function claro_preprocess_views_view_table(&$variables) {

  if (!empty($variables['header'])) {

    foreach ($variables['header'] as &$header_cell) {

      if (!empty($header_cell['url'])) {

        $parsed_url = UrlHelper::parse($header_cell['url']);

        $query = !empty($parsed_url['query']) ? $parsed_url['query'] : [];



        if (isset($query['order']) && isset($query['sort'])) {

          $header_cell['attributes']->addClass('sortable-heading');

        }

      }

    }

  }

}

css/src/base/variables.css

+6 −13
Changes for css/src/base/variables.css: 6 added lines, 13 removed lines.
Original line number Diff line number Diff line
@@ -17,11 +17,6 @@ 
  /* Variations. */

  --color-absolutezero-hover: #003ebb;

  --color-absolutezero-active: #00339a;

  --color-focus: #b3c9f5;

  --color-bgblue-hover: #f0f5fd;

  --color-bgblue-active: #e6ecf8;

  --color-bgred-hover: #fdf5f5;

  --color-bgred-active: #fceded;

  /*

   * Base.

   */
@@ -76,16 +71,14 @@ 
  --color-input-bg-disabled: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */

  --color-input-border-disabled: #bababf; /* Old silver with 0.5 opacity on white bg. */

  --opacity-input-border-disabled: 0.5;

  --size-input-border-radius: 0.125rem; /* (1/8)em ~ 2px */

  --size-input-border: 0.0625rem; /* (1/16)em ~ 1px */

  --size-required-mark: 0.4375rem; /* 7px inside the form element label. */

  /**

   * jQuery.UI dropdown.

   */

  --size-input-border-radius: 0.125em; /* (1/8)em ~ 2px */

  --size-input-border: 0.0625em; /* (1/16)em ~ 1px */

  --size-required-mark: 0.5em; /* 7px inside the form element label. */

  /* jQuery.UI dropdown. */

  --color-jui-dropdown-fg: var(--color-davysgrey);

  --color-jui-dropdown-bg: var(--color-white);

  --color-jui-dropdown-fg--active: var(--color-white);

  --color-jui-dropdown-bg--active: var(--color-absolutezero);

  --color-jui-dropdown-border: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */

  --color-jui-dropdown-shadow: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */

  --color-jui-dropdown-border: rgba(216, 217, 224, 0.8); /* Light gray. */

  --color-jui-dropdown-shadow: rgba(34, 35, 48, 0.1); /* Text color. */

}

css/src/components/autocomplete-loading.module.css

deleted100644 → 0
+0 −81
Changes for css/src/components/autocomplete-loading.module.css: 0 added lines, 81 removed lines.
Original line number Diff line number Diff line 
/**

 * @file

 * Visual styles for animated throbber.

 *

 * @see autocomplete.js

 */



/**

 * Since the autocomplete library is attached conditionally and not globally,

 * we can be 99% sure that the default icon will be used.

 * With inline SVGs we can prevent a  browser get and repaint addressing the

 * autocomplete input's background — until are sure that it will be pushed by

 * the server with HTTP/2.

 *

 * The autocompleting (active) state's background-image is inlined because

 * non-used CSS selectors are usually ignored; popular browsers don't download

 * their 'url' references.

 * If these selectors become active, the browser needs some time for painting

 * previously ignored remote asset: it should get it from server, parse it and

 * repaint the background of autocomplete field. With the inlined background we

 * can prevent an additional timeout caused by a new request/response pair.

 * Besides this, the autocompleting event itself may easily finish before the

 * missing asset gets downloaded/parsed/painted, and the missing instant visual

 * feedback would be a usability/accessibility issue as well.

 */



.js .form-autocomplete {

  background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");

  background-position: 100% 50%;

  background-repeat: no-repeat;

}

.js .form-autocomplete::-ms-clear {

  display: none;

}

.js[dir="rtl"] .form-autocomplete {

  background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");

  background-position: 0 50%;

}

.js .form-autocomplete.is-autocompleting {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");

}

.js[dir="rtl"] .form-autocomplete.is-autocompleting {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");

}

/* IE11 does not animate inline SVG. */

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,

.js .form-autocomplete.is-autocompleting {

  background-image: url("../../../images/spinner-ltr.gif");

  background-size: 2.5rem 1.25rem;

}

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,

.js[dir="rtl"] .form-autocomplete.is-autocompleting {

  background-image: url("../../../images/spinner-rtl.gif");

}



/**

 * Autocomplete wrapper for autocompleting message.

 */

.claro-autocomplete {

  display: inline-block;

  position: relative;

  max-width: 100%;

}

.claro-autocomplete__message {

  font-size: var(--font-size-xxs);

  color: var(--color-link);

  position: absolute;

  right: 0;

  bottom: 100%;

  max-width: 100%;

  font-weight: bold;

}

[dir="rtl"] .claro-autocomplete__message {

  right: auto;

  left: 0;

}

.js .is-autocompleting + .claro-autocomplete__message {

  display: block;

}