IO-1722 replaced hex to rgba
This commit is contained in:
@@ -24,18 +24,15 @@ const cardColor = (ssbuckets, totalHrs) => {
|
|||||||
bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
|
bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
|
||||||
)[0];
|
)[0];
|
||||||
|
|
||||||
if (bucket.color) {
|
if (bucket.color.rgb) {
|
||||||
return bucket.color.hex;
|
return bucket.color.rgb;
|
||||||
}
|
}
|
||||||
|
|
||||||
return "";
|
return bucket.color;
|
||||||
};
|
};
|
||||||
|
|
||||||
function getContrastYIQ(hexColor) {
|
function getContrastYIQ(bgColor) {
|
||||||
const r = parseInt(hexColor.substr(1, 2), 16);
|
const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
|
||||||
const g = parseInt(hexColor.substr(3, 2), 16);
|
|
||||||
const b = parseInt(hexColor.substr(5, 2), 16);
|
|
||||||
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
|
|
||||||
|
|
||||||
return yiq >= 128 ? "black" : "white";
|
return yiq >= 128 ? "black" : "white";
|
||||||
}
|
}
|
||||||
@@ -85,7 +82,10 @@ export default function ProductionBoardCard(
|
|||||||
className="react-kanban-card imex-kanban-card"
|
className="react-kanban-card imex-kanban-card"
|
||||||
size="small"
|
size="small"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: cardSettings && cardSettings.cardcolor && bgColor,
|
backgroundColor:
|
||||||
|
cardSettings &&
|
||||||
|
cardSettings.cardcolor &&
|
||||||
|
`rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
|
||||||
color:
|
color:
|
||||||
cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
|
cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -396,7 +396,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const ColorPicker = ({ value, onChange, style, ...restProps }) => {
|
export const ColorPicker = ({ value, onChange, style, ...restProps }) => {
|
||||||
const handleChange = (color) => {
|
const handleChange = (color) => {
|
||||||
if (onChange) onChange(color.rgb);
|
if (onChange) onChange(color.rgb);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import { useTranslation } from "react-i18next";
|
|||||||
import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
|
import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
|
||||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||||
|
import { ColorPicker } from "./shop-info.rostatus.component";
|
||||||
|
|
||||||
export default function ShopInfoSchedulingComponent({ form }) {
|
export default function ShopInfoSchedulingComponent({ form }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -283,7 +284,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
|
|||||||
key={`${index}color`}
|
key={`${index}color`}
|
||||||
name={[field.name, "color"]}
|
name={[field.name, "color"]}
|
||||||
>
|
>
|
||||||
<ColorpickerFormItemComponent />
|
<ColorPicker />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
|
|||||||
Reference in New Issue
Block a user