[TIMOB-27519] Android: Semantic Colors with alpha value
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | High |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2020-05-26T17:31:52.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 9.1.0 |
| Components | n/a |
| Labels | android, darkmode, engSchedule, parity |
| Reporter | Michael Gangolf |
| Assignee | Christopher Williams |
| Created | 2019-09-21T17:54:43.000+0000 |
| Updated | 2020-08-25T00:41:08.000+0000 |
Description
Attachments
| File | Date | Size |
|---|---|---|
| 0001-fix-android-semantic-colors-with-alpha-value.patch | 2019-10-10T09:53:12.000+0000 | 2504 |
Are you sure it doesn't use the alpha value? This works for us:
{ "mainColor": { "dark": { "color: "#000000", "alpha: "50" }, "light": { "color: "#ffffff", "alpha: "50" } } }Ti.UI.fetchSemanticColor() on Android (and I assume iOS < 13) returns only
"color", and is loosing the"alpha": https://github.com/appcelerator/titanium_mobile/blob/3b925d3b89e0d59bf89b846bfa127e9656746dbf/common/Resources/ti.internal/extensions/ti/ti.ui.js#L55 To fix it, I put this code into my alloy.js (based on [iphone/cli/commands/_build.js#generateSemanticColors](https://github.com/appcelerator/titanium_mobile/blob/3b925d3b89e0d59bf89b846bfa127e9656746dbf/iphone/cli/commands/_build.js#L5802)):(function() { const osVersion = parseInt(Ti.Platform.version.split('.')[0]); if (Ti.App.iOS && osVersion >= 13) { return; } const colorset = require('/semantic.colors.json'); const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; const fallbackColor = 'black'; // To match iphone/Classes/TiUIiOSProxy.m#fetchSemanticColor const hexToRgb = function hexToRgb(hex) { let alpha = 1; let color = hex; if (hex.color) { alpha = hex.alpha / 100; // convert from 0-100 range to 0-1 range color = hex.color; } // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") color = color.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); return r ?rgba(${parseInt(r[1], 16)}, ${parseInt(r[2], 16)}, ${parseInt(r[3], 16)}, ${alpha.toFixed(3)}): null; }; Ti.UI.fetchSemanticColor = function(name) { if (!colorset[name]) { return fallbackColor; } const color = colorset[name][Ti.UI.semanticColorType]; if (typeof color === 'string') { return color; } if (!color || typeof color !== 'object') { return fallbackColor; } if (color['color'] && color['alpha']) { const result = hexToRgb(color); if (result) { return result; } } return fallbackColor; } })(); if (Alloy && Alloy.CFG && Alloy.CFG.color) { const colorset = require('/semantic.colors.json'); Object.keys(colorset).forEach(name => { const color = Ti.UI.fetchSemanticColor(name); console.log(Alloy.CFG.color[${name}]: ${color}); Alloy.CFG.color[name] = color; }); }I attached patch for the SDK with fix for this issue. Will send a PR after the ticket is approved (don't like commits without reference to ticket).
Hello [~s.volkov], Please share the PR here. Moving to TIMOB.
https://github.com/appcelerator/titanium_mobile/pull/11315
https://github.com/appcelerator/titanium_mobile/pull/11315
merged to master for 9.1.0 target