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

Highlight user personal progress

Browse Source
This commit is contained in:
Kamran Ahmed
2023-07-26 15:41:39 +01:00
parent 076b866430
commit 14f9ad9530
3 changed files with 4 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/TeamProgress/GroupRoadmapItem.tsx
View File

@@ -59,7 +59,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
return ( return (
<button <button
className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none`} className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none ${isMyProgress ? 'border-green-500 hover:border-green-600' : ''}`}
key={member?.member._id} key={member?.member._id}
onClick={() => { onClick={() => {
setDetailResourceId(member?.progress?.resourceId!); setDetailResourceId(member?.progress?.resourceId!);
@@ -81,11 +81,6 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
/> />
<span className="inline-grid grid-cols-[auto,32px] items-center"> <span className="inline-grid grid-cols-[auto,32px] items-center">
<span className="truncate mr-[5px]">{member?.member?.name}</span> <span className="truncate mr-[5px]">{member?.member?.name}</span>
{isMyProgress && (
<span className="rounded-md bg-red-500 py-0.25 text-center text-[11px] text-white mr-[5px]">
You
</span>
)}
</span> </span>
</span> </span>
<span className="shrink-0 text-xs text-gray-400"> <span className="shrink-0 text-xs text-gray-400">
@@ -93,7 +88,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
</span> </span>
</span> </span>
<span <span
className="absolute inset-0 bg-gray-100 group-hover:bg-gray-200" className={`absolute inset-0 ${isMyProgress ? 'bg-green-100 group-hover:bg-green-200' : 'bg-gray-100 group-hover:bg-gray-200'}`}
style={{ style={{
width: `${ width: `${
(member?.progress?.done / member?.progress?.total) * 100 (member?.progress?.done / member?.progress?.total) * 100

2
src/components/TeamProgress/MemberProgressItem.tsx
View File

@@ -52,7 +52,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
{isMyProgress && ( {isMyProgress && (
<div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5"> <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
<h3 className="truncate font-medium">{member.name}</h3> <h3 className="truncate font-medium">{member.name}</h3>
<span className="rounded-md bg-red-500 text-center py-0.5 text-xs text-white"> <span className="rounded-md bg-red-500 py-0.5 px-1 text-xs text-white">
You You
</span> </span>
</div> </div>

4
src/components/TeamProgress/TeamProgressPage.tsx
View File

@@ -7,9 +7,7 @@ import { useToast } from '../../hooks/use-toast';
import { useStore } from '@nanostores/preact'; import { useStore } from '@nanostores/preact';
import { $currentTeam } from '../../stores/team'; import { $currentTeam } from '../../stores/team';
import { GroupRoadmapItem } from './GroupRoadmapItem'; import { GroupRoadmapItem } from './GroupRoadmapItem';
import { setUrlParams } from '../../lib/browser'; import { getUrlParams, setUrlParams } from '../../lib/browser';
import { getUrlParams } from '../../lib/browser';
import { $toastMessage } from '../../stores/toast';
import { useAuth } from '../../hooks/use-auth'; import { useAuth } from '../../hooks/use-auth';
export type UserProgress = { export type UserProgress = {