Skip to content

moqui / moqui-mjml

Go to a project
Toggle navigation
Toggle navigation pinning
fa106f2a by acetousk
Options

Get grapejs working on standalone screen mounted on apps

1 parent 3cb7b097
Expand all
Inline Side-by-side
Showing 10 changed files with 474 additions and 4 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 # runtime added files 3 # runtime added files
4 build 4 build
5 lib/example-*.jar 5 lib/moqui-mjml-*.jar
6 6
7 # IntelliJ IDEA files 7 # IntelliJ IDEA files
8 .idea/ 8 .idea/
......
...@@ -57,3 +57,4 @@ litigation is filed. ...@@ -57,3 +57,4 @@ litigation is filed.
57 Signed by git commit adding my legal name and git username: 57 Signed by git commit adding my legal name and git username:
58 58
59 Written in 2024 by Michael Jones - acetousk 59 Written in 2024 by Michael Jones - acetousk
60
......
...@@ -2,8 +2,11 @@ ...@@ -2,8 +2,11 @@
2 <!-- No copyright or license for configuration file, details here are not considered a creative work. --> 2 <!-- No copyright or license for configuration file, details here are not considered a creative work. -->
3 <moqui-conf xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/moqui-conf-3.xsd"> 3 <moqui-conf xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/moqui-conf-3.xsd">
4 <screen-facade> 4 <screen-facade>
5 <screen location="component://webroot/screen/webroot.xml">
6 <subscreens-item name="mjmlstatic" menu-include="false" location="component://moqui-mjml/screen/MjmlStatic.xml"/>
7 <subscreens-item name="mjml" menu-title="Moqui Mjml" menu-index="3" location="component://moqui-mjml/screen/MjmlApp.xml"/>
8 </screen>
5 <screen location="component://webroot/screen/webroot/apps.xml"> 9 <screen location="component://webroot/screen/webroot/apps.xml">
6 <subscreens-item name="mjml" menu-title="Moqui Mjml" menu-index="97" location="component://moqui-mjml/screen/MjmlApp.xml"/>
7 </screen> 10 </screen>
8 </screen-facade> 11 </screen-facade>
9 </moqui-conf> 12 </moqui-conf>
......
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!--
3 This software is in the public domain under CC0 1.0 Universal plus a
4 Grant of Patent License.
5
6 To the extent possible under law, the author(s) have dedicated all
7 copyright and related and neighboring rights to this software to the
8 public domain worldwide. This software is distributed without any
9 warranty.
10
11 You should have received a copy of the CC0 Public Domain Dedication
12 along with this software (see the LICENSE.md file). If not, see
13 <http://creativecommons.org/publicdomain/zero/1.0/>.
14 -->
15 <entity-facade-xml type="seed">
16 <moqui.basic.Enumeration description="Mjml Theme Type" enumId="STT_MJML" enumTypeId="ScreenThemeType"/>
17 <moqui.screen.ScreenTheme screenThemeId="MJML_DEFAULT" screenThemeTypeEnumId="STT_MJML"
18 description="Mjml Default Theme"/>
19 <!-- NOTE: these default resources are from the Moqui default runtime webroot component -->
20 <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="50" resourceTypeEnumId="STRT_STYLESHEET" resourceValue="/mjmlstatic/css/grapes.min.css"/>
21 <delete-moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="52" resourceTypeEnumId="STRT_STYLESHEET" resourceValue="/mjmlstatic/css/grapesjs-mjml.css"/>
22
23 <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="51" resourceTypeEnumId="STRT_SCRIPT" resourceValue="/mjmlstatic/js/grapesjs.min.js"/>
24 <delete-moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="52" resourceTypeEnumId="STRT_SCRIPT" resourceValue="/mjmlstatic/js/grapesjs-mjml.min.js"/>
25
26 <!-- <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="100" resourceTypeEnumId="STRT_HEADER_LOGO"-->
27 <!-- resourceValue="/images/MoquiLogoSmall.png"/>-->
28 <!-- <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="101" resourceTypeEnumId="STRT_SHORTCUT_ICON"-->
29 <!-- resourceValue="/favicon.ico"/>-->
30 <!-- <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="102" resourceTypeEnumId="STRT_BODY_CLASS"-->
31 <!-- resourceValue="bg-light"/>-->
32
33 <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="110" resourceTypeEnumId="STRT_HEADER_TITLE"
34 resourceValue="Email Editor"/>
35
36
37 </entity-facade-xml>
...@@ -14,11 +14,169 @@ along with this software (see the LICENSE.md file). If not, see ...@@ -14,11 +14,169 @@ along with this software (see the LICENSE.md file). If not, see
14 --> 14 -->
15 <screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 15 <screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
16 xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-3.xsd" 16 xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-3.xsd"
17 menu-image="fa fa-flash" menu-image-type="icon" standalone="true"> 17 menu-image="fa fa-flash" menu-image-type="icon" standalone="true" screen-theme-type-enum-id="STT_MJML" >
18 18
19 <widgets>
20 <render-mode><text type="html" location="component://webroot/screen/includes/Header.html.ftl"/></render-mode>
19 21
20 22
21 <widgets> 23 <render-mode><text type="html,vuet,qvt"><![CDATA[
24 <style>
25 body,
26 html {
27 height: 100%;
28 margin: 0;
29 }
30
31 .cke_top {
32 background: #444 !important;
33 }
34
35 .cke_chrome {
36 border: none !important;
37 }
38
39 .cke_toolgroup {
40 border: none !important;
41 background: transparent !important;
42 box-shadow: none !important;
43 }
44 </style>
45 <div id="gjs" style="height:0px; overflow:hidden">
46 <mjml>
47 <mj-head>
48 <mj-font name="Barlow" href="https://fonts.googleapis.com/css?family=Barlow"></mj-font>
49
50 <mj-style>
51 .slogan {
52 background: #000;
53 }
54 </mj-style>
55 </mj-head>
56 <mj-body>
57 <!-- Company Header -->
58 <mj-section background-color="#f0f0f0">
59 <mj-column border="10px solid #F45E43">
60 <mj-text font-family="Barlow">A first line of text</mj-text>
61 <mj-spacer height="50px" />
62 </mj-column>
63 </mj-section>
64
65 <!-- Image Header -->
66 <mj-section background-url="http://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg"
67 background-size="cover" background-repeat="no-repeat">
68 <mj-column>
69 <mj-text css-class="slogan" align="center" color="#fff" font-size="40px" font-family="Helvetica Neue">Slogan here</mj-text>
70 <mj-button background-color="#F63A4D" href="#">
71 Promotion
72 </mj-button>
73 </mj-column>
74 </mj-section>
75
76 <!-- Intro text -->
77 <mj-wrapper background-color="#ffe9f7" padding="10px">
78 <mj-section background-color="#eaeffa">
79 <mj-group background-color="#fffadd">
80 <mj-column>
81 <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">My Awesome Text</mj-text>
82 <mj-text color="#525252">
83 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
84 Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec
85 commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
86 </mj-text>
87 <mj-button background-color="#F45E43" href="#">Learn more</mj-button>
88 </mj-column>
89 </mj-group>
90 </mj-section>
91 </mj-wrapper>
92
93 <!-- Side image -->
94 <mj-section background-color="white">
95 <mj-column>
96 <mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
97 </mj-column>
98 <mj-column>
99 <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">
100 Find amazing places ...
101 </mj-text>
102 <mj-text color="#525252">
103 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
104 Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
105 </mj-column>
106 </mj-section>
107 <mj-section>
108 <mj-column>
109 <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262" align="center">
110 ... with real-life images
111 </mj-text>
112 </mj-column>
113 </mj-section>
114 <mj-raw>
115 <div class="container">
116 <img class="item" src="https://source.unsplash.com/random/200x141?random" alt="Example image">
117 <img class="item" src="https://source.unsplash.com/random/200x142?random" alt="Example image">
118 <img class="item" src="https://source.unsplash.com/random/200x143?random" alt="Example image">
119 <img class="item" src="https://source.unsplash.com/random/200x144?random" alt="Example image">
120 <img class="item" src="https://source.unsplash.com/random/200x145?random" alt="Example image">
121 <img class="item" src="https://source.unsplash.com/random/200x146?random" alt="Example image">
122 </div>
123 </mj-raw>
124 <!-- Icons -->
125 <mj-section background-color="#fbfbfb">
126 <mj-column>
127 <mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0l.png" />
128 </mj-column>
129 <mj-column>
130 <mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x01.png" />
131 </mj-column>
132 <mj-column>
133 <mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0s.png" />
134 </mj-column>
135 </mj-section>
136
137 <!-- Footer -->
138 <mj-section background-color="#e7e7e7">
139 <mj-column>
140 <mj-button href="#">Hello There!</mj-button>
141 <mj-social font-size="15px" icon-size="30px" mode="horizontal">
142 <mj-social-element name="facebook" href="https://mjml.io/">
143 Facebook
144 </mj-social-element>
145 <mj-social-element name="google" href="https://mjml.io/">
146 Google
147 </mj-social-element>
148 <mj-social-element name="twitter" href="https://mjml.io/">
149 Twitter
150 </mj-social-element>
151 </mj-social>
152 </mj-column>
153 </mj-section>
154 <!-- Footer -->
155 </mj-body>
156 </mjml>
157 </div>
158
159
160 <script type="text/javascript">
161 // Wait for the plugin to be injected by the dev server
162 window.onload = () => {
163 window.editor = grapesjs.init({
164 height: '100%',
165 noticeOnUnload: false,
166 storageManager: false,
167 fromElement: true,
168 container: '#gjs',
169
170 plugins: ['grapesjs-mjml'],
171 pluginsOpts: {
172 'grapesjs-mjml': {}
173 }
174 });
175 }
176 </script>
177 ]]></text></render-mode>
178
179 <render-mode><text type="html" location="component://webroot/screen/includes/Footer.html.ftl"/></render-mode>
22 180
23 </widgets> 181 </widgets>
24 </screen> 182 </screen>
......
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!--
3 This software is in the public domain under CC0 1.0 Universal plus a
4 Grant of Patent License.
5
6 To the extent possible under law, the author(s) have dedicated all
7 copyright and related and neighboring rights to this software to the
8 public domain worldwide. This software is distributed without any
9 warranty.
10
11 You should have received a copy of the CC0 Public Domain Dedication
12 along with this software (see the LICENSE.md file). If not, see
13 <http://creativecommons.org/publicdomain/zero/1.0/>.
14 -->
15 <screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
16 xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-3.xsd"
17 require-authentication="anonymous-view">
18 <widgets>
19 <subscreens-active/>
20 </widgets>
21 </screen>
...\ No newline at end of file ...\ No newline at end of file
1 .gjs-clm-tags .gjs-sm-title,
2 .gjs-sm-sector .gjs-sm-title {
3 border-top: none;
4 }
5
6 .gjs-clm-tags .gjs-clm-tag {
7 /* background-color: $tag-color; */
8 border: none;
9 box-shadow: none;
10 padding: 5px 8px;
11 text-shadow: none;
12 }
13
14 .gjs-field {
15 background-color: rgba(0, 0, 0, 0.15);
16 box-shadow: none;
17 }
18
19 .gjs-btnt.gjs-pn-active,
20 .gjs-pn-btn.gjs-pn-active {
21 box-shadow: none;
22 }
23
24 .gjs-pn-btn:hover {
25 color: rgba(255, 255, 255, 0.75);
26 }
27
28 .gjs-btnt.gjs-pn-active,
29 .gjs-color-active,
30 .gjs-pn-btn.gjs-pn-active,
31 .gjs-pn-btn:active,
32 .gjs-block:hover {
33 color: #f45e43; /* #f46d4c,#e4505d */
34 }
35
36 #gjs-rte-toolbar .gjs-rte-btn,
37 .gjs-btn-prim,
38 .gjs-btnt,
39 .gjs-clm-tags .gjs-sm-composite.gjs-clm-field,
40 .gjs-clm-tags .gjs-sm-field.gjs-sm-composite,
41 .gjs-clm-tags .gjs-sm-stack #gjs-sm-add,
42 .gjs-color-main,
43 .gjs-mdl-dialog,
44 .gjs-off-prv,
45 .gjs-pn-btn,
46 .gjs-pn-panel,
47 .gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
48 .gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
49 .gjs-sm-sector .gjs-sm-stack #gjs-sm-add,
50 .gjs-two-color {
51 color: #888686;
52 }
53
54 #gjs-rte-toolbar,
55 .gjs-bg-main,
56 .gjs-clm-select option,
57 .gjs-clm-tags .gjs-sm-colorp-c,
58 .gjs-editor,
59 .gjs-mdl-dialog,
60 .gjs-nv-item .gjs-nv-title-c,
61 .gjs-off-prv,
62 .gjs-pn-panel,
63 .gjs-select option,
64 .gjs-sm-sector .gjs-sm-colorp-c,
65 .gjs-sm-select option,
66 .gjs-sm-unit option,
67 .sp-container,
68 .gjs-block,
69 .gjs-one-bg {
70 background-color: #2c2e35;
71 }
72
73 .gjs-import-label,
74 .gjs-export-label {
75 margin-bottom: 10px;
76 font-size: 13px;
77 }
78
79 .gjs-mdl-dialog .gjs-btn-import {
80 margin-top: 10px;
81 }
82
83 .CodeMirror {
84 border-radius: 3px;
85 height: 450px;
86 font-family: sans-serif, monospace;
87 letter-spacing: 0.3px;
88 font-size: 12px;
89 }
90
91 /* Extra */
92
93 .gjs-block {
94 border: 1px solid rgba(0, 0, 0, 0.2);
95 border-radius: 3px;
96 margin: 10px 2.5% 5px;
97 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
98 transition: box-shadow 0.2s ease 0s;
99 }
100
101 .gjs-block:hover {
102 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
103 }
104
105 #gjs-pn-views-container.gjs-pn-panel {
106 padding: 39px 0 0;
107 }
108
109 #gjs-pn-views.gjs-pn-panel {
110 padding: 0;
111 border: none;
112 }
113
114 #gjs-pn-views .gjs-pn-btn {
115 margin: 0;
116 height: 40px;
117 padding: 10px;
118 width: 25%;
119 border-bottom: 2px solid rgba(0, 0, 0, 0.3);
120 }
121
122 #gjs-pn-views .gjs-pn-active {
123 /*
124 color: rgba(255, 255, 255, 0.9);
125 border-bottom: 2px solid #f45e43;
126 */
127 border-radius: 0;
128 }
129
130 #gjs-pn-devices-c {
131 padding-left: 30px;
132 }
133
134 #gjs-pn-options {
135 padding-right: 30px;
136 }
137
138 .gjs-sm-composite .gjs-sm-properties {
139 display: flex;
140 flex-flow: row wrap;
141 justify-content: space-between;
142 }
143
144 #gjs-sm-border-top-left-radius,
145 #gjs-sm-border-top-right-radius,
146 #gjs-sm-border-bottom-left-radius,
147 #gjs-sm-border-bottom-right-radius,
148 #gjs-sm-margin-top,
149 #gjs-sm-margin-bottom,
150 #gjs-sm-margin-right,
151 #gjs-sm-margin-left,
152 #gjs-sm-padding-top,
153 #gjs-sm-padding-bottom,
154 #gjs-sm-padding-right,
155 #gjs-sm-padding-left {
156 flex: 999 1 60px;
157 }
158
159 #gjs-sm-border-width,
160 #gjs-sm-border-style,
161 #gjs-sm-border-color {
162 flex: 999 1 80px;
163 }
164
165 #gjs-sm-margin-left,
166 #gjs-sm-padding-left {
167 order: 2;
168 }
169
170 #gjs-sm-margin-right,
171 #gjs-sm-padding-right {
172 order: 3;
173 }
174
175 #gjs-sm-margin-bottom,
176 #gjs-sm-padding-bottom {
177 order: 4;
178 }
179
180 .gjs-field-radio {
181 width: 100%;
182 }
183
184 .gjs-field-radio #gjs-sm-input-holder {
185 display: flex;
186 }
187
188 .gjs-radio-item {
189 flex: 1 0 auto;
190 text-align: center;
191 }
192
193 .gjs-sm-sector .gjs-sm-property.gjs-sm-list {
194 width: 50%;
195 }
196
197 .gjs-mdl-content {
198 border-top: none;
199 }
200
201 .gjs-sm-sector .gjs-sm-property .gjs-sm-layer.gjs-sm-active {
202 background-color: rgba(255, 255, 255, 0.09);
203 }
204
205 /*
206
207 #gjs-pn-views-container,
208 #gjs-pn-views{
209 min-width: 270px;
210 }
211 */
212
213 .gjs-f-button::before { content: 'B'; }
214 .gjs-f-divider::before { content: 'D'; }
215
216 .gjs-mdl-dialog-sm {
217 width: 300px;
218 }
219
220 .gjs-mdl-dialog form .gjs-sm-property {
221 font-size: 12px;
222 margin-bottom: 15px;
223 }
224
225 .gjs-mdl-dialog form .gjs-sm-label {
226 margin-bottom: 5px;
227 }
228
229 .anim-spin {
230 animation: 0.5s linear 0s normal none infinite running spin;
231 }
232
233 .form-status {
234 float: right;
235 font-size: 14px;
236 }
237
238 .text-danger {
239 color: #f92929;
240 }
241
242 @keyframes spin {
243 0% {
244 transform: rotate(0deg);
245 }
246
247 100% {
248 transform: rotate(360deg);
249 }
250 }
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.