mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-07 16:48:02 +08:00
71328855ee
[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.
132 lines
2.5 KiB
Text
Executable file
132 lines
2.5 KiB
Text
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;
|
|
}
|