I want to set a three color gradient in a qooxdoo widgets decorator. The relevant CSS is
linear-gradient(rgba(255,255,255,0.2) 0,
rgba(255,255,255,0.8) 30px,
rgba(255,255,255,0.6) 100%);
I wan't to achieve the hover effect in the icons in this page http://njdesktop.nagyervin.eu/
What I tried so far:
in my theme.Color file I defined three colors
"desktop-icon-top": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.2)" : "white",
"desktop-icon-middle": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.8)" : "white",
"desktop-icon-end": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.6)" : "white"
but qx.ui.decoration.MLinearBackgroundGradient has properties only for gradient start and gradient end. Not for the middle.
I also tried to set it directly in the styles of theme.Decoration
"desktop-icon-hovered": {
style: {
radius: 5,
width: 2,
backgroundColor: "transparent",
color: "white",
// gradientStart: ["desktop-icon-middle", 30],
// gradientEnd: ["desktop-icon-end", 70]
backgroundImage: "linear-gradient(rgba(255,255,255,0.2) 0,rgba(255,255,255,0.8) 30px,rgba(255,255,255,0.6) 100%)"
}
but this doesn't render a gradient at all.
The only way I can do this is by using setStyle() in code but this means I will have to mess with event listeners and I won't be taking advantage of the decorator mechanism. Plus it feels ugly.
So how can I use three colors decorator in the Decoration.js?
If you are not worried about backward compatibility with older browsers then this should work:
Qooxdoo Playground Example
Put simply, you first create a Decorator Mixin that creates a property for your app code to access using the decorator mechanism.
Within your Application code you then include the new Mixin into your app's decorator class.
Run the generate.py source on your app. Then set your controls decorator property either directly or via the Decoration class and your set.
Related
I have inherited some react-native code where some styling that apparently used to work is no longer working. This is the line of code in question:
<View style={componentStyles.rightButtonContainer}>
The styling assigned looks like this:
rightButtonContainer: {
backgroundColor: config.defaultStyles.greenGradient,
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 25,
borderTopRightRadius: 25,
width: "45%",
height: 50,
marginLeft: 2,
}
What's not working is the backgroundColor. Notice it is using config.defaultStyles.greenGradient. Now, the config referred to here looks like this:
import colors from '../../styles/Colors';
export default {
defaultStyles: {
greenGradient: colors.greenGradient,
}
};
The above in turn imports colors, which looks like this:
export default {
primary: 'rgb(61, 77, 138)',
secondary: 'rgb(20,169,53)',
greenGradient: ['rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,159,53,1)', 'rgba(20,159,53,1)'],
yellowGradient: ['rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(219,159,42,1)', 'rgba(219,159,42,1)'],
background: '#fff',
indicator: 'rgb(220, 160, 42)',
text: '#333',
textInverse: '#fff',
textPlaceholder: '#9ab',
textPlaceholderLight: '#ccc',
border:'',
borderLight: '#ccc',
};
So, it should be ultimately assigning the greenGradient color from colors, but as I say it's not working. In other words, the green colored button does not render to the screen.
NOTE: this likely stopped working after updating some libraries and the underlying Expo package. Did something change in terms of how styling is handled?
What is the issue here?
React-native doesn't support gradient. You need to use a third-party module like react-native-linear-gradient.
https://www.npmjs.com/package/react-native-linear-gradient
I'm using the select interaction with OpenLayers:
My goal is to simply change the UI display on the map through the feature rather than a layer. Here is what I'm attempting now:
selectClick.getFeatures()
selectClick.getFeatures().item(0)
selectClick.getFeatures().item(0).setStyle(
new Style({
stroke: new Stroke({
color: '#7e0101',
}),
fill: new Fill({
color: 'rgba(36, 37, 42, .25)',
}),
}),
);
By logging selectClick.getFeatures().item(0).getStyle() before and after the change I'm able to see that the style for the feature has been modified. However this doesn't result in a visual update. Any suggestions? Do I have to make the change on the layer instead?
Is there a way to get only the CSS value of a Tailwind CSS class? For example, if I have translate-x-4 tailwind class I want only the 1rem CSS value (since class translate-x-4 is --tw-translate-x: 1rem;). This would be pretty useful with Framer Motion, because framer motion animation object can accept a wide variety of CSS values like 1rem, #ff3322. Is there some kind of way to do something like this <motion.div animate={{ x: getValue('translate-x-4') }} initial={false} />.
I know there exists twin.macro but it "returns" entire Tailwind CSS class. Is there a similar utility for getting only the value?
I think xwind is what you are looking for.
import xw from "xwind";
const styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;
// OR (with custom array syntax)
const styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;
Xwind converts your tailwind classes into Postcss-js / JSS compatible syntax.
Something like this:
const styles = {
"--text-opacity": "1",
color: ["#fde8e8", "rgba(253, 232, 232, var(--text-opacity))"],
"&:hover": {
"--text-opacity": "1",
"--bg-opacity": "1",
color: ["#def7ec", "rgba(222, 247, 236, var(--text-opacity))"],
backgroundColor: ["#c3ddfd", "rgba(195, 221, 253, var(--bg-opacity))"],
},
};
I prefer to use vscode and enable extension Tailwind CSS IntelliSense. This way, when you hover over any tailwind classes you can see the complete CSS.
TailwindCSS has a function called resolveConfig that returns an object of the generated values. The theme attribute stores the css values. I used this in my React app as follows (at the top of my file):
import resolveConfig from "tailwindcss/resolveConfig";
const styleConfig = resolveConfig().theme;
styleConfig then is an object with things like backgroundColor, gap, etc.
Hi, I am trying to remove the background of autocomplete. but did not manage. I managed to changed color but now I can't see the text input.
the image above show the problem . as you can see its override on the label.
input: {
color: '#A5AEB3',
"& .MuiOutlinedInput-notchedOutline": {
color:'#000000',
backgroundColor: muiTheme.palette.background.default
},
I have the this jsfiddle, it has the ability to draw a polygon on a map which works perfectly. What I can't figure out is how to style the .Draw interaction.
Currently I have a dashed line for the sections of the polygon that the users has already draw and another dashed line connecting the first drawn point to the last drawn point.
When I write styles it seems to effect both lines.
What I need to have is a dashed black line joining points the user has already drawn, and no line (fully transparent) for the line connecting the last drawn point back to the first drawn point.
This is my current style object:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 0.5],
width: 1
}),
radius: 4
})
})
I have tried adding arrays of colours and styles but can't seem to get it working.
Has anyone come across this and found a fix?
Ok I have cracked this one, I had to take a dive into the library's source to figure it out, so I'm gonna post the answer here in the hope it helps somebody else in the future, so here goes:
What I could see looking as the source code was that when you are using ol.interaction.Draw to draw a polygon there are multiple pieces of geometry being used. There is the underlying Polygon, this is the bit that has a stroke and fill and shows the connecting line (based on it's stroke style). There is a LineString which shows a line for the points the user has drawn only (no fill and no connecting line). And there is a point, which is attached to the mouse pointer. I have left a `console.log()' in the jsfiddle to show all this.
I have created this working jsfiddle. What I have done is, rather than set the styles directly inside ol.interaction.Draw I have used a styleFunction (see code below). I detect each geometry by type and set a specific style for it.
const styleFunction = feature => {
var geometry = feature.getGeometry();
console.log('geometry', geometry.getType());
if (geometry.getType() === 'LineString') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 1)',
width: 3
})
})
];
return styles;
}
if (geometry.getType() === 'Polygon') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 0)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 102, 0, 0.3)'
})
})
];
return styles;
}
return false;
};
Hope this helps 🤓