1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00

Improvements for Import UI (#4937)

* Fixed bug with old titles used in popup, improved UI for greater rename input size

* Added flexbox utility CSS and use it for import UI
This commit is contained in:
saqimtiaz 2020-10-29 14:01:17 +01:00 committed by GitHub
parent cae32d39a5
commit 655501140b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 14 deletions

View File

@ -14,6 +14,7 @@ Listing/Preview/Fields: Fields
Listing/Preview/Diff: Diff
Listing/Preview/DiffFields: Diff (Fields)
Listing/Rename/Tooltip: Rename tiddler before importing
Listing/Rename/Prompt: Rename to:
Listing/Rename/ConfirmRename : Rename tiddler
Listing/Rename/CancelRename : Cancel
Upgrader/Plugins/Suppressed/Incompatible: Blocked incompatible or obsolete plugin

View File

@ -21,7 +21,7 @@ $(currentTiddler)$!!popup-$(payloadTiddler)$
\end
\define renameFieldState()
$:/state/import-rename-$(payloadTiddler)$
$(currentTiddler)$!!state-rename-$(payloadTiddler)$
\end
\define select-all-actions()
@ -51,27 +51,34 @@ $:/state/import-rename-$(payloadTiddler)$
<$checkbox field=<<selectionField>> checked="checked" unchecked="unchecked" default="checked"/>
</td>
<td>
<$reveal type="nomatch" stateTitle=<<renameFieldState>> text="yes" tag="div">
<$reveal type="nomatch" state=<<previewPopupState>> text="yes" tag="div">
<$button class="tc-btn-invisible tc-btn-dropdown" set=<<previewPopupState>> setTo="yes">
{{$:/core/images/right-arrow}}<span class="tc-small-gap-left"><$text text={{{[<currentTiddler>get<renameField>minlength[1]else<payloadTiddler>]}}}/></span>
<$reveal type="nomatch" state=<<renameFieldState>> text="yes" tag="div">
<$reveal type="nomatch" state=<<previewPopupState>> text="yes" tag="div" class="tc-flex">
<$button class="tc-btn-invisible tc-btn-dropdown tc-flex-grow-1" set=<<previewPopupState>> setTo="yes">
<span class="tc-small-gap-right">{{$:/core/images/right-arrow}}</span><$text text={{{[<currentTiddler>get<renameField>minlength[1]else<payloadTiddler>]}}}/>
</$button>
<$button class="tc-btn-invisible" setTitle=<<renameFieldState>> setTo="yes" tooltip={{{[<lingo-base>addsuffix[Listing/Rename/Tooltip]get[text]]}}}>{{$:/core/images/edit-button}}</$button>
<$button class="tc-btn-invisible tc-small-gap-left" set=<<renameFieldState>> setTo="yes" tooltip={{{[<lingo-base>addsuffix[Listing/Rename/Tooltip]get[text]]}}}>{{$:/core/images/edit-button}}</$button>
</$reveal>
<$reveal type="match" state=<<previewPopupState>> text="yes" tag="div">
<$button class="tc-btn-invisible tc-btn-dropdown" set=<<previewPopupState>> setTo="no">
{{$:/core/images/down-arrow}}<span class="tc-small-gap-left"><$text text=<<payloadTiddler>>/></span>
<span class="tc-small-gap-right">{{$:/core/images/down-arrow}}</span><$text text={{{[<currentTiddler>get<renameField>minlength[1]else<payloadTiddler>]}}}/>
</$button>
</$reveal>
</$reveal>
<$reveal type="match" stateTitle=<<renameFieldState>> text="yes" tag="div">
<$edit-text tiddler=<<newImportTitleTiddler>> default=<<payloadTiddler>> tag="input" class="tc-import-rename"/><$button class="tc-btn-invisible" setTitle=<<renameFieldState>> setTo="no" tooltip={{{[<lingo-base>addsuffix[Listing/Rename/CancelRename]get[text]]}}}>{{$:/core/images/close-button}}<$action-deletetiddler $tiddler=<<newImportTitleTiddler>>/></$button>&nbsp;<$button class="tc-btn-invisible" setTitle=<<renameFieldState>> setTo="no" tooltip={{{[<lingo-base>addsuffix[Listing/Rename/ConfirmRename]get[text]]}}}>{{$:/core/images/done-button}}<$action-setfield $field=<<renameField>> $value={{{[<newImportTitleTiddler>get[text]minlength[1]else<payloadTiddler>]}}} /><$action-deletetiddler $tiddler=<<newImportTitleTiddler>>/></$button>
<$reveal type="match" state=<<renameFieldState>> text="yes" tag="div">
<$text text={{{[<lingo-base>addsuffix[Listing/Rename/Prompt]get[text]]}}}/>
</$reveal>
</td>
<td>
<$view field=<<messageField>>/>
</td>
</tr>
<$reveal type="match" state=<<renameFieldState>> text="yes" tag="tr">
<td colspan="3">
<div class="tc-flex">
<$edit-text tiddler=<<newImportTitleTiddler>> default={{{[<currentTiddler>get<renameField>minlength[1]else<payloadTiddler>]}}} tag="input" class="tc-import-rename tc-flex-grow-1"/><span class="tc-small-gap-left"><$button class="tc-btn-invisible" set=<<renameFieldState>> setTo="no" tooltip={{{[<lingo-base>addsuffix[Listing/Rename/CancelRename]get[text]]}}}>{{$:/core/images/close-button}}<$action-deletetiddler $tiddler=<<newImportTitleTiddler>>/></$button><span class="tc-small-gap-right"/></span><$button class="tc-btn-invisible" set=<<renameFieldState>> setTo="no" tooltip={{{[<lingo-base>addsuffix[Listing/Rename/ConfirmRename]get[text]]}}}>{{$:/core/images/done-button}}<$action-setfield $field=<<renameField>> $value={{{[<newImportTitleTiddler>get[text]minlength[1]else<payloadTiddler>]}}} /><$action-deletetiddler $tiddler=<<newImportTitleTiddler>>/></$button>
</div>
</td>
</$reveal>
<tr>
<td colspan="3">
<$reveal type="match" text="yes" state=<<previewPopupState>> tag="div">
@ -84,3 +91,4 @@ $:/state/import-rename-$(payloadTiddler)$
</$list>
</tbody>
</table>

View File

@ -2032,11 +2032,6 @@ html body.tc-body.tc-single-tiddler-window {
width: 100%;
}
input.tc-import-rename {
width: 85%;
margin-right: 0.5em;
}
/*
** Alerts
*/
@ -2775,6 +2770,31 @@ select {
fill: <<colour background>>;
}
/*
** Flexbox utility classes
*/
.tc-flex {
display: -webkit-flex;
display: flex;
}
.tc-flex-column {
flex-direction: column;
}
.tc-flex-row {
flex-direction: row;
}
.tc-flex-grow-1 {
flex-grow: 1;
}
.tc-flex-grow-2 {
flex-grow: 2;
}
/*
** Other utility classes
*/