nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-31 10:22:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update cards

Browse Source
This commit is contained in:
Bill 2021-06-23 05:34:07 -04:00
parent 1bd4c94680
commit 41889f970c
32 changed files with 98 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/bootstrap/_variables.scss
View File

@ -493,7 +493,7 @@ $headings-margin-bottom: $spacer / 2 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-line-height: unset !default;
$headings-color: null !default;
// scss-docs-end headings-variables

5
src/layout/card/NitroCardView.scss
View File

@ -1,13 +1,12 @@
$nitro-card-header-height: 33px;
$nitro-card-tabs-height: 33px;
$nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
.nitro-card {
pointer-events: all;
@import './accordion/NitroCardAccordionView';
@import './content/NitroCardContentView';
@import './header/NitroCardHeaderView';
@import './simple-header/NitroCardSimpleHeaderView';
@import './tabs/NitroCardTabsView';
}
@ -60,5 +59,3 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
filter: brightness(0.8);
}
}
@import './accordion/NitroCardAccordionView';

21
src/layout/card/NitroCardView.tsx
View File

@ -8,19 +8,14 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
const { className = '', disableDrag = false, simple = false, theme = 'primary', children = null } = props;
return (
<NitroCardContextProvider value={ { theme } }>
{ simple &&
<div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
{ children }
</div> }
{ !simple &&
<div className="nitro-card-responsive">
<DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
<div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
{ children }
</div>
</DraggableWindow>
</div> }
<NitroCardContextProvider value={ { theme, simple } }>
<div className="nitro-card-responsive">
<DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
<div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
{ children }
</div>
</DraggableWindow>
</div>
</NitroCardContextProvider>
);
}

3
src/layout/card/accordion/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './item';
export * from './NitroCardAccordionView';
export * from './NitroCardAccordionView.types';

2
src/layout/card/accordion/item/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './NitroCardAccordionItemView';
export * from './NitroCardAccordionItemView.types';

5
src/layout/card/content/NitroCardContentView.scss
View File

