mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 08:46:07 +08:00
20c522ed39
[Composer Templates / Quick Reply plugin example] Add a page to preferences with a basic editor for quick reply templates, allowing add, delete, and edit (HTML and rendered text), with instructions for how to add variable regions. Add methods to TemplatesStore to enable these. Fix issues in plugin with quoted text handling, name conflicts, `this` scoping.
133 lines
2.5 KiB
Plaintext
Executable file
133 lines
2.5 KiB
Plaintext
Executable file
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
@code-bg-color: #fcf4db;
|
|
|
|
.template-picker {
|
|
.menu {
|
|
.content-container {
|
|
height:150px;
|
|
overflow-y:scroll;
|
|
}
|
|
.footer-container {
|
|
border-top: 1px solid @border-secondary-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.template-status-bar {
|
|
background-color: @code-bg-color;
|
|
color: darken(@code-bg-color, 70%);
|
|
border: 1.5px solid darken(@code-bg-color, 10%);
|
|
border-radius: @border-radius-small;
|
|
padding-top: @padding-small-vertical @padding-small-horizontal @padding-small-vertical @padding-small-horizontal;
|
|
font-size: @font-size-small;
|
|
}
|
|
|
|
.compose-body,.container-templates .contenteditable {
|
|
code.var {
|
|
font: inherit;
|
|
padding:0;
|
|
padding-left:2px;
|
|
padding-right:2px;
|
|
border-bottom: 1.5px solid darken(@code-bg-color, 10%);
|
|
background-color: fade(@code-bg-color, 10%);
|
|
&.empty {
|
|
color:darken(@code-bg-color, 70%);
|
|
border-bottom: 1px solid darken(@code-bg-color, 14%);
|
|
background-color: @code-bg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.container-templates {
|
|
max-width: 640px;
|
|
|
|
|
|
.template-wrap {
|
|
position: relative;
|
|
border: 1px solid @input-border-color;
|
|
padding: 10px;
|
|
margin-top: 20px;
|
|
min-height: 200px;
|
|
display: flex;
|
|
|
|
textarea {
|
|
border: 0;
|
|
padding: 0;
|
|
flex: 1;
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
.section-body {
|
|
padding: 10px 0 0 0;
|
|
|
|
.menu {
|
|
border: solid thin #CCC;
|
|
margin-right: 5px;
|
|
min-height: 200px;
|
|
.menu-items {
|
|
margin:0;
|
|
padding:0;
|
|
list-style: none;
|
|
|
|
li { padding: 6px; }
|
|
}
|
|
}
|
|
.menu-horizontal {
|
|
height: 100%;
|
|
.menu-items {
|
|
height:100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
li {
|
|
text-align:center;
|
|
width:40px;
|
|
display:inline-block;
|
|
padding:8px 16px 8px 16px;
|
|
border-right: solid thin #CCC;
|
|
}
|
|
}
|
|
}
|
|
.template-area {
|
|
border: solid thin #CCC;
|
|
min-height: 200px;
|
|
}
|
|
.menu-footer {
|
|
border: solid thin #CCC;
|
|
overflow: auto;
|
|
}
|
|
.template-footer {
|
|
border: solid thin #CCC;
|
|
overflow: auto;
|
|
|
|
.edit-html-button {
|
|
float: right;
|
|
margin: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.template-name-btn {
|
|
float: right;
|
|
margin: 6px;
|
|
}
|
|
.template-name-input {
|
|
display: inline-block;
|
|
width: 200px;
|
|
}
|
|
.editor-note {
|
|
color: #AAA;
|
|
font-size: small;
|
|
}
|
|
}
|
|
.templates-instructions {
|
|
color: #333;
|
|
font-size: small;
|
|
margin-top: 20px;
|
|
}
|