1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-25 23:03:15 +00:00

Style the framed editor (#3596)

* style the framed editor

this makes the framed editor look a bit less ugly 😎

* Update framed.js

* Update base.tid

* Update base.tid
This commit is contained in:
BurningTreeC 2018-12-01 15:21:43 +01:00 committed by Jeremy Ruston
parent 7502ef875e
commit 6e59d2597a
3 changed files with 17 additions and 0 deletions

View File

@ -39,9 +39,11 @@ function FramedEngine(options) {
this.iframeDoc.close(); this.iframeDoc.close();
// Style the iframe // Style the iframe
this.iframeNode.className = this.dummyTextArea.className; this.iframeNode.className = this.dummyTextArea.className;
this.iframeNode.style["border-radius"] = "2px";
this.iframeNode.style.border = "none"; this.iframeNode.style.border = "none";
this.iframeNode.style.padding = "0"; this.iframeNode.style.padding = "0";
this.iframeNode.style.resize = "none"; this.iframeNode.style.resize = "none";
this.iframeNode.style["background-color"] = this.widget.wiki.extractTiddlerDataItem(this.widget.wiki.getTiddlerText("$:/palette"),"background");
this.iframeDoc.body.style.margin = "0"; this.iframeDoc.body.style.margin = "0";
this.iframeDoc.body.style.padding = "0"; this.iframeDoc.body.style.padding = "0";
this.widget.domNodes.push(this.iframeNode); this.widget.domNodes.push(this.iframeNode);
@ -92,6 +94,12 @@ FramedEngine.prototype.copyStyles = function() {
this.domNode.style.display = "block"; this.domNode.style.display = "block";
this.domNode.style.width = "100%"; this.domNode.style.width = "100%";
this.domNode.style.margin = "0"; this.domNode.style.margin = "0";
this.domNode.style.resize = "none";
this.domNode.style.border = "none";
this.domNode.style["border-radius"] = "2px";
this.domNode.style["padding-left"] = "0.5em";
this.domNode.style["padding-top"] = "0.3em";
this.domNode.style["background-color"] = this.widget.wiki.extractTiddlerDataItem(this.widget.wiki.getTiddlerText("$:/palette"),"background");
// In Chrome setting -webkit-text-fill-color overrides the placeholder text colour // In Chrome setting -webkit-text-fill-color overrides the placeholder text colour
this.domNode.style["-webkit-text-fill-color"] = "currentcolor"; this.domNode.style["-webkit-text-fill-color"] = "currentcolor";
}; };

View File

@ -50,6 +50,10 @@ textarea.tc-edit-texteditor {
font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}}; font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
} }
.tc-tiddler-frame.tc-tiddler-edit-frame iframe.tc-edit-texteditor {
<<box-shadow "1px 1px 5px rgba(0, 0, 0, 0.3)">>
}
canvas.tc-edit-bitmapeditor { canvas.tc-edit-bitmapeditor {
<<box-shadow "2px 2px 5px rgba(0, 0, 0, 0.5)">> <<box-shadow "2px 2px 5px rgba(0, 0, 0, 0.5)">>
} }

View File

@ -1027,6 +1027,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}}; font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
} }
.tc-tiddler-frame.tc-tiddler-edit-frame iframe.tc-edit-texteditor {
border-radius: 2px;
background-color: <<colour tiddler-background>>;
}
.tc-tiddler-frame .tc-binary-warning { .tc-tiddler-frame .tc-binary-warning {
width: 100%; width: 100%;
height: 5em; height: 5em;