I am using quill js and making a fully responsive editor that will scale font-size with the container, using the view width property.
I have it fully built except for one problem:
Even though I am using prepareFormat(), (for times where the cursor is at one point and no other text is selected) the font-size will change on occasion to the highest default font inside of the quill minified file, which in version 0.20.1, happens to be 48px. I have tried putting my own numbers into the quilljs FONT_SIZES object, but only sometimes it would select them properly.
The thing I am most confused about is that if i highlight them, the letters will change to exactly what I would like them to be, whereas for the prepareFormat() fails to change it into any number but a preset in FONT_SIZES.
If anyone has a good idea as to what event I should tie prepareFormat() to, please let me know :)
Thanks in advanced!
Quill 0.20.1 uses execCommand which only allows 1-7 as valid font sizes. Quill 1.0 has no such limitation.
Related
I want to render a virtualized list of images with variables heights, my current implementation is following the variable example on tanstack docs, but adding a random height src image and loading that instead of text as the content for the row item.
This is not working great and is a bit glitchy. Im using a best guess estimateSize but was hoping for a system that would fully calculate this for me.
The height is completely off until you scroll at least once, then the image heights seem to get calculated. Otherwise, once you start scrolling, the performance here is pretty good.
Any feedback on this implementation (no idea if this is how it's intended to be implemented), or indication on how I can fix the problem would be appreciated. Thanks!
My demo here:
https://codesandbox.io/s/boring-ishizaka-yiywvo?file=/src/main.jsx
p.s if you know how to achieve this with react-virtualized (with CellMeasurer) also keen to hear/see it. I've struggled with CellMeasurer and image onLoad to calc correctly.
Ok dug through some github issues, and mashed a few things together and this seems to be working well. https://codesandbox.io/s/usevirtualresizeobserver-04-11-2021-forked-yur6we?file=/src/App.tsx
It uses a custom wrapper that leverages ResizeObserver, shame this isn't something that's exported from the lib considering this would be a very common use case.
here is a much simpler solution with the new react-virtual version
the idea is to call measureElement on img onLoad
Today I spent two hours trying to align vertically the text of a toogle button at the bottom of the button icon.
The button icon height is a three or four times longer than the text height: the text must be vertically aligned at the bottom of the icon.
The method setVerticalAlignment(int valign) works as expect if the parameter is Component.TOP or Component.CENTER, but Component.BOTTOM acts exactly as Component.CENTER.
I tried a lot of workarounds, without success. It’s odd that a so easy task is hard to do: am I missing something? Thank you.
I don’t know if it’s relevant, however I’m also using setTextPosition(Component.RIGHT).
Edited answer...
That code is a bit difficult to work with and has so many nuances and misbehavior's. I usually end up just splitting the text and icon to separate labels and using something like a flow layout:
Form hi = new Form("Big and Small", BoxLayout.y());
CheckBox toggle = CheckBox.createToggle("My Text");
toggle.setUIID("Label");
Label bigIcon = new Label("");
FontImage.setMaterialIcon(bigIcon, FontImage.MATERIAL_INFO, 10);
Container lead = FlowLayout.encloseBottomInRow(toggle, bigIcon);
lead.setUIID("ToggleButton");
lead.setLeadComponent(toggle);
hi.add(lead);
hi.show();
Note that at this time this code requires a change that was added yesterday to the code (the ByRow method). Initially I thought this was a bug in FlowLayout but it seems it was just two different ways of calculating vertical alignment for the container.
To get a sense of why aligning and placing labels is so hard check out this code responsible for that: https://github.com/codenameone/CodenameOne/blob/fd2acfc10eb22f4b7a3089aeac4e967280f92b4e/CodenameOne/src/com/codename1/ui/plaf/DefaultLookAndFeel.java#L1314-L1623
This is just the generic code. There are copies of it in native iOS and Android code (for performance).
My app features a floating action button which size I would like to increase. I want it much bigger. Please note that I've already achieved to change its color by changing the background color of the style applied to the FAB. Unfortunatelly it does not yield the expected change with the following code :
Font fabFont = UIManager.getInstance().getComponentStyle("Score").getFont();
fabFont.derive(Display.getInstance().convertToPixels(ParametresGeneraux.getFabSizeInMilli()), Font.STYLE_PLAIN);
fabStyle.setFont(fabFont);
The FAB size remains constant. What is the proper way to increase the FAB ?
Any help appreciated,
This seems to be hardcoded in the class, notice that what you see in the FAB is the icon not the text so increasing the text size will do nothing. I have two potential solutions.
First I'll add a method to set the default FAB icon size in millimeters:
FloatingActionButton.setIconDefaultSize(4);
The current default is 3.8f which we found consistent with native.
The second method is on a per instance basis and will work before the library update today:
FontImage image = FontImage.createMaterial(icon, "FloatingActionButton", 4);
fabInstance.setIcon(image);
You can obviously increase the padding as well in the UIID to make the whole thing even bigger...
I am working on a project that requires a slider control that corresponds to an image and or a multitude of div objects. The spacing of the slider is irregular (the steps could be [1,4,7,13,14,16...]). Also the steps will correspond to specific spots on an image and or to a specific div object. The perfect slider would be dynamic and re-size with the screen but that may be actually impossible.
The hard part is that I am unable to use JQueryUI, instead I am limited to using controls that work with AngularJS.
I have been looking for hours and cannot find anything that would be a good starting point. So my question is whether anyone has found a good slider control to use with AngularJS?
This one fits some of your criteria
angularjs-slider
The app I'm writing involves buttons that have a slight noise filter texture, which can be any size. For a standard button I'd simply use resizableImageWithCapInsets: but due to the texture, this causes unusual artefacts to appear on the resulting button.
A solution I have in mind, is to use the Core Image monochrome filter combined with the random noise filter to add the noise texture to a plain image. In theory this works, and in practice this has been shown to work (One example here) but these are all in cases where the button size is known at the point of invoking the CI code.
What I'm looking to do, is use the appearance proxies, so across the app I can simply set the style of UIBarButtonItems for instance.
Is there a way I can apply these CI filters to the buttons through the appearance proxies or isn't this possible? Would something like a category on UIImage to add noise work? I'm not entirely sure at which point the appearance proxy would actually invoke that code.
Any help is appreciated
OK So I finally solved it but found out some stuff on the way.
It seems you can create a category on UIImage and use that in the appearance proxy. I created a category to add noise, and it seemed to partly work, but I couldn't get it looking how I wanted as it wasn't quite rendering properly, but in the process of coding this discovered another method
resizableImageWithCapInsets:resizingMode:
Because the texture I was dealing with was simply noise, it could be tiled, so rather than the image now being stretched, the centre of the image is instead tiled which gives me the appearance I needed :)