FrontendAplikacje/PhotoModule
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kolorki

Browse Source
This commit is contained in:
pawel.gaca
2026-01-28 15:03:41 +01:00
parent 09c14785e7
commit 85b18161fd
15 changed files with 720 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
IdoSellAddOn/script.js
View File

@@ -144,6 +144,7 @@ function idmGetSingleProdGraphQLPM({
name
link
type
icon
${labels ? "zones" : ""}
${
opinions
@@ -406,25 +407,32 @@ async function idmPictureModuleProductsPM(containerEL) {
// OPINIE
let opinionsHTML = "";
if (isOpinions) {
if (
isOpinions &&
typeof prodData.opinion?.rating === "number" &&
typeof prodData.opinion?.count === "number"
) {
opinionsHTML = `
<div class="product_opinions__stars">
<i class="icon-star ${prodData.opinion?.rating > 0.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 1.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 2.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 3.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 4.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 0.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 1.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 2.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 3.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 4.5 ? "--active" : ""}"></i>
</div>
<span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
<span class="product_opinions__count">${prodData.opinion.count}</span>
`;
}
prodEl.innerHTML = `
<a href="${prodData.link}" class="product_icon --mobile"><img src="${prodData.icon}" alt="${prodData.name}" tabindex="-1"/></a>
<div class="product_info__container">
${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
<a class="product_name" href="${prodData.link}">${prodData.name}</a>
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
</div>
`;
idmInitEventsPM({
@@ -444,21 +452,31 @@ async function idmPictureModuleProductsPM(containerEL) {
document.body.addEventListener("click", (e) => {
if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
const prodContainerEl = e.target.closest(".idm_picture__product");
const moduleCotnainer = e.target.closest(".idm_picture__module");
const prodContainerEl = e.target
.closest(".idm_picture__product")
?.querySelector(".product_info");
if (!prodContainerEl || !moduleCotnainer) return;
// ClearShow
if (!prodContainerEl)
return document
.querySelector(".idm_picture__product.--show")
?.classList?.remove("--show");
if (prodContainerEl.classList.contains("--show"))
return prodContainerEl.classList.remove("--show");
// if(!prodContainerEl) return document.querySelector(".idm_picture__product.--show")?.classList?.remove("--show");
// if(prodContainerEl.classList.contains("--show")) return prodContainerEl.classList.remove("--show");
const moduleContainer = prodContainerEl.closest(".idm_picture__module");
if (!moduleContainer) return;
// const moduleContainer = prodContainerEl.closest(".idm_picture__module");
// if(!moduleContainer) return;
moduleContainer
.querySelectorAll(".idm_picture__product.--show")
.forEach((prodConEl) => prodConEl.classList.remove("--show"));
prodContainerEl.classList.add("--show");
// moduleContainer.querySelectorAll(".idm_picture__product.--show").forEach(prodConEl=>prodConEl.classList.remove("--show"));
// prodContainerEl.classList.add("--show");
const computedStyles = window.getComputedStyle(moduleCotnainer);
const backgroundColor = computedStyles.getPropertyValue("--photo-mod-col-bg");
const textColor = computedStyles.getPropertyValue("--photo-mod-col-text");
new Modal({
element: prodContainerEl,
classList: "--mobile --photo-prod-mobile",
afterShow: (modal) => {
modal.style.setProperty("--photo-prod-box-bg", backgroundColor || "#fff");
modal.style.setProperty("--photo-prod-box-text", textColor || "#111");
},
});
});

116
IdoSellAddOn/style.html
View File

@@ -1,7 +1,8 @@
<style>
.idm_picture__module {
--photo-prod-box-bg: #fff;
--photo-prod-box-text: #111;
--photo-prod-box-bg: var(--photo-mod-col-bg, #fff);
--photo-prod-box-text: var(--photo-mod-col-text, #111);
--photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
--photo-prod-box-pad-top: 1rem;
@@ -32,8 +33,7 @@
position: absolute;
z-index: 10;
}
.idm_picture__product:hover,
.idm_picture__product.--show {
.idm_picture__product:hover {
z-index: 20;
}
.idm_picture__img {
@@ -114,15 +114,18 @@ PULSE ANIMATION
.product_info {
background: var(--photo-prod-box-bg);
flex-direction: column;
padding: 1rem;
gap: 1rem;
display: none;
max-width: var(--photo-prod-box-width);
position: absolute;
width: max-content;
box-shadow: 0px 0px 10px 1px #000;
}
.product_info__container {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 757px) {
.product_info {
padding: 1.5rem;
@@ -294,19 +297,27 @@ PULSE ANIMATION
}
}
.idm_picture__product .product_info .product_name {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.product_name {
font-size: 1.6rem;
color: var(--photo-prod-box-text);
}
.idm_picture__product .product_info .product_name:hover {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.product_name:hover {
color: var(--primary-color, #000) !important;
}
.idm_picture__product .product_info .product_prices {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.product_prices {
font-size: 1.6rem;
color: var(--photo-prod-box-text);
}
.idm_picture__product .product_info .price.--main {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.price.--main {
margin-bottom: 0;
}
@@ -320,12 +331,6 @@ PULSE ANIMATION
animation: idmShowUp 0.3s ease-in-out;
}
}
@media (max-width: 978px) {
.idm_picture__product.--show .product_info {
display: flex;
animation: idmShowUp 0.3s ease-in-out;
}
}
@keyframes idmShowUp {
from {
@@ -356,38 +361,101 @@ PULSE ANIMATION
}
}
.idm_picture__module .label_icons {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .label_icons {
display: flex;
gap: 0.5rem;
position: static;
}
.idm_picture__module .product_opinions {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions {
display: flex;
color: var(--photo-prod-box-text);
}
.idm_picture__module .icon-star:not(.--active)::before {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.icon-star:not(.--active)::before {
content: "\f006";
}
.idm_picture__module .icon-star.--active {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .icon-star.--active {
color: var(--opinions-star-active-color, #fac917);
}
.idm_picture__module .product_opinions__score {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__score {
margin-left: 1rem;
margin-right: 0.5rem;
}
.idm_picture__module .product_opinions__count::before {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__count::before {
content: "(";
}
.idm_picture__module .product_opinions__count::after {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__count::after {
content: ")";
}
.idm_picture__module :is(.add_to_basket, .add_to_basket__link) {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
:is(.add_to_basket, .add_to_basket__link) {
display: flex;
justify-content: center;
margin-top: 0;
}
:is(.idm_picture__module, .modal.--photo-prod-mobile)
:is(.price.--omnibus.omnibus_price, .price.--max) {
color: var(--photo-prod-box-text);
}
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.--omnibus-higher
:is(.price.--normal.--main, .price_percent) {
color: var(--color-promo-price, #cd2323);
}
.idm_picture__module .product_icon {
display: none !important;
}
@media (max-width: 978px) {
.modal.--photo-prod-mobile .product_info.--mod-init {
position: static;
display: flex;
width: 100%;
box-shadow: none;
flex-direction: column;
}
.modal.--photo-prod-mobile .modal__wrapper {
border-radius: 10px 10px 0 0;
background-color: var(--photo-prod-box-bg);
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile .modal__close {
position: absolute;
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile
.modal__close
:is(.product_name, .omnibus_price, .price.--max) {
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile .product_icon {
display: flex;
justify-content: center;
align-items: center;
}
}
@media (min-width: 420px) and (max-width: 978px) {
.modal.--photo-prod-mobile .product_info.--mod-init {
display: grid;
grid-template-columns: 1fr 2fr;
}
.modal.--photo-prod-mobile .product_info.--mod-init > *:not(.product_icon) {
grid-column: "2/3";
}
.modal.--photo-prod-mobile .product_info.--mod-init > .product_icon {
grid-row: "1/-1";
}
}
</style>

62
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@mui/icons-material": "^7.3.6",
"@mui/material": "^7.3.6",
"react": "^19.2.0",
"react-color": "^2.19.3",
"react-dom": "^19.2.0",
"react-hot-toast": "^2.6.0",
"react-router-dom": "^7.11.0",
@@ -1076,6 +1077,15 @@
"url": "https://github.com/sponsors/nzakas"
}
},
"node_modules/@icons/material": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2999,6 +3009,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lodash": {
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
"license": "MIT"
},
"node_modules/lodash-es": {
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
"license": "MIT"
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3028,6 +3050,12 @@
"yallist": "^3.0.2"
}
},
"node_modules/material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
"license": "ISC"
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3268,6 +3296,7 @@
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@@ -3300,6 +3329,24 @@
"node": ">=0.10.0"
}
},
"node_modules/react-color": {
"version": "2.19.3",
"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
"integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
"license": "MIT",
"dependencies": {
"@icons/material": "^0.2.4",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15",
"material-colors": "^1.2.1",
"prop-types": "^15.5.10",
"reactcss": "^1.2.0",
"tinycolor2": "^1.4.1"
},
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-dom": {
"version": "19.2.3",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
@@ -3404,6 +3451,15 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/reactcss": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
"integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
"license": "MIT",
"dependencies": {
"lodash": "^4.0.1"
}
},
"node_modules/resolve": {
"version": "1.22.11",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -3583,6 +3639,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tinycolor2": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
"license": "MIT"
},
"node_modules/tinyglobby": {
"version": "0.2.15",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",

1
package.json
View File

@@ -15,6 +15,7 @@
"@mui/icons-material": "^7.3.6",
"@mui/material": "^7.3.6",
"react": "^19.2.0",
"react-color": "^2.19.3",
"react-dom": "^19.2.0",
"react-hot-toast": "^2.6.0",
"react-router-dom": "^7.11.0",

1
src/App.jsx
View File

@@ -3,7 +3,6 @@ import Home from "./pages/Home";
import AppLayout from "./ui/AppLayout";
import Instruction from "./pages/Instruction";
import { Toaster } from "react-hot-toast";
import { Alert } from "@mui/material";
function App() {
return (

14
src/constants/photo.js
View File

@@ -22,3 +22,17 @@ export const DEFAULT_POINT = {
id: 0,
direction: Object.keys(DIRECTIONS)[0],
}; // Default point structure
export const DEFAULT_COLOR_PALLETE = [
"#D9E3F0",
"#F47373",
"#697689",
"#37D67A",
"#2CCCE4",
"#555555",
"#dce775",
"#ff8a65",
"#ba68c8",
"#111111",
"#f2f2f2",
];

7
src/features/htmlBuilder/components/CodeBox.jsx
View File

@@ -17,6 +17,13 @@ export default function CodeBox() {
}
}, [state.urls, state.points, state.photoAlt, state.previewMode]); // reactive slices
if (
import.meta.env.MODE === "production" &&
window.location.href.includes("https://zooart6.yourtechnicaldomain.com/") &&
!window.location.search.includes("dev=test")
)
return null;
const copyCode = () => {
navigator.clipboard.writeText(code);
toast.success("Skopiowano tekst!");

7
src/features/htmlBuilder/generated/GeneratePreview.jsx
View File

@@ -11,6 +11,9 @@ function GeneratePreview({ preview = true }) {
const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket);
const bgColor = useSharedState((state) => state.bgColor);
const textColor = useSharedState((state) => state.textColor);
if (preview && urls[previewMode] === "") return null;
return (
@@ -20,6 +23,10 @@ function GeneratePreview({ preview = true }) {
data-labels={labels && true}
data-opinions={opinions && true}
data-add-to-basket={addToBasket && true}
style={{
"--photo-mod-col-bg": bgColor,
"--photo-mod-col-text": textColor,
}}
>
{<GeneratePreviewImage preview={preview} urls={urls} />}
{<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />}

10
src/features/htmlBuilder/generated/GeneratePreviewImage.jsx
View File

@@ -1,13 +1,15 @@
import { useSharedState } from "../../../store/useSharedState";
function GeneratePreviewImage({ preview, urls }) {
const imagePrefix =
import.meta.env.MODE === "development"
? `${import.meta.env.VITE_PUBLIC_URL}/`
: "";
const previewMode = useSharedState((state) => state.previewMode);
const photoAlt = useSharedState((state) => state.photoAlt);
const imagePrefix =
import.meta.env.MODE === "development" &&
!urls[previewMode]?.includes("https://")
? `${import.meta.env.VITE_PUBLIC_URL}/`
: "";
if (preview)
return (
<img

4
src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx
View File

@@ -90,7 +90,7 @@ function GeneratePreviewSinglePoint({
{...productInfoDataAttributes()}
>
{preview && (
<>
<div class="product_info__container">
{labels && (
<strong class="label_icons">
<span class="label --new">Nowość</span>
@@ -130,7 +130,7 @@ function GeneratePreviewSinglePoint({
<span>Do koszyka</span>
</button>
)}
</>
</div>
)}
</div>
</div>

290
src/features/htmlBuilder/generated/GenerateStyle.jsx
View File

@@ -3,10 +3,11 @@ function GenerateStyle() {
<>
<style>
{`
.idm_picture__module {
--photo-prod-box-bg: #fff;
--photo-prod-box-text: #111;
--photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
.idm_picture__module{
--photo-prod-box-bg: var(--photo-mod-col-bg, #fff);
--photo-prod-box-text: var(--photo-mod-col-text, #111);
--photo-prod-point-shadow: rgba(255,255,255,.5);
--photo-prod-box-pad-top: 1em;
--photo-prod-box-pad-left: 2em;
@@ -27,33 +28,32 @@ function GenerateStyle() {
--photo-prod-point-mobile-left: 0%;
--photo-box-offset: 1em;
}
}
.idm_picture__module {
.idm_picture__module{
position: relative;
}
.idm_picture__product {
}
.idm_picture__product{
position: absolute;
z-index: 10;
}
.idm_picture__product:hover,
.idm_picture__product.--show {
}
.idm_picture__product:hover{
z-index: 20;
}
.idm_picture__img {
}
.idm_picture__img{
width: 100%;
}
.idm_picture__overlay {
}
.idm_picture__overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
/* =========================
}
/* =========================
PRODUCT POINT ( + )
========================= */
.idm_picture__product_point {
.idm_picture__product_point{
position: relative;
width: var(--photo-prod-point-size);
height: var(--photo-prod-point-size);
@@ -73,10 +73,10 @@ PRODUCT POINT ( + )
line-height: 1;
z-index: 1;
}
}
/* Pulsating halo */
.idm_picture__product_point::before {
/* Pulsating halo */
.idm_picture__product_point::before{
content: "";
position: absolute;
inset: 0;
@@ -85,117 +85,120 @@ PRODUCT POINT ( + )
animation: idmPulse 1.5s ease-in-out infinite;
z-index: -1;
}
}
/* Optional: stop pulse on hover */
.idm_picture__product:hover .idm_picture__product_point:before {
/* Optional: stop pulse on hover */
.idm_picture__product:hover .idm_picture__product_point:before{
animation-play-state: paused;
}
}
/* Focus accessibility */
.idm_picture__product_point:focus-visible {
/* Focus accessibility */
.idm_picture__product_point:focus-visible{
outline: 2px solid #000;
outline-offset: 4px;
}
}
/* =========================
/* =========================
PULSE ANIMATION
========================= */
@keyframes idmPulse {
0% {
@keyframes idmPulse{
0%{
opacity: 1;
box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
}
70% {
70%{
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
opacity: 0.8;
}
100% {
100%{
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
opacity: 0;
}
}
}
.product_info {
.product_info{
background: var(--photo-prod-box-bg);
flex-direction: column;
padding: 1em;
gap: 1em;
display: none;
max-width: var(--photo-prod-box-width);
position: absolute;
width: max-content;
box-shadow: 0px 0px 10px 1px #000;
}
@media (min-width: 757px) {
.product_info {
}
.product_info__container{
display: flex;
flex-direction: column;
gap: 1em;
}
@media (min-width: 757px){
.product_info{
padding: 1.5em;
}
}
@media (min-width: 979px) {
.product_info {
}
@media (min-width: 979px){
.product_info{
padding: 2em;
}
}
}
.product_info::before {
.product_info::before{
content: "";
position: absolute;
display: block;
width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
z-index: -1;
}
}
/*Ulozenie okna produktowego*/
.product_info {
/*Ulozenie okna produktowego*/
.product_info{
bottom: var(--photo-prod-box-dir-t, auto);
top: var(--photo-prod-box-dir-b, auto);
right: var(--photo-prod-box-dir-l, auto);
left: var(--photo-prod-box-dir-r, auto);
border-radius: var(--photo-prod-box-radius);
}
.product_info::before {
}
.product_info::before{
top: var(--photo-prod-box-dir-t-before, auto);
bottom: var(--photo-prod-box-dir-b-before, auto);
right: var(--photo-prod-box-dir-r-before, auto);
left: var(--photo-prod-box-dir-l-before, auto);
}
}
.product_info[data-dir-single-x="l"] {
.product_info[data-dir-single-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
}
.product_info[data-dir-single-x="r"] {
.product_info[data-dir-single-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
}
.product_info[data-dir-single-y="t"] {
.product_info[data-dir-single-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
}
.product_info[data-dir-single-y="b"] {
.product_info[data-dir-single-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-single-x="l"][data-dir-single-y="t"] {
}
.product_info[data-dir-single-x="l"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
}
.product_info[data-dir-single-x="r"][data-dir-single-y="t"] {
}
.product_info[data-dir-single-x="r"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
}
.product_info[data-dir-single-x="l"][data-dir-single-y="b"] {
}
.product_info[data-dir-single-x="l"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
}
.product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
}
.product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
}
@media (max-width: 756px) {
@media (max-width: 756px) {
.product_info[data-dir-mobile-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
@@ -228,8 +231,8 @@ PULSE ANIMATION
.product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
}
@media (min-width: 757px) and (max-width: 978px) {
}
@media (min-width: 757px) and (max-width: 978px) {
.product_info[data-dir-tablet-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
@@ -262,8 +265,8 @@ PULSE ANIMATION
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
}
@media (min-width: 979px) {
}
@media (min-width: 979px) {
.product_info[data-dir-desktop-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
@@ -296,104 +299,147 @@ PULSE ANIMATION
.product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
}
}
.idm_picture__product .product_info .product_name {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_info .product_name{
font-size: 1.6em;
color: var(--photo-prod-box-text);
}
.idm_picture__product .product_info .product_name:hover {
color: var(--primary-color, #000) !important;
}
}
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_info .product_name:hover{
color: var(--primary-color, #000)!important;
}
.idm_picture__product .product_info .product_prices {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_info .product_prices{
font-size: 1.6em;
color: var(--photo-prod-box-text);
}
.idm_picture__product .product_info .price.--main {
}
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_info .price.--main{
margin-bottom: 0;
}
}
@media (min-width: 979px) {
:is(
.idm_picture__product:hover,
.idm_picture__product:has(.idm_picture__product_point:focus-within)
)
.product_info {
@media(min-width: 979px){
:is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
display: flex;
animation: idmShowUp 0.3s ease-in-out;
}
}
@media (max-width: 978px) {
.idm_picture__product.--show .product_info {
display: flex;
animation: idmShowUp 0.3s ease-in-out;
}
}
}
@keyframes idmShowUp {
from {
@keyframes idmShowUp{
from{
opacity: 0;
}
to {
to{
opacity: 1;
}
}
}
.idm_picture__product {
.idm_picture__product{
top: var(--photo-prod-point-mobile-top);
left: var(--photo-prod-point-mobile-left);
display: var(--photo-prod-point-mobile-display, block);
}
@media (min-width: 757px) {
.idm_picture__product {
}
@media(min-width: 757px){
.idm_picture__product{
top: var(--photo-prod-point-tablet-top);
left: var(--photo-prod-point-tablet-left);
display: var(--photo-prod-point-tablet-display, block);
}
}
@media (min-width: 979px) {
.idm_picture__product {
}
@media(min-width: 979px){
.idm_picture__product{
top: var(--photo-prod-point-desktop-top);
left: var(--photo-prod-point-desktop-left);
display: var(--photo-prod-point-desktop-display, block);
}
}
}
.idm_picture__module .label_icons {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .label_icons{
display: flex;
gap: 0.5em;
position: static;
}
}
.idm_picture__module .product_opinions {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions{
display: flex;
}
color: var(--photo-prod-box-text);
}
.idm_picture__module .icon-star:not(.--active)::before {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .icon-star:not(.--active)::before{
content: "\f006";
}
.idm_picture__module .icon-star.--active {
}
:is(.idm_picture__module, .modal.--photo-prod-mobile) .icon-star.--active{
color: var(--opinions-star-active-color, #fac917);
}
}
.idm_picture__module .product_opinions__score {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions__score{
margin-left: 1em;
margin-right: 0.5em;
}
}
.idm_picture__module .product_opinions__count::before {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions__count::before{
content: "(";
}
.idm_picture__module .product_opinions__count::after {
}
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions__count::after{
content: ")";
}
}
.idm_picture__module :is(.add_to_basket, .add_to_basket__link) {
:is(.idm_picture__module, .modal.--photo-prod-mobile) :is(.add_to_basket, .add_to_basket__link){
display: flex;
justify-content: center;
margin-top: 0;
}
:is(.idm_picture__module, .modal.--photo-prod-mobile) :is(.price.--omnibus.omnibus_price, .price.--max){
color: var(--photo-prod-box-text);
}
:is(.idm_picture__module, .modal.--photo-prod-mobile) .--omnibus-higher :is(.price.--normal.--main, .price_percent){
color: var(--color-promo-price, #cd2323);
}
.idm_picture__module .product_icon{
display: none!important;
}
// MOBILE
@media (max-width: 978px){
.modal.--photo-prod-mobile .product_info.--mod-init{
position: static;
display: flex;
width: 100%;
box-shadow: none;
}
.modal.--photo-prod-mobile .modal__wrapper{
border-radius: 10px 10px 0 0;
background-color: var(--photo-prod-box-bg);
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile .modal__close{
position: absolute;
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile .modal__close :is(.product_name, .omnibus_price, .price.--max){
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile .product_icon{
display: flex;
justify-content: center;
align-items: center;
}
}
@media(min-width: 400px) and (max-width: 978px){
.modal.--photo-prod-mobile .product_info.--mod-init {
display: grid;
grid-template-columns: 1fr 2fr;
}
.modal.--photo-prod-mobile .product_info.--mod-init > *:not(.product_icon){
grid-column: ~"2/3";
}
.modal.--photo-prod-mobile .product_info.--mod-init > .product_icon{
grid-row: ~"1/-1"
}
}
`}
</style>

23
src/features/photoModule/PhotoGenericOptions.jsx
View File

@@ -6,6 +6,8 @@ import {
FormGroup,
Switch,
} from "@mui/material";
import ColorPickerInput from "../../ui/ColorPickerInput";
import { DEFAULT_COLOR_PALLETE } from "../../constants/photo";
function PhotoGenericOptions() {
const setField = useSharedState((state) => state.setField);
@@ -15,6 +17,8 @@ function PhotoGenericOptions() {
const labels = useSharedState((state) => state.labels);
const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket);
const bgColor = useSharedState((state) => state.bgColor);
const textColor = useSharedState((state) => state.textColor);
const handleUrlRadioChange = (e) => {
toggleField("isRWD");
@@ -67,6 +71,25 @@ function PhotoGenericOptions() {
<Divider sx={{ borderColor: "#ccc" }} />
<div
style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}
>
<ColorPickerInput
color={bgColor}
onChange={(newColor) => setField("bgColor", newColor)}
label="Kolor Tła"
palette={DEFAULT_COLOR_PALLETE}
/>
<ColorPickerInput
color={textColor}
onChange={(newColor) => setField("textColor", newColor)}
label="Kolor Tekstu"
palette={DEFAULT_COLOR_PALLETE}
/>
</div>
<Divider sx={{ borderColor: "#ccc" }} />
<Alert severity="warning">
Uwaga!
<br />

24
src/main.jsx
View File

@@ -1,28 +1,26 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ThemeProvider, CssBaseline } from '@mui/material';
import { BrowserRouter } from 'react-router-dom';
import theme from './styles/theme';
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider, CssBaseline } from "@mui/material";
import { BrowserRouter } from "react-router-dom";
import theme from "./styles/theme";
// import ThemeCssVars from './styles/ThemeCssVars';
const BASENAME = import.meta.env.VITE_PUBLIC_URL || "/";
const path = window.location.pathname;
if (path.endsWith('index.html')) {
if (path.endsWith("index.html")) {
window.location.replace(BASENAME);
}
ReactDOM.createRoot(document.getElementById('root')).render(
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter basename={BASENAME}>
<ThemeProvider theme={theme}>
<CssBaseline/>
<CssBaseline />
{/* <ThemeCssVars/> */}
<App />
</ThemeProvider>
</BrowserRouter>
</React.StrictMode>
)
</React.StrictMode>,
);

7
src/store/useSharedState.js
View File

@@ -13,6 +13,10 @@ const defaultState = {
labels: false,
opinions: false,
addToBasket: false,
//colros
bgColor: "#fff",
textColor: "#060606",
};
export const useSharedState = create(
@@ -110,6 +114,9 @@ export const useSharedState = create(
addToBasket: state.addToBasket,
previewMode: state.previewMode,
isRWD: state.isRWD,
bgColor: state.bgColor,
textColor: state.textColor,
}),
},
),

71
src/ui/ColorPickerInput.jsx Normal file
View File

@@ -0,0 +1,71 @@
import { useEffect, useRef, useState } from "react";
import { BlockPicker } from "react-color";
import { Box, ButtonBase, Typography } from "@mui/material";
function ColorPickerButton({ color, onChange, label = "Color", palette = [] }) {
const [open, setOpen] = useState(false);
const wrapperRef = useRef(null);
useEffect(() => {
function handleClickOutside(e) {
if (!wrapperRef.current?.contains(e.target)) {
setOpen(false);
}
}
if (open) {
document.addEventListener("mousedown", handleClickOutside);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [open]);
return (
<Box
ref={wrapperRef}
sx={{ position: "relative", display: "inline-block" }}
>
{label && (
<Typography variant="caption" sx={{ display: "block", mb: 0.5 }}>
{label}
</Typography>
)}
<ButtonBase
onClick={() => setOpen((v) => !v)}
sx={{
width: "100%",
height: 32,
borderRadius: 1,
border: "1px solid",
borderColor: "divider",
backgroundColor: color,
}}
/>
{open && (
<Box
className="color-picker block-picker"
sx={{
position: "absolute",
top: "100%",
left: "50%",
mt: 1,
zIndex: 1300,
transform: "translateX(-50%)",
}}
>
<BlockPicker
color={color}
colors={palette}
onChange={(c) => onChange(c.hex)}
/>
</Box>
)}
</Box>
);
}
export default ColorPickerButton;