michael/webmin
1
0
Fork 0
mirror of https://github.com/webmin/webmin.git synced 2026-02-03 14:13:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add embedment of styling in our email (works everywhere but GMail) 1/2

Browse Source 
Gmail fix is coming
This commit is contained in:
iliajie
2023-06-18 15:42:23 +03:00
parent a268373550
commit f6299b4e29
7 changed files with 23 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
gray-theme/unauthenticated/css/iframe.css
View File

@@ -1,13 +0,0 @@
body:not([style]) {
font: 14px/1.231 arial, helvetica, clean, sans-serif;
}
p:not([style]) {
margin: 0;
}
blockquote:not([style]) {
margin: 0px 0px 0px 0.8ex;
border-left: 1px solid #ccc;
padding-left: 1ex;
}

39
html-editor-lib.pl
View File

@@ -16,7 +16,6 @@ $html_editor_load_scripts .=
<<EOF;
<link href="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/css/quill.min.css?$opts->{'_'}->{'web'}->{'timestamp'}" rel="stylesheet">
<script type="text/javascript" src="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/js/quill.min.js?$opts->{'_'}->{'web'}->{'timestamp'}"></script>
<script type="text/javascript" src="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/js/computed-style-to-inline-style.min.js?$opts->{'_'}->{'web'}->{'timestamp'}"></script>
EOF
return $html_editor_load_scripts;
@@ -253,6 +252,15 @@ my $target_attr = $target_text->{'attr'} || 'name';
my $target_type = $target_text->{'type'} || '=';
my $target_name = $target_text->{'name'};
# HTML editor toolbar mode
my $iframe_styles_mode =
$opts->{'type'} =~ /(^advanced|expert$)/ ? 'advanced' :
$opts->{'type'} eq 'basic' ? 'basic' : 'simple';
my $iframe_styles =
&quote_escape(
&read_file_contents("$root_directory/unauthenticated/css/_iframe/$iframe_styles_mode.min.css"), '"');
$iframe_styles =~ s/\n/ /g;
my $html_editor_init_script =
<<EOF;
<script type="text/javascript">
@@ -260,7 +268,8 @@ my $html_editor_init_script =
const targ = document.querySelector('[$target_attr$target_type"$target_name"]'),
qs = Quill.import('attributors/style/size'),
qf = Quill.import('attributors/style/font'),
isMac = navigator.userAgent.toLowerCase().includes('mac');
isMac = navigator.userAgent.toLowerCase().includes('mac'),
iframe_styles = "$iframe_styles";
qs.whitelist = ["0.75em", "1.15em", "1.3em"];
Quill.register(qs, true);
@@ -304,24 +313,7 @@ my $html_editor_init_script =
});
editor.on('text-change', function() {
// This should most probably go to onSubmit event
const cloneId = '${target_name}clonedHTMLEditor',
clonedHTMLEditor = document.createElement('div');
clonedHTMLEditor.id = cloneId;
clonedHTMLEditor.innerHTML = editor.root.innerHTML;
document.body.appendChild(clonedHTMLEditor);
computedStyleToInlineStyle(clonedHTMLEditor, {
recursive: true,
properties: [
'color', 'background-color', 'position', 'box-sizing', 'width', 'height',
'margin', 'padding', 'border', 'font-size', 'font-family', 'line-height',
'text-align', 'content', 'text-decoration', 'overflow',
'list-style-type', 'counter-reset', 'counter-increment', 'ratio',
'opacity', 'cursor', 'left', 'top', 'right', 'bottom', 'vertical-align',
'direction', 'white-space', 'border-radius'
]
});
targ.value = clonedHTMLEditor.innerHTML + "<br>";
clonedHTMLEditor.remove();
targ.value = editor.root.innerHTML + "<br>";
sessionStorage.setItem('$module_name/quill=last-message', editor.root.innerHTML);
let extraValue = String(),
sync = JSON.parse('@{[&convert_to_json($opts->{'textarea'}->{'sync'}->{'data'})]}'),
@@ -352,6 +344,13 @@ my $html_editor_init_script =
targ.value = targ.value + extraValue;
}
}
// Inject our styles (unless already injected) to be sent alongside
// with the message. These styles later can be optionally turned in
// inline styling to satisfy GMail strict rules about HTML emails
if (!targ.value.match(/data-iframe-mode=(.*?)$iframe_styles_mode(.*?)/)) {
targ.value = targ.value +
'<style data-iframe-mode="$iframe_styles_mode">' + iframe_styles + '</style>';
}
});
// Prevent loosing focus for toolbar selects (color picker, font select and etc)

2
mailboxes/folders-lib.pl
View File

@@ -2852,7 +2852,6 @@ my ($body) = @_;
my $iframe_styles = <<EOF;
<style>
html, body { overflow-y: hidden; }
@{[&read_file_contents("$root_directory/$current_theme/unauthenticated/css/iframe.css")]}
</style>
EOF
# Add inner styles to the email body
@@ -2955,7 +2954,6 @@ return $quote if (!$quote);
my $iframe_styles = <<EOF;
<style>
html, body { overflow-y: hidden; }
@{[&read_file_contents("$root_directory/$current_theme/unauthenticated/css/iframe.css")]}
</style>
EOF
# Add inner styles to the email body

2
unauthenticated/css/_iframe/advanced.min.css vendored Normal file
View File

