From aabe8e15fbbaca572b12fb4ace6878b968c53d86 Mon Sep 17 00:00:00 2001
From: Mahyar SBT <iraneagle@gmail.com>
Date: Tue, 9 Jul 2024 19:24:07 +0330
Subject: [PATCH] Fixed style issues; Compatibility with the latest release of
the Gin theme.
---
animatecss_ui/css/animatecss.admin.css | 92 +++++++++++++++++--
animatecss_ui/css/animatecss.form.css | 38 ++++++--
animatecss_ui/js/animatecss.admin.js | 8 +-
animatecss_ui/src/AnimateCssAdmin.php | 17 +++-
animatecss_ui/src/Form/AnimateCssForm.php | 8 +-
animatecss_ui/src/Form/AnimateCssSettings.php | 29 ++++--
composer.json | 3 +-
7 files changed, 160 insertions(+), 35 deletions(-)
diff --git a/animatecss_ui/css/animatecss.admin.css b/animatecss_ui/css/animatecss.admin.css
index fe37f1f..433013f 100644
--- a/animatecss_ui/css/animatecss.admin.css
+++ b/animatecss_ui/css/animatecss.admin.css
@@ -80,13 +80,64 @@
}
/* Animate field suffix */
.animatecss-form .form-item__suffix,
-.animatecss-settings-form .form-item__suffix {
+.animatecss-settings-form .form-item__suffix {
display: inline-flex;
- align-self: center;
- margin-right: -14px;
- margin-left: 0;
+ vertical-align: middle;
+ margin-right: 0;
+ margin-left: -6px;
transform: rotate(90deg);
}
+/* Animate flags */
+.animatecss-unit-flag,
+.animatecss-beta-flag,
+.animatecss-experimental-flag,
+.animatecss-new-flag {
+ font-size: 10px;
+ font-weight: 525;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ display: inline-block;
+ padding: .125em .5em;
+ vertical-align: .125em;
+ border: 1px solid transparent;
+ border-radius: .125rem;
+ line-height: 1.5;
+}
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag,
+body[class^="gin--"] .animatecss-new-flag {
+ border-radius: .75rem;
+}
+.animatecss-beta-flag,
+.animatecss-experimental-flag {
+ color: #555;
+ background: #ddd;
+}
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag {
+ color: #777;
+ background: #eee;
+}
+.gin--dark-mode .animatecss-beta-flag,
+.gin--dark-mode .animatecss-experimental-flag {
+ color: #9e9fa0 !important;
+ background: rgba(255, 255, 255, .1) !important;
+}
+.animatecss-new-flag {
+ color: #fff;
+ background-color: #26a769;
+}
+body[class^="gin--"] .animatecss-new-flag {
+ font-size: 9px;
+ font-weight: bold;
+ color: #39b77b;
+ background-color: #26a76930;
+}
+.animatecss-unit-flag {
+ font-size: 14px;
+ color: #d8b234;
+ text-transform: lowercase;
+}
/* Library status report */
.library-status-report {
position: relative;
@@ -95,14 +146,18 @@
padding-block: 1em;
padding-inline: 3em 1em;
font-weight: 400;
+ font-size: 14px;
+ color: #545454;
+ background-color: #f6f6f6;
+ border-radius: .45rem;
}
.library-status-report::before {
position: absolute;
inset-block-start: 1em;
inset-inline-start: 0.625rem;
display: inline-block;
- width: 1.5rem;
- height: 1.5rem;
+ width: 1.2rem;
+ height: 1.2rem;
margin-inline-end: 0.625rem;
content: "";
vertical-align: top;
@@ -151,6 +206,31 @@
margin-left: 0;
margin-right: 0;
}
+/* List status marker */
+.animatecss-list .marker {
+ font-size: .75rem;
+ font-weight: 525;
+ display: inline-block;
+ padding: .125em .75em;
+ vertical-align: .125em;
+ border: 1px solid transparent;
+ border-radius: .125rem;
+ color: #777;
+ background: #eee;
+}
+.gin-layer-wrapper .animatecss-list .marker {
+ color: #777;
+ background: #eee;
+ border-radius: .75rem;
+}
+.animatecss-list .marker--enabled {
+ color: #fff;
+ background-color: #26a769;
+}
+.gin-layer-wrapper .animatecss-list .marker--enabled {
+ color: #39b77b;
+ background-color: #26a76930;
+}
/* Gin theme fix delete icon color */
#block-gin-content .action-link--icon-trash.action-link--danger:before,
#block-gin-content .button.button--danger:before,
diff --git a/animatecss_ui/css/animatecss.form.css b/animatecss_ui/css/animatecss.form.css
index 1b49d79..5ccbc7c 100644
--- a/animatecss_ui/css/animatecss.form.css
+++ b/animatecss_ui/css/animatecss.form.css
@@ -427,35 +427,59 @@ body[data-toggle-sidebar=open] .toggle-sidebar__overlay {
.animatecss-form .form-item__suffix,
.animatecss-settings-form .form-item__suffix {
display: inline-flex;
- align-self: center;
- margin-right: -14px;
- margin-left: 0;
+ vertical-align: middle;
+ margin-right: 0;
+ margin-left: -6px;
transform: rotate(90deg);
}
/* Animate flags */
+.animatecss-unit-flag,
.animatecss-beta-flag,
.animatecss-experimental-flag,
.animatecss-new-flag {
font-size: 10px;
- font-weight: var(--gin-font-weight-semibold);
+ font-weight: 525;
text-transform: uppercase;
letter-spacing: .1em;
display: inline-block;
padding: .125em .5em;
vertical-align: .125em;
- border-radius: var(--gin-border-xs);
+ border: 1px solid transparent;
+ border-radius: .125rem;
+ line-height: 1.5;
+}
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag,
+body[class^="gin--"] .animatecss-new-flag {
+ border-radius: .75rem;
}
.animatecss-beta-flag,
.animatecss-experimental-flag {
color: #555;
background: #ddd;
}
+body[class^="gin--"] .animatecss-beta-flag,
+body[class^="gin--"] .animatecss-experimental-flag {
+ color: #777;
+ background: #eee;
+}
.gin--dark-mode .animatecss-beta-flag,
.gin--dark-mode .animatecss-experimental-flag {
- color: #eee;
- background: #444;
+ color: #9e9fa0 !important;
+ background: rgba(255, 255, 255, .1) !important;
}
.animatecss-new-flag {
color: #fff;
background-color: #26a769;
}
+body[class^="gin--"] .animatecss-new-flag {
+ font-size: 9px;
+ font-weight: bold;
+ color: #39b77b;
+ background-color: #26a76930;
+}
+.animatecss-unit-flag {
+ font-size: 14px;
+ color: #d8b234;
+ text-transform: lowercase;
+}
diff --git a/animatecss_ui/js/animatecss.admin.js b/animatecss_ui/js/animatecss.admin.js
index 31f2f7c..07bb499 100644
--- a/animatecss_ui/js/animatecss.admin.js
+++ b/animatecss_ui/js/animatecss.admin.js
@@ -36,10 +36,10 @@
selector: Selector,
animation: Drupal.animateGetValue('#edit-animation', '.animate__animation', example.animation),
delay: Drupal.animateGetValue('#edit-delay', '.animate__delay', example.delay),
- time: Drupal.animateGetValue('#edit-time', '.animate__time', example.delay),
- speed: Drupal.animateGetValue('#edit-speed', '.animate__speed', example.delay),
- duration: Drupal.animateGetValue('#edit-duration', '.animate__duration', example.delay),
- repeat: Drupal.animateGetValue('#edit-repeat', '.animate__repeat', example.delay),
+ time: Drupal.animateGetValue('#edit-time', '.animate__time', example.time),
+ speed: Drupal.animateGetValue('#edit-speed', '.animate__speed', example.speed),
+ duration: Drupal.animateGetValue('#edit-duration', '.animate__duration', example.duration),
+ repeat: Drupal.animateGetValue('#edit-repeat', '.animate__repeat', example.repeat),
event: Drupal.animateGetValue('#edit-event', '.animate__event', example.event),
once: $('.animate__once').is(':checked'),
};
diff --git a/animatecss_ui/src/AnimateCssAdmin.php b/animatecss_ui/src/AnimateCssAdmin.php
index 49b3c39..69ba713 100644
--- a/animatecss_ui/src/AnimateCssAdmin.php
+++ b/animatecss_ui/src/AnimateCssAdmin.php
@@ -131,10 +131,18 @@ class AnimateCssAdmin extends FormBase {
$result = $this->animateManager->findAll($header, $search, $status);
foreach ($result as $animate) {
$row = [];
- $row[] = $animate->selector;
- $row[] = $animate->label;
- $row[] = $animate->status ? $this->t('Enabled') : $this->t('Disabled');
- $row[] = $this->dateFormatter->format($animate->changed, 'short');
+ $row['selector'] = $animate->selector;
+ $row['label'] = $animate->label;
+ $status_class = $animate->status ? 'marker marker--enabled' : 'marker';
+ $row['status'] = [
+ 'data' => [
+ '#type' => 'markup',
+ '#prefix' => '<span class="' . $status_class . '">',
+ '#suffix' => '</span>',
+ '#markup' => $animate->status ? $this->t('Enabled') : $this->t('Disabled'),
+ ],
+ ];
+ $row['changed'] = $this->dateFormatter->format($animate->changed, 'short');
$links = [];
$links['edit'] = [
'title' => $this->t('Edit'),
@@ -165,6 +173,7 @@ class AnimateCssAdmin extends FormBase {
':link' => Url::fromRoute('animatecss.add')
->toString(),
]),
+ '#attributes' => ['class' => ['animatecss-list']],
];
$form['pager'] = ['#type' => 'pager'];
diff --git a/animatecss_ui/src/Form/AnimateCssForm.php b/animatecss_ui/src/Form/AnimateCssForm.php
index 8b50ce5..180e30d 100644
--- a/animatecss_ui/src/Form/AnimateCssForm.php
+++ b/animatecss_ui/src/Form/AnimateCssForm.php
@@ -92,9 +92,11 @@ class AnimateCssForm extends FormBase {
* Animate ID form data.
*/
public function buildForm(array $form, FormStateInterface $form_state, int $animate = 0) {
+ // AnimateCSS flags for specific form labels and suffix.
$experimental_label = ' <span class="animatecss-experimental-flag">Experimental</span>';
$beta_label = ' <span class="animatecss-beta-flag">Beta</span>';
$new_label = ' <span class="animatecss-new-flag">New</span>';
+ $ms_unit_label = ' <span class="animatecss-unit-flag">ms</span>';
// Attach AnimateCSS form library.
$form['#attached']['library'][] = 'animatecss_ui/animate-form';
@@ -187,7 +189,7 @@ class AnimateCssForm extends FormBase {
'#min' => 0,
'#title' => $this->t('Delay time'),
'#default_value' => $options['time'] ?? $config->get('options.time'),
- '#field_suffix' => 'ms',
+ '#field_suffix' => $ms_unit_label,
'#attributes' => ['class' => ['animate-delay-time']],
'#states' => [
'visible' => [
@@ -219,7 +221,7 @@ class AnimateCssForm extends FormBase {
'#type' => 'number',
'#title' => $this->t('Duration'),
'#default_value' => $options['duration'] ?? $config->get('options.duration'),
- '#field_suffix' => 'ms',
+ '#field_suffix' => $ms_unit_label,
'#attributes' => ['class' => ['animate-duration']],
'#states' => [
'visible' => [
@@ -388,7 +390,7 @@ class AnimateCssForm extends FormBase {
$form['sticky'] = [
'#type' => 'container',
- '#attributes' => ['class' => ['gin-sticky']],
+ '#attributes' => ['class' => ['gin-sticky', 'gin-sticky-form-actions']],
];
// Enabled status for this animate.
diff --git a/animatecss_ui/src/Form/AnimateCssSettings.php b/animatecss_ui/src/Form/AnimateCssSettings.php
index dfaf8ec..67a8dc4 100644
--- a/animatecss_ui/src/Form/AnimateCssSettings.php
+++ b/animatecss_ui/src/Form/AnimateCssSettings.php
@@ -21,6 +21,12 @@ class AnimateCssSettings extends ConfigFormBase {
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
+ // AnimateCSS flags for specific form labels and suffix.
+ $experimental_label = ' <span class="animatecss-experimental-flag">Experimental</span>';
+ $beta_label = ' <span class="animatecss-beta-flag">Beta</span>';
+ $new_label = ' <span class="animatecss-new-flag">New</span>';
+ $ms_unit_label = ' <span class="animatecss-unit-flag">ms</span>';
+
// Attach AnimateCSS settings page library.
$form['#attached']['library'][] = 'animatecss_ui/animate-settings';
@@ -166,18 +172,17 @@ class AnimateCssSettings extends ConfigFormBase {
// Clean previous animation classes.
$form['options']['clean'] = [
'#type' => 'checkbox',
- '#title' => $this->t('Clean previous classes'),
+ '#title' => $this->t('Clean previous classes') . $new_label . $beta_label,
'#description' => $this->t("Previous Animate.css classes may already be applied to this element from the site's theme. Selecting this option will remove them before applying the new classes based on the settings on this page."),
- '#default_value' => $config->get('options.clean'),
+ '#default_value' => $config->get('options.clean') ?? FALSE,
];
// Convert element display if is inline.
- $form['display'] = [
+ $form['options']['display'] = [
'#type' => 'checkbox',
- '#title' => $this->t('Fix Display'),
+ '#title' => $this->t('Fix Display') . $new_label . $experimental_label,
'#description' => $this->t("Enable this option to change display from inline to inline-block to fix animation issues."),
- '#default_value' => $options['display'] ?? $config->get('options.display'),
- '#weight' => 96,
+ '#default_value' => $config->get('options.display') ?? FALSE,
];
// The animation to use.
@@ -208,7 +213,7 @@ class AnimateCssSettings extends ConfigFormBase {
'#min' => 0,
'#title' => $this->t('Delay time'),
'#default_value' => $config->get('options.duration'),
- '#field_suffix' => 'ms',
+ '#field_suffix' => $ms_unit_label,
'#attributes' => ['class' => ['animate-delay-time']],
'#states' => [
'visible' => [
@@ -241,7 +246,7 @@ class AnimateCssSettings extends ConfigFormBase {
'#min' => 0,
'#title' => $this->t('Duration'),
'#default_value' => $config->get('options.duration'),
- '#field_suffix' => 'ms',
+ '#field_suffix' => $ms_unit_label,
'#attributes' => ['class' => ['animate-duration']],
'#states' => [
'visible' => [
@@ -275,10 +280,11 @@ class AnimateCssSettings extends ConfigFormBase {
$form['options']['event'] = [
'#type' => 'select',
'#options' => $events,
- '#title' => $this->t('Event'),
+ '#title' => $this->t('Event') . $experimental_label,
'#description' => $this->t('Select the event to trigger the Animate.css animation and will be automatically handled by JavaScript. This field allows you to customize when the animation occurs.'),
'#default_value' => $config->get('options.event') ?? 'load',
'#attributes' => ['class' => ['animate__event']],
+ '#field_suffix' => $new_label,
];
// Trigger the animation only once.
@@ -287,6 +293,11 @@ class AnimateCssSettings extends ConfigFormBase {
'#title' => $this->t('Once'),
'#description' => $this->t("Trigger the animation by the specified event only once."),
'#default_value' => $config->get('options.once') ?? FALSE,
+ '#states' => [
+ 'invisible' => [
+ 'select[name="event"]' => ['value' => 'load'],
+ ],
+ ],
];
// Animate.css preview.
diff --git a/composer.json b/composer.json
index e31e6a4..4e4464a 100644
--- a/composer.json
+++ b/composer.json
@@ -22,9 +22,8 @@
},
"autoload": {
"psr-4": {
- "Drupal\\animatecss\\": "src/",
"Drupal\\animatecss_ui\\": "animatecss_ui/src/"
}
},
- "license": "GPL-2.0+"
+ "license": "GPL-2.0-or-later"
}
--
GitLab