Skip to content
Snippets Groups Projects
Commit 7f541efc authored by Angie Byron's avatar Angie Byron
Browse files

Revert "Issue #2487704 by AlexB-appnovation, Bojhan, rudraram, zetagraph: Use... 

Revert "Issue #2487704 by AlexB-appnovation, Bojhan, rudraram, zetagraph: Use underline as the focused state (not border left/bottom)"

Oopsie. That was quite a bit more than I bargained for. ;)

This reverts commit 223f92b6.
parent 223f92b6
No related branches found
No related tags found
2 merge requests!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!789Issue #3210310: Adjust Database API to remove deprecated Drupal 9 code in Drupal 10
Hide whitespace changes
Inline Side-by-side
core/modules/responsive_image/src/ResponsiveImageStyleForm.php
+ 13
− 57
View file @ 7f541efc
......@@ -114,53 +114,22 @@ public function form(array $form, FormStateInterface $form_state) {
foreach ($breakpoint->getMultipliers() as $multiplier) {
$label = $multiplier . ' ' . $breakpoint->getLabel() . ' [' . $breakpoint->getMediaQuery() . ']';
$form['keyed_styles'][$breakpoint_id][$multiplier] = array(
'#type' => 'details',
'#title' => $label,
'#type' => 'container',
);
$image_style_mapping = $responsive_image_style->getImageStyleMapping($breakpoint_id, $multiplier);
// @todo The image_mapping_type is only temporarily hardcoded, until
// support for the other responsive image mapping type ('sizes') is
// added in https://www.drupal.org/node/2334387.
$form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type'] = array(
'#title' => $this->t('Type'),
'#type' => 'radios',
'#options' => array(
'_none' => $this->t('Do not use this breakpoint'),
'image_style' => $this->t('Use image styles'),
'sizes' => $this->t('Use the sizes attribute'),
),
'#default_value' => isset($image_style_mapping['image_mapping_type']) ? $image_style_mapping['image_mapping_type'] : '_none',
'#type' => 'value',
'#value' => 'image_style',
);
$form['keyed_styles'][$breakpoint_id][$multiplier]['image_style'] = array(
$form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping'] = array(
'#type' => 'select',
'#title' => $this->t('Image style'),
'#title' => $label,
'#options' => $image_styles,
'#default_value' => isset($image_style_mapping['image_mapping']) && is_string($image_style_mapping['image_mapping']) ? $image_style_mapping['image_mapping'] : '',
'#default_value' => isset($image_style_mapping['image_mapping']) ? $image_style_mapping['image_mapping'] : array(),
'#description' => $this->t('Select an image style for this breakpoint.'),
'#states' => array(
'visible' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'image_style'),
),
),
);
$form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = array(
'#type' => 'textfield',
'#title' => $this->t('Sizes'),
'#default_value' => isset($image_style_mapping['image_mapping']['sizes']) ? $image_style_mapping['image_mapping']['sizes'] : '',
'#description' => $this->t('Enter the value for the sizes attribute (e.g. "(min-width:700px) 700px, 100vw").'),
'#states' => array(
'visible' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
),
),
);
$form['keyed_styles'][$breakpoint_id][$multiplier]['sizes_image_styles'] = array(
'#title' => $this->t('Image styles'),
'#type' => 'checkboxes',
'#options' => array_diff_key($image_styles, array('' => '')),
'#default_value' => isset($image_style_mapping['image_mapping']['sizes_image_styles']) ? $image_style_mapping['image_mapping']['sizes_image_styles'] : array(),
'#states' => array(
'visible' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
),
),
);
}
}
......@@ -181,6 +150,9 @@ public function validate(array $form, FormStateInterface $form_state) {
// Remove the image style mappings since the breakpoint ID has changed.
$form_state->unsetValue('keyed_styles');
}
// @todo Filter 'sizes_image_styles' to a normal array in
// https://www.drupal.org/node/2334387. For an example see
// \Drupal\Core\Block\BlockBase::validateConfigurationForm().
}
}
......@@ -195,23 +167,7 @@ public function save(array $form, FormStateInterface $form_state) {
if ($form_state->hasValue('keyed_styles')) {
foreach ($form_state->getValue('keyed_styles') as $breakpoint_id => $multipliers) {
foreach ($multipliers as $multiplier => $image_style_mapping) {
if ($image_style_mapping['image_mapping_type'] === 'sizes') {
$mapping = array(
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'sizes' => $image_style_mapping['sizes'],
'sizes_image_styles' => array_keys(array_filter($image_style_mapping['sizes_image_styles'])),
)
);
$responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $mapping);
}
elseif ($image_style_mapping['image_mapping_type'] === 'image_style') {
$mapping = array(
'image_mapping_type' => 'image_style',
'image_mapping' => $image_style_mapping['image_style'],
);
$responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $mapping);
}
$responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $image_style_mapping);
}
}
}
......
core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php
+ 15
− 34
View file @ 7f541efc
......@@ -79,15 +79,7 @@ public function testResponsiveImageAdmin() {
foreach ($cases as $case) {
// Check if the radio buttons are present.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping_type]', '');
// Check if the image style dropdowns are present.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]', '');
// Check if the sizes textfields are present.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes]', '');
// Check if the image styles checkboxes are present.
foreach (array_keys(image_style_options(FALSE)) as $image_style_name) {
$this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes_image_styles][' . $image_style_name . ']');
}
$this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping]', '');
}
// Save styles for 1x variant only.
......@@ -95,35 +87,24 @@ public function testResponsiveImageAdmin() {
'label' => 'Style One',
'breakpoint_group' => 'responsive_image_test_module',
'fallback_image_style' => 'thumbnail',
'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]' => 'image_style',
'keyed_styles[responsive_image_test_module.mobile][1x][image_style]' => 'thumbnail',
'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]' => 'sizes',
'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-width: 700px) 700px, 100vw',
'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][large]' => 'large',
'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][medium]' => 'medium',
'keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]' => 'image_style',
'keyed_styles[responsive_image_test_module.wide][1x][image_style]' => 'large',
'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]' => 'thumbnail',
'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping]' => 'medium',
'keyed_styles[responsive_image_test_module.wide][1x][image_mapping]' => 'large',
);
$this->drupalPostForm('admin/config/media/responsive-image-style/style_one', $edit, t('Save'));
$this->drupalGet('admin/config/media/responsive-image-style/style_one');
// Check the mapping for multipliers 1x and 2x for the mobile breakpoint.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_style]', 'thumbnail');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]', 'image_style');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_mapping_type]', '_none');
// Check the mapping for multipliers 1x and 2x for the narrow breakpoint.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]', 'sizes');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][sizes]', '(min-width: 700px) 700px, 100vw');
$this->assertFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-large');
$this->assertFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-medium');
$this->assertNoFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-thumbnail');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_mapping_type]', '_none');
// Check the mapping for multipliers 1x and 2x for the wide breakpoint.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_style]', 'large');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]', 'image_style');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_mapping_type]', '_none');
// Check the style for multipliers 1x and 2x for the mobile breakpoint.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]', 'thumbnail');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_mapping]', '');
// Check the style for multipliers 1x and 2x for the narrow breakpoint.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping]', 'medium');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_mapping]', '');
// Check the style for multipliers 1x and 2x for the wide breakpoint.
$this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping]', 'large');
$this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_mapping]', '');
// Delete the style.
$this->drupalGet('admin/config/media/responsive-image-style/style_one/delete');
......
core/modules/toolbar/css/toolbar.icons.theme.css
+ 19
− 1
View file @ 7f541efc
......@@ -196,17 +196,35 @@
/**
* Accessibility/focus
*/
.toolbar-tab a {
border-left: 2px solid transparent; /* LTR */
}
[dir="rtl"] .toolbar-tab a {
border-left: none;
border-right: 2px solid transparent;
}
.toolbar-tab a:focus {
outline: none;
text-decoration: underline;
border-color: #ddd;
}
.toolbar-lining button:focus {
outline: none;
}
.toolbar-tray-horizontal a,
.toolbar-box a {
border-left: 2px solid transparent; /* LTR */
}
[dir="rtl"] .toolbar-tray-horizontal a,
[dir="rtl"] .toolbar-box a {
border-left: none;
border-right: 2px solid transparent;
}
.toolbar-tray-horizontal a:focus,
.toolbar-box a:focus {
outline: none;
border-color: #4479C0;
background-color: #f5f5f5;
text-decoration: none;
}
.toolbar-box a:hover:focus {
text-decoration: underline;
......
core/modules/toolbar/css/toolbar.theme.css
+ 1
− 0
View file @ 7f541efc
......@@ -45,6 +45,7 @@
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
text-decoration: none;
}
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
......
core/themes/seven/css/base/elements.css
+ 0
− 1
View file @ 7f541efc
......@@ -171,5 +171,4 @@ details summary:focus {
outline: none;
color: #0074bd;
margin-top: -3px;
text-decoration: underline;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment