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

landing widgets

Browse Source
This commit is contained in:
Layne 2021-07-25 04:19:09 -04:00
parent 9ce3f103ad
commit 2b9c359178
7 changed files with 109 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/configuration.json
View File

@ -92,8 +92,8 @@
"slot.1.widget": "promoarticle", "slot.1.widget": "promoarticle",
"slot.1.conf": "", "slot.1.conf": "",
"slot.2.widget": "widgetcontainer", "slot.2.widget": "widgetcontainer",
"slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,btn:HelloHELLO,btnLink:https://google.com/", "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com",
"slot.3.widget": "", "slot.3.widget": "promoarticle",
"slot.3.conf": "", "slot.3.conf": "",
"slot.4.widget": "", "slot.4.widget": "",
"slot.4.conf": "", "slot.4.conf": "",

8
src/views/hotel-view/HotelView.tsx
View File

@ -52,25 +52,25 @@ export const HotelView: FC<HotelViewProps> = props =>
widgetSlot={ 2 } widgetSlot={ 2 }
widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget']} widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget']}
widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.conf']} widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.conf']}
className="col-6" className="col-7"
/> />
<WidgetSlotView <WidgetSlotView
widgetSlot={ 3 } widgetSlot={ 3 }
widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.widget']} widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.widget']}
widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.conf']} widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.conf']}
className="col-6" className="col-5"
/> />
<WidgetSlotView <WidgetSlotView
widgetSlot={ 4 } widgetSlot={ 4 }
widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.widget']} widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.widget']}
widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.conf']} widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.conf']}
className="col-6" className="col-7"
/> />
<WidgetSlotView <WidgetSlotView
widgetSlot={ 5 } widgetSlot={ 5 }
widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.widget']} widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.widget']}
widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.conf']} widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.conf']}
className="col-6" className="col-5"
/> />
</div> </div>
<WidgetSlotView <WidgetSlotView

68
src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
View File

@ -1,15 +1,61 @@
.hall-of-fame { .hall-of-fame {
.hof-user-container { background-color: rgba($black,.3);
display:inline-flex; border-radius: $border-radius;
height: 100%; display: inline-block;
.hof-tooltip { .hof-user-container {
position: absolute; display:inline-flex;
display: inline; height: 100%;
position: relative;
&:hover {
.hof-tooltip {
display: block;
}
}
.hof-tooltip {
position: absolute;
display: inline;
z-index: 2;
display: none;
background-color: #1c323f;
border: 2px solid rgba($white, 0.5);
border-radius: $border-radius;
bottom:calc(100% - 20px);
left: 0;
right: 0;
margin: auto;
padding:2px;
color: #fff;
.hof-tooltip-content {
padding:3px;
background-color: #3d5f6e;
}
&:after {
content: "";
position: absolute;
bottom: -7px;
left: 0;
right: 0;
margin: auto;
height: 10px;
width: 10px;
transform: rotate(45deg);
border-color: transparent rgba($white, 0.5) rgba($white, 0.5) transparent;
border-style: solid;
border-width: 5px;
}
}
.avatar-image {
position:relative;
display:inline;
left:0;
top:0;
z-index: 1;
}
} }
.avatar-image {
position:relative;
display:inline;
}
}
} }

50
src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
View File

@ -1,36 +1,42 @@
import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer'; import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event'; import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView'; import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types'; import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props => export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
{ {
const [data, setData] = useState<CommunityGoalHallOfFameData>(null); const [data, setData] = useState<CommunityGoalHallOfFameData>(null);
useEffect(() => useEffect(() =>
{ {
SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf)); SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf));
}, [props.conf]); }, [props.conf]);
const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) => const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
{ {
const parser = event.getParser(); const parser = event.getParser();
setData(parser.data); setData(parser.data);
}, []); }, []);
CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent); CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent);
if (!data) return null; if (!data) return null;
return ( return (
<div className="hall-of-fame widget"> <div className="hall-of-fame widget">
{data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) => {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
<div className="hof-user-container"> <div className="hof-user-container cursor-pointer">
<div className="hof-tooltip">{entry.userName}</div> <div className="hof-tooltip">
<AvatarImageView figure={entry.figure} direction={2} key={ind} /> <div className="hof-tooltip-content">
</div> <div className="fw-bold">{ind + 1}. { entry.userName }</div>
)} <div className="muted fst-italic small text-center">{LocalizeText('landing.view.competition.hof.points', ['points'], [entry.currentScore.toString()])}</div>
</div> </div>
); </div>
<AvatarImageView figure={entry.figure} direction={2} key={ind} />
</div>
)}
</div>
);
} }

2
src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
View File

@ -30,7 +30,7 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
if (!articles) return null; if (!articles) return null;
return ( return (
<div className="promo-articles widget"> <div className="promo-articles widget mb-2">
<div className="d-flex flex-row align-items-center w-100 mb-1"> <div className="d-flex flex-row align-items-center w-100 mb-1">
<small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small> <small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small>
<hr className="w-100 my-0"/> <hr className="w-100 my-0"/>

10
src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx
View File

@ -1,5 +1,6 @@
import { FC, useCallback, useMemo } from 'react'; import { FC, useCallback, useMemo } from 'react';
import { GetConfigurationManager } from '../../../../../api/core/'; import { GetConfigurationManager } from '../../../../../api/core/';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { WidgetContainerViewProps } from './WidgetContainerView.types'; import { WidgetContainerViewProps } from './WidgetContainerView.types';
export const WidgetContainerView: FC<WidgetContainerViewProps> = props => export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
@ -40,8 +41,13 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
}, [ config ]); }, [ config ]);
return ( return (
<div className="widgetcontainer widget"> <div className="widgetcontainer widget d-flex flex-row overflow-hidden">
{ getOption('image') } <div className="widgetcontainer-image flex-shrink-0" style={{ backgroundImage: `url(${getOption('image')})` }} />
<div className="d-flex flex-column align-self-center">
<h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3>
<i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i>
<button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto">{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
</div>
</div> </div>
); );
} }

9
src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss
View File

@ -0,0 +1,9 @@
.widgetcontainer {
.widgetcontainer-image {
width: 150px;
height: 150px;
margin-right: 10px;
background-repeat: no-repeat;
background-position: top center;
}
}