Basically I want to make the text strikethrough when hovered. This doesn't work easily with
el [ mouseOver [Font.strike] ] (text "some text")
as it would with
el [ mouseOver [Background.color someColor] ] (text "some other text")
because Font.strike is a Attribute msg whereas Background.color is of type Attr decorative msg
Does anyone konw how to achieve described behavior with something like Font.strike?
I would also accept non elm-ui solutions if not possible otherwise.
Like you already pointed out, mouseOver requires a Attr decorative msg. It uses CSS for the hover (hence the limitations), which takes care of applying the style on mouse over and clears it on mouse out.
For the general case, we have to detect mouse over/out ourselves, using Element.Events. We also need to keep track of this state in our Model. Then we can apply the Font.strike attribute conditionally depending on the model.
We can listen for these events on an Element.el
Events.onMouseEnter Enter
:: Events.onMouseLeave Leave
:: style
, where style is either [ Font.strike ] or [], depending on the model.
Full code and working demo here: https://ellie-app.com/bNjP6CbGrLJa1
Related
I'm adding keyboard shortcuts to a Flutter web application.
I have a form within a custom FocusableActionDetector where the shortcut has form like this:
SingleActivator(LogicalKeyboardKey.digit2)
and action is like:
CustomActivateIntent: CallbackAction<CustomActivateIntent>(
onInvoke: (intent) { provider.value = "2"; },)
In the same form I have a couple of numeric TextFormFields. To permit writing the character "2" I have to put these text fields inside some new FocusableActionDetector, otherwise the previous detector catches the command and the text field loses the "2" character, and this is already quite weird... Moreover, after writing in any of the text fields the form focus detector doesn't work anymore.
I think this could be related to the focus system, which is yet not that clear to me.
Can anyone help find a clean solution?
I found a workaround: the FocusableActionDetector is now preceded by an if statement. The code looks like the following:
// I extract the form to a widget to make it clearer
var searchWidget = SearchWidget();
child: textEditingInProgress
? searchWidget
: FocusableActionDetector(
child: searchWidget,
...,
),
The textEditingInProgress bool is a field in a provider and is controlled by the FocusNodes belonging to the TextControllers.
Still this is not a perfect solution, in particular I'd like to understand why the previous approach was not working.
Hi all.
I want to know that how can I remove two button face with a button.
I tried this:
gui: [
en: button "English" remove [en es]
es: button "Spanih" remove [en es]
]
And than I have to append new buttons.
View engine models GUI interface as a tree of objects; each node in that tree is called a face, and each field of that face is called a facet.
Two facets, parent and pane, interlink a face with its parent node and its child nodes, respectively. So, by that theory, to remove a button is to remove a button face from a pane of its parent:
view [button "Poof!" [probe select take face/parent/pane 'text]]
This, however, is a bit limited approach. The removed face is detached from View tree and can no longer be used unless you reattach the face! object with the same specification back to the pane. It might be more useful to simply disable a button, or to render it invisible for the time being. enabled? and visible? facets can achieve just that:
view [
title "Face flags example"
below
toggle "Toggle" [foo/enabled?: not foo/enabled?]
foo: button "Switch" disabled [bar/visible?: not bar/visible?]
bar: base red
]
You can adapt this approach to the task at hand. As I understand, you want to offer mutually exclusive localization options; drop-list might be a good fit for that:
view [drop-list data ["en" "es"]]
You can try this:
Red [Needs: View]
view [
en: button "English" [remove find face/parent/pane en]
es: button "Spanish" [
remove find face/parent/pane en
remove find face/parent/pane es
]
]
I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/
I'm trying to create a DateInputFieldModel (subclass of ComposableModel).
It uses a TextInputFieldModel as inputField.
I set inputField autoAccept: true..
I don't want to use return/enter to accept.
While typing, I'm checking with acceptBlock whether the input text is interpretable as a date.
In my case, for instance one digit is already interpretable as a date.
When you type 5, this would mean the 5th of the current month of the current year.
When the input field loses focus (tab or mouse), I'd like to render the final representation of the date into the inputField, and update the date value of my DateInputFieldModel.
Any pointers on how to achieve this?
The underlying Morph gets send #keyboardFocusChange:
You probably need to add #whenFocusChanged: somewhere in the ComposableModel hierarchy and make sure it is called from the correct AbstractMorphicAdapter subclasses
In response to Stephan Eggermont's suggestion I altered
following method
MorphicTextInputFieldAdapter>>adapt: aModel
super adapt: aModel.
aModel
whenBuiltDo: [ :w |
w widget color: Smalltalk ui theme backgroundColor.
w widget widget textMorph
onAnnouncement: MorphGotFocus, MorphLostFocus
send: #announce: to: aModel ]
This works but the drilldown w widget widget textMorph is a bit awkward.
In my DateInputFieldModel I subscribed to the announcements
inputField on: MorphLostFocus send: #lostFocus to: self.
For a view, I need to define a size, a drop-down with data, set its size and get the chosen value for input in some function.
loadGui: func [] [
unview/all
view layout [
Dropd_urls: drop-down (getUrlsEnd Urls)
]
]
What is a logic behind a style or a facet? Define a word, than the facet then the size, alignment and other properties, then a block for on-action? And what about the (getUrlsEnd Urls) that gets evaluated, where should it be placed? If someone could provide a thorough example on the drop-down, it would be great.
And another question. I'm aware of the help system/..., but cannot get useful information about the logic of how to accomplish what was stated above. Where do you go to get to know how to build the view constructs? A howto? Normally, I read the howtos provided by Nick Antonnacio, but there's more to view than what is shown in his documents.
the demo on atronixengineering.com/r3/demo.r has also a dropdown list under widgets. You could generate your dropdown list with compose/deep.
view layout compose/deep [
Dropd_urls: drop-down [
(getUrlsEnd Urls)
]
]
or with different actions depending of the choice of the dropdown list
view layout [
Dropd_urls: drop-down [
"1"
"2"
] on-action [print face/facets/text]
]
did you read Cross Platform App Development with Rebol 3 Saphir ?