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

wired custom ui boxes

Browse Source
This commit is contained in:
Layne 2021-06-29 09:15:31 -04:00
parent 6fa35f9bcf
commit a9ca5fbcf9
3 changed files with 131 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/wired/card-action-corners.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

122
src/views/wired/WiredView.scss
View File

@ -1,5 +1,6 @@
.nitro-wired {
width: 300px;
padding:7px;
.icon {
width: 16px;
@ -35,4 +36,125 @@
background-image: url('../../assets/images/wired/icon_wired_rotate_counter_clockwise.png');
}
}
.nitro-wired-header {
color: #000;
margin-bottom:3px;
.nitro-wired-title, .nitro-wired-close {
border:1px solid rgba($black,.8);
background-image: linear-gradient(45deg, #00d9cb 25%, #00bdb0 25%, #00bdb0 50%, #00d9cb 50%, #00d9cb 75%, #00bdb0 75%, #00bdb0 100%);
background-size: 197.99px 197.99px;
animation: wiredSlider 3s linear infinite;
text-align: center;
box-shadow:inset 0 0 0 2px rgba($white,.6), 0 2px rgba($black,.4);
}
.nitro-wired-title {
margin-right:3px;
}
.nitro-wired-close {
min-width: 23px;
}
}
&.nitro-wired-trigger {
background-color: #3b2516 !important;
border: 1px solid #000 !important;
box-shadow: inset 0px -2px #50321f,
inset 0px -3px #86583b,
inset 0 0 0 1px #86583b,
inset 0 0 0 3px #644029,
inset 0 0 0 4px rgba($black,.4) !important;
.bg-light,.bg-primary {
background-color: transparent !important;
}
.bg-dark {
background-color: #000 !important;
}
}
&.nitro-wired-action {
background-color: #686868 !important;
border: 1px solid #000 !important;
box-shadow: inset 0px -2px #9d9d9d,
inset 0px -3px #c5c5c5,
inset 0 0 0 1px #c5c5c5,
inset 0 0 0 3px #9d9d9d,
inset 0 0 0 4px rgba($black,.4) !important;
.bg-light,.bg-primary {
background-color: transparent !important;
}
.bg-dark {
background-color: #000 !important;
}
&::before,
&::after,
.content-area::before,
.content-area::after {
content: '';
height: 6px;
width: 6px;
position: absolute;
background-image: url('../../assets/images/wired/card-action-corners.png');
}
&::before {
background-position: 0 0;
top: 0;
left: 0;
}
&::after {
background-position: 6px 0;
top: 0;
right: 0;
}
.content-area {
&::before {
background-position: 0 6px;
bottom: 0;
left: 0;
}
&::after {
background-position: 6px 6px;
bottom: 0;
right: 0;
}
}
}
&.nitro-wired-condition {
background-color: #cfd2dd !important;
border: 1px solid #000 !important;
box-shadow: inset 0 0 0 3px #efefef, inset 4px 4px #abaeb9 !important;
color: #000;
.bg-light,.bg-primary {
background-color: transparent !important;
}
.bg-dark {
background-color: #000 !important;
}
}
}
@keyframes wiredSlider {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -197.99px;
}
}

15
src/views/wired/views/base/WiredBaseView.tsx
View File

@ -2,7 +2,7 @@ import { FC, useCallback, useEffect, useState } from 'react';
import { GetSessionDataManager } from '../../../../api';
import { WiredEvent } from '../../../../events';
import { dispatchUiEvent } from '../../../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { useWiredContext } from '../../context/WiredContext';
import { WiredFurniType } from '../../WiredView.types';
@ -52,9 +52,12 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
}, [ setTrigger ]);
return (
<NitroCardView className="nitro-wired" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ close } />
<NitroCardContentView className="text-black">
<NitroCardView className={`nitro-wired nitro-wired-${wiredType} ` + (wiredType == 'trigger' ? 'rounded-0' : 'rounded-2')}>
<div className="nitro-wired-header d-flex">
<div className="nitro-wired-title rounded-start w-100 drag-handler">{LocalizeText('wiredfurni.title')}</div>
<div className="nitro-wired-close rounded-end flex-shrink-0" onClick={ close }><i className="fas fa-times" /></div>
</div>
<NitroCardContentView>
<div className="d-flex align-items-center">
<i className={ `me-2 icon icon-wired-${ wiredType }` } />
<div className="fw-bold">{ wiredName }</div>
@ -73,8 +76,8 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
<div>{ LocalizeText('wiredfurni.pickfurnis.desc') }</div>
</> }
<div className="d-flex mt-3">
<button className="btn btn-success me-2 w-100" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</button>
<button className="btn btn-secondary w-100" onClick={ close }>{ LocalizeText('cancel') }</button>
<button className="btn btn-sm btn-success me-2 w-100" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</button>
<button className="btn btn-sm btn-secondary w-100" onClick={ close }>{ LocalizeText('cancel') }</button>
</div>
</NitroCardContentView>
</NitroCardView>