From 0e9777cd8d5ca807e4da79425d80737fcfc95866 Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <ckrina@1206650.no-reply.drupal.org>
Date: Fri, 15 Dec 2023 18:38:13 +0100
Subject: [PATCH] Issue #3214332 by kostyashupenko, ckrina, Hosisam, Gauravvvv,
ameymudras, IndrajithKB, Meeni_Dhobale, athyamvidyasagar, KapilV, Sakthivel
M, imalabya, Diego Sabolo, manojithape, Shyam_Bhatt, guilhermevp,
divya.sejekan, Madhu kumar, Saurabh Srivastava, Satyajit1990, lauriii,
vikashsoni: Preview content is broken in Claro
---
core/themes/claro/claro.info.yml | 2 ++
core/themes/claro/claro.libraries.yml | 6 +++++
core/themes/claro/claro.theme | 10 ++++++++
.../claro/css/components/action-link.css | 12 ++++++++++
.../claro/css/components/action-link.pcss.css | 16 +++++++++++++
.../claro/css/components/node-preview.css | 23 +++++++++++++++++++
.../css/components/node-preview.pcss.css | 16 +++++++++++++
7 files changed, 85 insertions(+)
create mode 100644 core/themes/claro/css/components/node-preview.css
create mode 100644 core/themes/claro/css/components/node-preview.pcss.css
diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index 92f2b14cc4c0..5b8fd2393527 100644
--- a/core/themes/claro/claro.info.yml
+++ b/core/themes/claro/claro.info.yml
@@ -136,6 +136,8 @@ libraries-extend:
- claro/ajax
user/drupal.user:
- claro/form.password-confirm
+ node/drupal.node.preview:
+ - claro/drupal.node.preview
views/views.module:
- claro/views
media/media_embed_ckeditor_theme:
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index 718bbf6ec448..3a16437d1ae7 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -133,6 +133,12 @@ claro.tabledrag:
js:
js/tabledrag.js: {}
+drupal.node.preview:
+ version: VERSION
+ css:
+ theme:
+ css/components/node-preview.css: {}
+
tour-styling:
version: VERSION
css:
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index b760ed3de079..b5205023968d 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -1848,3 +1848,13 @@ function claro_form_user_admin_permissions_alter(&$form, FormStateInterface $for
}
}
}
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ */
+function claro_form_node_preview_form_select_alter(array &$form, FormStateInterface $form_state) {
+ if (isset($form['backlink'])) {
+ $form['backlink']['#options']['attributes']['class'][] = 'action-link';
+ $form['backlink']['#options']['attributes']['class'][] = 'action-link--icon-chevron-left';
+ }
+}
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index a64881c5b9bc..702b6a98ef7c 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -508,3 +508,15 @@
.action-link--icon-questionmark.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23ab1b1b'/%3e%3c/svg%3e");
}
+
+.action-link--icon-chevron-left::before {
+ display: block;
+ content: "";
+ background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
+}
+
+@media (min-width: 30em) {
+ .action-link--icon-chevron-left::before {
+ display: inline-block;
+ }
+}
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index ecb54967f01c..51a0c9ed0109 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -494,3 +494,19 @@
}
}
}
+
+.action-link--icon-chevron-left {
+ &::before {
+ display: block;
+ content: "";
+ background-image: url("../../images/icons/545560/pager-prev.svg");
+ }
+}
+
+@media (min-width: 30em) {
+ .action-link--icon-chevron-left {
+ &::before {
+ display: inline-block;
+ }
+ }
+}
diff --git a/core/themes/claro/css/components/node-preview.css b/core/themes/claro/css/components/node-preview.css
new file mode 100644
index 000000000000..1a0fc25114c8
--- /dev/null
+++ b/core/themes/claro/css/components/node-preview.css
@@ -0,0 +1,23 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+.node-preview-container {
+ position: sticky;
+ z-index: 499;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+.node-preview-form-select {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+}
diff --git a/core/themes/claro/css/components/node-preview.pcss.css b/core/themes/claro/css/components/node-preview.pcss.css
new file mode 100644
index 000000000000..e47d56a882f3
--- /dev/null
+++ b/core/themes/claro/css/components/node-preview.pcss.css
@@ -0,0 +1,16 @@
+.node-preview-container {
+ position: sticky;
+ z-index: 499;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+.node-preview-form-select {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+}
--
GitLab