taking out the fancy conditional opacities...not clean for me

This commit is contained in:
talksik
2022-05-19 17:21:24 -05:00
parent bec5a4bc0a
commit 781c6db7d9
5 changed files with 35 additions and 38 deletions
+1 -1
View File
@@ -8,7 +8,7 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",
"workbench.colorTheme": "Default Light+",
"javascript.format.semicolons": "insert",
"window.zoomLevel": 2
"window.zoomLevel": 1
// "eslint.workingDirectories": ["./packages/desktop"]
}
@@ -118,8 +118,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
);
// hacking little bug!
if (localPeerForMasterAndMe && !localPeerForMasterAndMe.peer.destroyed)
localPeerForMasterAndMe.peer.signal(res.simplePeerSignal);
if (localPeerForMasterAndMe) localPeerForMasterAndMe.peer.signal(res.simplePeerSignal);
});
});
@@ -158,34 +158,36 @@ export default function LineDetails() {
);
})}
</div>
</div>
{/* canvas action buttons */}
<div className="flex flex-row gap-3 p-10 justify-end items-center ">
<Tooltip
placement="left"
title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
>
<button
className={`p-2 flex justify-center items-center shadow-lg
{/* canvas action buttons */}
<div className="absolute right-5 bottom-5 flex flex-row gap-3 p-10 justify-end items-center ">
<Tooltip
placement="left"
title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
>
<button
className={`p-2 flex justify-center items-center shadow-lg
hover:scale-105 transition-all animate-pulse ${
isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
}`}
onClick={() =>
isUserToggleTuned
? handleUpdateLineMemberState(
selectedLine.lineDetails._id.toString(),
LineMemberState.INBOX,
)
: handleUpdateLineMemberState(
selectedLine.lineDetails._id.toString(),
LineMemberState.TUNED,
)
}
>
<FiActivity className="text-md" />
</button>
</Tooltip>
onClick={() =>
isUserToggleTuned
? handleUpdateLineMemberState(
selectedLine.lineDetails._id.toString(),
LineMemberState.INBOX,
)
: handleUpdateLineMemberState(
selectedLine.lineDetails._id.toString(),
LineMemberState.TUNED,
)
}
>
<FiActivity className="text-md" />
</button>
</Tooltip>
<Tooltip title={'Press and hold ` or click to join the room'}>
<button
className={`p-3 flex justify-center items-center shadow-2xl
hover:scale-105 transition-all ${
@@ -194,7 +196,7 @@ export default function LineDetails() {
>
<FiSun className="text-lg" />
</button>
</div>
</Tooltip>
</div>
</div>
);
@@ -134,14 +134,8 @@ export default React.memo(function LineRow({
role={'presentation'}
className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200
cursor-pointer transition-all relative z-50
${isUserToggleTuned && isWindowFocused && ' bg-gray-100 shadow-2xl'}
${isUserToggleTuned && !isWindowFocused && ' bg-transparent '}
${isSelected && isWindowFocused && ' bg-gray-200 shadow-2xl '}
${isSelected && !isWindowFocused && ' bg-transparent '}
${desktopMode === 'overlayOnly' && !isWindowFocused && ' opacity-20 '}
${!isWindowFocused && desktopMode === 'overlayOnly' && !isSelected && ' bg-transparent '}`}
${isUserToggleTuned && ' bg-gray-100 shadow-2xl'}`}
>
{/* channel picture */}
{profilePictures && (
@@ -67,14 +67,16 @@ export default function SidePanel() {
return (
<div
className={`flex flex-col w-[350px] group
border-r border-r-gray-200 shadow-xl z-20 ${desktopMode === 'mainApp' && ' bg-white '}`}
border-r border-r-gray-200 shadow-xl z-20 bg-white
${!isWindowFocused && desktopMode === 'overlayOnly' && ' opacity-20 '}`}
>
{/* user control panel */}
<div
className={`bg-gray-100 flex flex-row items-center gap-2
p-4 pb-2 z-50 w-full titlebar ${
desktopMode === 'overlayOnly' && 'border-b border-b-gray-200'
} ${!isWindowFocused && desktopMode === 'overlayOnly' && ' opacity-20 '}
}
`}
>
<button onClick={handleToggleDesktopMode} className={'mr-auto animate-pulse'}>