diff --git a/core/lib/Drupal/Core/Layout/Annotation/Layout.php b/core/lib/Drupal/Core/Layout/Annotation/Layout.php index ecab4618d3..008de2d8f3 100644 --- a/core/lib/Drupal/Core/Layout/Annotation/Layout.php +++ b/core/lib/Drupal/Core/Layout/Annotation/Layout.php @@ -116,7 +116,7 @@ class Layout extends Plugin { * * @var string[][] optional * - * @see \Drupal\Core\Layout\IconGeneratorInterface::generateFromIconMap() + * @see \Drupal\Core\Layout\IconGeneratorInterface::generate() */ public $icon_map; diff --git a/core/lib/Drupal/Core/Layout/IconGenerator.php b/core/lib/Drupal/Core/Layout/IconGenerator.php index 3c6f8d37ce..ed3f99c582 100644 --- a/core/lib/Drupal/Core/Layout/IconGenerator.php +++ b/core/lib/Drupal/Core/Layout/IconGenerator.php @@ -10,9 +10,9 @@ class IconGenerator implements IconGeneratorInterface { /** * {@inheritdoc} */ - public function generateFromIconMap(array $icon_map, $label, $width, $height, $padding, $stroke_width = NULL, $fill = NULL, $stroke = NULL) { + public function generate(array $icon_map, $label, $width, $height, $padding, $stroke_width = NULL) { $regions = $this->calculateSvgValues($icon_map, $width, $height, $stroke_width, $padding); - return $this->generate($regions, $label, $width, $height, $stroke_width, $fill, $stroke); + return $this->buildRenderArray($regions, $label, $width, $height, $stroke_width); } /** @@ -29,21 +29,20 @@ public function generateFromIconMap(array $icon_map, $label, $width, $height, $p * The height of the generated SVG. * @param int|null $stroke_width * (optional) The width of region borders. - * @param string|null $fill - * (optional) The fill color of regions. - * @param string|null $stroke - * (optional) The color of region borders. * * @return array * A render array representing a SVG icon. */ - protected function generate(array $regions, $label, $width, $height, $stroke_width = NULL, $fill = NULL, $stroke = NULL) { + protected function buildRenderArray(array $regions, $label, $width, $height, $stroke_width = NULL) { $build = [ '#type' => 'html_tag', '#tag' => 'svg', '#attributes' => [ 'width' => $width, 'height' => $height, + 'class' => [ + 'layout-icon', + ], ], 'title' => [ '#type' => 'html_tag', @@ -76,9 +75,11 @@ protected function generate(array $regions, $label, $width, $height, $stroke_wid 'y' => $attributes['y'], 'width' => $attributes['width'], 'height' => $attributes['height'], - 'fill' => $fill, - 'stroke' => $stroke, 'stroke-width' => $stroke_width, + 'class' => [ + 'layout-icon__region', + 'layout-icon__region--' . $region, + ], ], ]; } @@ -92,7 +93,7 @@ protected function generate(array $regions, $label, $width, $height, $stroke_wid * @param string[][] $rows * A two-dimensional array representing the visual output of the layout. See * the documentation for the $icon_map parameter of - * \Drupal\Core\Layout\IconGeneratorInterface::generateFromIconMap(). + * \Drupal\Core\Layout\IconGeneratorInterface::generate(). * @param int $width * The width of the generated SVG. * @param int $height diff --git a/core/lib/Drupal/Core/Layout/IconGeneratorInterface.php b/core/lib/Drupal/Core/Layout/IconGeneratorInterface.php index beda10cb21..5ac0e6b7e0 100644 --- a/core/lib/Drupal/Core/Layout/IconGeneratorInterface.php +++ b/core/lib/Drupal/Core/Layout/IconGeneratorInterface.php @@ -40,14 +40,10 @@ * The padding between regions. * @param int|null $stroke_width * (optional) The width of region borders. - * @param string|null $fill - * (optional) The fill color of regions. - * @param string|null $stroke - * (optional) The color of region borders. * * @return array * A render array representing a SVG icon. */ - public function generateFromIconMap(array $icon_map, $label, $width, $height, $padding, $stroke_width = NULL, $fill = NULL, $stroke = NULL); + public function generate(array $icon_map, $label, $width, $height, $padding, $stroke_width = NULL); } diff --git a/core/lib/Drupal/Core/Layout/LayoutDefinition.php b/core/lib/Drupal/Core/Layout/LayoutDefinition.php index 4c5864edd2..b3f2b397c3 100644 --- a/core/lib/Drupal/Core/Layout/LayoutDefinition.php +++ b/core/lib/Drupal/Core/Layout/LayoutDefinition.php @@ -90,7 +90,7 @@ class LayoutDefinition extends PluginDefinition implements PluginDefinitionInter * * @var string[][]|null * - * @see \Drupal\Core\Layout\IconGeneratorInterface::generateFromIconMap() + * @see \Drupal\Core\Layout\IconGeneratorInterface::generate() */ protected $icon_map; @@ -409,26 +409,20 @@ public function setIconMap($icon_map) { * Builds a render array for an icon representing the layout. * * @param int $width - * (optional) The width of the icon. Defaults to 250. + * (optional) The width of the icon. Defaults to 125. * @param int $height - * (optional) The height of the icon. Defaults to 300. + * (optional) The height of the icon. Defaults to 150. * @param int $stroke_width * (optional) If a generated SVG is used, the width of region borders. - * Defaults to 2. + * Defaults to 1. * @param int $padding * (optional) If a generated SVG is used, the padding between regions. Any - * value above 0 is valid. Defaults to 5. - * @param string $fill - * (optional) If a generated SVG is used, the fill color of regions. - * Defaults to 'lightgray'. - * @param string $stroke - * (optional) If a generated SVG is used, the color of region borders. - * Defaults to 'black'. + * value above 0 is valid. Defaults to 4. * * @return array * A render array for the icon. */ - public function getIcon($width = 125, $height = 150, $stroke_width = 1, $padding = 4, $fill = '#f5f5f2', $stroke = '#666') { + public function getIcon($width = 125, $height = 150, $stroke_width = 1, $padding = 4) { $icon = []; if ($icon_path = $this->getIconPath()) { $icon = [ @@ -440,7 +434,7 @@ public function getIcon($width = 125, $height = 150, $stroke_width = 1, $padding ]; } elseif ($icon_map = $this->getIconMap()) { - $icon = $this->getIconGenerator()->generateFromIconMap($icon_map, $this->getLabel(), $width, $height, $padding, $stroke_width, $fill, $stroke); + $icon = $this->getIconGenerator()->generate($icon_map, $this->getLabel(), $width, $height, $padding, $stroke_width); } return $icon; } diff --git a/core/modules/settings_tray/css/off-canvas.layout.css b/core/modules/settings_tray/css/off-canvas.layout.css new file mode 100644 index 0000000000..d79d26cd3e --- /dev/null +++ b/core/modules/settings_tray/css/off-canvas.layout.css @@ -0,0 +1,11 @@ +/** + * @file + * Visual styling for layouts in the off canvas tray. + * + * See seven/css/layout/layout.css + */ + +.layout-icon__region { + fill: #f5f5f2; + stroke: #666; +} diff --git a/core/modules/settings_tray/settings_tray.libraries.yml b/core/modules/settings_tray/settings_tray.libraries.yml index 672800d4f9..ccfe7fe1ed 100644 --- a/core/modules/settings_tray/settings_tray.libraries.yml +++ b/core/modules/settings_tray/settings_tray.libraries.yml @@ -35,6 +35,7 @@ drupal.off_canvas: css/off-canvas.details.css: {} css/off-canvas.tabledrag.css: {} css/off-canvas.dropbutton.css: {} + css/off-canvas.layout.css: {} dependencies: - core/jquery diff --git a/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php b/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php index c7aa1b8f60..ec81f28ce0 100644 --- a/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php +++ b/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php @@ -14,24 +14,24 @@ class IconGeneratorTest extends KernelTestBase { /** * @covers ::generate - * @covers ::generateFromIconMap + * @covers ::buildRenderArray * @covers ::calculateSvgValues * @covers ::getLength * @covers ::getOffset * - * @dataProvider providerTestGenerateFromIconMap + * @dataProvider providerTestGenerate */ - public function testGenerateFromIconMap($icon_map, $label, $expected, $padding = 4, $stroke_width = 2, $stroke = 'black') { + public function testGenerate($icon_map, $label, $expected, $padding = 4, $stroke_width = 2) { $renderer = $this->container->get('renderer'); $icon_generator = new IconGenerator(); - $build = $icon_generator->generateFromIconMap($icon_map, $label, 250, 300, $padding, $stroke_width, 'lightgray', $stroke); + $build = $icon_generator->generate($icon_map, $label, 250, 300, $padding, $stroke_width); $output = (string) $renderer->executeInRenderContext(new RenderContext(), function () use ($build, $renderer) { return $renderer->render($build); }); $this->assertSame($expected, $output); } - public function providerTestGenerateFromIconMap() { + public function providerTestGenerate() { $data = []; $data['empty'][] = []; $data['empty'][] = 'Empty'; @@ -46,10 +46,10 @@ public function providerTestGenerateFromIconMap() { $data['two_column'][] = <<<'EOD' Two Column left - + right - + @@ -60,27 +60,26 @@ public function providerTestGenerateFromIconMap() { $data['two_column_no_stroke'][] = <<<'EOD' Two Column (no stroke) left - + right - + EOD; $data['two_column_no_stroke'][] = 4; $data['two_column_no_stroke'][] = NULL; - $data['two_column_no_stroke'][] = NULL; $data['two_column_border_collapse'][] = [['left', 'right']]; $data['two_column_border_collapse'][] = 'Two Column (no padding)'; $data['two_column_border_collapse'][] = <<<'EOD' Two Column (no padding) left - + right - + @@ -98,28 +97,28 @@ public function providerTestGenerateFromIconMap() { $data['stacked'][] = <<<'EOD' Stacked sidebar - + top - + left - + right - + middle - + footer_left - + footer_right - + footer_full - + diff --git a/core/themes/seven/css/layout/layout.css b/core/themes/seven/css/layout/layout.css index eb7c2bf0b3..39649e43c1 100644 --- a/core/themes/seven/css/layout/layout.css +++ b/core/themes/seven/css/layout/layout.css @@ -4,3 +4,11 @@ .page-content { margin-bottom: 80px; } + +/** + * Add color to layout icons. + */ +.layout-icon__region { + fill: #f5f5f2; + stroke: #666; +}