pearce-screen-cards #4
@ -10,6 +10,9 @@ type RequestApprovalProps = {
|
|||||||
unreadCount?: number;
|
unreadCount?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const RequestApprovalElement = ({
|
const RequestApprovalElement = ({
|
||||||
element,
|
element,
|
||||||
children,
|
children,
|
||||||
@ -18,12 +21,29 @@ const RequestApprovalElement = ({
|
|||||||
const { id, icon, messageId } = element;
|
const { id, icon, messageId } = element;
|
||||||
const message = useAppSelector((state) => getMessage(state, messageId));
|
const message = useAppSelector((state) => getMessage(state, messageId));
|
||||||
|
|
||||||
|
|
||||||
|
const getMessageText = () =>{
|
||||||
|
|
||||||
|
|
||||||
|
// console.log("I am being fired!")
|
||||||
|
/*@ts-ignore*/
|
||||||
|
if(message.kind == 'RequestApprovalToAttack') {
|
||||||
|
return 'Request to Attack'
|
||||||
|
|
||||||
|
}
|
||||||
|
/*@ts-ignore*/
|
||||||
|
// else if(message.kind == 'MissileToOwnshipDetected'){
|
||||||
|
// return 'Missile Incoming'
|
||||||
|
// }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const renderUnreadCount = () => {
|
const renderUnreadCount = () => {
|
||||||
if (unreadCount && unreadCount > 0) {
|
if (unreadCount && unreadCount > 0) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="rounded-full bg-white w-[35px] h-[35px] text-[#252526] flex
|
className="rounded-full bg-white w-[35px] h-[35px] text-[#252526] flex
|
||||||
items-center justify-center text-lg"
|
items-center justify-center text-lg rounded-full"
|
||||||
>
|
>
|
||||||
{unreadCount}
|
{unreadCount}
|
||||||
</div>
|
</div>
|
||||||
@ -34,12 +54,24 @@ const RequestApprovalElement = ({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
id={id}
|
id={id}
|
||||||
className="flex text-white justify-between items-center gap-4 pr-4"
|
className="flex text-white justify-between items-center gap-4 pr-4 rounded-full"
|
||||||
>
|
>
|
||||||
<div className="flex space-between items-center justify-center gap-4">
|
<div className="flex flex-col">
|
||||||
<IconElement element={icon} />
|
<div className="flex space-between items-center justify-center gap-4 rounded-full">
|
||||||
{/* @ts-ignore */}
|
<div className="flex">
|
||||||
<span>{message?.data?.target?.type}</span>
|
<IconElement element={icon} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{/* @ts-ignore */}
|
||||||
|
<span className ="text-[24px]">{message?.data?.target?.type}</span>
|
||||||
|
<div className="flex flex-col text-sm text-[#BCBCBC] text-[20px] pb-2">
|
||||||
|
<div>{getMessageText()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{renderUnreadCount()}
|
{renderUnreadCount()}
|
||||||
|
@ -247,6 +247,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
|||||||
scrollbarWidth: 'thin',
|
scrollbarWidth: 'thin',
|
||||||
scrollbarColor: '#97979D #e0e0e0',
|
scrollbarColor: '#97979D #e0e0e0',
|
||||||
scrollbarGutter: 'stable',
|
scrollbarGutter: 'stable',
|
||||||
|
overflow: 'hidden',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{convoElements.map((element, index) => {
|
{convoElements.map((element, index) => {
|
||||||
@ -262,7 +263,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
|||||||
// style for active element (element due to which the history widget is open)
|
// style for active element (element due to which the history widget is open)
|
||||||
const activeElementStyle =
|
const activeElementStyle =
|
||||||
element.id === selectedElement?.id
|
element.id === selectedElement?.id
|
||||||
? 'bg-[#444449] text-[28px] font-medium border-4 border-white'
|
? 'bg-[#444449] text-[28px] font-medium border-4 border-white p-0'
|
||||||
: '';
|
: '';
|
||||||
|
|
||||||
const numUnreadMessages =
|
const numUnreadMessages =
|
||||||
@ -272,12 +273,12 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
|||||||
<div
|
<div
|
||||||
id={element.id}
|
id={element.id}
|
||||||
key={element.id}
|
key={element.id}
|
||||||
style={{ height: LIST_ELEMENT_HEIGHT }}
|
style={{ height: LIST_ELEMENT_HEIGHT, width: 340 }}
|
||||||
className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${hoverStyle} ${activeElementStyle}`}
|
className={`text-white flex items-center justify-center p-3 rounded-xl ${hoverStyle} ${activeElementStyle}`}
|
||||||
>
|
>
|
||||||
<ListElement
|
<ListElement
|
||||||
element={element}
|
element={element}
|
||||||
outerDivStyleClass="w-full h-full"
|
outerDivStyleClass="w-full h-full px-4 rounded-full "
|
||||||
unreadCount={numUnreadMessages}
|
unreadCount={numUnreadMessages}
|
||||||
>
|
>
|
||||||
{/* Nested children here if wanted.. */}
|
{/* Nested children here if wanted.. */}
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
export const LIST_WIDGET_HEIGHT = 850;
|
export const LIST_WIDGET_HEIGHT = 850;
|
||||||
export const LIST_WIDGET_WIDTH = 300;
|
export const LIST_WIDGET_WIDTH = 345;
|
||||||
|
Loading…
Reference in New Issue
Block a user