I’m currently working on a button. When clicked, it reveals a series of buttons, each corresponding to a field. For a cleaner display, I’ve set a maximum height of 150px. I want a helper interface to appear next to these buttons when clicked for editing purposes. However, I’m having trouble getting the Reveal popup interface to display correctly.
Thanks in advance.
title: editedFiled-buttons-enhance
\whitespace trim
<$button popup=<<qualify "$:/state/popup/editedFiled">>
tooltip={{$:/language/Buttons/More/Hint}}
aria-label={{$:/language/Buttons/More/Caption}}
class=<<tv-config-toolbar-class>>
selectedClass="tc-selected"
>
<%if [<tv-config-toolbar-icons>match[yes]] %>
{{$:/core/images/right-arrow}}
<%endif%>
<%if [<tv-config-toolbar-text>match[yes]] %>
<span class="tc-btn-text">
<$text text="editedFiled-buttons-enhance"/>
</span>
<%endif%>
</$button>
<$reveal state=<<qualify "$:/state/popup/editedFiled">> type="popup" position="belowleft" animate="yes" class="tc-popup-keep">
{{||editedFiled-buttons-enhance-content}}
</$reveal>
title: editedFiled-buttons-enhance-content
\whitespace trim
<div class="tc-drop-down more-buttons-enhance-drop-down">
<$let tv-config-toolbar-icons="yes" tv-config-toolbar-text="yes" tv-config-toolbar-class="tc-btn-invisible">
<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] " >
<$transclude $tiddler="more-buttons-enhance-core" $mode="inline"/>
<$transclude $tiddler="more-buttons-enhance-plugins" $mode="inline"/>
<div style="max-height: 70px;overflow:auto;position:relative;">
<$list filter="[is[current]fields[]] -[{quick-edit-fields-filters}enlist-input[]]" variable="displayFiled">
<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<displayFiled>encodeuricomponent[]addprefix[tc-btn-]]" >
<div style="margin: 0 10px; padding: 0; " >
<$transclude $tiddler="editedFiled-buttons-fileds" $mode="inline"/>
</div>
</$set>
</$list>
</div>
</$set>
</$let>
</div>
title: editedFiled-buttons-fileds
<$let
statePrefix="$:/state/popup/editedFiled-fileds"
stateTitle={{{ [<statePrefix>addsuffix[/]addsuffix<currenttiddler>addsuffix[/]addsuffix<displayFiled>] }}}
>
<$qualify title=<<stateTitle>> name="stateID">
<span style="position:relative;">
<$button
popup=<<stateID>>
tooltip={{$:/language/Buttons/More/Hint}}
aria-label={{$:/language/Buttons/More/Caption}}
class=<<tv-config-toolbar-class>>
selectedClass="tc-selected">
<$action-setfield $tiddler="123" text=<<displayFiled>> />
<span style="display: block;max-width: 150px; overflow: hidden; overflow-wrap: break-word; overflow-x:hidden;white-space: nowrap;text-overflow: ellipsis;">
<<displayFiled>>: <$text text={{{ [get<displayFiled>else[空值]] }}} /><$view tiddler=<<currentTiddler>> field=title/>
</span>
</$button>
<$reveal
state=<<stateID>>
type="popup"
position="aboveright"
animate="yes"
class="tc-popup-keep"
>
<div class="tc-drop-down more-buttons-enhance-drop-down" >
<<displayFiled>>
</div>
</$reveal>
</span>
</$qualify>
</$let>
