mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix regressions cause by PR #6511 (#6567) 

* Fix field edit bug

This fixes the field edit bug mentioned in
https://talk.tiddlywiki.org/t/possible-field-editing-bug-in-5-2-2/2884 .

* Revert "Fix visual regression in #6511"

This reverts commit c920960942.

* Add new class `tc-edit-fieldeditor`

This class must be added to input and select elements that are used as
field editors. This class reduces the line height of the input element
if it is displayed within the `tc-edit-fields` part of the edit
template.

This allows the same input and select elements to be used for editing
and adding fields.

* Add the new class `tc-edit-field` to the docs

The example in `Customizing EditTemplate Field Rendering` now uses the
new CSS classes.
This commit is contained in:
FlashSystems 2022-04-01 12:42:16 +02:00 committed by GitHub
parent bc242cf83a
commit 73a9625b81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/ui/EditTemplate.tid
View File

@ -5,7 +5,7 @@ title: $:/core/ui/EditTemplate
\define save-tiddler-actions()
\whitespace trim
<$action-sendmessage $message="tm-add-tag" $param={{{ [<newTagNameTiddler>get[text]] }}}/>
<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldNameTiddler>get[text]] :map[<newFieldValueTiddler>get<currentTiddler>] }}}/>
<<delete-edittemplate-state-tiddlers>>
<$action-sendmessage $message="tm-save-tiddler"/>
\end

2
core/ui/EditTemplate/fieldEditor-default.tid
View File

@ -1,3 +1,3 @@
title: $:/core/ui/EditTemplate/fieldEditor/default
<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> default="" class="tc-edit-texteditor tc-edit-fieldeditor" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>

6
editions/tw5.com/tiddlers/concepts/Customizing EditTemplate Field Rendering.tid
View File

@ -13,7 +13,7 @@ The variables `currentTiddler` and `currentField` are set to pass information ab
For example, a tiddler containing the following WikiText would render the field as an HTML input element of the type `date`. This will show a date picker for the fields on all modern browsers:
```
<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> type="date" class="tc-edit-texteditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> type="date" class="tc-edit-texteditor tc-edit-fieldeditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
```
The `tabindex` and `cancelPopups` attributes make sure the HTML input element behaves exactly the default elements provided by TiddlyWiki.
@ -21,11 +21,11 @@ The `tabindex` and `cancelPopups` attributes make sure the HTML input element be
Not only the `EditTextWidget` can be used. A tiddler containing the following WikiText will render the field as a drop-down-list that allows the user to select the name of a tiddler. The name of the selected tiddler will be stored in the field.
```
<$select tiddler=<<currentTiddler>> field=<<currentField>> class="tc-edit-texteditor" cancelPopups="yes">
<$select tiddler=<<currentTiddler>> field=<<currentField>> class="tc-edit-texteditor tc-edit-fieldeditor" cancelPopups="yes">
<$list filter='[all[tiddlers]sort[title]]'>
<option value=<<currentTiddler>>><$view field='title'/></option>
</$list>
</$select>
```
The class `tc-edit-texteditor` should be used to style the `input` and `select` elements to match the theme of the TiddlyWiki installation.
The classes `tc-edit-texteditor` and `tc-edit-fieldeditor` should be used to style the `input` and `select` elements to match the theme of the TiddlyWiki installation.

7
themes/tiddlywiki/vanilla/base.tid
View File

@ -1221,6 +1221,13 @@ button.tc-btn-invisible.tc-remove-tag-button {
background-color: <<colour tiddler-background>>;
}
.tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,
.tc-tiddler-frame .tc-edit-fields select.tc-edit-fieldeditor,
.tc-tiddler-frame .tc-edit-fields textarea.tc-edit-fieldeditor {
margin: 0;
padding: 2px 3px;
}
.tc-tiddler-frame .tc-binary-warning {
width: 100%;
height: 5em;