@ -1,6 +1,11 @@
.content-area {
padding-top: $container-padding-x;
padding-bottom: $container-padding-x;
&.simple {
padding-left: ($container-padding-x + 25px);
padding-right: ($container-padding-x + 25px);
}
}
@include media-breakpoint-down(lg) {

8
src/layout/card/content/NitroCardContentView.tsx
View File

@ -1,13 +1,15 @@
import { FC } from 'react';
import { useNitroCardContext } from '../context';
import { NitroCardContentViewProps } from './NitroCardContextView.types';
export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
{
const { className = null } = props;
const { className = null, children = null } = props;
const { simple = false } = useNitroCardContext();
return (
<div className={ 'container-fluid bg-light content-area ' + className }>
{ props.children }
<div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` }>
{ children }
</div>
);
}

3
src/layout/card/context/NitroCardContext.tsx
View File

@ -2,7 +2,8 @@ import { createContext, FC, useContext } from 'react';
import { INitroCardContext, NitroCardContextProps } from './NitroCardContext.types';
const NitroCardContext = createContext<INitroCardContext>({
theme: null
theme: null,
simple: false
});
export const NitroCardContextProvider: FC<NitroCardContextProps> = props =>

1
src/layout/card/context/NitroCardContext.types.ts
View File

@ -3,6 +3,7 @@ import { ProviderProps } from 'react';
export interface INitroCardContext
{
theme: string;
simple: boolean;
}
export interface NitroCardContextProps extends ProviderProps<INitroCardContext>

2
src/layout/card/context/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './NitroCardContext';
export * from './NitroCardContext.types';

16
src/layout/card/header/NitroCardHeaderView.scss
View File

@ -1,4 +1,16 @@
.nitro-card-header {
min-height: $nitro-card-header-height;
max-height: $nitro-card-header-height;
min-height: 33px;
max-height: 33px;
&.simple-header {
min-height: 28px;
max-height: 28px;
}
.bg-tertiary-split {
border: 2px solid darken($quaternary, 4);
box-shadow: 0 0 0 2px $white;
width: 100%;
margin: 0 25px;
}
}

20
src/layout/card/header/NitroCardHeaderView.tsx
View File

@ -5,10 +5,26 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
{
const { headerText = null, onCloseClick = null } = props;
const { theme } = useNitroCardContext();
const { simple = false } = useNitroCardContext();
if(simple)
{
return (
<div className="container-fluid bg-light">
<div className="row nitro-card-header simple-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div>
<div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
<i className="fas fa-times" />
</div>
</div>
</div>
</div>
);
}
return (
<div className={ `drag-handler container-fluid bg-${ theme }` }>
<div className="drag-handler container-fluid bg-primary">
<div className="row nitro-card-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h4 m-0 text-white text-shadow">{ headerText }</div>

2
src/layout/card/index.ts
View File

@ -1,4 +1,6 @@
export * from './accordion';
export * from './content';
export * from './context';
export * from './header';
export * from './NitroCardView';
export * from './NitroCardView.types';

11
src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
View File

@ -1,11 +0,0 @@
.nitro-card-header {
min-height: $nitro-card-header-height;
max-height: $nitro-card-header-height;
.bg-tertiary-split {
border: 2px solid darken($quaternary, 4);
box-shadow: 0 0 0 2px $white;
width: 100%;
margin: 0 30px;
}
}

20
src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
View File

@ -1,20 +0,0 @@
import { FC } from 'react';
import { NitroCardSimpleHeaderViewProps } from './NitroCardSimpleHeaderView.types';
export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = props =>
{
const { headerText = null, onCloseClick = null } = props;
return (
<div className='container-fluid bg-light'>
<div className="row nitro-card-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom px-2 py-1 drag-handler">{ headerText }</div>
<div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
<i className="fas fa-times" />
</div>
</div>
</div>
</div>
);
}

7
src/layout/card/simple-header/NitroCardSimpleHeaderView.types.ts
View File

@ -1,7 +0,0 @@
import { MouseEvent } from 'react';
export interface NitroCardSimpleHeaderViewProps
{
headerText: string;
onCloseClick: (event: MouseEvent) => void;
}

2
src/layout/card/simple-header/index.ts
View File

@ -1,2 +0,0 @@
export * from './NitroCardSimpleHeaderView';
export * from './NitroCardSimpleHeaderView.types';

2
src/layout/draggable-window/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './DraggableWindow';
export * from './DraggableWindow.types';

4
src/layout/index.ts
View File

@ -1,2 +1,4 @@
export * from './card';
export * from './loading-spinner/LoadingSpinnerView';
export * from './draggable-window';
export * from './loading-spinner';
export * from './transitions';

1
src/layout/loading-spinner/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './LoadingSpinnerView';

3
src/layout/transitions/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './TransitionAnimation';
export * from './TransitionAnimation.types';
export * from './TransitionAnimationStyles';

4
src/views/friend-list/FriendListView.tsx
View File

@ -4,9 +4,7 @@ import { createPortal } from 'react-dom';
import { FriendListEvent } from '../../events';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { NitroCardHeaderView, NitroCardView } from '../../layout';
import { NitroCardAccordionItemView } from '../../layout/card/accordion/item/NitroCardAccordionItemView';
import { NitroCardAccordionView } from '../../layout/card/accordion/NitroCardAccordionView';
import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardHeaderView, NitroCardView } from '../../layout';
import { LocalizeText } from '../../utils/LocalizeText';
import { FriendListContextProvider } from './context/FriendListContext';
import { FriendListMessageHandler } from './FriendListMessageHandler';

7
src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
import { BroadcastMessageViewProps } from './BroadcastMessageView.types';
@ -19,8 +18,8 @@ export const BroadcastMessageView: FC<BroadcastMessageViewProps> = props =>
);
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardView className="nitro-notification" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>

7
src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
import { HotelWillShutdownViewProps } from './HotelWillShutdownView.types';
@ -19,8 +18,8 @@ export const HotelWillShutdownView: FC<HotelWillShutdownViewProps> = props =>
);
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardView className="nitro-notification" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>

7
src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
import { ModeratorMessageViewProps } from './ModeratorMessageView.types';
@ -24,8 +23,8 @@ export const ModeratorMessageView: FC<ModeratorMessageViewProps> = props =>
);
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardView className="nitro-notification" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>

7
src/views/notification-center/views/motd/MOTDView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
import { MOTDViewProps } from './MOTDView.types';
@ -22,8 +21,8 @@ export const MOTDView: FC<MOTDViewProps> = props =>
);
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardView className="nitro-notification" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>

8
src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx
View File

@ -2,9 +2,7 @@ import { RoomWidgetCameraPublishComposer, RoomWidgetCameraPublishedEvent, RoomWi
import { FC, useCallback, useState } from 'react';
import { GetRoomCameraWidgetManager } from '../../../../../../api/nitro/camera/GetRoomCameraWidgetManager';
import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages/message-event';
import { NitroCardContentView } from '../../../../../../layout/card/content/NitroCardContentView';
import { NitroCardView } from '../../../../../../layout/card/NitroCardView';
import { NitroCardSimpleHeaderView } from '../../../../../../layout/card/simple-header/NitroCardSimpleHeaderView';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
import { useCameraWidgetContext } from '../../context/CameraWidgetContext';
@ -72,8 +70,8 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
if(!price) return null;
return (
<NitroCardView className="nitro-camera-checkout">
<NitroCardSimpleHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
<NitroCardView className="nitro-camera-checkout" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
<NitroCardContentView>
<div className="picture-preview border mb-2" style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }></div>
<div className="bg-muted rounded p-2 text-black mb-2 d-flex justify-content-between align-items-center">

6
src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx
View File

@ -2,11 +2,7 @@ import classNames from 'classnames';
import { RoomCameraWidgetSelectedEffect } from 'nitro-renderer/src/nitro/camera/RoomCameraWidgetSelectedEffect';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetRoomCameraWidgetManager } from '../../../../../../api';
import { NitroCardContentView } from '../../../../../../layout/card/content/NitroCardContentView';
import { NitroCardHeaderView } from '../../../../../../layout/card/header/NitroCardHeaderView';
import { NitroCardView } from '../../../../../../layout/card/NitroCardView';
import { NitroCardTabsView } from '../../../../../../layout/card/tabs/NitroCardTabsView';
import { NitroCardTabsItemView } from '../../../../../../layout/card/tabs/tabs-item/NitroCardTabsItemView';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../../layout';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { useCameraWidgetContext } from '../../context/CameraWidgetContext';
import { CameraWidgetEditorTabs, CameraWidgetEditorViewProps } from './CameraWidgetEditorView.types';

4
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
View File

@ -1,7 +1,5 @@
import { FC, useCallback, useState } from 'react';
import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
import { NitroCardView } from '../../../../../layout/card/NitroCardView';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { useRoomContext } from '../../../context/RoomContext';
import { FurnitureDimmerData } from './FurnitureDimmerData';

5
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx
View File

@ -5,10 +5,7 @@ import { GetRoomEngine } from '../../../../../api/nitro/room/GetRoomEngine';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { CreateMessageHook } from '../../../../../hooks/messages/message-event';
import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
import { NitroCardView } from '../../../../../layout/card/NitroCardView';
import { DraggableWindow } from '../../../../../layout/draggable-window/DraggableWindow';
import { DraggableWindow, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../context/RoomContext';

8
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
View File

@ -3,9 +3,7 @@ import { FC, useCallback, useState } from 'react';
import { GetRoomEngine, GetRoomSession } from '../../../../../api';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { NitroCardContentView } from '../../../../../layout';
import { NitroCardView } from '../../../../../layout/card/NitroCardView';
import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
@ -68,8 +66,8 @@ export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = pro
if(!exchangeCreditData) return null;
return (
<NitroCardView className="nitro-exchange-credit">
<NitroCardSimpleHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
<NitroCardView className="nitro-exchange-credit" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
<NitroCardContentView>
<div className="text-black mb-2">
{ LocalizeText('widgets.furniture.credit.redeem.value', [ 'value' ], [ exchangeCreditData.value.toString() ]) }

8
src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
View File

@ -5,9 +5,7 @@ import { GetRoomSession } from '../../../../../api/nitro/session/GetRoomSession'
import { GetSessionDataManager } from '../../../../../api/nitro/session/GetSessionDataManager';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
import { NitroCardView } from '../../../../../layout/card/NitroCardView';
import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../context/RoomContext';
@ -171,8 +169,8 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
if(!mannequinData) return null;
return (
<NitroCardView className="nitro-mannequin">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') }/>
<NitroCardView className="nitro-mannequin" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') } />
<NitroCardContentView>
<div className="row">
<div className="col-4">