Updates: small updates

This commit is contained in:
duckietm 2024-04-17 14:14:23 +02:00
parent f06d742c78
commit 2d7b82ab90
11 changed files with 48 additions and 20 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 294 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -12,13 +12,16 @@ export interface ButtonProps extends FlexProps
export const Button: FC<ButtonProps> = props => export const Button: FC<ButtonProps> = props =>
{ {
const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], ...rest } = props; const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], outline = false, tp = false, ...rest } = props;
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {
const newClassNames: string[] = [ 'btn' ]; const newClassNames: string[] = [ 'btn' ];
if(variant) newClassNames.push('btn-' + variant); if(outline && variant) newClassNames.push('btn-outline-' + variant)
else if (variant) newClassNames.push('btn-' + variant);
if (tp) newClassNames.push('btn-transparent');
if(size) newClassNames.push('btn-' + size); if(size) newClassNames.push('btn-' + size);
@ -29,7 +32,7 @@ export const Button: FC<ButtonProps> = props =>
if(classNames.length) newClassNames.push(...classNames); if(classNames.length) newClassNames.push(...classNames);
return newClassNames; return newClassNames;
}, [ variant, size, active, disabled, classNames ]); }, [ variant, size, active, disabled, classNames, outline ]);
return <Flex center classNames={ getClassNames } { ...rest } />; return <Flex center classNames={ getClassNames } { ...rest } />;
} }

View File

@ -3,7 +3,7 @@ import { Flex, FlexProps } from '../..';
export const NitroCardTabsView: FC<FlexProps> = props => export const NitroCardTabsView: FC<FlexProps> = props =>
{ {
const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props; const { justifyContent = 'start', gap = 1, classNames = [], children = null, ...rest } = props;
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {

View File

@ -2,10 +2,11 @@ import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react'; import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { Base } from '..'; import { Base } from '..';
import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api'; import { GetLocalStorage, WindowSaveOptions } from '../../api';
import { DraggableWindowPosition } from './DraggableWindowPosition'; import { DraggableWindowPosition } from './DraggableWindowPosition';
const CURRENT_WINDOWS: HTMLElement[] = []; const CURRENT_WINDOWS: HTMLElement[] = [];
const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
const BOUNDS_THRESHOLD_TOP: number = 0; const BOUNDS_THRESHOLD_TOP: number = 0;
const BOUNDS_THRESHOLD_LEFT: number = 0; const BOUNDS_THRESHOLD_LEFT: number = 0;
@ -138,15 +139,9 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
setOffset({ x: offsetX, y: offsetY }); setOffset({ x: offsetX, y: offsetY });
setIsDragging(false); setIsDragging(false);
if(uniqueKey !== null) if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, {
{ x: offsetX, y: offsetY });
const newStorage = { ...GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions; }, [ dragHandler, delta, offset, uniqueKey ]);
newStorage.offset = { x: offsetX, y: offsetY };
SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
}
}, [ dragHandler, delta, offset, uniqueKey ]);
const onDragMouseUp = useCallback((event: MouseEvent) => const onDragMouseUp = useCallback((event: MouseEvent) =>
{ {
@ -194,6 +189,17 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
break; break;
} }
if(uniqueKey !== null)
{
const memory = POS_MEMORY.get(uniqueKey);
if(memory)
{
offsetX = memory.x;
offsetY = memory.y;
}
}
setDelta({ x: 0, y: 0 }); setDelta({ x: 0, y: 0 });
setOffset({ x: offsetX, y: offsetY }); setOffset({ x: offsetX, y: offsetY });

View File

@ -1,4 +1,4 @@
import { FC, useMemo } from 'react'; import { FC, ReactNode, useMemo } from 'react';
import { NotificationAlertType } from '../../api'; import { NotificationAlertType } from '../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card';
@ -11,7 +11,7 @@ export interface LayoutNotificationAlertViewProps extends NitroCardViewProps
export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> = props => export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> = props =>
{ {
const { title = '', onClose = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, ...rest } = props; const { title = '', onClose = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, options = null, ...rest } = props;
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {
@ -30,6 +30,7 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
<NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={ 0 }> <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={ 0 }>
{ children } { children }
</NitroCardContentView> </NitroCardContentView>
{ options }
</NitroCardView> </NitroCardView>
); );
} }

View File

@ -124,9 +124,10 @@
position: relative; position: relative;
padding-left:38px; padding-left:38px;
text-align: left; text-align: left;
pointer-events: all;
&.friend-bar-item-active { &.friend-bar-item-active {
margin-bottom:21px;
} }
&.friend-bar-search-item-active { &.friend-bar-search-item-active {
@ -177,6 +178,23 @@
} }
} }
.friends-myinfo {
> :first-child {
border-bottom: 1px dashed white;
}
.myinfo-avatar {
height: 60px;
width: 60px;
display: flex;
justify-content: center;
.avatar-image {
margin-top: -17px;
}
}
}
.nitro-friends-messenger { .nitro-friends-messenger {
width: $messenger-width; width: $messenger-width;
height: $messenger-height; height: $messenger-height;

View File

@ -49,10 +49,10 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
return ( return (
<div ref={ elementRef } className={ 'btn btn-friendsgensuccess friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }> <div ref={ elementRef } className={ 'btn btn-friendsgensuccess friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }> <div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
{ (friend.id > 0) && <LayoutAvatarImageView headOnly={ !isVisible } figure={ friend.figure } direction={ 2 } /> } { (friend.id > 0) && <LayoutAvatarImageView headOnly={ !isVisible } figure={ friend.figure } direction={ isVisible ? 2 : 3 } /> }
<LayoutAvatarImageView headOnly={true} figure={ <LayoutAvatarImageView headOnly={ !isVisible } figure={
friend.id > 0 ? friend.figure : (friend.id <= 0 && friend.figure === 'ADM') ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : friend.figure friend.id > 0 ? friend.figure : (friend.id <= 0 && friend.figure === 'ADM') ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : friend.figure
} isgroup={friend.id <= 0 ? 1 : 0} direction={friend.id > 0 ? 2 : 3} /> } isgroup={friend.id <= 0 ? 1 : 0} direction={isVisible ? 2 : 3} />
</div> </div>
<div className="text-truncate">{ friend.name }</div> <div className="text-truncate">{ friend.name }</div>