nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26: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.conf": "",
"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.3.widget": "",
"slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com",
"slot.3.widget": "promoarticle",
"slot.3.conf": "",
"slot.4.widget": "",
"slot.4.conf": "",

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

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

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

@ -1,15 +1,61 @@
.hall-of-fame {
.hof-user-container {
display:inline-flex;
height: 100%;
background-color: rgba($black,.3);
border-radius: $border-radius;
display: inline-block;
.hof-tooltip {
position: absolute;
display: inline;
.hof-user-container {
display:inline-flex;
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 { FC, useCallback, useEffect, useState } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
{
const [data, setData] = useState<CommunityGoalHallOfFameData>(null);
const [data, setData] = useState<CommunityGoalHallOfFameData>(null);
useEffect(() =>
{
SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf));
}, [props.conf]);
useEffect(() =>
{
SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf));
}, [props.conf]);
const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
{
const parser = event.getParser();
setData(parser.data);
}, []);
const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
{
const parser = event.getParser();
setData(parser.data);
}, []);
CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent);
CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent);
if (!data) return null;
if (!data) return null;
return (
<div className="hall-of-fame widget">
{data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
<div className="hof-user-container">
<div className="hof-tooltip">{entry.userName}</div>
<AvatarImageView figure={entry.figure} direction={2} key={ind} />
</div>
)}
</div>
);
return (
<div className="hall-of-fame widget">
{data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
<div className="hof-user-container cursor-pointer">
<div className="hof-tooltip">
<div className="hof-tooltip-content">
<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>
<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;
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">
<small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small>
<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 { GetConfigurationManager } from '../../../../../api/core/';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { WidgetContainerViewProps } from './WidgetContainerView.types';
export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
@ -40,8 +41,13 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
}, [ config ]);
return (
<div className="widgetcontainer widget">
{ getOption('image') }
<div className="widgetcontainer widget d-flex flex-row overflow-hidden">
<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>
);
}

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;
}
}