Skip to content

Commit 2b6bbe4

Browse files
guigui42guigui42
committed
more theme options
1 parent 17bc799 commit 2b6bbe4

17 files changed

+111
-32
lines changed

‎demos/template1.json

+9-7
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,30 @@
22
"theme": {
33
"color": "#ffffff",
44
"background": "#111827",
5+
"brand-color": "#15384e",
56
"font": "Arial",
67
"hposition": "center",
7-
"vposition": "top"
8+
"vposition": "top",
9+
"overlaysize": "140%"
810
},
911
"product": {
10-
"name": "Product Name",
11-
"logourl": "http://www.example.com/logo.png"
12+
"name": "Planet Express",
13+
"logourl": "https://www.graphicdesignforum.com/uploads/default/optimized/2X/a/a03dd3a60bb57b4071d9502290849bda1cbae5cc_2_690x649.png"
1214
},
1315
"customer": {
14-
"name": "ACME",
15-
"logourl": "http://www.example.com/logo.png"
16+
"name": "Dunder Mifflin",
17+
"logourl": "https://www.bettercloud.com/wp-content/uploads/sites/3/2013/07/DunderMifflinLogo.jpg"
1618
},
1719
"personnas": {
1820
"CEO": {
1921
"name": "John Doe",
2022
"title": "CEO",
21-
"pictureurl": ""
23+
"pictureurl": "mickael.jpg"
2224
},
2325
"CFO": {
2426
"name": "Jane Doe",
2527
"title": "CFO",
26-
"pictureurl": ""
28+
"pictureurl": "pam.jpg"
2729
}
2830
},
2931
"steps": [

‎js/content/overlay/content.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ export function createOverlayContent(persona, theme) {
88
pointer-events: none;
99
`;
1010

11+
// Get full URL for picture from extension resources
12+
const pictureUrl = persona.pictureurl ?
13+
chrome.runtime.getURL(`pictures/${persona.pictureurl}`) : null;
14+
1115
content.innerHTML = `
12-
${persona.pictureurl ?
13-
`<img src="${persona.pictureurl}" alt="${persona.name}" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover;">` :
16+
${pictureUrl ?
17+
`<img src="${pictureUrl}" alt="${persona.name}" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover;">` :
1418
`<div style="width: 48px; height: 48px; border-radius: 50%; background-color: ${theme.color}20; display: flex; align-items: center; justify-content: center; color: ${theme.color};">
1519
${persona.name.charAt(0)}
1620
</div>`

‎js/content/overlay/drag.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ export function initializeDrag(overlay, theme) {
66
let initialX;
77
let initialY;
88

9+
// Calculate scale from theme
10+
const scale = theme.overlaysize.includes('%') ?
11+
Math.min(parseInt(theme.overlaysize) / 100, 2) : // Convert percentage to scale, max 200%
12+
parseInt(theme.overlaysize) / 100; // Convert direct number to scale
13+
914
const dragStart = (e) => {
1015
const rect = overlay.getBoundingClientRect();
1116
if (e.target === overlay) {
@@ -25,12 +30,17 @@ export function initializeDrag(overlay, theme) {
2530
const viewportHeight = window.innerHeight;
2631
const rect = overlay.getBoundingClientRect();
2732

28-
currentX = Math.min(Math.max(0, currentX), viewportWidth - rect.width);
29-
currentY = Math.min(Math.max(0, currentY), viewportHeight - rect.height);
33+
// Adjust boundaries considering scale
34+
const scaledWidth = rect.width / scale;
35+
const scaledHeight = rect.height / scale;
36+
37+
currentX = Math.min(Math.max(0, currentX), viewportWidth - scaledWidth);
38+
currentY = Math.min(Math.max(0, currentY), viewportHeight - scaledHeight);
3039

3140
overlay.style.left = `${currentX}px`;
3241
overlay.style.top = `${currentY}px`;
33-
overlay.style.transform = 'none';
42+
overlay.style.transform = `scale(${scale})`;
43+
overlay.style.transformOrigin = '0 0';
3444
}
3545
};
3646

‎js/content/overlay/styles.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,19 @@ export function generateOverlayStyles(theme, hposition, vposition) {
1616
const h = positions.horizontal[hposition] || positions.horizontal.center;
1717
const v = positions.vertical[vposition] || positions.vertical.top;
1818

19+
// Handle the overlaysize from theme as scale factor
20+
const scale = theme.overlaysize.includes('%') ?
21+
Math.min(parseInt(theme.overlaysize) / 100, 2) : // Convert percentage to scale, max 200%
22+
parseInt(theme.overlaysize) / 100; // Convert direct number to scale
23+
24+
// Base width for the overlay before scaling
25+
const baseWidth = '300px';
26+
1927
return `
2028
position: fixed;
2129
${h.position}
2230
${v.position}
23-
${h.transform || v.transform ? `transform: ${[h.transform, v.transform].filter(Boolean).join(' ')};` : ''}
31+
${h.transform || v.transform ? `transform: ${[h.transform, v.transform, `scale(${scale})`].filter(Boolean).join(' ')};` : `transform: scale(${scale});`}
2432
background-color: ${theme.background};
2533
color: ${theme.color};
2634
font-family: ${theme.font}, sans-serif;
@@ -31,9 +39,11 @@ export function generateOverlayStyles(theme, hposition, vposition) {
3139
align-items: center;
3240
gap: 12px;
3341
z-index: 9999;
34-
width: 300px;
42+
width: ${baseWidth};
3543
cursor: move;
3644
user-select: none;
3745
transition: transform 0.3s ease-out;
46+
transform-origin: ${hposition === 'right' ? 'right' : hposition === 'left' ? 'left' : 'center'}
47+
${vposition === 'bottom' ? 'bottom' : vposition === 'top' ? 'top' : 'center'};
3848
`;
3949
}

‎js/popup/overview.js

+70-17
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,40 @@
1+
// Helper function to convert hex to HSL
2+
function hexToHSL(hex) {
3+
// Remove the # if present
4+
hex = hex.replace('#', '');
5+
6+
// Convert hex to RGB
7+
const r = parseInt(hex.substring(0, 2), 16) / 255;
8+
const g = parseInt(hex.substring(2, 4), 16) / 255;
9+
const b = parseInt(hex.substring(4, 6), 16) / 255;
10+
11+
// Find greatest and smallest RGB values
12+
const max = Math.max(r, g, b);
13+
const min = Math.min(r, g, b);
14+
15+
let h, s, l = (max + min) / 2;
16+
17+
if (max === min) {
18+
h = s = 0;
19+
} else {
20+
const d = max - min;
21+
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
22+
23+
switch (max) {
24+
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
25+
case g: h = (b - r) / d + 2; break;
26+
case b: h = (r - g) / d + 4; break;
27+
}
28+
h /= 6;
29+
}
30+
31+
return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
32+
}
33+
134
export function generateOverviewHTML(demoData) {
35+
36+
const hslColor = hexToHSL(demoData.theme["brand-color"]);
37+
238
return `
339
<!DOCTYPE html>
440
<html>
@@ -10,6 +46,11 @@ export function generateOverviewHTML(demoData) {
1046
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet">
1147
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1248
<style>
49+
:root {
50+
--p: ${hslColor};
51+
--pf: ${hslColor};
52+
--pc: 0 0% 100%;
53+
}
1354
body {
1455
min-height: 100vh;
1556
display: flex;
@@ -68,9 +109,9 @@ export function generateOverviewHTML(demoData) {
68109
<div class="hero-content text-center px-4">
69110
<div>
70111
<div class="flex justify-center items-center gap-4 md:gap-8 mb-6">
71-
<img src="${demoData.product.logourl}" alt="${demoData.product.name}" class="h-8 md:h-12">
112+
<img src="${demoData.product.logourl}" alt="${demoData.product.name}" class="h-16 md:h-24">
72113
<div class="divider divider-horizontal">x</div>
73-
<img src="${demoData.customer.logourl}" alt="${demoData.customer.name}" class="h-8 md:h-12">
114+
<img src="${demoData.customer.logourl}" alt="${demoData.customer.name}" class="h-16 md:h-24">
74115
</div>
75116
<h1 class="text-3xl md:text-5xl font-bold mb-2">Demo Journey</h1>
76117
<p class="text-lg md:text-xl opacity-75">Follow the story step by step</p>
@@ -108,6 +149,8 @@ export function generateOverviewHTML(demoData) {
108149
}
109150

110151
export function generatePersonasHTML(demoData) {
152+
const hslColor = hexToHSL(demoData.theme["brand-color"]);
153+
111154
return `
112155
<!DOCTYPE html>
113156
<html>
@@ -118,6 +161,11 @@ export function generatePersonasHTML(demoData) {
118161
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
119162
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet">
120163
<style>
164+
:root {
165+
--p: ${hslColor};
166+
--pf: ${hslColor};
167+
--pc: 0 0% 100%;
168+
}
121169
body {
122170
min-height: 100vh;
123171
display: flex;
@@ -147,9 +195,9 @@ export function generatePersonasHTML(demoData) {
147195
<div class="hero-content text-center">
148196
<div>
149197
<div class="flex justify-center items-center gap-8 mb-6">
150-
<img src="${demoData.product.logourl}" alt="${demoData.product.name}" class="h-12">
198+
<img src="${demoData.product.logourl}" alt="${demoData.product.name}" class="h-16 md:h-24">
151199
<div class="divider divider-horizontal">x</div>
152-
<img src="${demoData.customer.logourl}" alt="${demoData.customer.name}" class="h-12">
200+
<img src="${demoData.customer.logourl}" alt="${demoData.customer.name}" class="h-16 md:h-24">
153201
</div>
154202
<h1 class="text-5xl font-bold mb-2">Meet the Team</h1>
155203
<p class="text-xl opacity-75">The key players in this demo story</p>
@@ -159,22 +207,27 @@ export function generatePersonasHTML(demoData) {
159207
160208
<main class="container mx-auto px-4 pb-16">
161209
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
162-
${Object.entries(demoData.personnas).map(([key, persona]) => `
163-
<div class="persona-card card bg-base-100 shadow-xl hover:shadow-2xl">
164-
<div class="card-body items-center text-center p-8">
165-
<div class="avatar large placeholder mb-4">
166-
<div class="bg-primary text-primary-content rounded-full w-24 h-24 ring ring-primary ring-offset-2">
167-
${persona.pictureurl ?
168-
`<img src="${persona.pictureurl}" alt="${persona.name}" class="mask mask-circle">` :
169-
`<span class="text-3xl font-bold">${persona.name.charAt(0)}</span>`
170-
}
210+
${Object.entries(demoData.personnas).map(([key, persona]) => {
211+
const pictureUrl = persona.pictureurl ?
212+
chrome.runtime.getURL(`pictures/${persona.pictureurl}`) : null;
213+
214+
return `
215+
<div class="persona-card card bg-base-100 shadow-xl hover:shadow-2xl">
216+
<div class="card-body items-center text-center p-8">
217+
<div class="avatar large placeholder mb-4">
218+
<div class="bg-primary text-primary-content rounded-full w-24 h-24 ring ring-primary ring-offset-2">
219+
${pictureUrl ?
220+
`<img src="${pictureUrl}" alt="${persona.name}" class="mask mask-circle">` :
221+
`<span class="text-3xl font-bold">${persona.name.charAt(0)}</span>`
222+
}
223+
</div>
171224
</div>
225+
<h2 class="card-title text-2xl mb-1">${persona.name}</h2>
226+
<div class="badge badge-primary badge-lg mb-4">${persona.title}</div>
172227
</div>
173-
<h2 class="card-title text-2xl mb-1">${persona.name}</h2>
174-
<div class="badge badge-primary badge-lg mb-4">${persona.title}</div>
175228
</div>
176-
</div>
177-
`).join('')}
229+
`;
230+
}).join('')}
178231
</div>
179232
</main>
180233

‎logos/Dunder-Mifflin.jpg

134 KB
Loading

‎manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
],
5252
"web_accessible_resources": [
5353
{
54-
"resources": ["demos/*", "logos/*", "profiles/*", "flow/*", "content.js"],
54+
"resources": ["pictures/*","demos/*", "logos/*", "profiles/*", "flow/*", "content.js"],
5555
"matches": ["http://*/*", "https://*/*"]
5656
}
5757
],

‎pictures/dwight.jpg

145 KB
Loading

‎pictures/id_clara.png

18.1 KB
Loading

‎pictures/id_clark.png

27.1 KB
Loading

‎pictures/id_daniel.png

22.2 KB
Loading

‎pictures/id_patrick.png

64.4 KB
Loading

‎pictures/id_thomas.png

46.5 KB
Loading

‎pictures/id_vicky.png

63.3 KB
Loading

‎pictures/kevin.jpg

93.7 KB
Loading

‎pictures/mickael.jpg

177 KB
Loading

‎pictures/pam.jpg

98.8 KB
Loading

0 commit comments

Comments
 (0)