nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

second header addition

Browse Source
This commit is contained in:
Layne 2021-06-20 06:57:34 -04:00
parent 45434e4326
commit ff2cf1ac4c
9 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,16 +72,21 @@ $colors: (
// scss-docs-start theme-color-variables
$primary: #1E7295 !default;
$secondary: #185D79 !default;
$tertiary: #2DABC2 !default;
$quaternary: #2B91A7 !default;
$success: #008026 !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: #982F31 !default;
$danger: #C23027 !default;
$light: #DFDFDF !default;
$dark: $gray-900 !default;
// scss-docs-end theme-color-variables
.bg-primary-split {
background: repeating-linear-gradient(#1E7295, #1E7295 49.9%, #185D79 50.1%, #185D79 100%);
.bg-tertiary-split {
background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
}
// scss-docs-start theme-colors-map
@ -642,9 +647,10 @@ $btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-font-size-lg: $input-btn-font-size-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-border-colour: rgba($black,.1) !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 2px 0 rgba($white, .15), 0 1px 1px rgba($black, .1) !default;
$btn-box-shadow: inset 0 2px 0 rgba($white, .15), inset 0 -2px rgba($black,.1), 0 1px rgba($black, .1) !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;

2
src/assets/styles/bootstrap/mixins/_buttons.scss
View File

@ -20,7 +20,7 @@
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
border-color: $btn-border-colour;
@include box-shadow($btn-box-shadow);
&:hover {

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

@ -5,6 +5,31 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
.nitro-card {
pointer-events: all;
.nitro-card-close-parent {
right: -3px;
top: 5px;
position: absolute;
width: auto;
.nitro-card-close {
cursor: pointer;
border-radius: $border-radius;
box-shadow: inset 0 0 0 1px #921911, inset 0 2px rgba($white,.2);
padding:2px 6px 0 6px;
border:1px solid $white;
background: rgb(245,80,65);
background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
}
@import './content/NitroCardContentView';
@import './header/NitroCardHeaderView';
@import './simple-header/NitroCardSimpleHeaderView';

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

@ -1,29 +1,4 @@
.nitro-card-header {
min-height: $nitro-card-header-height;
max-height: $nitro-card-header-height;
.nitro-card-close-parent {
right:-3px;
top:5px;
position: absolute;
width: auto;
.nitro-card-close {
cursor: pointer;
border-radius: $border-radius;
box-shadow: inset 0 0 0 1px #921911, inset 0 2px rgba($white,.2);
padding:2px 6px 0 6px;
border:1px solid $white;
background: rgb(245,80,65);
background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
}
}

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

@ -0,0 +1,8 @@
.nitro-card-close-parent {
right: 5px;
}
.bg-tertiary-split {
border: 2px solid darken($quaternary,4);
box-shadow:0 0 0 2px $white;
}

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

@ -6,13 +6,16 @@ export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = pro
const { headerText = null, onCloseClick = null } = props;
return (
<div className="d-flex container-fluid align-items-center bg-light">
<div className="col-1"></div>
<div className="d-flex bg-primary-split flex-grow-1 justify-content-center align-items-center border border-top-0 rounded-bottom px-2 py-1">
<div className="d-flex container-fluid align-items-center bg-light pb-1">
<div className="col-1"/>
<div className="d-flex bg-tertiary-split flex-grow-1 justify-content-center align-items-center border-top-0 rounded-bottom px-2 py-1 drag-handler">
<div className="h5 m-0 text-white text-shadow">{ headerText }</div>
</div>
<div className="d-flex col-1 justify-content-center align-items-center">
<i className="fas fa-times cursor-pointer" onClick={ onCloseClick }></i>
<div className="col-1"/>
<div className="nitro-card-close-parent">
<div className="nitro-card-close" onClick={ onCloseClick }>
<i className="fas fa-times"/>
</div>
</div>
</div>
);

2
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss
View File

@ -1,3 +1,3 @@
.nitro-exchange-credit {
width: 250px;
width: 290px;
}

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

@ -3,8 +3,9 @@ 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, NitroCardHeaderView } from '../../../../../layout';
import { NitroCardContentView } from '../../../../../layout';
import { NitroCardView } from '../../../../../layout/card/NitroCardView';
import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
@ -68,7 +69,7 @@ export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = pro
return (
<NitroCardView className="nitro-exchange-credit">
<NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
<NitroCardSimpleHeaderView 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() ]) }

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

@ -6,8 +6,8 @@ import { GetSessionDataManager } from '../../../../../api/nitro/session/GetSessi
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 { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
import { NitroCardView } from '../../../../../layout/card/NitroCardView';
import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../avatar-image/AvatarImageView';
import { useRoomContext } from '../../../context/RoomContext';
@ -172,7 +172,7 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
return (
<NitroCardView className="nitro-mannequin">
<NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') } />
<NitroCardSimpleHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') }/>
<NitroCardContentView>
<div className="row">
<div className="col-4">