mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-12 20:44:30 +08:00
be800ac89a
Summary:
Adds several new features to the templates plugin, fixes some existing bugs, and
refactors existing code.
New Plugin Features/Fixes:
- Changes the templates editor in preferences to allow variables to be entered with
`{{brackets}}`. Handles many contenteditable complexities to implement.
- Better interaction for renaming and deleting of templates in the editor.
- Changes tabbing behavior when using templates. Tabbing between variables now wraps
around, and typing tab from outside a variable region highlights the closest region.
- Prevents "Enter" key in the composer when inside a variable region, and strips all
formatting/tags from within the region - this prevents major contenteditable issues
that can result in inline CSS in the style of our variable regions, which will not be
removed when sending.
- Shows a warning when choosing a template if it will replace existing text in a draft.
- Prevents invalid characters in template names (due to filenames, esp. on Windows),
and shows an error message. Strips these characters from draft titles when making a
template.
- Fixes a bug where TemplateStore's initialization code was being called multiple times.
New N1 code:
- Several new methods in `DOMUtils` useful for working with contenteditable.
- Implement some missing methods in `Editor`
Refactor:
- Major refactor/rewrite of template composer extension to use new DOMUtils methods
and simplify the logic (while adding new functionality).
Remaining issues:
- `preferences-tempaltes.cjsx` and `template-editor.coffee` should be rewritten in ES6
for consistency
- Need tests for new DOMUtils functions and for new Templates plugin code.
Test Plan: manual, need to update specs
Reviewers: evan, bengotow
Reviewed By: evan, bengotow
Subscribers: juan
Differential Revision: https://phab.nylas.com/D2382
130 lines
2.4 KiB
Text
Executable file
130 lines
2.4 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: @code-bg-color;
|
|
&.empty {
|
|
color:darken(@code-bg-color, 50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|