mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-23 10:07:19 +00:00
Add default settings for styled inline SPANs (#6877)
* add default settings for styled inline SPANs * change color names in palettes and vanilla-base * change parser behaviour if custom class is used * tc-inline-style will only be set if no other custom setting is appliead * Add tests for inline-styles * add one more test * remove space after if
This commit is contained in:
parent
f33c7e2aef
commit
23e0eeb556
@ -41,9 +41,6 @@ exports.parse = function() {
|
||||
var node = {
|
||||
type: "element",
|
||||
tag: "span",
|
||||
attributes: {
|
||||
"class": {type: "string", value: "tc-inline-style"}
|
||||
},
|
||||
children: tree
|
||||
};
|
||||
if(classString) {
|
||||
@ -52,6 +49,9 @@ exports.parse = function() {
|
||||
if(stylesString) {
|
||||
$tw.utils.addAttributeToParseTreeNode(node,"style",stylesString);
|
||||
}
|
||||
if(!classString && !stylesString) {
|
||||
$tw.utils.addClassToParseTreeNode(node,"tc-inline-style");
|
||||
}
|
||||
return [node];
|
||||
};
|
||||
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #0000aa
|
||||
external-link-foreground: #0000ee
|
||||
foreground: #333333
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: #ecf2ff
|
||||
message-border: #cfd6e6
|
||||
message-foreground: #547599
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #0000aa
|
||||
external-link-foreground: #0000ee
|
||||
foreground: #333353
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: #ecf2ff
|
||||
message-border: #cfd6e6
|
||||
message-foreground: #547599
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #0000aa
|
||||
external-link-foreground: #0000ee
|
||||
foreground: #333333
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: #ecf2ff
|
||||
message-border: #cfd6e6
|
||||
message-foreground: #547599
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #00a
|
||||
external-link-foreground: #00e
|
||||
foreground: #000
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: <<colour foreground>>
|
||||
message-border: <<colour background>>
|
||||
message-foreground: <<colour background>>
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #00a
|
||||
external-link-foreground: #00e
|
||||
foreground: #fff
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: <<colour foreground>>
|
||||
message-border: <<colour background>>
|
||||
message-foreground: <<colour background>>
|
||||
|
@ -32,6 +32,8 @@ external-link-foreground-hover:
|
||||
external-link-foreground-visited: #BF5AF2
|
||||
external-link-foreground: #32D74B
|
||||
foreground: #FFFFFF
|
||||
highlight-background: #ffff78
|
||||
highlight-foreground: #000000
|
||||
menubar-background: #464646
|
||||
menubar-foreground: #ffffff
|
||||
message-background: <<colour background>>
|
||||
|
@ -36,6 +36,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #0000aa
|
||||
external-link-foreground: #0000ee
|
||||
foreground: #333333
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: #ecf2ff
|
||||
message-border: #cfd6e6
|
||||
message-foreground: #547599
|
||||
|
@ -40,6 +40,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #313163
|
||||
external-link-foreground: #555592
|
||||
foreground: #2D2A23
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
menubar-background: #CDC2A6
|
||||
menubar-foreground: #5A5446
|
||||
message-background: #ECE5CF
|
||||
|
@ -41,6 +41,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #d3869b
|
||||
external-link-foreground: #8ec07c
|
||||
foreground: #fbf1c7
|
||||
highlight-background: #ffff79
|
||||
highlight-foreground: #000000
|
||||
menubar-background: #504945
|
||||
menubar-foreground: <<colour foreground>>
|
||||
message-background: #83a598
|
||||
|
@ -41,6 +41,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #5E81AC
|
||||
external-link-foreground: #8FBCBB
|
||||
foreground: #d8dee9
|
||||
highlight-background: #ffff78
|
||||
highlight-foreground: #000000
|
||||
menubar-background: #2E3440
|
||||
menubar-foreground: #d8dee9
|
||||
message-background: #2E3440
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #0000aa
|
||||
external-link-foreground: #0000ee
|
||||
foreground: #333333
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: #ecf2ff
|
||||
message-border: #cfd6e6
|
||||
message-foreground: #547599
|
||||
|
@ -131,6 +131,8 @@ external-link-background-hover: inherit
|
||||
external-link-background-visited: inherit
|
||||
external-link-background: inherit
|
||||
external-link-foreground-hover: inherit
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-border: #cfd6e6
|
||||
modal-border: #999999
|
||||
select-tag-background:
|
||||
|
@ -35,6 +35,8 @@ external-link-foreground: #268bd2
|
||||
external-link-foreground-hover:
|
||||
external-link-foreground-visited: #268bd2
|
||||
foreground: #839496
|
||||
highlight-background: #ffff78
|
||||
highlight-foreground: #000000
|
||||
message-background: #002b36
|
||||
message-border: #586e75
|
||||
message-foreground: #839496
|
||||
|
@ -35,6 +35,8 @@ external-link-foreground: #268bd2
|
||||
external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #268bd2
|
||||
foreground: #657b83
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: #fdf6e3
|
||||
message-border: #93a1a1
|
||||
message-foreground: #657b83
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover:
|
||||
external-link-foreground-visited:
|
||||
external-link-foreground:
|
||||
foreground: rgba(0, 0, 0, 0.87)
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: <<colour background>>
|
||||
message-border: <<colour very-muted-foreground>>
|
||||
message-foreground: rgba(0, 0, 0, 0.54)
|
||||
|
@ -34,6 +34,8 @@ external-link-foreground-hover:
|
||||
external-link-foreground-visited: #7c318c
|
||||
external-link-foreground: #9e3eb3
|
||||
foreground: rgba(255, 255, 255, 0.7)
|
||||
highlight-background: #ffff78
|
||||
highlight-foreground: #000000
|
||||
message-background: <<colour background>>
|
||||
message-border: <<colour very-muted-foreground>>
|
||||
message-foreground: rgba(255, 255, 255, 0.54)
|
||||
|
@ -43,6 +43,8 @@ external-link-foreground: rgb(179, 179, 255)
|
||||
external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: rgb(153, 153, 255)
|
||||
foreground: rgb(179, 179, 179)
|
||||
highlight-background: #ffff78
|
||||
highlight-foreground: #000000
|
||||
message-background: <<colour tag-foreground>>
|
||||
message-border: #96ccff
|
||||
message-foreground: <<colour tag-background>>
|
||||
|
@ -42,6 +42,8 @@ external-link-foreground-hover: inherit
|
||||
external-link-foreground-visited: #0000aa
|
||||
external-link-foreground: #0000ee
|
||||
foreground: #333333
|
||||
highlight-background: #ffff00
|
||||
highlight-foreground: #000000
|
||||
message-background: #ecf2ff
|
||||
message-border: #cfd6e6
|
||||
message-foreground: #547599
|
||||
|
@ -117,7 +117,7 @@ C'est un exemple de tiddler. Voir [[Macros Table des matières (Exemples)|Table-
|
||||
<table class="doc-bad-example">
|
||||
<tbody>
|
||||
<tr class="evenRow">
|
||||
<td><span class="tc-inline-style" style="font-size:1.5em;">⚠</span> Attention :<br> Ne faites pas comme ça !</td>
|
||||
<td><span style="font-size:1.5em;">⚠</span> Attention :<br> Ne faites pas comme ça !</td>
|
||||
<td>
|
||||
|
||||
$eg$
|
||||
|
@ -63,6 +63,22 @@ describe("WikiText tests", function() {
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki","@@color:red;\n<div>\n\nContent</div>\n@@")).toBe("<div style=\"color:red;\"><p>Content</p></div>");
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki","@@color:red;\n---\n@@")).toBe("<hr style=\"color:red;\">");
|
||||
});
|
||||
it("handles inline style wikitext notation", function() {
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
|
||||
"some @@highlighted@@ text")).toBe('<p>some <span class="tc-inline-style">highlighted</span> text</p>');
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
|
||||
"some @@color:green;.tc-inline-style 1 style and 1 class@@ text")).toBe('<p>some <span class=" tc-inline-style " style="color:green;">1 style and 1 class</span> text</p>');
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
|
||||
"some @@background-color:red;red@@ text")).toBe('<p>some <span style="background-color:red;">red</span> text</p>');
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
|
||||
"some @@.myClass class@@ text")).toBe('<p>some <span class=" myClass ">class</span> text</p>');
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
|
||||
"some @@.myClass.secondClass 2 classes@@ text")).toBe('<p>some <span class=" myClass secondClass ">2 classes</span> text</p>');
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
|
||||
"some @@background:red;.myClass style and class@@ text")).toBe('<p>some <span class=" myClass " style="background:red;">style and class</span> text</p>');
|
||||
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
|
||||
"some @@background:red;color:white;.myClass 2 style and 1 class@@ text")).toBe('<p>some <span class=" myClass " style="background:red;color:white;">2 style and 1 class</span> text</p>');
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
|
@ -117,7 +117,7 @@ This is an example tiddler. See [[Table-of-Contents Macros (Examples)]].
|
||||
<table class="doc-bad-example">
|
||||
<tbody>
|
||||
<tr class="evenRow">
|
||||
<td><span class="tc-inline-style" style="font-size:1.5em;">⚠</span> Warning:<br> Don't do it this way!</td>
|
||||
<td><span style="font-size:1.5em;">⚠</span> Warning:<br> Don't do it this way!</td>
|
||||
<td>
|
||||
|
||||
$eg$
|
||||
|
@ -290,6 +290,11 @@ kbd {
|
||||
color: <<colour selection-foreground>>;
|
||||
}
|
||||
|
||||
.tc-inline-style {
|
||||
background: <<colour highlight-background>>;
|
||||
color: <<colour highlight-foreground>>;
|
||||
}
|
||||
|
||||
form.tc-form-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user