Add Help Menu, css, js, ..

content_sync.admin.inc

@@ -0,0 +1,43 @@
+<?php
+
+/**
+ * @file
+ * Administrative page callbacks for the Database Logging module.
+ */
+
+use Drupal\Core\Logger\RfcLogLevel;
+
+/**
+ * Creates a list of database log administration filters that can be applied.
+ *
+ * @return array
+ *   Associative array of filters. The top-level keys are used as the form
+ *   element names for the filters, and the values are arrays with the following
+ *   elements:
+ *   - title: Title of the filter.
+ *   - where: The filter condition.
+ *   - options: Array of options for the select list for the filter.
+ */
+function cs_log_filters() {
+  $filters = [];
+
+  foreach (_dblog_get_message_types() as $type) {
+    $types[$type] = t($type);
+  }
+
+  if (!empty($types)) {
+    $filters['type'] = [
+      'title' => t('Type'),
+      'where' => "w.type = ?",
+      'options' => $types,
+    ];
+  }
+
+  $filters['severity'] = [
+    'title' => t('Severity'),
+    'where' => 'w.severity = ?',
+    'options' => RfcLogLevel::getLevels(),
+  ];
+
+  return $filters;
+}

content_sync.libraries.yml

@@ -0,0 +1,26 @@
+# Help.
+
+content_sync.help:
+  version: VERSION
+  css:
+    theme:
+      css/content_sync.help.css: {}
+  js:
+    js/content_sync.help.js:  {}
+  dependencies:
+    - core/drupal
+    - core/jquery
+    - core/jquery.once
+    - core/jquery.ui.accordion
+
+content_sync.element.message:
+  version: VERSION
+  css:
+    theme:
+      css/content_sync.element.message.css: {}
+  js:
+    js/content_sync.element.message.js: {}
+  dependencies:
+    - core/drupal
+    - core/jquery
+    - core/jquery.once

css/content_sync.element.message.css

