diff --git a/css/easy-email-preview.css b/css/easy-email-preview.css
index 74b01cb1561802ea18c123fa1deaa6b65287891b..91bdbfe57908be6e06bcc5e3c2ada07aa3ecddd8 100644
--- a/css/easy-email-preview.css
+++ b/css/easy-email-preview.css
@@ -1,47 +1,87 @@
-fieldset.easy-email-type-preview:not(.fieldgroup) {
- background-color: #ffffcc;
+/* Local custom props. */
+.easy-email-type-preview {
+ --ee-dark: #333;
+ --ee-gray: #888;
+ --ee-light: #fff;
+ --ee-yellow: #ffffcc;
+ --ee-s-s: 0.625rem;
+ --ee-s-m: 1.25rem;
+ --ee-s-l: 2.5rem;
+ --ee-border: 0.075rem;
}
-fieldset.easy-email-resizable {
- border: 1px solid #ccc;
- height: 300px;
- padding-bottom: 30px !important;
+
+/* Override admin theme styles. */
+.easy-email-type-preview:not(.fieldgroup) {
+ background-color: var(--ee-yellow);
}
-fieldset {
- padding-top: 40px !important;
+
+.easy-email-type-preview .fieldset__label {
+ color: var(--ee-dark);
+ font-size: 1.5em;
+ font-weight: bold;
+}
+
+.easy-email__fieldset:not(.fieldgroup) {
+ border: var(--ee-border) solid var(--ee-dark);
+ color: var(--ee-dark);
+ padding: var(--ee-s-m);
}
-.easy-email-resizable iframe {
- border: 1px solid #ccc;
+
+/* Layout styles. */
+.easy-email.preview > * + * {
+ margin-block-start: var(--ee-s-l);
}
-fieldset label {
+
+.easy-email__fieldset {
+ max-inline-size: 100%;
+}
+
+.easy-email__legend {
+ color: var(--ee-dark);
+ font-size: 1.2em;
font-weight: bold;
- display: inline;
+ padding-inline: var(--ee-s-s);
+}
+
+.easy-email__resizable {
+ background-color: var(--ee-light);
+ block-size: 18.75rem;
+ border: var(--ee-border) solid var(--ee-dark);
+ min-block-size: 6.25rem;
+ min-inline-size: 12.5rem;
+ overflow: auto;
+ padding: var(--ee-s-m);
+ resize: both;
}
-.inbox-preview-resizable {
- background: white;
- border: 1px solid #ccc;
- width: 320px;
- max-height: 5em;
- height: 5em;
- padding: 1em;
+
+.easy-email__inbox-preview {
+ block-size: 5rem;
+ inline-size: 20rem;
+ max-block-size: 5rem;
}
+
+/* Inbox preview view styles. */
.inbox-preview-view {
+ block-size: 5em;
+ color: var(--ee-dark);
line-height: 1.3em;
- height: 5em;
- max-height: 5em;
- color: black;
+ max-block-size: 5em;
overflow: hidden;
}
+
.inbox-preview-view .from-name {
- font-weight: bold;
font-size: 110%;
+ font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
+
.inbox-preview-view .subject {
overflow: hidden;
white-space: nowrap;
}
+
.inbox-preview-view .body-preview {
- color: #888;
+ color: var(--ee-gray);
overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/easy_email.info.yml b/easy_email.info.yml
index 0b7c4a89fea850c44ed365812309b05334e4fc5a..7ae16612b2c8456aee9923a6507110cbb72e1894 100644
--- a/easy_email.info.yml
+++ b/easy_email.info.yml
@@ -7,5 +7,4 @@ configure: entity.easy_email_type.collection
dependencies:
- drupal:text
- - jquery_ui_resizable:jquery_ui_resizable
- token:token
diff --git a/easy_email.libraries.yml b/easy_email.libraries.yml
index d5d7763f3e00636bbdd441a83aa2d1dc66c28e65..829ae55512eb4f814f2d1c6e4de9556134791f0c 100644
--- a/easy_email.libraries.yml
+++ b/easy_email.libraries.yml
@@ -3,10 +3,3 @@ preview:
css:
theme:
css/easy-email-preview.css: {}
- js:
- js/easy-email-preview.js: {}
- dependencies:
- - core/drupal
- - core/jquery
- - core/once
- - jquery_ui_resizable/resizable
diff --git a/js/easy-email-preview.js b/js/easy-email-preview.js
deleted file mode 100644
index 40bde6afb7ec173364bc52849fbcc03fdd6320ad..0000000000000000000000000000000000000000
--- a/js/easy-email-preview.js
+++ /dev/null
@@ -1,17 +0,0 @@
-(function ($, Drupal, once) {
-
- 'use strict';
-
- Drupal.behaviors.resizablePreview = {
- attach: function (context, settings) {
- $(once('resizable-preview', '.easy-email-resizable', context)).each(function(i, element) {
-
- $(element).resizable({
- minHeight: 100,
- minWidth: 200
- });
- });
- }
- };
-
-})(jQuery, Drupal, once);
diff --git a/templates/easy-email-type-preview.html.twig b/templates/easy-email-type-preview.html.twig
index cb759d258086af6127ce6e762d7a7081db0c4547..f7a8d4d1caf8a9a1cc10ba81002554959a64ff99 100644
--- a/templates/easy-email-type-preview.html.twig
+++ b/templates/easy-email-type-preview.html.twig
@@ -15,35 +15,64 @@
* @ingroup themeable
*/
#}
+
{{ attach_library('easy_email/preview') }}
+
<div{{ attributes.addClass('easy-email', 'preview') }}>
- <fieldset data-drupal-selector="headers">
- <legend>{{ 'Headers' | t }}</legend>
+ <fieldset class="easy-email__fieldset" data-drupal-selector="headers">
+ <legend class="easy-email__legend">{{ 'Headers'|t }}</legend>
+
{% for header in headers %}
- <div data-drupal-selector="header-{{ header.name }}"><label>{{ header.name }}:</label> <span class="value">{{ header.value }}</span></div>
+ <div data-drupal-selector="header-{{ header.name }}">
+ <label>{{ header.name }}:</label> <span class="value">{{ header.value }}</span>
+ </div>
{% endfor %}
</fieldset>
- <fieldset data-drupal-selector="inbox-preview">
- <legend>{{ 'Inbox preview' | t }}</legend>
- <div class="easy-email-resizable inbox-preview-resizable">
+
+ <fieldset class="easy-email__fieldset" data-drupal-selector="inbox-preview">
+ <legend class="easy-email__legend">{{ 'Inbox preview'|t }}</legend>
+
+ <div class="easy-email__inbox-preview easy-email__resizable">
{{ inbox_preview }}
</div>
</fieldset>
+
{% if preview_html_url %}
- <fieldset data-drupal-selector="html-body" class="easy-email-resizable">
- <legend>{{ 'HTML body' | t }}</legend>
- <iframe frameBorder="0" width="100%" height="100%" src="{{ preview_html_url }}"></iframe>
+ <fieldset class="easy-email__fieldset" data-drupal-selector="html-body">
+ <legend class="easy-email__legend">{{ 'HTML body'|t }}</legend>
+
+ <div class="easy-email__resizable">
+ <iframe
+ class="easy-email__iframe"
+ frameBorder="0"
+ height="100%"
+ src="{{ preview_html_url }}"
+ width="100%"
+ ></iframe>
+ </div>
</fieldset>
{% endif %}
+
{% if preview_plain_url %}
- <fieldset data-drupal-selector="plain-body" class="easy-email-resizable">
- <legend>{{ 'Plain text body' | t }}</legend>
- <iframe frameBorder="0" width="100%" height="100%" src="{{ preview_plain_url }}"></iframe>
+ <fieldset class="easy-email__fieldset" data-drupal-selector="plain-body">
+ <legend class="easy-email__legend">{{ 'Plain text body'|t }}</legend>
+
+ <div class="easy-email__resizable">
+ <iframe
+ class="easy-email__iframe"
+ frameBorder="0"
+ height="100%"
+ src="{{ preview_plain_url }}"
+ width="100%"
+ ></iframe>
+ </div>
</fieldset>
{% endif %}
+
{% if attachments %}
- <fieldset data-drupal-selector="attachments">
- <legend>{{ 'Attachments' | t }}</legend>
+ <fieldset class="easy-email__fieldset" data-drupal-selector="attachments">
+ <legend class="easy-email__legend">{{ 'Attachments'|t }}</legend>
+
{{ attachments }}
</fieldset>
{% endif %}