Revision [4025]
This is an old revision of InlineCommentFormatter made by DarTar on 2005-01-05 21:31:12.
Inline comment formatter
Last edited by DarTar:
Adding some alternate styles: polls open ;-)
Wed, 05 Jan 2005 21:31 UTC [diff]
Adding some alternate styles: polls open ;-)
Wed, 05 Jan 2005 21:31 UTC [diff]
See also: WantedFormatters
I've modified formatters/wakka.php so as to recognize a new formatter for inline comments.
When adding inline comments, we used to adopt a combination of indents and note markup, which produces hardly readable discussions and frequent inconsistencies.
Syntax
The new InlineCommentFormatter introduces a simple syntax, similar to that of unordered lists.To produce an inline comment use & preceded by one or more tabs (or ~).
To append a subcomment to an existing comment use the above syntax with an extra tab (or an extra ~) - much as you append a subitem to an existing list item.
~& Comment
~~& Subcomment
~~~& Subsubcomment
gives:
- Comment
- Subcomment
- Subsubcomment
Example
Note:
To correctly display the following example you need to revert to the default wikka skin (TestSkin). Otherwise, you will just see an ordinary list.
Here's how it looks like:
- This is the father of all comments -- DarTar
- Well, I don't agree with your point of view -- DarTar
- Could you please explain why? -- DarTar
- I'm not sure I feel like giving any explanation -- DarTar
- And I'm not sure I feel like listening to YOU -- DarTar
- Well, it looks like we've found an agreement -- DarTar
Installation
This formatter has been uploaded to this server as a beta feature. If you want to install it locally, follow these instructions:
1. Modify formatters/wakka.php
You first need to modify the wakka formatter in three different places.
A) original
// indented text
elseif (preg_match("/\n([\t,~]+)(-|([0-9,a-z,A-Z,ÄÖÜ,ßäöü]+)\))?(\n|$)/s", $thing, $matches))
elseif (preg_match("/\n([\t,~]+)(-|([0-9,a-z,A-Z,ÄÖÜ,ßäöü]+)\))?(\n|$)/s", $thing, $matches))
A) modified
// indented text
elseif (preg_match("/\n([\t~]+)(-|&|([0-9a-zA-ZÄÖÜßäöü]+)\))?(\n|$)/s", $thing, $matches))
elseif (preg_match("/\n([\t~]+)(-|&|([0-9a-zA-ZÄÖÜßäöü]+)\))?(\n|$)/s", $thing, $matches))
B) original
elseif ($newIndentType == "-") { $opener = "<ul><li>"; $closer = "</li></ul>"; $li = 1; }
else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }
else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }
B) modified
elseif ($newIndentType == "-") { $opener = "<ul><li>"; $closer = "</li></ul>"; $li = 1; }
elseif ($newIndentType == "&") { $opener = "<ul class=\"thread\"><li>"; $closer = "</li></ul>"; $li = 1; } #inline comments
else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }
elseif ($newIndentType == "&") { $opener = "<ul class=\"thread\"><li>"; $closer = "</li></ul>"; $li = 1; } #inline comments
else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }
C) original
"======|=====|====|===|==|".
"\n([\t,~]+)(-|[0-9,a-z,A-Z]+\))?|".
"\{\{.*?\}\}|".
"\n([\t,~]+)(-|[0-9,a-z,A-Z]+\))?|".
"\{\{.*?\}\}|".
C) modified
"======|=====|====|===|==|". # headings
"\n([\t~]+)(-|&|[0-9a-zA-Z]+\))?|". # indents and lists
"\{\{.*?\}\}|". # actions
"\n([\t~]+)(-|&|[0-9a-zA-Z]+\))?|". # indents and lists
"\{\{.*?\}\}|". # actions
2 Add a new class to your stylesheet (default: css/wikka.css)
ul.thread {
list-style-type: none;
border-left: 2px #666 solid;
padding-left: 10px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
list-style-type: none;
border-left: 2px #666 solid;
padding-left: 10px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
Suggestions for improving the inline comments style are welcome :)
Alternate styles
Here's a couple of ideas...1. thin borders
ul.thread {
list-style-type: none;
border-left: 1px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
list-style-type: none;
border-left: 1px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
gives
- Comment
- Subcomment
- Subsubcomment
- Subcomment
2. graded thick borders
/* darker border for main comments */
ul.thread {
list-style-type: none;
border-left: 10px #BBB solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
/* lighter border for subcomments, subsubcomments etc. */
li ul.thread {
border-left: 10px #DDD solid;
}
ul.thread {
list-style-type: none;
border-left: 10px #BBB solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
/* lighter border for subcomments, subsubcomments etc. */
li ul.thread {
border-left: 10px #DDD solid;
}
gives
- Comment
- Subcomment
- Subsubcomment
- Subcomment
3. layered sheets
ul.thread {
list-style-type: none;
border-left: 2px #666 solid;
border-top: 2px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
list-style-type: none;
border-left: 2px #666 solid;
border-top: 2px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
gives
- Comment
- Subcomment
- Subsubcomment
- Subcomment
4. boxes
ul.thread {
list-style-type: none;
border: 2px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
list-style-type: none;
border: 2px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}
ul.thread li {
color: #333;
font-size: 11px;
}
gives
- Comment
- Subcomment
- Subsubcomment
- Subcomment
CategoryDevelopment CategoryLayout