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 @@
# runtime added files
build
lib/example-*.jar
lib/moqui-mjml-*.jar
# IntelliJ IDEA files
.idea/
......
......@@ -57,3 +57,4 @@ litigation is filed.
Signed by git commit adding my legal name and git username:
Written in 2024 by Michael Jones - acetousk
......
......@@ -2,8 +2,11 @@
<!-- No copyright or license for configuration file, details here are not considered a creative work. -->
<moqui-conf xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/moqui-conf-3.xsd">
<screen-facade>
<screen location="component://webroot/screen/webroot.xml">
<subscreens-item name="mjmlstatic" menu-include="false" location="component://moqui-mjml/screen/MjmlStatic.xml"/>
<subscreens-item name="mjml" menu-title="Moqui Mjml" menu-index="3" location="component://moqui-mjml/screen/MjmlApp.xml"/>
</screen>
<screen location="component://webroot/screen/webroot/apps.xml">
<subscreens-item name="mjml" menu-title="Moqui Mjml" menu-index="97" location="component://moqui-mjml/screen/MjmlApp.xml"/>
</screen>
</screen-facade>
</moqui-conf>
......
<?xml version="1.0" encoding="UTF-8"?>
<!--
This software is in the public domain under CC0 1.0 Universal plus a
Grant of Patent License.
To the extent possible under law, the author(s) have dedicated all
copyright and related and neighboring rights to this software to the
public domain worldwide. This software is distributed without any
warranty.
You should have received a copy of the CC0 Public Domain Dedication
along with this software (see the LICENSE.md file). If not, see
<http://creativecommons.org/publicdomain/zero/1.0/>.
-->
<entity-facade-xml type="seed">
<moqui.basic.Enumeration description="Mjml Theme Type" enumId="STT_MJML" enumTypeId="ScreenThemeType"/>
<moqui.screen.ScreenTheme screenThemeId="MJML_DEFAULT" screenThemeTypeEnumId="STT_MJML"
description="Mjml Default Theme"/>
<!-- NOTE: these default resources are from the Moqui default runtime webroot component -->
<moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="50" resourceTypeEnumId="STRT_STYLESHEET" resourceValue="/mjmlstatic/css/grapes.min.css"/>
<delete-moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="52" resourceTypeEnumId="STRT_STYLESHEET" resourceValue="/mjmlstatic/css/grapesjs-mjml.css"/>
<moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="51" resourceTypeEnumId="STRT_SCRIPT" resourceValue="/mjmlstatic/js/grapesjs.min.js"/>
<delete-moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="52" resourceTypeEnumId="STRT_SCRIPT" resourceValue="/mjmlstatic/js/grapesjs-mjml.min.js"/>
<!-- <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="100" resourceTypeEnumId="STRT_HEADER_LOGO"-->
<!-- resourceValue="/images/MoquiLogoSmall.png"/>-->
<!-- <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="101" resourceTypeEnumId="STRT_SHORTCUT_ICON"-->
<!-- resourceValue="/favicon.ico"/>-->
<!-- <moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="102" resourceTypeEnumId="STRT_BODY_CLASS"-->
<!-- resourceValue="bg-light"/>-->
<moqui.screen.ScreenThemeResource screenThemeId="MJML_DEFAULT" sequenceNum="110" resourceTypeEnumId="STRT_HEADER_TITLE"
resourceValue="Email Editor"/>
</entity-facade-xml>
......@@ -14,11 +14,169 @@ along with this software (see the LICENSE.md file). If not, see
-->
<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-3.xsd"
menu-image="fa fa-flash" menu-image-type="icon" standalone="true">
menu-image="fa fa-flash" menu-image-type="icon" standalone="true" screen-theme-type-enum-id="STT_MJML" >
<widgets>
<render-mode><text type="html" location="component://webroot/screen/includes/Header.html.ftl"/></render-mode>
<widgets>
<render-mode><text type="html,vuet,qvt"><![CDATA[
<style>
body,
html {
height: 100%;
margin: 0;
}
.cke_top {
background: #444 !important;
}
.cke_chrome {
border: none !important;
}
.cke_toolgroup {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
</style>
<div id="gjs" style="height:0px; overflow:hidden">
<mjml>
<mj-head>
<mj-font name="Barlow" href="https://fonts.googleapis.com/css?family=Barlow"></mj-font>
<mj-style>
.slogan {
background: #000;
}
</mj-style>
</mj-head>
<mj-body>
<!-- Company Header -->
<mj-section background-color="#f0f0f0">
<mj-column border="10px solid #F45E43">
<mj-text font-family="Barlow">A first line of text</mj-text>
<mj-spacer height="50px" />
</mj-column>
</mj-section>
<!-- Image Header -->
<mj-section background-url="http://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg"
background-size="cover" background-repeat="no-repeat">
<mj-column>
<mj-text css-class="slogan" align="center" color="#fff" font-size="40px" font-family="Helvetica Neue">Slogan here</mj-text>
<mj-button background-color="#F63A4D" href="#">
Promotion
</mj-button>
</mj-column>
</mj-section>
<!-- Intro text -->
<mj-wrapper background-color="#ffe9f7" padding="10px">
<mj-section background-color="#eaeffa">
<mj-group background-color="#fffadd">
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">My Awesome Text</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec
commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
</mj-text>
<mj-button background-color="#F45E43" href="#">Learn more</mj-button>
</mj-column>
</mj-group>
</mj-section>
</mj-wrapper>
<!-- Side image -->
<mj-section background-color="white">
<mj-column>
<mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
</mj-column>
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">
Find amazing places ...
</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262" align="center">
... with real-life images
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<div class="container">
<img class="item" src="https://source.unsplash.com/random/200x141?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x142?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x143?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x144?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x145?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x146?random" alt="Example image">
</div>
</mj-raw>
<!-- Icons -->
<mj-section background-color="#fbfbfb">
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0l.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x01.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0s.png" />
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section background-color="#e7e7e7">
<mj-column>
<mj-button href="#">Hello There!</mj-button>
<mj-social font-size="15px" icon-size="30px" mode="horizontal">
<mj-social-element name="facebook" href="https://mjml.io/">
Facebook
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/">
Google
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
Twitter
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
<!-- Footer -->
</mj-body>
</mjml>
</div>
<script type="text/javascript">
// Wait for the plugin to be injected by the dev server
window.onload = () => {
window.editor = grapesjs.init({
height: '100%',
noticeOnUnload: false,
storageManager: false,
fromElement: true,
container: '#gjs',
plugins: ['grapesjs-mjml'],
pluginsOpts: {
'grapesjs-mjml': {}
}
});
}
</script>
]]></text></render-mode>
<render-mode><text type="html" location="component://webroot/screen/includes/Footer.html.ftl"/></render-mode>
</widgets>
</screen>
......
<?xml version="1.0" encoding="UTF-8"?>
<!--
This software is in the public domain under CC0 1.0 Universal plus a
Grant of Patent License.
To the extent possible under law, the author(s) have dedicated all
copyright and related and neighboring rights to this software to the
public domain worldwide. This software is distributed without any
warranty.
You should have received a copy of the CC0 Public Domain Dedication
along with this software (see the LICENSE.md file). If not, see
<http://creativecommons.org/publicdomain/zero/1.0/>.
-->
<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-3.xsd"
require-authentication="anonymous-view">
<widgets>
<subscreens-active/>
</widgets>
</screen>
\ No newline at end of file
.gjs-clm-tags .gjs-sm-title,
.gjs-sm-sector .gjs-sm-title {
border-top: none;
}
.gjs-clm-tags .gjs-clm-tag {
/* background-color: $tag-color; */
border: none;
box-shadow: none;
padding: 5px 8px;
text-shadow: none;
}
.gjs-field {
background-color: rgba(0, 0, 0, 0.15);
box-shadow: none;
}
.gjs-btnt.gjs-pn-active,
.gjs-pn-btn.gjs-pn-active {
box-shadow: none;
}
.gjs-pn-btn:hover {
color: rgba(255, 255, 255, 0.75);
}
.gjs-btnt.gjs-pn-active,
.gjs-color-active,
.gjs-pn-btn.gjs-pn-active,
.gjs-pn-btn:active,
.gjs-block:hover {
color: #f45e43; /* #f46d4c,#e4505d */
}
#gjs-rte-toolbar .gjs-rte-btn,
.gjs-btn-prim,
.gjs-btnt,
.gjs-clm-tags .gjs-sm-composite.gjs-clm-field,
.gjs-clm-tags .gjs-sm-field.gjs-sm-composite,
.gjs-clm-tags .gjs-sm-stack #gjs-sm-add,
.gjs-color-main,
.gjs-mdl-dialog,
.gjs-off-prv,
.gjs-pn-btn,
.gjs-pn-panel,
.gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
.gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
.gjs-sm-sector .gjs-sm-stack #gjs-sm-add,
.gjs-two-color {
color: #888686;
}
#gjs-rte-toolbar,
.gjs-bg-main,
.gjs-clm-select option,
.gjs-clm-tags .gjs-sm-colorp-c,
.gjs-editor,
.gjs-mdl-dialog,
.gjs-nv-item .gjs-nv-title-c,
.gjs-off-prv,
.gjs-pn-panel,
.gjs-select option,
.gjs-sm-sector .gjs-sm-colorp-c,
.gjs-sm-select option,
.gjs-sm-unit option,
.sp-container,
.gjs-block,
.gjs-one-bg {
background-color: #2c2e35;
}
.gjs-import-label,
.gjs-export-label {
margin-bottom: 10px;
font-size: 13px;
}
.gjs-mdl-dialog .gjs-btn-import {
margin-top: 10px;
}
.CodeMirror {
border-radius: 3px;
height: 450px;
font-family: sans-serif, monospace;
letter-spacing: 0.3px;
font-size: 12px;
}
/* Extra */
.gjs-block {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
margin: 10px 2.5% 5px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease 0s;
}
.gjs-block:hover {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
}
#gjs-pn-views-container.gjs-pn-panel {
padding: 39px 0 0;
}
#gjs-pn-views.gjs-pn-panel {
padding: 0;
border: none;
}
#gjs-pn-views .gjs-pn-btn {
margin: 0;
height: 40px;
padding: 10px;
width: 25%;
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}
#gjs-pn-views .gjs-pn-active {
/*
color: rgba(255, 255, 255, 0.9);
border-bottom: 2px solid #f45e43;
*/
border-radius: 0;
}
#gjs-pn-devices-c {
padding-left: 30px;
}
#gjs-pn-options {
padding-right: 30px;
}
.gjs-sm-composite .gjs-sm-properties {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#gjs-sm-border-top-left-radius,
#gjs-sm-border-top-right-radius,
#gjs-sm-border-bottom-left-radius,
#gjs-sm-border-bottom-right-radius,
#gjs-sm-margin-top,
#gjs-sm-margin-bottom,
#gjs-sm-margin-right,
#gjs-sm-margin-left,
#gjs-sm-padding-top,
#gjs-sm-padding-bottom,
#gjs-sm-padding-right,
#gjs-sm-padding-left {
flex: 999 1 60px;
}
#gjs-sm-border-width,
#gjs-sm-border-style,
#gjs-sm-border-color {
flex: 999 1 80px;
}
#gjs-sm-margin-left,
#gjs-sm-padding-left {
order: 2;
}
#gjs-sm-margin-right,
#gjs-sm-padding-right {
order: 3;
}
#gjs-sm-margin-bottom,
#gjs-sm-padding-bottom {
order: 4;
}
.gjs-field-radio {
width: 100%;
}
.gjs-field-radio #gjs-sm-input-holder {
display: flex;
}
.gjs-radio-item {
flex: 1 0 auto;
text-align: center;
}
.gjs-sm-sector .gjs-sm-property.gjs-sm-list {
width: 50%;
}
.gjs-mdl-content {
border-top: none;
}
.gjs-sm-sector .gjs-sm-property .gjs-sm-layer.gjs-sm-active {
background-color: rgba(255, 255, 255, 0.09);
}
/*
#gjs-pn-views-container,
#gjs-pn-views{
min-width: 270px;
}
*/
.gjs-f-button::before { content: 'B'; }
.gjs-f-divider::before { content: 'D'; }
.gjs-mdl-dialog-sm {
width: 300px;
}
.gjs-mdl-dialog form .gjs-sm-property {
font-size: 12px;
margin-bottom: 15px;
}
.gjs-mdl-dialog form .gjs-sm-label {
margin-bottom: 5px;
}
.anim-spin {
animation: 0.5s linear 0s normal none infinite running spin;
}
.form-status {
float: right;
font-size: 14px;
}
.text-danger {
color: #f92929;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.