diff --git a/examples/N1-Composer-Templates/stylesheets/message-templates.less b/examples/N1-Composer-Templates/stylesheets/message-templates.less
index 3db293255..67d48bc0f 100755
--- a/examples/N1-Composer-Templates/stylesheets/message-templates.less
+++ b/examples/N1-Composer-Templates/stylesheets/message-templates.less
@@ -24,7 +24,7 @@
font-size: @font-size-small;
}
-.compose-body #contenteditable {
+.compose-body .contenteditable {
code.var {
font: inherit;
padding:0;
diff --git a/internal_packages/composer-signature/lib/main.coffee b/internal_packages/composer-signature/lib/main.coffee
index b56e4e9c0..9c55c8132 100644
--- a/internal_packages/composer-signature/lib/main.coffee
+++ b/internal_packages/composer-signature/lib/main.coffee
@@ -6,35 +6,10 @@ module.exports =
DraftStore.registerExtension(SignatureDraftExtension)
@preferencesTab = new PreferencesUIStore.TabItem
- # TODO: Fix RetinaImg to handle plugin images
- icon: ->
- if process.platform is "win32"
- "nylas://composer-signature/images/ic-settings-signatures-win32@2x.png"
- else
- "nylas://composer-signature/images/ic-settings-signatures@2x.png"
tabId: "Signatures"
displayName: "Signatures"
component: require "./preferences-signatures"
- # TODO Re-enable when fixed!
- # PreferencesUIStore.registerPreferencesTab(@preferencesTab)
-
- ## TODO
- # PreferencesUIStore.registerPreferences "composer-signatures", [
- # {
- # section: PreferencesUIStore.Section.Signatures
- # type: "richtext"
- # label: "Signature:"
- # perAccount: true
- # defaultValue: "- Sent from N1"
- # }, {
- # section: PreferencesUIStore.Section.Signatures
- # type: "toggle"
- # label: "Include on replies"
- # defaultValue: true
- # }
- # ]
-
deactivate: ->
DraftStore.unregisterExtension(SignatureDraftExtension)
PreferencesUIStore.unregisterPreferencesTab(@preferencesTab.sectionId)
diff --git a/internal_packages/composer-signature/lib/preferences-signatures.cjsx b/internal_packages/composer-signature/lib/preferences-signatures.cjsx
index 7d80070cc..815345df4 100644
--- a/internal_packages/composer-signature/lib/preferences-signatures.cjsx
+++ b/internal_packages/composer-signature/lib/preferences-signatures.cjsx
@@ -72,8 +72,7 @@ class PreferencesSignatures extends React.Component
ref="signatureInput"
value={@state.currentSignature}
onChange={@_onEditSignature}
- spellcheck={false}
- floatingToolbar={false} />
+ spellcheck={false} />
_onEditSignature: (event) =>
html = event.target.value
@@ -97,7 +96,7 @@ class PreferencesSignatures extends React.Component
Signature for: {@_renderAccountPicker()}
-
+
{@_renderCurrentSignature()}
diff --git a/internal_packages/composer-signature/styles/composer-signature.less b/internal_packages/composer-signature/styles/composer-signature.less
new file mode 100644
index 000000000..20aec655d
--- /dev/null
+++ b/internal_packages/composer-signature/styles/composer-signature.less
@@ -0,0 +1,63 @@
+.container-signatures {
+ max-width: 640px;
+
+ .signature-wrap {
+ position: relative;
+ border: 1px solid @input-border-color;
+ padding: 10px;
+ margin-top: 20px;
+ min-height: 200px;
+ display: flex;
+ }
+
+ .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;
+ }
+ }
+ }
+ .signature-area {
+ border: solid thin #CCC;
+ min-height: 200px;
+ }
+ .menu-footer {
+ border: solid thin #CCC;
+ overflow: auto;
+ }
+ .signature-footer {
+ border: solid thin #CCC;
+ overflow: auto;
+
+ .edit-html-button {
+ float: right;
+ margin: 6px;
+ }
+ }
+ }
+}
+
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index a36189d6a..c54b0c0e3 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -21,12 +21,6 @@ body.platform-win32 {
border: 0;
}
}
- .floating-toolbar {
- border-radius: 0;
- input, input:focus {
- border: 0;
- }
- }
}
.composer-inner-wrap {
@@ -128,7 +122,7 @@ body.platform-win32 {
padding-top: 12px;
}
- input, textarea, div[contenteditable] {
+ input, textarea {
color: @text-color;
position: relative;
display: block;
@@ -232,23 +226,9 @@ body.platform-win32 {
}
div[contenteditable] {
- font-size: @font-size;
- line-height: 1.4;
min-height: @compose-min-height;
- padding: @spacing-standard;
- padding-top: 20px;
- padding-bottom: 0;
margin-bottom: 30px;
- }
- .contenteditable-container {
- width: 100%;
- position: relative;
- }
- spelling.misspelled {
- background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
- background-size: 2px 2px;
- background-position: bottom;
- background-repeat-y: no-repeat;
+ padding: 20px @spacing-standard 0 @spacing-standard;
}
}
@@ -291,17 +271,6 @@ body.platform-win32 {
.compose-body {
margin-bottom: 0;
position: relative;
-
- .contenteditable-container {
- flex: 1;
- width: 100%;
- position: relative;
-
- div[contenteditable] {
- height: auto;
- flex: 1;
- }
- }
}
}
@@ -309,6 +278,8 @@ body.platform-win32 {
.compose-body {
div[contenteditable] {
min-height: @line-height-computed;
+ margin-bottom: 30px;
+ padding: 20px @spacing-standard 0 @spacing-standard;
}
}
@@ -333,7 +304,6 @@ body.platform-win32 {
}
-
//////////////////////////////////
// participants-text-field.cjsx //
//////////////////////////////////
@@ -362,123 +332,3 @@ body.platform-win32 {
}
}
}
-
-
-///////////////////////////
-// floating-toolbar.cjsx //
-///////////////////////////
-.floating-toolbar {
- z-index: 10;
- position: absolute;
-
- background: #fff;
- box-shadow: 0 10px 20px rgba(0,0,0,0.19), inset 0 0 1px rgba(0,0,0,0.5);
- border-radius: @border-radius-base;
- color: @text-color;
-
- transition-duration: .15s;
- transition-property: opacity, margin;
- opacity: 0;
- visibility: hidden;
- margin-top: 3px;
-
- &.toolbar-visible {
- opacity: 1;
- visibility: visible;
- margin-top: 0;
- }
-
- .toolbar-pointer {
- position: absolute;
- width: 22.5px;
- height: 10px;
- background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat;
- background-size: 22.5px 9.5px;
- margin-left: -11.2px;
- }
-
- &.above {
- .toolbar-pointer {
- transform: rotate(0deg);
- bottom: -9px;
- }
- }
- &.below {
- .toolbar-pointer {
- transform: rotate(180deg);
- top: -9px;
- }
- }
-
- .floating-toolbar-input {
- display: inline;
- // The hardcoded numbers here represent the widths of the various
- // icons and buttons that surround the input. They are hardcoded here
- // because CSS does the calculation for us that we'd otherwise have to
- // do in React before the element renders to the page.
- width: calc(~"100% - 62px");
- &.with-remove {
- width: calc(~"100% - 95px");
- }
- color: @text-color;
- }
-
- @padding: 0.5em;
- .btn {
- background: transparent;
- font-size: 16px;
- height: auto;
- border-radius: 0;
- padding: @padding*0.75 @padding;
- margin: 0;
- color: @text-color;
- box-shadow: none;
- &:first-child {
- padding-left: 1.5*@padding;
- }
- &:last-child {
- padding-right: 1.5*@padding;
- }
- &:hover, &:active {
- color: lighten(@text-color-link, 10%);
- background: transparent;
- }
- }
-
- .preview-btn-icon {
- position: relative;
- top: 1px;
- padding: 0 @padding;
- }
-
- button.btn.toolbar-btn {
- @padding-top: 4px;
- @padding-left: 8px;
-
- width: 12.5px + 2*@padding-left;
- height: 12.5px + 2*@padding-top;
- margin: 7.5px 0;
- box-shadow: none;
- border: 0;
- border-right: 1px solid @border-color-divider;
- &:last-child { border-right: 0 }
-
- background: no-repeat;
- background-size: 12.5px 12.5px;
- background-position: @padding-left @padding-top;
- &.btn-bold { background-image: url("images/composer/tooltip-bold-black@2x.png") }
- &.btn-italic { background-image: url("images/composer/tooltip-italic-black@2x.png") }
- &.btn-underline { background-image: url("images/composer/tooltip-underline-black@2x.png") }
- &.btn-link { background-image: url("images/composer/tooltip-link-black@2x.png") }
- &:hover {
- cursor: pointer;
- background: no-repeat;
- background-size: 12.5px 12.5px;
- background-position: @padding-left @padding-top;
- &.btn-bold { background-image: url("images/composer/tooltip-bold-blue@2x.png") }
- &.btn-italic { background-image: url("images/composer/tooltip-italic-blue@2x.png") }
- &.btn-underline { background-image: url("images/composer/tooltip-underline-blue@2x.png") }
- &.btn-link { background-image: url("images/composer/tooltip-link-blue@2x.png") }
- }
- }
-}
diff --git a/internal_packages/preferences/stylesheets/preferences.less b/internal_packages/preferences/stylesheets/preferences.less
index 0cd93f2d2..7c26f4626 100644
--- a/internal_packages/preferences/stylesheets/preferences.less
+++ b/internal_packages/preferences/stylesheets/preferences.less
@@ -103,65 +103,6 @@
}
}
- .container-signatures {
- .contenteditable-container {
- border: 1px solid @input-border-color;
- padding: 10px;
- margin-top: 20px;
- min-height: 200px;
- }
-
- .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;
- }
- }
- }
- .signature-area {
- border: solid thin #CCC;
- min-height: 200px;
- }
- .menu-footer {
- border: solid thin #CCC;
- overflow: auto;
- }
- .signature-footer {
- border: solid thin #CCC;
- overflow: auto;
-
- .edit-html-button {
- float: right;
- margin: 6px;
- }
- }
- }
- }
-
.appearance-mode-switch {
max-width:400px;
text-align: right;
diff --git a/src/components/contenteditable/contenteditable.cjsx b/src/components/contenteditable/contenteditable.cjsx
index 17d0f5541..61288209d 100644
--- a/src/components/contenteditable/contenteditable.cjsx
+++ b/src/components/contenteditable/contenteditable.cjsx
@@ -131,7 +131,7 @@ class Contenteditable extends React.Component
{@_renderFloatingToolbar()}
-