unclean SPARC
This commit is contained in:
STEINNI
@@ -0,0 +1,421 @@
|
||||
<style>
|
||||
.templateEditor header {
|
||||
background: url('/app/assets/images/cards/templitorHeader.png') center/cover no-repeat;
|
||||
}
|
||||
.templateEditor header h1 {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--eicui-base-color-grey-15);
|
||||
margin-bottom: -1px;
|
||||
min-height: calc(3 * var(--eicui-base-spacing-m));
|
||||
padding: calc(var(--eicui-base-spacing-3xl) * 2) var(--eicui-base-spacing-m) var(--eicui-base-spacing-s) var(--eicui-base-spacing-m);
|
||||
display: block;
|
||||
color: var(--eicui-base-color-white) !important;
|
||||
text-shadow: 0 0 4px black;
|
||||
font-size: x-large !important;
|
||||
background-size: cover;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
article.templateEditor section{
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.eicui-input-container.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: white; /* ou autre fond pour lisibilité */
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.templateEditor .template-field {
|
||||
border: 1px solid var(--eicui-base-color-grey-10);
|
||||
overflow: auto;
|
||||
padding: 0.5em;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.templateEditor .tplOpStartDate,
|
||||
.templateEditor .tplOpEndDate {
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.tpl-editor .tplActions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tpl-editor [eicapp] [eicrichtext] {
|
||||
padding: var(--eicui-base-spacing-xs);
|
||||
border: 1px solid var(--eicui-base-color-grey-10);
|
||||
}
|
||||
|
||||
.tpl-editor .template-field.subject label {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tpl-editor .file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tpl-editor .tpl-edit-area {
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
.tpl-editor .path-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
margin-left: 5em;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.tpl-editor .input-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tpl-editor .tplPath {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.tpl-editor .tpl-btn-path {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.tpl-editor .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tpl-editor .icon-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.tpl-editor .tpl-spinButton{
|
||||
border: 0;
|
||||
}
|
||||
.tpl-editor .hiddenInput {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@keyframes dots {
|
||||
0% { content: "Loading"; }
|
||||
33% { content: "Loading ."; }
|
||||
66% { content: "Loading .."; }
|
||||
100% { content: "Loading ..."; }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.tpl-editor input[eicinput]{
|
||||
height: 2em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
.tpl-editor .tpl-loadingTools {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
.tpl-editor .tpl-loadingTools::after {
|
||||
content: "Loading";
|
||||
animation: dots 1.5s infinite steps(1);
|
||||
display: inline-block;
|
||||
}
|
||||
.tpl-editor .delete-img [eicbadge]{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tpl-editor .he-imgSelectContainer{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.tpl-editor .tpl-resizer {
|
||||
resize: both;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.tpl-editor .he-imgItem.selected {
|
||||
border: 2px solid blue;
|
||||
background-color: lightgray;
|
||||
}
|
||||
.tpl-editor .he-imgItem {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.tpl-editor .he-imgItem:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.tpl-editor .he-color-palette {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1.5em);
|
||||
gap: 0.5em;
|
||||
position: fixed;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px;
|
||||
background-color: #fff;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tpl-editor .he-colorOption {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.tpl-editor .he-colorOption:hover {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
.tpl-editor .tpl-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.tpl-editor .tpl-table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.tpl-editor .he-listItems{
|
||||
min-height: 100px;
|
||||
}
|
||||
.tpl-editor .tpl-history {
|
||||
max-height: 12em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tpl-editor .tpl-history .data-set .row {
|
||||
display: inline-block;
|
||||
line-height: 1px;
|
||||
}
|
||||
.tpl-editor .template-history .footer {
|
||||
font-size: x-small;
|
||||
}
|
||||
.tpl-editor .tpl-fullName,
|
||||
.tpl-editor .tpl-comment {
|
||||
display: grid;
|
||||
}
|
||||
.tpl-editor .tpl-comment {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.tpl-editor .error-message {
|
||||
color: red;
|
||||
padding: 1em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.tpl-editor .empty-message {
|
||||
color: #999;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tpl-edit-area {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eicui-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tpl-edit-area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tpl-history-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tpl-history-wrapper .toggle-history {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.tpl-history {
|
||||
position: absolute;
|
||||
top: 2.5em;
|
||||
right: 0;
|
||||
width: 15em;
|
||||
overflow-y: auto;
|
||||
background: white;
|
||||
border: 1px solid var(--eicui-base-color-grey-10);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
pointer-events: none;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tpl-history:not(.collapsed) {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.tpl-edit-area .template-field {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
@media (max-height: 700px) {
|
||||
.tpl-edit-area .template-field {
|
||||
max-height: 55vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 900px) {
|
||||
.tpl-edit-area .template-field {
|
||||
max-height: 65vh;
|
||||
}
|
||||
}
|
||||
|
||||
.tpl-edit-area .template-field.preview{
|
||||
max-height: unset;
|
||||
}
|
||||
</style>
|
||||
<article eiccard class="templateEditor">
|
||||
<header>
|
||||
<h1>Template Designer</h1>
|
||||
</header>
|
||||
<section>
|
||||
<div class="tpl-editor">
|
||||
<article eiccard class="tplEditor" tplEditor>
|
||||
<section>
|
||||
<div class="cols-3">
|
||||
<div>
|
||||
<label small>Template name</label>
|
||||
<input eicinput class="tplName tpl-inputMeta" name="tplName"
|
||||
placeholder="your template name..." />
|
||||
</div>
|
||||
<div class="cols-2 right">
|
||||
<div class="tplOpStartDate">
|
||||
<label small>Operating start date</label>
|
||||
<input eicinput type="text" class="tpl-formattedDateStart tpl-inputMeta" data-trigger="onStartDateClicked" />
|
||||
<input type="datetime-local" class="tplStartDate tpl-inputMeta hiddenInput" data-trigger="syncDateInputs"/>
|
||||
</div>
|
||||
<div class="tplOpEndDate">
|
||||
<label small>Operating end date</label>
|
||||
<input eicinput primary type="text" class="tpl-formattedDateEnd tpl-inputMeta" data-trigger="onEndDateClicked"/>
|
||||
<input type="datetime-local" class="tplEndDate tpl-inputMeta hiddenInput" data-trigger="syncDateInputs"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="path-container">
|
||||
<label small>Template path</label>
|
||||
<div class="input-button-wrapper">
|
||||
<span eicchip secondary><label class="tplPath tpl-inputMeta"
|
||||
name="tplPath"></label></span>
|
||||
<button eicbutton xsmall rounded primary class="tpl-btn-path"
|
||||
data-trigger="onPathSearch" icon="icon-folder">
|
||||
<i class="icon-folder"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="cols-2 left fields">
|
||||
<div class="cols-1 left">
|
||||
<menu small eictab vertical>
|
||||
<li data-trigger="buildToolButtons" data-value="subject" title="Subject line - Mandatory for email"><label>Subject</label></li>
|
||||
<li data-trigger="buildToolButtons" data-value="header"><label>Header</label></li>
|
||||
<li data-trigger="buildToolButtons" data-value="main"><label>Main</label></li>
|
||||
<li data-trigger="buildToolButtons" data-value="footer"><label>Footer</label></li>
|
||||
<li data-trigger="buildToolButtons" data-value="altText" title="Plain-text version for email clients that don't support HTML"><label>Text (Alt.)</label></li>
|
||||
<li data-trigger="buildToolButtons" data-value="preview" class="icon-preview" title="Preview the full template (header + main + footer)"><label>Preview</label></li>
|
||||
</menu>
|
||||
</div>
|
||||
<div class="tpl-edit-area">
|
||||
<div class="eicui-input-container">
|
||||
<div class="tpl-loadingTools">Tools</div>
|
||||
<menu small eictab horizontal class="tpl-toolButtons"></menu>
|
||||
<div class="tpl-history-wrapper">
|
||||
<button eicbutton xsmall class="toggle-history icon-history" title="Template history"></button>
|
||||
<div class="tpl-history collapsed"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template-field subject">
|
||||
<label>Subject is required for sending mail</label>
|
||||
<div class="content" contenteditable="true" aria-placeholder=""></div>
|
||||
</div>
|
||||
<div class="template-field header">
|
||||
<label>Header</label>
|
||||
<div eicrichtext class="content" contenteditable="true"></div>
|
||||
</div>
|
||||
<div class="template-field main">
|
||||
<label>Main</label>
|
||||
<div eicrichtext class="content" contenteditable="true"></div>
|
||||
</div>
|
||||
<div class="template-field footer">
|
||||
<label>Footer</label>
|
||||
<div eicrichtext class="content" contenteditable="true"></div>
|
||||
</div>
|
||||
<div class="template-field altText">
|
||||
<label>Text (Alt.)</label>
|
||||
<div eicrichtext class="content" contenteditable="true"></div>
|
||||
</div>
|
||||
<div class="template-field preview" contenteditable="false">
|
||||
<label> Preview</label>
|
||||
<div eicrichtext class="content" contenteditable="false"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<footer>
|
||||
<div class="cols-1 right">
|
||||
<div class="tplActions">
|
||||
<button eicbutton small primary class="tool-button he-uplImg hidden"
|
||||
data-trigger="onUploadImage" title="Upload your own image to insert into your template">
|
||||
<span>Upload image</span>
|
||||
</button>
|
||||
<button eicbutton small primary class="tpl-save hidden" data-trigger="saveHtml">
|
||||
<span>Save</span>
|
||||
</button>
|
||||
<button eicbutton small primary class="tpl-sendTest hidden" data-trigger="onTestSend">
|
||||
<span>Test mail</span>
|
||||
</button>
|
||||
<button eicbutton small primary class="tpl-request hidden" data-trigger="onRequestPub">
|
||||
<span>Request publishing</span>
|
||||
</button>
|
||||
<button eicbutton small primary class="tpl-approved hidden" data-trigger="onApproved">
|
||||
<span>Approve Template</span>
|
||||
</button>
|
||||
<button eicbutton small primary class="tpl-rejected hidden" data-trigger="onRejected">
|
||||
<span>Reject Template</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
Reference in New Issue
Block a user