info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-27 19:20:12 +02:00
Code Issues Releases Wiki Activity

feat: implement todo and resource button (#6055)

Browse Source 
* feat: implement todo and resource button

* feat: add hover color
This commit is contained in:
Arik Chakma
2024-07-08 17:03:58 +06:00
committed by GitHub
parent 24f9e0c6ce
commit 9154a57eb9
3 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.astro/settings.json
View File

@@ -3,6 +3,6 @@
"enabled": false "enabled": false
}, },
"_variables": { "_variables": {
"lastUpdateCheck": 1719080230711 "lastUpdateCheck": 1720119515249
} }
} }

17
src/components/EditorRoadmap/EditorRoadmapRenderer.css
View File

@@ -7,21 +7,24 @@ svg text tspan {
svg > g[data-type='topic'], svg > g[data-type='topic'],
svg > g[data-type='subtopic'], svg > g[data-type='subtopic'],
svg g[data-type='link-item'], svg g[data-type='link-item'],
svg > g[data-type='button'] { svg > g[data-type='button'],
svg > g[data-type='resourceButton'],
svg > g[data-type='todo-checkbox'],
svg > g[data-type='todo'] {
cursor: pointer; cursor: pointer;
} }
svg > g[data-type='topic']:hover > rect { svg > g[data-type='topic']:hover > rect {
fill: #d6d700; fill: var(--hover-color);
} }
svg > g[data-type='subtopic']:hover > rect { svg > g[data-type='subtopic']:hover > rect {
fill: #f3c950; fill: var(--hover-color);
} }
svg > g[data-type='button']:hover { svg g[data-type='button']:hover,
opacity: 0.8; svg g[data-type='link-item']:hover,
} svg g[data-type='resourceButton']:hover,
svg g[data-type='link-item']:hover { svg g[data-type='todo-checkbox']:hover {
opacity: 0.8; opacity: 0.8;
} }

30
src/components/EditorRoadmap/EditorRoadmapRenderer.tsx
View File

@@ -45,7 +45,15 @@ function getNodeDetails(svgElement: SVGElement): RoadmapNodeDetails | null {
return { nodeId, nodeType, targetGroup, title }; return { nodeId, nodeType, targetGroup, title };
} }
const allowedNodeTypes = ['topic', 'subtopic', 'button', 'link-item']; const allowedNodeTypes = [
'topic',
'subtopic',
'button',
'link-item',
'resourceButton',
'todo',
'todo-checkbox',
];
export function EditorRoadmapRenderer(props: RoadmapRendererProps) { export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
const { resourceId, nodes = [], edges = [] } = props; const { resourceId, nodes = [], edges = [] } = props;
@@ -90,7 +98,11 @@ export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
return; return;
} }
if (nodeType === 'button' || nodeType === 'link-item') { if (
nodeType === 'button' ||
nodeType === 'link-item' ||
nodeType === 'resourceButton'
) {
const link = targetGroup?.dataset?.link || ''; const link = targetGroup?.dataset?.link || '';
const isExternalLink = link.startsWith('http'); const isExternalLink = link.startsWith('http');
if (isExternalLink) { if (isExternalLink) {
@@ -104,6 +116,20 @@ export function EditorRoadmapRenderer(props: RoadmapRendererProps) {
const isCurrentStatusLearning = targetGroup?.classList.contains('learning'); const isCurrentStatusLearning = targetGroup?.classList.contains('learning');
const isCurrentStatusSkipped = targetGroup?.classList.contains('skipped'); const isCurrentStatusSkipped = targetGroup?.classList.contains('skipped');
if (nodeType === 'todo-checkbox') {
e.preventDefault();
if (!isLoggedIn()) {
showLoginPopup();
return;
}
const newStatus = targetGroup?.classList.contains('done')
? 'pending'
: 'done';
updateTopicStatus(nodeId, newStatus);
return;
}
if (e.shiftKey) { if (e.shiftKey) {
e.preventDefault(); e.preventDefault();
if (!isLoggedIn()) { if (!isLoggedIn()) {