@@ -0,0 +1,71 @@
+/**
+ * @file
+ * Messages element styles.
+ *
+ */
+
+/**
+ * Add styles to default (info) message,
+ */
+.messages.messages--info {
+  color: #31708f;
+  background-color: #d9edf7;
+  background-image: url(../images/icons/info.svg);
+  border-color: #0074bd #0074bd #0074bd transparent;  /* LTR */
+  box-shadow: -8px 0 0 #0074bd; /* LTR */
+}
+[dir="rtl"] .messages.messages--info {
+  border-color: #0074bd transparent #0074bd #0074bd;
+  box-shadow: 8px 0 0 #0074bd;
+  margin-left: 0;
+}
+
+/**
+ * Content Sync message close container.
+ */
+.content_sync-message--close .messages {
+  position: relative;
+}
+
+/**
+ * Content Sync message close link.
+ */
+.content_sync-message--close .messages {
+  padding-right: 35px;
+}
+
+.content_sync-message--close .content_sync-message__link {
+  display: none;
+}
+
+html.js .content_sync-message--close .content_sync-message__link {
+  display: block;
+  position: absolute;
+  top: 11px;
+  right: 10px;
+  line-height: 24px;
+  font-size: 24px;
+}
+
+.content_sync-message__link {
+  color: inherit;
+  opacity: 0.33;
+}
+
+.content_sync-message__link:link {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.content_sync-message__link:hover,
+.content_sync-message__link:focus,
+.content_sync-message__link:active {
+  border-bottom: none;
+  text-decoration: none;
+  color: inherit;
+  opacity: 1;
+}
+
+html.js .js-content_sync-message--close-storage {
+  display: none;
+}

css/content_sync.help.css

@@ -0,0 +1,118 @@
+/**
+ * @file
+ * Help styles.
+ *
+ * @see /admin/help/content_sync
+ * @see /admin/help/content_sync/introduction
+ */
+
+/**
+ * Help block.
+ */
+.block-help {
+  margin: 1em 0;
+}
+
+/**
+ * Help page.
+ */
+.content_sync-help h4 {
+  font-size: 1em;
+  text-transform: uppercase;
+}
+
+.content_sync-help .button.button--primary {
+  width: 100%;
+  max-width: 600px;
+  margin: 0;
+}
+
+.content_sync-help img {
+  width: 100%;
+  height: auto;
+}
+
+.content_sync-help .content_sync-help-video-youtube {
+  max-width: 600px;
+}
+
+/**
+ * Help play button.
+ */
+.button.button-content_sync-play:before {
+  content: '► ';
+  font-size: .8em;
+}
+
+/**
+ * Help menu.
+ *
+ * @see /core/themes/stable/css/core/dropbutton/dropbutton.css
+ */
+.content_sync-help-menu {
+  display: none;
+}
+
+.js .content_sync-help-menu {
+  display: block;
+  width: 250px;
+  float: right;
+}
+
+.js .content_sync-help-menu .dropbutton-wrapper {
+  min-height: 2em;
+}
+
+.js .content_sync-help-menu .dropbutton-wrapper {
+  display: block;
+  position: relative;
+}
+
+.js .content_sync-help-menu .dropbutton-widget {
+  position: absolute;
+}
+
+/**
+ * Hide throbber which causes layout issue in dropbutton
+ */
+.content_sync-help-menu .dropbutton-multiple .ajax-progress-throbber {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .js .content_sync-help-menu {
+    display: none;
+  }
+}
+
+/**
+ * Help accordion.
+ */
+.content_sync-help-accordion dt {
+  font-weight: bold;
+}
+
+/**
+ * Help video.
+ */
+.content_sync-help-video-youtube {
+  margin: 1.5em 0;
+  max-width: 1024px;
+  border: 1px solid #000;
+}
+
+.content_sync-help-video-youtube--container {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+}
+
+.content_sync-help-video-youtube iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

includes/content_sync.theme.inc

@@ -0,0 +1,90 @@
+<?php
+
+/**
+ * @file
+ * Preprocessors and helper functions to make theming easier.
+ */
+use Drupal\Core\Link;
+use Drupal\Core\Render\Element;
+use Drupal\Core\Url;
+use Drupal\Core\Serialization\Yaml;
+use Drupal\Core\Template\Attribute;
+use Drupal\Component\Utility\Xss;
+use Drupal\webform\Element\WebformCodeMirror;
+use Drupal\webform\WebformMessageManagerInterface;
+use Drupal\webform\Utility\WebformYaml;
+use Drupal\webform\Utility\WebformDateHelper;
+use Drupal\webform\Utility\WebformDialogHelper;
+use Drupal\webform\Utility\WebformElementHelper;
+
+/**
+ * Prepares variables for contnt sync help.
+ *
+ * Default template: content_sync_help.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - title: Help title.
+ *   - content: Help content.
+ */
+function template_preprocess_content_sync_help(array &$variables) {
+  /** @var \Drupal\content_sync\ContentSyncHelpManagerInterface $help_manager */
+  $help_manager = \Drupal::service('content_sync.help_manager');
+
+  $help_info = $variables['info'];
+
+  $variables += $help_info;
+
+  $help = [];
+  if (!empty($help_info['menu']) && !\Drupal::config('content_sync.settings')->get('content_sync.help_menu_disabled')) {
+    $help['menu'] = $help_manager->buildHelpMenu();
+  }
+  if (is_array($help_info['content'])) {
+    $help['content'] = $help_info['content'];
+  }
+  else {
+    $help['content'] = [
+      '#markup' => $help_info['content'],
+    ];
+  }
+
+  $variables['help'] = $help;
+}
+
+/******************************************************************************/
+// Element templates
+/******************************************************************************/
+
+/**
+ * Prepares variables for Content Sync message templates.
+ *
+ * Default template: content-sync-message.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #id, #attributes, #children.
+ *
+ * @see template_preprocess_container()
+ */
+function template_preprocess_content_sync_message(array &$variables) {
+  $variables['has_parent'] = FALSE;
+  $element = $variables['element'];
+  // Ensure #attributes is set.
+  $element += ['#attributes' => []];
+
+  // Special handling for content_sync elements.
+  if (isset($element['#array_parents'])) {
+    // Assign an html ID.
+    if (!isset($element['#attributes']['id'])) {
+      $element['#attributes']['id'] = $element['#id'];
+    }
+    $variables['has_parent'] = TRUE;
+  }
+
+  $variables['message'] = $element['#message'];
+  $variables['attributes'] = $element['#attributes'];
+  if (isset($element['#closed'])) {
+    $variables['closed'] = $element['#closed'];
+  }
+}