From be2f08e67292581a0415dd221deb49b3b05d79d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=CC=81bor=20Hojtsy?= <gabor@hojtsy.hu>
Date: Fri, 5 Apr 2019 07:31:48 +0200
Subject: [PATCH] =?UTF-8?q?Issue=20#3044250=20by=20kjay,=20shaal,=20pawand?=
=?UTF-8?q?ubey,=20markconroy,=20G=C3=A1bor=20Hojtsy,=20lauriii:=20Make=20?=
=?UTF-8?q?the=20highlighted=20region=20in=20Umami=20more=20flexible=20so?=
=?UTF-8?q?=20it=20adapts=20to=20its=20use=20with=20Layout=20Builder=20and?=
=?UTF-8?q?=20could=20be=20used=20to=20demonstrate=20placement=20of=20othe?=
=?UTF-8?q?r=20blocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../umami/css/components/blocks/help/help.css | 30 ++++++++++++
.../css/components/messages/messages.css | 4 ++
.../regions/highlighted/highlighted.css | 10 ++++
.../themes/umami/images/svg/help.svg | 1 +
.../help-block/block--help.html.twig | 46 +++++++++++++++++++
.../umami/templates/layout/page.html.twig | 4 +-
.../themes/umami/umami.libraries.yml | 2 +
7 files changed, 95 insertions(+), 2 deletions(-)
create mode 100644 core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css
create mode 100644 core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css
create mode 100644 core/profiles/demo_umami/themes/umami/images/svg/help.svg
create mode 100644 core/profiles/demo_umami/themes/umami/templates/components/help-block/block--help.html.twig
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css
new file mode 100644
index 000000000000..daab503b28b4
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Styles for help messages.
+ */
+
+.block-help {
+ margin-bottom: 1em;
+ padding: 1.26em;
+ word-wrap: break-word;
+ color: inherit;
+ border: 1px solid #b3daf0;
+ background-color: #eef5f9;
+ overflow-wrap: break-word;
+}
+
+.block-help__container {
+ padding-left: 24px; /* LTR */
+ background-image: url(/core/profiles/demo_umami/themes/umami/images/svg/help.svg);
+ background-repeat: no-repeat;
+ background-position: left 4px; /* LTR */
+}
+[dir=rtl] .block-help__container {
+ padding-right: 24px;
+ padding-left: 0;
+ background-position: right 4px;
+}
+
+.block-help__container > *:last-child {
+ margin-bottom: 0;
+}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
index bcc97ee16c66..6c057d4fc781 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
@@ -4,6 +4,7 @@
*/
.messages {
+ margin-bottom: 1em;
padding: 20px;
word-wrap: break-word;
color: inherit;
@@ -26,18 +27,21 @@
background-position: right;
}
.messages--status {
+ border: 1px solid #cbdebc;
background-color: #e6eee0;
}
.messages--status .messages__content {
background-image: url(/core/misc/icons/73b355/check.svg);
}
.messages--warning {
+ border: 1px solid #fae2a4;
background-color: #fcf1d4;
}
.messages--warning .messages__content {
background-image: url(/core/misc/icons/e29700/warning.svg);
}
.messages--error {
+ border: 1px solid #f8c8d5;
background-color: #f9e6eb;
}
.messages--error .messages__content {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css b/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css
new file mode 100644
index 000000000000..833ca814ac4e
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css
@@ -0,0 +1,10 @@
+/**
+ * @file
+ * This file is used to style the highlighted region.
+ *
+ */
+
+.layout-highlighted {
+ padding: 0 1.26em 1em;
+ background: #fff;
+}
diff --git a/core/profiles/demo_umami/themes/umami/images/svg/help.svg b/core/profiles/demo_umami/themes/umami/images/svg/help.svg
new file mode 100644
index 000000000000..1c9f5d10f91b
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/images/svg/help.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -1)" fill="none" fill-rule="evenodd"><circle fill="#009FFA" cx="8" cy="9" r="8"/><text font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="14" font-weight="bold" fill="#FFF"><tspan x="4" y="14">?</tspan></text></g></svg>
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/help-block/block--help.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/help-block/block--help.html.twig
new file mode 100644
index 000000000000..20e2a4a9aa84
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/templates/components/help-block/block--help.html.twig
@@ -0,0 +1,46 @@
+{#
+/**
+ * @file
+ * Theme override for help messages.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ * - label: The configured label for the block.
+ * - label_display: The display settings for the label.
+ * - provider: The module or other provider that provided this block plugin.
+ * - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ * be added to the main container tag of this template.
+ * - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ * tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ * displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ * displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+set classes = [
+ 'block',
+ 'block-' ~ configuration.provider|clean_class,
+ 'block-' ~ plugin_id|clean_class,
+]
+%}
+<div{{ attributes.addClass(classes) }}>
+ <div class="block-help__container">
+ {{ title_prefix }}
+ {% if label %}
+ <h2{{ title_attributes }}>{{ label }}</h2>
+ {% endif %}
+ {{ title_suffix }}
+ {% block content %}
+ {{ content }}
+ {% endblock %}
+ </div>
+</div>
diff --git a/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig b/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
index 23c183024704..5215326a3f27 100644
--- a/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
@@ -59,8 +59,8 @@
{% endif %}
{% if page.highlighted %}
- <div class="container">
- <div class="layout-highlighted">
+ <div class="layout-highlighted">
+ <div class="container">
{{ page.highlighted }}
</div>
</div>
diff --git a/core/profiles/demo_umami/themes/umami/umami.libraries.yml b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
index b33e409e54a1..176ff5e2bcaa 100644
--- a/core/profiles/demo_umami/themes/umami/umami.libraries.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
@@ -7,6 +7,7 @@ global:
css/components/blocks/banner/banner.css: {}
css/components/blocks/branding/branding.css: {}
css/components/blocks/disclaimer/disclaimer.css: {}
+ css/components/blocks/help/help.css: {}
css/components/blocks/page-title/page-title.css: {}
css/components/blocks/footer-promo/footer-promo.css: {}
css/components/blocks/language-switcher/language-switcher.css: {}
@@ -34,6 +35,7 @@ global:
css/components/regions/bottom/bottom.css: {}
css/components/regions/footer/footer.css: {}
css/components/regions/header/header.css: {}
+ css/components/regions/highlighted/highlighted.css: {}
css/components/regions/pre-header/pre-header.css: {}
css/components/toolbar/toolbar.css: {}
layout:
--
GitLab