I'm exploring the markAvailable property of this example.
I would like to add a transition while the ports color change.
So I changed the css as follow:
/* port styling */
.available-magnet{
fill: yellow;
transition: fill 0.5s;
}
.port circle{
transition: fill 0.5s;
}
But I still do not get any transition.
UPDATE
I created an example. It is clear that the problem is inside defaultLink property. In particular, removing the z attribute I get the right transition, but in this way I lost a fundamental property for my need, that is indeed to have all links with the lower z index.
The Example reported in the Update is correct.
In order to maintain each link on the back of other elements (that corresponds to set a z value equals to -1), Simply use the method link.toBack() each time a new link is created. In this way the transitions work.
Use -webkit-transition if you are in Chrome if you are in Mozilla use -moz-transition
Related
I'm new to Jetpack Compose, so I'm struggling to implement a feature which is dynamic colors (and font, size,... but I think they are the same so I'll just focus on color) at run time from backend. I'll let the app the some default colors, and a whole default splash screen just to load the colors setting from the backend. In case the API request failed, it would use the last succeeded requested colors or just the default color.
Tutorials I found round the internet was just about changing the dark/light theme at run time, not changing a specific color in the color pack. In those tutorials, the color is defined in Colors.kt file which is not a composable or class or object, ...
I imagine the color within lightColors or darkColors would be something like this.
return lightColors(
primary = Color(android.graphics.Color.parseColor("#" + dynamicColorMap["One"])),
...
}
And when dynamicColorMap changes in the splashscreen, all screen later will have reference to the new value, but I don't know how to update its variable outside of a composable.
I thought of using DB to store the colors, but getting the data from DB is async, so it cannot be query in the default Colors.kt like var colorOne = DBManager.getColor("One"), I can run the async task in my splash screen before changing to the next screen but then the problem again is how to have a global state that my theme composable wrapper can have access to on every screen?
I just don't know where to start for these case.
Thank you for your time
EDIT:
I currently having the project structured in MVVM. For now, only one activity (MainActivity) is present, and inside that activity, the splash screen component or home screen or login screen,... are being navigated. So is it a good practice to create a viewmodel for the mainactivity screen, that can holds the color state for the theme?
Thanks #Maciej Ciemiega for the suggestion. I ended up structure my code like that.
In my MainActivity.kt I create a viewmodel for it.
val mainActivityViewModel by viewModels<MainActivityViewModel>()
MyTheme(mainActivityViewModel = mainActivityViewModel) {
initNavigationController(navController)
Surface(color = MaterialTheme.colors.background) {
if (mainActivityViewModel.appSettingsState.value.appSettings.colorsMapLight.size != 0
&& mainActivityViewModel.appSettingsState.value.appSettings.colorsMapDark.size != 0) {
navController.navigate(NavigationDestinations.homeScreen)
}
}
}
my initNavigationController function shows the splashscreen first. But it doesn't do anything. The getting app settings configuration is called in MyTheme composable via the mainActivityViewModel, and MyTheme will use the state from the viewmodel to define the theme, and the navController.navigate is based on the state as you guys can see in the if above.
I don't know if this is a good practice or not, or when my app grows it would be a mess or not, but at least it works for me. I tried with font styles too and it works like a charm.
I'm writing the complicated rich text editor, derived from QTextEdit class. It must be able to insert, resize, and apply various formatting to embedded tables.
I found function for setup column widths (setColumnWidthConstraints).
But there is no one to change _rows_ heights.
Is there any way to achieve this?
Example code:
void CustomTextEdit::insertTable (int rows_cnt, int columns_cnt)
{
QTextCursor cursor = textCursor ();
QTextTableFormat table_format;
table_format.setCellPadding (5);
// TODO: This call just changed the frame border height, not table itself.
//table_format.setHeight (50);
// Setup columns widths - all is working perfectly.
QVector <QTextLength> col_widths;
for (int i = 0; i < columns_cnt; ++i)
col_widths << QTextLength (QTextLength::PercentageLength, 100.0 / columns_cnt);
table_format.setColumnWidthConstraints (col_widths);
// ...But there is no similar function as setRowHeighConstraints for rows!
// Insert our table with specified format settings
cursor.insertTable (rows_cnt, columns_cnt, table_format);
}
it seems that you can use the setHTML(QString) or insertHTML(QString) functions to insert a stylesheet.
When using this function with a style sheet, the style sheet will only
apply to the current block in the document. In order to apply a style
sheet throughout a document, use QTextDocument::setDefaultStyleSheet()
instead.
ref: http://harmattan-dev.nokia.com/docs/platform-api-reference/xml/daily-docs/libqt4/qtextedit.html#insertHtml
appart from using shims....according to http://harmattan-dev.nokia.com/docs/platform-api-reference/xml/daily-docs/libqt4/richtext-html-subset.html you can set the font declaration.
Qt seems to have targeted the CSS2.1 specification, which is as followed.. http://www.w3.org/TR/CSS2/fonts.html#propdef-font
have you tried specifying the font within the table row.
pass the following string using insertHTML, where this string is delcared as a QString
<style>
table > tr {font-size: normal normal 400 12px/24px serif;}
</style>
If you just want to make rows taller than their text height would require, you could try inserting a 0xN transparent image in the first cell of the row (or 1xN if Qt won't let you do zero-width).
It might also be possible to set the table cell's top padding with QTextTableCellFormat::setTopPadding() or maybe set the top margin with QTextBlockFormat::setTopMargin(). But both padding and margins are added to the text layout height AFAIK, so neither of them is very good for setting an absolute height.
Have you looked at Calligra? Its libs/kotext and libs/textlayout libraries implement a custom QAbstractTextDocumentLayout with much richer table support than QTextEdit.
Insert a stylesheet using this->document()->setDefaultStyleSheet("css goes here");
See http://qt-project.org/doc/qt-5.0/qtwidgets/qtextedit.html#document-prop
and http://qt-project.org/doc/qt-5.0/qtgui/qtextdocument.html#defaultStyleSheet-prop
(links go to Qt5 docs, but these functions are available in Qt4 also.)
Do Raphael sets accept event handler? When I set an event handler on a raphael set, it seems that it is instead assigned on each of the Raphael shapes inside the set and not on the set itself as you can see here if you try to click the set:
http://jsbin.com/aponen/3/edit
I'm not interested in various hacks such as chaining elements inside a set with the set itself via custom attributes or similar approaches.
Thanks
Yes, the event handler is applied to each object individually -- Raphael does not make use of the <g> element of SVG. However, you can fix your issue here with a few keystrokes:
set.push(rect);
set.push(circle);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
//old
this.attr({'fill': 'red'});
//new
set.attr({'fill': 'red'});
});
The biggest difference in the way it works and the way you thought it might work is the meaning of "this" inside the handler. Changing it to "set" will fix that right up.
UPDATE, Jan. 26, 2013
Per comments, you could also attach the set to the children of the set with one line, using Raphael's "data" method:
set.push(rect);
set.push(circle);
set.data('myset', set);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
this.data('myset').attr({'fill': 'red'});
});
I don't believe there is a native way to access the set from children, but I could be missing it.
How to remove animation from object in raphael?
var animation = Raphael.animation({opacity:.2}, 1000);
var circle = paper.circle(0, 0, 5).animate(animation.repeat(Infinity));
I want to perform animation on object until some moment in time. And the question is how to remove/stop animation in that specific moment?
Well, I really don't know why, but the fiddle works if don't pass any arguments to the stop method. Despite what Raphael's documentation says, I found a working example of an animation stopping in this site (is not the most beatiful site, by the way, but they have an example for each raphael method!)
Here you have the Fiddle working. http://jsfiddle.net/fKxqS/2/
Enjoy!
If you want to stop the animation after a specific timelapse...
setTimeout(circle.stop(animation), 500) //500 is milliseconds, so it's 0.5s
If you want to stop the animation after an event, such as a click
circle.click(function(){
circle.stop(animation)
})
Edit: Seems Raphael doesn't stop if repeat is set to Infinite, perhaps somebody knows a workaround, here's the fiddle: http://jsfiddle.net/fKxqS/
Does ExtJS provide some quick way to check whether a given component is currently visible? I would normally check css properties like display and visible but what when one of parent elements is hidden?
Try Ext.Component.isVisible()
Ext.Component.isVisible()
Will work if element was hidden by ExtJs functionality.
If parent component will be hidden (e.g. by using jquery's toggle method calling) - this will not work. So in this case I have used such check:
var el = $('#real_id'); // Id of the inner element
if($(el).is (':visible') && $(el).parents (':hidden').length === 0) {
// The element is 100% visible
}
You'll ask why do I need jQuery - the answer is simple: some things can be done more quickly with it... :)