@@ -0,0 +1,2 @@
.ql-align-left{text-align:left}.ql-align-center{text-align:center}.ql-align-right{text-align:right}blockquote,h1,h2,h3,h4,h5,h6,ol,p,pre,ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}ol,ul{padding-left:1.5em}ol>li,ul>li{list-style-type:none}ul>li::before{content:'\2022'}ul[data-checked=false],ul[data-checked=true]{pointer-events:none}ul[data-checked=false]>li *,ul[data-checked=true]>li *{pointer-events:all}ul[data-checked=false]>li::before,ul[data-checked=true]>li::before{color:#777;cursor:pointer;pointer-events:all}ul[data-checked=true]>li::before{content:'\2611'}ul[data-checked=false]>li::before{content:'\2610'}li::before{display:inline-block;white-space:nowrap;width:1.2em}li:not(.ql-direction-rtl)::before{margin-left:-1.5em;margin-right:.3em;text-align:right}li.ql-direction-rtl::before{margin-left:.3em;margin-right:-1.5em}ol li:not(.ql-direction-rtl),ul li:not(.ql-direction-rtl){padding-left:1.5em}ol li.ql-direction-rtl,ul li.ql-direction-rtl{padding-right:1.5em}ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}ol li:before{content:counter(list-0,decimal) '. '}ol li.ql-indent-1{counter-increment:list-1;counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) '. '}ol li.ql-indent-2{counter-increment:list-2;counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-2:before{content:counter(list-2,lower-roman) '. '}ol li.ql-indent-3{counter-increment:list-3;counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-3:before{content:counter(list-3,decimal) '. '}ol li.ql-indent-4{counter-increment:list-4;counter-reset:list-5 list-6 list-7 list-8 list-9}ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) '. '}ol li.ql-indent-5{counter-increment:list-5;counter-reset:list-6 list-7 list-8 list-9}ol li.ql-indent-5:before{content:counter(list-5,lower-roman) '. '}ol li.ql-indent-6{counter-increment:list-6;counter-reset:list-7 list-8 list-9}ol li.ql-indent-6:before{content:counter(list-6,decimal) '. '}ol li.ql-indent-7{counter-increment:list-7;counter-reset:list-8 list-9}ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) '. '}ol li.ql-indent-8{counter-increment:list-8;counter-reset:list-9}ol li.ql-indent-8:before{content:counter(list-8,lower-roman) '. '}ol li.ql-indent-9{counter-increment:list-9}ol li.ql-indent-9:before{content:counter(list-9,decimal) '. '}.ql-indent-1:not(.ql-direction-rtl){padding-left:3em}li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-indent-2:not(.ql-direction-rtl){padding-left:6em}li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-indent-3:not(.ql-direction-rtl){padding-left:9em}li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-indent-4:not(.ql-direction-rtl){padding-left:12em}li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-indent-5:not(.ql-direction-rtl){padding-left:15em}li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-indent-6:not(.ql-direction-rtl){padding-left:18em}li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-indent-7:not(.ql-direction-rtl){padding-left:21em}li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-indent-8:not(.ql-direction-rtl){padding-left:24em}li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-indent-9:not(.ql-direction-rtl){padding-left:27em}li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}blockquote{border-left:1px solid #ccc}
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#333;background:#fff}.hljs ::selection,.hljs::selection{background-color:#c8c8fa;color:#333}.hljs-comment{color:#969896}.hljs-tag{color:#e8e8e8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#333}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ed6a43}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#0086b3}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#795da3}.hljs-strong{font-weight:700;color:#795da3}.hljs-addition,.hljs-built_in,.hljs-code,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp,.hljs-string,.hljs-title.class_.inherited__{color:#183691}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#795da3}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#a71d5d}.hljs-emphasis{color:#a71d5d;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#333}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}

1
unauthenticated/css/_iframe/basic.min.css vendored Normal file
View File

@@ -0,0 +1 @@
blockquote{margin:0 0 0 .8ex;border-left:1px solid #ccc;padding-left:1ex}

1
unauthenticated/css/_iframe/simple.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.ql-align-left{text-align:left}.ql-align-center{text-align:center}.ql-align-right{text-align:right}blockquote{margin:0 0 0 .8ex;border-left:1px solid #ccc;padding-left:1ex}

6
unauthenticated/js/computed-style-to-inline-style.min.js vendored
View File

@@ -1,6 +0,0 @@
/*!
computed-style-to-inline-style v3.0.0 (https://github.com/lukehorvat/computed-style-to-inline-style)
Copyright (c) 2016 Luke Horvat
Licensed under MIT (https://github.com/lukehorvat/computed-style-to-inline-style/blob/master/LICENSE)
*/
!function(e,t){if("function"==typeof define&&define.amd)define(["module"],t);else if("undefined"!=typeof exports)t(module);else{var o={exports:{}};t(o),e.computedStyleToInlineStyle=o.exports}}(this,(function(e){var t=Array.prototype.forEach;e.exports=function e(o){var r,i,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o)throw new Error("No element specified.");n.recursive&&(i=o.children,t).call(i,(function(t){e(t,n)}));var l=getComputedStyle(o);(r=n.properties||l,t).call(r,(function(e){o.style[e]=l.getPropertyValue(e),o.removeAttribute("class"),o.removeAttribute("id")}))}}));