I want to build a component, based on InputGroup, with a button that should open a selection. Something more o less like this (please, ignore black border):
When InputGroup p:button A (label '=') is clicked, it opens a p:selectOneButton B, so I can change A value based on B selection.
I have a basic functional script, it can be enhanced, but the simple behavior is accomplished, please fill free to make any improvements/suggestions:
function changeSelectedFilter(evtTarget, tgtButton) {
const op = evtTarget.getJQ().find(':checked').val();
const A = PrimeFaces.getWidgetById(tgtButton);
A.value = op;
A.getJQ().children().text(op);
}
My major issue is with components usage and placement. I'm working with a p:tooltip for now, but it's not what I want, do you have any clues in how to hide/show B correctly placed above A and centered, so it looks like it is been expanded?
With accessibility concerns, this could not be a good approach, and p:menuButton/p:splitButton would be much better, but I want a simple button with just an icon (not default chevron down) and no text...
Here a comparison with p:splitButton and p:menuButton, with desired max-width:
Context: this is a numeric filter component added to columns in p:dataTable, this component current implementation uses a separated p:input and p:selectOneButton, but in 2 lines, so an overlay could optimize space.
Any suggestion with others components will be welcomed too!
Thanks!
Related
I'm using the Inovua React Data Grid for a project, and we are trying to make some subtle changes to increase the amount of data we can see on a smaller grid. We only have limited space, so we're trying to remove unnecessary clutter. I have been struggling to find any answers to my questions on the API reference documentation, which in my opinion is quite lacking.
Trying to decrease the padding- I believe there is a default padding of 8px within the grid, but seemingly nowhere to change it. I want to trim it down a bit, so it appears more like an Excel sheet.
I want to remove the header ellipsis!! There literally is a page in their reference docs for this (columns.headerEllipsis), but it just doesn't work when I try it. Perhaps they're demo/example is just awful, but I try adding headerEllipsis: false as a column property and my terminal tells me it 'isn't a known property'.
This seems like bad design on their part, but when a column/data gets trimmed (with or without ellipsis) because the text is too long, hovering over it does not display the entire text. Is there no way to change this?
I have considered writing a custom header render function to specifically change the ellipsis style settings to solve (2) as well as to render the headers as a tooltip to solve (3), but this seems excessive. Is there a better way to do this?
Thanks!
Still unable to solve the padding issue (1), but I was able to easily resolve (2) and (3) by building that custom header render function after all. It wasn't difficult, here is what I did:
const getHeader = (name: string) => {
return (cellProps: CellProps) => {
cellProps.headerEllipsis = false; // disables ellipsis
return <div>
<Tooltip title={name}> {/* material-ui Tooltip: */}
<span>{name}</span> {/* displays text on hover */}
</Tooltip>
</div>
}
};
And then I just added this line where I defined columns:
name: e,
header: getHeader(e), // add this line
By defining the custom header render function, it also overwrites a lot of the default styles (i.e. headerEllipsis). This actually made it much easier to adjust the spacing and shrink the columns in the grid, so even though I couldn't find the solution to (1), this custom render function is definitely the way to go!
I would like to create a mdl-data-table such that when I click on it.
My guess is just to add a row with colspan == number of columns when I choose to expand the row. I was wondering if there was a better version than that. Something that makes it look like that it is expanded with some existing styles rather than creating a new style.
In addition, if it can be "animated" as a slide down that pushes the other elements that would be a bonus.
Note the answer does not have to handle the clicking part, but just the "expanded" part
I have identical buttons on the same page and I want Sikuli to click only one of those but it ends up clicking the other name sake button. Unfortunately, the button names cannot be changed. Any suggestions on how I could handle this situation?
Thanks!
You can tell Sikuli to operate on a particular region on the screen relative to a given image/screenshot object. This is called TargetOffset. Refer here assuming you are asking about using sikuli programmatically. From Sikuli IDE, double click on the screenshot image and it brings up a window where you can set accuracy and targetOffset.
If the two icons are close together, and will always appear the same way, and the space between them will always appear the same, then a
click(imageOfTwoIcons).targetOffset(x,y)
is probably the simplest way to go. But, if there is anything that would make this method unreliable (anything between the two icons ever appears differently than when you are making your screen capture of them)--
You could also use the python sorted() function to sort the images by their position. For example, if one image is always above the other, then you could find both images and sort them by their y coordinate, like so:
#a little prep for the sorted function to get the y coord of the icon
def byY(icon):
return icon.y
#findAll() on your two identical icons and make them into a list
bothIcons = list([x for x in findAll(icon)])
#then sort them
sortedIcons = sorted(bothIcons, key=byY)
iconOnTop = sortedIcons[0]
iconOnBottom = sortedIcons[1]
#then click on the one you want
click(iconOnTop) #or save a line and say: click(sortedIcons[0])
The same can be done if you know that the icon of interest is always left or right of its twin:
def byX(yourTwoImages):
return image.x
bothIcons = list([x for x in findAll(icon)])
sortedIcons = sorted(bothIcons, key=byX)
click(sortedIcons[0]) #for the image on the left
I like this better than working with regions if the two icons are very close together on the screen, or if it's possible for the icons' placement to ever change.
you can enlarge the buttons image, so that the image will include more than just the image, but also the background around it (if you can be sure that the background is not changing) but remember that sikuli clicks on the center of the image, so make sure that the button is in the center.
another option is to click using offset (http://doc.sikuli.org/tutorials/checkone/checkone.html)
use something like this:
this.offset = 15;
org.sikuli.script.Region reg = screen.find("image").left(this.offset);
screen.click(reg);
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
Using code (not the Interface builder) I need to create an NSButton that looks like an image. Specifically I want to use NSImageNameStopProgressFreestandingTemplate and I need it not to look like button but to look like the image. This means:
1. No 'button down' look
2. No border, no any visibility of the button
Thanks.
I know this response is a bit late, but you could try this, given thisButton:
[thisButton setImage:[NSImage imageNamed:NSImageNameStopProgressFreestandingTemplate]];
[thisButton setImagePosition:NSImageOnly];
[thisButton setBordered:NO];
That last line is the key bit: removing the button border effectively strips it of its bezel, leaving only the image to click on. (BTW, I haven't tried the above code specifically, so you may need to throw in a couple of other tweaks, such as setting the imageScaling or buttonType, to get it to work best.)
One final note: If you're using a template image (as you said you would), Cocoa will automatically display it with a slight dark-grey gradient; when the button is clicked, it will momentarily darken to solid black. This is an automatic "'button down' look" you didn't want; however, it is very subtle, and is a good indicator that the button worked. If you don't want this to happen, you could get an instance of the desired image and [stopImage setTemplate:NO]; on it.
Disable isBordered
let button = NSButton(
image: NSImage(named: NSImage.Name("plus"))!,
target: self,
action: #selector(onButtonPress)
)
button.isBordered = false
If you don't want to use a templated but want the push down highlight anyways, you can also use the following setup for an NSButton:
let imageButton = NSButton()
imageButton.image = NSImage(named: "MyImage")!
imageButton.bezelStyle = .shadowlessSquare
imageButton.isBordered = false
imageButton.imagePosition = .imageOnly
The important thing to make the highlight work on any image is to set bezelStyle to shadowlessSquare.
I know this behavior wasn't requested in the question, but it might be useful for others.