I'm having a flickering issue with a text control.
Here's the context:
I have a title which is represented by a Text control (no Label cause it needs to be able to be displayed in several lines). When the user rolls over the title, the text has to be underlined.
What I have done:
I've set listeners to the title's rollover and rollout events to something like this:
private function titleHandler(e : MouseEvent) : void {
switch(e.type) {
case MouseEvent.ROLL_OVER:
_title.styleName = 'accessoriesTitleHover';
break;
case MouseEvent.ROLL_OUT:
_title.styleName = 'accessoriesTitle';
break;
}
}
Issue:
The title is flickering every time the stylename is changed (I would even say that the title disappears and reappears)
Alternative solutions I've tried:
changing the underline property using setStyle (doesn't work)
defining .accessoriesTitle and .accessoriesTitle:hover styles in the CSS, but the hover doesn't work =(
Would anyone know a solution or workaround this flickering thing?
Thanks for your time and help!! :)
Regards,
BS_C3
Sorry for the delay, here's the declaration of both styles:
.accessoriesTitle{
font-size: 13pt;
text-decoration: none;
leading: 1pt;
}
.accessoriesTitleHover{
font-size: 13pt;
text-decoration: underline;
leading: 1pt;
}
Regards
try this one
private function titleHandler(e : MouseEvent) : void {
switch(e.type) {
case MouseEvent.ROLL_OVER:
_title.setStyle('styleName', 'accessoriesTitleHover');
break;
case MouseEvent.ROLL_OUT:
_title.setStyle('styleName', 'accessoriesTitle');
break;
}
}
If this is not work reply immidiately.
Thanks
I found a "hack" to fix this problem.
Without the hack, it would seem that the text was emptied before being rendered again with the underlined style. The same goes when the text goes from an underlined style to a no text decoration style.
The text was either changing its size (from current size to 0 and then to new size) or emptying the content before rendering it again.
So I set the text height and here's what I get:
private function titleHandler(e : MouseEvent) : void {
switch(e.type) {
case MouseEvent.ROLL_OVER:
_title.height = _title.height;
_title.styleName = 'accessoriesTitleHover';
break;
case MouseEvent.ROLL_OUT:
_title.styleName = 'accessoriesTitle';
break;
}
}
And everything's working fine :)
Thanks for ur time.
Regards,
BS_C3
Related
I have NSOutlineViews with floating group rows as a heading. My headers are semi-transparent so scrolled content can just be seen underneath:
In Big Sur, the headers look like this:
They have an underline below them, and all transparency is removed - so it looks as though a background is being added somewhere.
I am subclassing NSTableRowView and NSOutlineView to stop any drawing:
override func draw(_ dirtyRect: NSRect) {}
I am disabling 'Group Style' on the NSTableRowView too:
override var isGroupRowStyle: Bool { get { false } set {} }
Can anyone tell me where the line and background may be coming from? Thank you.
EDIT
Further investigation shows the background and line rendering is part of the NSScrollView floating content view (_NSScrollViewFloatingSubviewsContainerView). There don't seem to be any options associated with this.
The following extreme hack works currently for me to change the background of the floating header in a NSTableView, and to remove the underline:
extension YourViewController: NSTableViewDelegate {
func tableView(_ tableView: NSTableView, didAdd rowView: NSTableRowView, forRow row: Int) {
if row == 0, rowView.isGroupRowStyle {
DispatchQueue.main.async {
if let scroll = tableView.enclosingScrollView {
for sub in scroll.subviews {
if sub.className.contains("Float"),
let effect = sub.subviews.first?.subviews.first?.subviews.first as? NSVisualEffectView,
let line = sub.subviews.first?.subviews.first?.subviews.last {
effect.material = .menu
line.isHidden = true
}
}
}
}
}
}
}
When row 0 is added, the sub views of the .enclosingScrollView of the tableview are being iterated (after giving the tableview some time to render the floating header by calling the rest of the code async) until we encounter the views we want to change.
Of course, this kind of code is an example of 'bad practice', and will stop working as soon as Apple changes the implementation of the sticky header, but I don't expect anything to crash due to all specific conditions.
In the meanwhile it's probably the best idea to file a Feedback with a request to make the floating header of NSTableView and NSOutlineView adjustable.
Consider the following example. It creates two instances of QComboBox: one with a stylesheet, and another without. If the first one is clicked (with widget style being Fusion), the menu is sized as expected, although padding of text is inconsistent between hovered and non-hovered items. But if you click on the second one, the padding problem is now fixed, but the menu appears to have huge entries, making the menu fill the whole screen height.
#include <QComboBox>
#include <QApplication>
int main(int argc, char** argv)
{
QApplication app(argc, argv);
QComboBox box1, box2;
const QString stylesheetOrig=R"(
QComboBox::item:selected
{
background-color: #0000ff;
}
)";
box1.setStyleSheet(stylesheetOrig);
box2.setStyleSheet(stylesheetOrig+R"(
QComboBox::item
{
padding-left: 27px;
}
)");
box1.addItems({"Hello 1","Goodbye 1"});
box2.addItems({"Hello 2","Goodbye 2"});
box1.show();
box2.show();
return app.exec();
}
If I remove the padding statement, still leaving the QComboBox::item {} part, then nothing strange (and nothing useful) happens. But if I even set the padding to 1px or 0px, the stretching already happens with all its might.
Why does setting horizontal padding result in such a strange change vertically?
Wow OK, that is screwy indeed. Adding any css to a combo box makes it go into some other "retro" mode with showing icons next to the current item. I've never noticed that in many years, but I see a bunch of common threads on the issue. Seems to only affect Fusion style though, I was confused for a while on my Windows box until I figured that out.
The question is if you want the checkbox or not. Here's one way to get rid of it, the only consistent one I found after a bit of playing with it. The main trick is setting the selection colors on the ::item and not on ::item:selected (the latter makes the checkmarks appear).
QComboBox::item {
selection-background-color: #0000ff;
selection-color: palette(highlighted-text);
}
PS. Another reason for confusion and why QComboBox::item and :checked even work is that the QComboBox default item delegate (used to draw the items in the QListView which the combo box uses for the options list) "pretends" it's a QMenu: QComboMenuDelegate::paint()
So another workaround would be to use something more sane/customizable for a delegate, perhaps even a default QStyledItemDelegate.
ADDED: A version keeping the checkbox and ensuring the unchecked items have padding (w/out using padding property which appears to be FUBAR when used in a combo box item with Fusion style). The icon size seems easiest set via iconSize property -- I tried a few ways via css icon/image/element width/height but nothing affected it... probably because the iconSize property overrides it.
QComboBox { qproperty-iconSize: 12px; } /* or QComboBox::setIconSize() */
QComboBox::indicator { color: transparent; } /* to force space for the icon column */
/* Using ::item:selected vs. ::item { selection-*-color: } will apparently make the
checkbox column appear... at least with Fusion as the main style */
QComboBox::item:selected {
color: palette(highlighted-text);
background-color: #0000ff;
}
VERSION 3 (as per comments):
QComboBox { qproperty-iconSize: 12px; } /* or QComboBox::setIconSize() */
QComboBox::indicator:!checked { border: 0; } /* to force space for the icon column */
QComboBox::item { background-color: palette(base); } /* gets rid of icon|text separator */
/* Using ::item:selected vs. ::item { selection-*-color: } will apparently make the
checkbox column appear... at least with Fusion as the main style */
QComboBox::item:selected {
color: palette(highlighted-text);
background-color: #0000ff;
}
There's still a 1px frame line at the top of the unselected icon area, though it's pretty subtle. I have no idea where that comes from... tried some guesses but to no avail.
I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!
Can anyone please help me with wrapping the text in a legend of a javafx chart. I have pie charts and bar charts. All the legends are placed at bottom. I tried the following but couldn't get it working.
for (Node node : pie.lookupAll(".chart-legend")) {
if (node instanceof Text) {
System.out.println("Text instance");
((Text) node).setWrappingWidth(380);
((Text) node).setManaged(true);
}
if (node instanceof Label) {
System.out.println("Label instance");
((Label) node).setWrapText(true);
((Label) node).setManaged(true);
((Label) node).setPrefWidth(380);
}
}
EDIT:
See the highlighted part. Still some text is not visible.
I finally got it. Trying to wrap text in css didn't work as label width cannot be controlled there. So the following code can be used to wrap the text programmatically.
for (Node node : pie.lookupAll(".chart-legend-item")) {
if (node instanceof Label) {
System.out.println("Label instance");
((Label) node).setWrapText(true);
((Label) node).setManaged(true);
((Label) node).setPrefWidth(380);
}
}
Did you have a look at the CSS documentation?
This link is refering to the chart legend section:
JavaFX CSS Reference
As mentioned, it's of the type Label, so we can have a look here as well.
-fx-wrap-text possibly does the trick. Of course you would need to write and attach your own CSS file to your program...
For a more detailed example, please refer to your JDKs jfxrt.jar, unzip it and look for the modena.css, which is the default CSS file.
Regards.
Daniel
Edit: I got the following snipped to actually have an impact on or application after all:
.chart-legend {
-fx-background-color: transparent;
-fx-padding: 20px;
}
.chart-legend-item-symbol {
-fx-background-radius: 0;
}
.chart-legend-item {
-fx-text-fill: #191970;
}
But it is important, where you place it in your CSS. In my first attempt, I placed it above the CSS rule, which set the default label text color.
When I noticed this, I put it at the end of my CSS file: et vóila - it worked.
So please have a second look, that your placed accordingly in your own CSS.
I am working with java fxml application and i have one hyperlink, I want to change its color when mouse is over it and again revert back when mouse is exited from it. Can any body post some code to achieve it. I tried some css code but not working,
On mouse entered:-
#FXML
private void changeCloseColorToWhite() {
hypLnkClose.setStyle("-fx-color: white;");
}
On mouse exited:-
#FXML
private void changeCloseColorToBrown() {
hypLnkClose.setStyle("-fx-color: #606060;");
}
Thanks in advance.
Setting style in java code is heavy on the application. I would suggest defining this in the CSS file. try something like this below to fulfill what you need:
.hyperlink:hover {
-fx-underline: true;
}
You can also do like this
your_file.fxml(This is you .fxml file)
<Hyperlink text="you text to being hyperlink" styleClass="myLink">
your_style.css(This is your styleSheet file)
.myLink{
-fx-text-fill: white;
}
.myLink:hover{
-fx-text-fill: #606060;
}
This will also work fine. So try it