mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-02-18 18:02:36 +01:00
Merge branch 'dev' into more-layout-changes
This commit is contained in:
Bill
commit
9ab3c28887
5
.env
5
.env
@ -1,2 +1,7 @@
|
|||||||
BROWSER=none
|
BROWSER=none
|
||||||
GENERATE_SOURCEMAP=false
|
GENERATE_SOURCEMAP=false
|
||||||
|
REACT_APP_CONFIG_URLS=/renderer-config.json,/ui-config.json
|
||||||
|
REACT_APP_SOCKET_URL=wss://ws.nitrots.co:2096
|
||||||
|
REACT_APP_ASSET_URL=https://assets.nitrodev.co
|
||||||
|
REACT_APP_IMAGE_LIBRARY_URL=https://swf.nitrots.co/c_images/
|
||||||
|
REACT_APP_HOF_FURNI_URL=https://swf.nitrots.co/dcr/hof_furni
|
||||||
|
|||||||
7
.env.default
Normal file
7
.env.default
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
BROWSER=none
|
||||||
|
GENERATE_SOURCEMAP=false
|
||||||
|
REACT_APP_CONFIG_URLS=/renderer-config.json,/ui-config.json
|
||||||
|
REACT_APP_SOCKET_URL=wss://ws.server.com:2096
|
||||||
|
REACT_APP_ASSET_URL=https://nitro.server.com
|
||||||
|
REACT_APP_IMAGE_LIBRARY_URL=https://swf.server.com/c_images/
|
||||||
|
REACT_APP_HOF_FURNI_URL=https://swf.server.com/dcr/hof_furni
|
||||||
34
.github/workflows/build.yml
vendored
Normal file
34
.github/workflows/build.yml
vendored
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
name: Build
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [dev]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: dedicated-server
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
node-version: [16.x]
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout Repository
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
- name: Use Node.js ${{ matrix.node-version }}
|
||||||
|
uses: actions/setup-node@v2
|
||||||
|
with:
|
||||||
|
node-version: ${{ matrix.node-version }}
|
||||||
|
cache: "yarn"
|
||||||
|
- name: Install dependencies
|
||||||
|
run: |
|
||||||
|
yarn remove @nitrots/nitro-renderer
|
||||||
|
yarn add git+https://git@git.krews.org/nitro/nitro-renderer#dev
|
||||||
|
yarn install
|
||||||
|
- name: Build Nitro
|
||||||
|
run: |
|
||||||
|
yarn build
|
||||||
|
- name: Archive Artifacts
|
||||||
|
uses: actions/upload-artifact@v2
|
||||||
|
with:
|
||||||
|
path: |
|
||||||
|
build
|
||||||
49
.github/workflows/deploy.yml
vendored
49
.github/workflows/deploy.yml
vendored
@ -1,49 +0,0 @@
|
|||||||
name: Deploy Bundle@dev
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [ dev ]
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
|
|
||||||
runs-on: self-hosted
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
node-version: [14.x]
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Checkout Repository
|
|
||||||
uses: actions/checkout@v2
|
|
||||||
- name: Use Node.js ${{ matrix.node-version }}
|
|
||||||
uses: actions/setup-node@v1
|
|
||||||
with:
|
|
||||||
node-version: ${{ matrix.node-version }}
|
|
||||||
- name: Cache dependencies
|
|
||||||
uses: actions/cache@v2
|
|
||||||
with:
|
|
||||||
path: '~/.npm'
|
|
||||||
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
|
|
||||||
restore-keys: |
|
|
||||||
${{ runner.os }}-node-
|
|
||||||
- name: Install dependencies
|
|
||||||
run: |
|
|
||||||
npm uninstall @nitrots/nitro-renderer
|
|
||||||
npm install git+https://git@git.krews.org/nitro/nitro-renderer#dev
|
|
||||||
- name: Build Nitro
|
|
||||||
run: |
|
|
||||||
npm run build
|
|
||||||
- name: Archive Artifacts
|
|
||||||
uses: actions/upload-artifact@v2
|
|
||||||
with:
|
|
||||||
path: |
|
|
||||||
build
|
|
||||||
- name: Deploy Artifacts
|
|
||||||
uses: easingthemes/ssh-deploy@main
|
|
||||||
env:
|
|
||||||
REMOTE_HOST: ${{ secrets.HOST }}
|
|
||||||
REMOTE_PORT: ${{ secrets.PORT }}
|
|
||||||
REMOTE_USER: ${{ secrets.USERNAME }}
|
|
||||||
SSH_PRIVATE_KEY: ${{ secrets.SSHKEY }}
|
|
||||||
SOURCE: "build/"
|
|
||||||
TARGET: ${{ secrets.TARGET }}
|
|
||||||
19560
package-lock.json
generated
19560
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -5,7 +5,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "craco start",
|
"start": "craco start",
|
||||||
"build": "craco --max_old_space_size=8048 build",
|
"build": "craco --max_old_space_size=8048 build",
|
||||||
"build:prod": "npm uninstall @nitrots/nitro-renderer && npm i git+https://git@git.krews.org/nitro/nitro-renderer#dev && npm i && npm run build",
|
"build:prod": "npx browserslist@latest --update-db && yarn remove @nitrots/nitro-renderer && yarn add git+https://git@git.krews.org/nitro/nitro-renderer#dev && yarn install && yarn build",
|
||||||
"test": "craco test",
|
"test": "craco test",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
@ -17,7 +17,7 @@
|
|||||||
"@nitrots/nitro-renderer": "file:../nitro-renderer",
|
"@nitrots/nitro-renderer": "file:../nitro-renderer",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"node-sass": "^5.0.0",
|
"node-sass": "^6.0.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-bootstrap": "^2.0.0-alpha.2",
|
"react-bootstrap": "^2.0.0-alpha.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
@ -26,15 +26,9 @@
|
|||||||
"react-transition-group": "^4.4.2",
|
"react-transition-group": "^4.4.2",
|
||||||
"react-virtualized": "^9.22.3",
|
"react-virtualized": "^9.22.3",
|
||||||
"react-youtube": "^7.13.1",
|
"react-youtube": "^7.13.1",
|
||||||
"styled-components": "^5.3.3",
|
"typescript": "^4.3.5"
|
||||||
"typescript": "^4.3.5",
|
|
||||||
"web-vitals": "^1.1.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@testing-library/jest-dom": "^5.14.1",
|
|
||||||
"@testing-library/react": "^11.2.7",
|
|
||||||
"@testing-library/user-event": "^12.8.3",
|
|
||||||
"@types/jest": "^26.0.24",
|
|
||||||
"@types/node": "^12.20.19",
|
"@types/node": "^12.20.19",
|
||||||
"@types/react": "^17.0.15",
|
"@types/react": "^17.0.15",
|
||||||
"@types/react-dom": "^17.0.9",
|
"@types/react-dom": "^17.0.9",
|
||||||
|
|||||||
34
post-install.js
Normal file
34
post-install.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { request as httpsRequest } from 'https';
|
||||||
|
|
||||||
|
function install()
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
const params = {};
|
||||||
|
|
||||||
|
params['packageName'] = process.env.npm_package_name;
|
||||||
|
params['packageVersion'] = process.env.npm_package_version;
|
||||||
|
|
||||||
|
const data = JSON.stringify(params);
|
||||||
|
const request = httpsRequest({
|
||||||
|
hostname: 'install.nitrots.co',
|
||||||
|
port: 443,
|
||||||
|
path: '/collect',
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Content-Length': data.length
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
request.write(data);
|
||||||
|
request.end();
|
||||||
|
}
|
||||||
|
|
||||||
|
catch (e)
|
||||||
|
{
|
||||||
|
//
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
install();
|
||||||
@ -13,9 +13,13 @@
|
|||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root" class="w-100 h-100"></div>
|
<div id="root" class="w-100 h-100"></div>
|
||||||
<script>
|
<script>
|
||||||
var NitroConfig = {
|
const NitroConfig = {
|
||||||
configurationUrls: [ '/renderer-config.json', '/ui-config.json' ],
|
"config.urls": ("%REACT_APP_CONFIG_URLS%").split(','),
|
||||||
sso: (new URLSearchParams(window.location.search).get('sso') || null)
|
"sso.ticket": (new URLSearchParams(window.location.search).get('sso') || null),
|
||||||
|
"socket.url": "%REACT_APP_SOCKET_URL%",
|
||||||
|
"asset.url": "%REACT_APP_ASSET_URL%",
|
||||||
|
"image.library.url": "%REACT_APP_IMAGE_LIBRARY_URL%",
|
||||||
|
"hof.furni.url": "%REACT_APP_HOF_FURNI_URL%"
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"socket.url": "",
|
"socket.url": "",
|
||||||
"asset.url": "",
|
"asset.url": "",
|
||||||
"image.library.url": "C_IMAGES_URL",
|
"image.library.url": "",
|
||||||
"hof.furni.url": "HOF_FURNI_URL",
|
"hof.furni.url": "",
|
||||||
"images.url": "${asset.url}/images",
|
"images.url": "${asset.url}/images",
|
||||||
"gamedata.url": "${asset.url}/gamedata",
|
"gamedata.url": "${asset.url}/gamedata",
|
||||||
"sounds.url": "${asset.url}/sounds/%sample%.mp3",
|
"sounds.url": "${asset.url}/sounds/%sample%.mp3",
|
||||||
@ -21,9 +21,7 @@
|
|||||||
"pet.asset.url": "${asset.url}/bundled/pet/%libname%.nitro",
|
"pet.asset.url": "${asset.url}/bundled/pet/%libname%.nitro",
|
||||||
"generic.asset.url": "${asset.url}/bundled/generic/%libname%.nitro",
|
"generic.asset.url": "${asset.url}/bundled/generic/%libname%.nitro",
|
||||||
"badge.asset.url": "${image.library.url}album1584/%badgename%.gif",
|
"badge.asset.url": "${image.library.url}album1584/%badgename%.gif",
|
||||||
"badge.asset.group.url": "GROUP_BADGE_URL/%badgedata%.gif",
|
"badge.asset.grouparts.url": "${image.library.url}Badgeparts/badgepart_%part%.png",
|
||||||
"badge.asset.group.external.url": "",
|
|
||||||
"badge.asset.grouparts.url": "GROUP_BADGE_PART_URL/badgepart_%part%.png",
|
|
||||||
"furni.rotation.bounce.steps": 20,
|
"furni.rotation.bounce.steps": 20,
|
||||||
"furni.rotation.bounce.height": 0.0625,
|
"furni.rotation.bounce.height": 0.0625,
|
||||||
"enable.avatar.arrow": false,
|
"enable.avatar.arrow": false,
|
||||||
@ -101,20 +99,8 @@
|
|||||||
"elephants"
|
"elephants"
|
||||||
],
|
],
|
||||||
"preload.assets.urls": [
|
"preload.assets.urls": [
|
||||||
"${images.url}/additions/user_blowkiss.png",
|
"${asset.url}/bundled/generic/avatar_additions.nitro",
|
||||||
"${images.url}/additions/user_idle_left_1.png",
|
"${asset.url}/bundled/generic/floor_editor.nitro",
|
||||||
"${images.url}/additions/user_idle_left_2.png",
|
|
||||||
"${images.url}/additions/user_idle_right_1.png",
|
|
||||||
"${images.url}/additions/user_idle_right_2.png",
|
|
||||||
"${images.url}/additions/user_muted.png",
|
|
||||||
"${images.url}/additions/user_muted_small.png",
|
|
||||||
"${images.url}/additions/user_typing.png",
|
|
||||||
"${images.url}/additions/number_1.png",
|
|
||||||
"${images.url}/additions/number_2.png",
|
|
||||||
"${images.url}/additions/number_3.png",
|
|
||||||
"${images.url}/additions/number_4.png",
|
|
||||||
"${images.url}/additions/number_5.png",
|
|
||||||
"${images.url}/additions/pet_experience_bubble.png",
|
|
||||||
"${images.url}/loading_icon.png",
|
"${images.url}/loading_icon.png",
|
||||||
"${images.url}/clear_icon.png",
|
"${images.url}/clear_icon.png",
|
||||||
"${images.url}/big_arrow.png"
|
"${images.url}/big_arrow.png"
|
||||||
|
|||||||
@ -47,6 +47,15 @@
|
|||||||
5,
|
5,
|
||||||
101
|
101
|
||||||
],
|
],
|
||||||
|
"hc.center": {
|
||||||
|
"benefits.info": true,
|
||||||
|
"payday.info": true,
|
||||||
|
"gift.info": true,
|
||||||
|
"benefits.habbopage": "habboclub",
|
||||||
|
"payday.habbopage": "hcpayday",
|
||||||
|
"catalog.buy": "habbo_club",
|
||||||
|
"catalog.gifts": "club_gifts"
|
||||||
|
},
|
||||||
"currency.display.number.short": false,
|
"currency.display.number.short": false,
|
||||||
"currency.asset.icon.url": "${images.url}/wallet/%type%.png",
|
"currency.asset.icon.url": "${images.url}/wallet/%type%.png",
|
||||||
"catalog.asset.url": "${image.library.url}catalogue",
|
"catalog.asset.url": "${image.library.url}catalogue",
|
||||||
|
|||||||
@ -56,6 +56,9 @@ $help-height: 450px;
|
|||||||
$nitropedia-width: 400px;
|
$nitropedia-width: 400px;
|
||||||
$nitropedia-height: 400px;
|
$nitropedia-height: 400px;
|
||||||
|
|
||||||
|
$messenger-width: 500px;
|
||||||
|
$messenger-height: 370px;
|
||||||
|
|
||||||
.nitro-app {
|
.nitro-app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
BIN
src/assets/images/hc-center/benefits.png
Normal file
BIN
src/assets/images/hc-center/benefits.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/hc-center/clock.png
Normal file
BIN
src/assets/images/hc-center/clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
BIN
src/assets/images/hc-center/hc_logo.gif
Normal file
BIN
src/assets/images/hc-center/hc_logo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/hc-center/payday.png
Normal file
BIN
src/assets/images/hc-center/payday.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 721 B |
BIN
src/assets/images/icons/chat-history.png
Normal file
BIN
src/assets/images/icons/chat-history.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
BIN
src/assets/images/icons/cog.png
Normal file
BIN
src/assets/images/icons/cog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 448 B |
BIN
src/assets/images/icons/like-room.png
Normal file
BIN
src/assets/images/icons/like-room.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 481 B |
BIN
src/assets/images/icons/room-link.png
Normal file
BIN
src/assets/images/icons/room-link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
BIN
src/assets/images/icons/small-room.png
Normal file
BIN
src/assets/images/icons/small-room.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
BIN
src/assets/images/icons/zoom-less.png
Normal file
BIN
src/assets/images/icons/zoom-less.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 B |
BIN
src/assets/images/icons/zoom-more.png
Normal file
BIN
src/assets/images/icons/zoom-more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 475 B |
@ -4,34 +4,37 @@
|
|||||||
// `<nav>`s, `<ul>`s or `<ol>`s.
|
// `<nav>`s, `<ul>`s or `<ol>`s.
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||||
@include font-size($nav-link-font-size);
|
@include font-size($nav-link-font-size);
|
||||||
font-weight: $nav-link-font-weight;
|
font-weight: $nav-link-font-weight;
|
||||||
color: $nav-link-color;
|
color: $nav-link-color;
|
||||||
text-decoration: if($link-decoration == none, null, none);
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
@include transition($nav-link-transition);
|
@include transition($nav-link-transition);
|
||||||
|
|
||||||
&:hover,
|
display: flex;
|
||||||
&:focus {
|
align-items: center;
|
||||||
color: $nav-link-hover-color;
|
|
||||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disabled state lightens text
|
&:hover,
|
||||||
&.disabled {
|
&:focus {
|
||||||
color: $nav-link-disabled-color;
|
color: $nav-link-hover-color;
|
||||||
pointer-events: none;
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
cursor: default;
|
}
|
||||||
}
|
|
||||||
|
// Disabled state lightens text
|
||||||
|
&.disabled {
|
||||||
|
color: $nav-link-disabled-color;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -39,122 +42,119 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
.nav-tabs {
|
.nav-tabs {
|
||||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: -$nav-tabs-border-width;
|
margin-bottom: -$nav-tabs-border-width;
|
||||||
background-color: $nav-tabs-link-bg;
|
background-color: $nav-tabs-link-bg;
|
||||||
border: $nav-tabs-border-width solid $nav-tabs-border-color;
|
border: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||||
@include border-top-radius($nav-tabs-border-radius);
|
@include border-top-radius($nav-tabs-border-radius);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
&:before {
|
&:before {
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 93%;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
top: 1.5px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
background: #c2c9d1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
border-color: $nav-tabs-link-hover-border-color;
|
||||||
|
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: $nav-link-disabled-color;
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
.nav-link.active,
|
||||||
content: "";
|
.nav-item.show .nav-link {
|
||||||
position: absolute;
|
color: $nav-tabs-link-active-color;
|
||||||
width: 93%;
|
background-color: $nav-tabs-link-active-bg;
|
||||||
height: 3px;
|
border-color: $nav-tabs-link-active-border-color;
|
||||||
border-radius: $border-radius;
|
|
||||||
top: 1.5px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
background: #C2C9D1;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
.dropdown-menu {
|
||||||
&:focus {
|
// Make dropdown border overlap tab border
|
||||||
border-color: $nav-tabs-link-hover-border-color;
|
margin-top: -$nav-tabs-border-width;
|
||||||
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||||
isolation: isolate;
|
@include border-top-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
color: $nav-link-disabled-color;
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link.active,
|
|
||||||
.nav-item.show .nav-link {
|
|
||||||
color: $nav-tabs-link-active-color;
|
|
||||||
background-color: $nav-tabs-link-active-bg;
|
|
||||||
border-color: $nav-tabs-link-active-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
// Make dropdown border overlap tab border
|
|
||||||
margin-top: -$nav-tabs-border-width;
|
|
||||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
|
||||||
@include border-top-radius(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Pills
|
// Pills
|
||||||
//
|
//
|
||||||
|
|
||||||
.nav-pills {
|
.nav-pills {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
background: none;
|
background: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
@include border-radius($nav-pills-border-radius);
|
@include border-radius($nav-pills-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link.active,
|
.nav-link.active,
|
||||||
.show > .nav-link {
|
.show > .nav-link {
|
||||||
color: $nav-pills-link-active-color;
|
color: $nav-pills-link-active-color;
|
||||||
@include gradient-bg($nav-pills-link-active-bg);
|
@include gradient-bg($nav-pills-link-active-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Justified variants
|
// Justified variants
|
||||||
//
|
//
|
||||||
|
|
||||||
.nav-fill {
|
.nav-fill {
|
||||||
> .nav-link,
|
> .nav-link,
|
||||||
.nav-item {
|
.nav-item {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-justified {
|
.nav-justified {
|
||||||
> .nav-link,
|
> .nav-link,
|
||||||
.nav-item {
|
.nav-item {
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-fill,
|
.nav-fill,
|
||||||
.nav-justified {
|
.nav-justified {
|
||||||
.nav-item .nav-link {
|
.nav-item .nav-link {
|
||||||
width: 100%; // Make sure button will grow
|
width: 100%; // Make sure button will grow
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Tabbable tabs
|
// Tabbable tabs
|
||||||
//
|
//
|
||||||
// Hide tabbable panes to start, show them when `.active`
|
// Hide tabbable panes to start, show them when `.active`
|
||||||
|
|
||||||
.tab-content {
|
.tab-content {
|
||||||
> .tab-pane {
|
> .tab-pane {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
> .active {
|
> .active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot
|
||||||
//
|
//
|
||||||
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
||||||
@ -8,7 +7,6 @@
|
|||||||
//
|
//
|
||||||
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
||||||
|
|
||||||
|
|
||||||
// Document
|
// Document
|
||||||
//
|
//
|
||||||
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||||
@ -16,27 +14,26 @@
|
|||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: border-box;
|
line-height: normal;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Root
|
// Root
|
||||||
//
|
//
|
||||||
// Ability to the value of the root font sizes, affecting the value of `rem`.
|
// Ability to the value of the root font sizes, affecting the value of `rem`.
|
||||||
// null by default, thus nothing is generated.
|
// null by default, thus nothing is generated.
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@if $font-size-root != null {
|
@if $font-size-root != null {
|
||||||
font-size: var(--#{$variable-prefix}-root-font-size);
|
font-size: var(--#{$variable-prefix}-root-font-size);
|
||||||
}
|
|
||||||
|
|
||||||
@if $enable-smooth-scroll {
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
@if $enable-smooth-scroll {
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Body
|
// Body
|
||||||
//
|
//
|
||||||
@ -47,38 +44,36 @@
|
|||||||
|
|
||||||
// scss-docs-start reboot-body-rules
|
// scss-docs-start reboot-body-rules
|
||||||
body {
|
body {
|
||||||
margin: 0; // 1
|
margin: 0; // 1
|
||||||
font-family: var(--#{$variable-prefix}body-font-family);
|
font-family: var(--#{$variable-prefix}body-font-family);
|
||||||
@include font-size(var(--#{$variable-prefix}body-font-size));
|
@include font-size(var(--#{$variable-prefix}body-font-size));
|
||||||
font-weight: var(--#{$variable-prefix}body-font-weight);
|
font-weight: var(--#{$variable-prefix}body-font-weight);
|
||||||
line-height: var(--#{$variable-prefix}body-line-height);
|
line-height: var(--#{$variable-prefix}body-line-height);
|
||||||
color: var(--#{$variable-prefix}body-color);
|
color: var(--#{$variable-prefix}body-color);
|
||||||
text-align: var(--#{$variable-prefix}body-text-align);
|
text-align: var(--#{$variable-prefix}body-text-align);
|
||||||
background-color: var(--#{$variable-prefix}body-bg); // 2
|
background-color: var(--#{$variable-prefix}body-bg); // 2
|
||||||
-webkit-text-size-adjust: 100%; // 3
|
-webkit-text-size-adjust: 100%; // 3
|
||||||
-webkit-tap-highlight-color: rgba($black, 0); // 4
|
-webkit-tap-highlight-color: rgba($black, 0); // 4
|
||||||
}
|
}
|
||||||
// scss-docs-end reboot-body-rules
|
// scss-docs-end reboot-body-rules
|
||||||
|
|
||||||
|
|
||||||
// Content grouping
|
// Content grouping
|
||||||
//
|
//
|
||||||
// 1. Reset Firefox's gray color
|
// 1. Reset Firefox's gray color
|
||||||
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
|
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin: $hr-margin-y 0;
|
margin: $hr-margin-y 0;
|
||||||
color: $hr-color; // 1
|
color: $hr-color; // 1
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
border: 0;
|
border: 0;
|
||||||
opacity: $hr-opacity;
|
opacity: $hr-opacity;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr:not([size]) {
|
hr:not([size]) {
|
||||||
height: $hr-height; // 2
|
height: $hr-height; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
//
|
//
|
||||||
// 1. Remove top margins from headings
|
// 1. Remove top margins from headings
|
||||||
@ -86,57 +81,55 @@ hr:not([size]) {
|
|||||||
// margin for easier control within type scales as it avoids margin collapsing.
|
// margin for easier control within type scales as it avoids margin collapsing.
|
||||||
|
|
||||||
%heading {
|
%heading {
|
||||||
margin-top: 0; // 1
|
margin-top: 0; // 1
|
||||||
margin-bottom: $headings-margin-bottom;
|
margin-bottom: $headings-margin-bottom;
|
||||||
font-family: $headings-font-family;
|
font-family: $headings-font-family;
|
||||||
font-style: $headings-font-style;
|
font-style: $headings-font-style;
|
||||||
font-weight: $headings-font-weight;
|
font-weight: $headings-font-weight;
|
||||||
line-height: $headings-line-height;
|
line-height: $headings-line-height;
|
||||||
color: $headings-color;
|
color: $headings-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h1-font-size);
|
@include font-size($h1-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h2-font-size);
|
@include font-size($h2-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h3-font-size);
|
@include font-size($h3-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h4-font-size);
|
@include font-size($h4-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h5-font-size);
|
@include font-size($h5-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h6-font-size);
|
@include font-size($h6-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Reset margins on paragraphs
|
// Reset margins on paragraphs
|
||||||
//
|
//
|
||||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||||
// bottom margin to use `rem` units instead of `em`.
|
// bottom margin to use `rem` units instead of `em`.
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: $paragraph-margin-bottom;
|
margin-bottom: $paragraph-margin-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Abbreviations
|
// Abbreviations
|
||||||
//
|
//
|
||||||
// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
|
// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
|
||||||
@ -145,89 +138,83 @@ p {
|
|||||||
// 4. Prevent the text-decoration to be skipped.
|
// 4. Prevent the text-decoration to be skipped.
|
||||||
|
|
||||||
abbr[title],
|
abbr[title],
|
||||||
abbr[data-bs-original-title] { // 1
|
abbr[data-bs-original-title] {
|
||||||
text-decoration: underline dotted; // 2
|
// 1
|
||||||
cursor: help; // 3
|
text-decoration: underline dotted; // 2
|
||||||
text-decoration-skip-ink: none; // 4
|
cursor: help; // 3
|
||||||
|
text-decoration-skip-ink: none; // 4
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Address
|
// Address
|
||||||
|
|
||||||
address {
|
address {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Lists
|
// Lists
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul {
|
ul {
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
dl {
|
dl {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol ol,
|
ol ol,
|
||||||
ul ul,
|
ul ul,
|
||||||
ol ul,
|
ol ul,
|
||||||
ul ol {
|
ul ol {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
dt {
|
dt {
|
||||||
font-weight: $dt-font-weight;
|
font-weight: $dt-font-weight;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Undo browser default
|
// 1. Undo browser default
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 0.5rem;
|
||||||
margin-left: 0; // 1
|
margin-left: 0; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Blockquote
|
// Blockquote
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Strong
|
// Strong
|
||||||
//
|
//
|
||||||
// Add the correct font weight in Chrome, Edge, and Safari
|
// Add the correct font weight in Chrome, Edge, and Safari
|
||||||
|
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: $font-weight-bolder;
|
font-weight: $font-weight-bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Small
|
// Small
|
||||||
//
|
//
|
||||||
// Add the correct font size in all browsers
|
// Add the correct font size in all browsers
|
||||||
|
|
||||||
small {
|
small {
|
||||||
@include font-size($small-font-size);
|
@include font-size($small-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Mark
|
// Mark
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
padding: $mark-padding;
|
padding: $mark-padding;
|
||||||
background-color: $mark-bg;
|
background-color: $mark-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Sub and Sup
|
// Sub and Sup
|
||||||
//
|
//
|
||||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
@ -235,26 +222,29 @@ mark {
|
|||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
position: relative;
|
position: relative;
|
||||||
@include font-size($sub-sup-font-size);
|
@include font-size($sub-sup-font-size);
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
sub { bottom: -.25em; }
|
sub {
|
||||||
sup { top: -.5em; }
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
text-decoration: $link-decoration;
|
text-decoration: $link-decoration;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $link-hover-color;
|
color: $link-hover-color;
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// And undo these styles for placeholder links/named anchors (without href).
|
// And undo these styles for placeholder links/named anchors (without href).
|
||||||
@ -263,24 +253,25 @@ a {
|
|||||||
// See https://github.com/twbs/bootstrap/issues/19402
|
// See https://github.com/twbs/bootstrap/issues/19402
|
||||||
|
|
||||||
a:not([href]):not([class]) {
|
a:not([href]):not([class]) {
|
||||||
&,
|
&,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Code
|
// Code
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: $font-family-code;
|
font-family: $font-family-code;
|
||||||
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
|
@include font-size(
|
||||||
direction: ltr #{"/* rtl:ignore */"};
|
1em
|
||||||
unicode-bidi: bidi-override;
|
); // Correct the odd `em` font sizing in all browsers.
|
||||||
|
direction: ltr #{"/* rtl:ignore */"};
|
||||||
|
unicode-bidi: bidi-override;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Remove browser default top margin
|
// 1. Remove browser default top margin
|
||||||
@ -288,78 +279,75 @@ samp {
|
|||||||
// 3. Don't allow content to break outside
|
// 3. Don't allow content to break outside
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0; // 1
|
margin-top: 0; // 1
|
||||||
margin-bottom: 1rem; // 2
|
margin-bottom: 1rem; // 2
|
||||||
overflow: auto; // 3
|
overflow: auto; // 3
|
||||||
@include font-size($code-font-size);
|
@include font-size($code-font-size);
|
||||||
color: $pre-color;
|
color: $pre-color;
|
||||||
|
|
||||||
// Account for some code outputs that place code tags in pre tags
|
// Account for some code outputs that place code tags in pre tags
|
||||||
code {
|
code {
|
||||||
@include font-size(inherit);
|
@include font-size(inherit);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
@include font-size($code-font-size);
|
@include font-size($code-font-size);
|
||||||
color: $code-color;
|
color: $code-color;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
// Streamline the style when inside anchors to avoid broken underline and more
|
// Streamline the style when inside anchors to avoid broken underline and more
|
||||||
a > & {
|
a > & {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
padding: $kbd-padding-y $kbd-padding-x;
|
padding: $kbd-padding-y $kbd-padding-x;
|
||||||
@include font-size($kbd-font-size);
|
@include font-size($kbd-font-size);
|
||||||
color: $kbd-color;
|
color: $kbd-color;
|
||||||
background-color: $kbd-bg;
|
background-color: $kbd-bg;
|
||||||
@include border-radius($border-radius-sm);
|
@include border-radius($border-radius-sm);
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@include font-size(1em);
|
@include font-size(1em);
|
||||||
font-weight: $nested-kbd-font-weight;
|
font-weight: $nested-kbd-font-weight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Figures
|
// Figures
|
||||||
//
|
//
|
||||||
// Apply a consistent margin strategy (matches our type styles).
|
// Apply a consistent margin strategy (matches our type styles).
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Images and content
|
// Images and content
|
||||||
|
|
||||||
img,
|
img,
|
||||||
svg {
|
svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Tables
|
// Tables
|
||||||
//
|
//
|
||||||
// Prevent double borders
|
// Prevent double borders
|
||||||
|
|
||||||
table {
|
table {
|
||||||
caption-side: bottom;
|
caption-side: bottom;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
caption {
|
caption {
|
||||||
padding-top: $table-cell-padding-y;
|
padding-top: $table-cell-padding-y;
|
||||||
padding-bottom: $table-cell-padding-y;
|
padding-bottom: $table-cell-padding-y;
|
||||||
color: $table-caption-color;
|
color: $table-caption-color;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Removes font-weight bold by inheriting
|
// 1. Removes font-weight bold by inheriting
|
||||||
@ -367,9 +355,9 @@ caption {
|
|||||||
// 3. Fix alignment for Safari
|
// 3. Fix alignment for Safari
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: $table-th-font-weight; // 1
|
font-weight: $table-th-font-weight; // 1
|
||||||
text-align: inherit; // 2
|
text-align: inherit; // 2
|
||||||
text-align: -webkit-match-parent; // 3
|
text-align: -webkit-match-parent; // 3
|
||||||
}
|
}
|
||||||
|
|
||||||
thead,
|
thead,
|
||||||
@ -378,26 +366,25 @@ tfoot,
|
|||||||
tr,
|
tr,
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
border-color: inherit;
|
border-color: inherit;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Forms
|
// Forms
|
||||||
//
|
//
|
||||||
// 1. Allow labels to use `margin` for spacing.
|
// 1. Allow labels to use `margin` for spacing.
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block; // 1
|
display: inline-block; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the default `border-radius` that macOS Chrome adds.
|
// Remove the default `border-radius` that macOS Chrome adds.
|
||||||
// See https://github.com/twbs/bootstrap/issues/24093
|
// See https://github.com/twbs/bootstrap/issues/24093
|
||||||
|
|
||||||
button {
|
button {
|
||||||
// stylelint-disable-next-line property-disallowed-list
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Explicitly remove focus outline in Chromium when it shouldn't be
|
// Explicitly remove focus outline in Chromium when it shouldn't be
|
||||||
@ -406,7 +393,7 @@ button {
|
|||||||
// confused and applies its very visible two-tone outline anyway.
|
// confused and applies its very visible two-tone outline anyway.
|
||||||
|
|
||||||
button:focus:not(:focus-visible) {
|
button:focus:not(:focus-visible) {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Remove the margin in Firefox and Safari
|
// 1. Remove the margin in Firefox and Safari
|
||||||
@ -416,40 +403,40 @@ button,
|
|||||||
select,
|
select,
|
||||||
optgroup,
|
optgroup,
|
||||||
textarea {
|
textarea {
|
||||||
margin: 0; // 1
|
margin: 0; // 1
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
@include font-size(inherit);
|
@include font-size(inherit);
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inheritance of text transform in Firefox
|
// Remove the inheritance of text transform in Firefox
|
||||||
button,
|
button,
|
||||||
select {
|
select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
// Set the cursor for non-`<button>` buttons
|
// Set the cursor for non-`<button>` buttons
|
||||||
//
|
//
|
||||||
// Details at https://github.com/twbs/bootstrap/pull/30562
|
// Details at https://github.com/twbs/bootstrap/pull/30562
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
// Remove the inheritance of word-wrap in Safari.
|
// Remove the inheritance of word-wrap in Safari.
|
||||||
// See https://github.com/twbs/bootstrap/issues/24990
|
// See https://github.com/twbs/bootstrap/issues/24990
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
|
|
||||||
// Undo the opacity change from Chrome
|
// Undo the opacity change from Chrome
|
||||||
&:disabled {
|
&:disabled {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the dropdown arrow in Chrome from inputs built with datalists.
|
// Remove the dropdown arrow in Chrome from inputs built with datalists.
|
||||||
// See https://stackoverflow.com/a/54997118
|
// See https://stackoverflow.com/a/54997118
|
||||||
|
|
||||||
[list]::-webkit-calendar-picker-indicator {
|
[list]::-webkit-calendar-picker-indicator {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||||
@ -461,26 +448,26 @@ button,
|
|||||||
[type="button"], // 1
|
[type="button"], // 1
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="submit"] {
|
[type="submit"] {
|
||||||
-webkit-appearance: button; // 2
|
-webkit-appearance: button; // 2
|
||||||
|
|
||||||
@if $enable-button-pointers {
|
@if $enable-button-pointers {
|
||||||
&:not(:disabled) {
|
&:not(:disabled) {
|
||||||
cursor: pointer; // 3
|
cursor: pointer; // 3
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||||
|
|
||||||
::-moz-focus-inner {
|
::-moz-focus-inner {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
resize: vertical; // 1
|
resize: vertical; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
|
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
|
||||||
@ -491,10 +478,10 @@ textarea {
|
|||||||
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
|
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
min-width: 0; // 1
|
min-width: 0; // 1
|
||||||
padding: 0; // 2
|
padding: 0; // 2
|
||||||
margin: 0; // 2
|
margin: 0; // 2
|
||||||
border: 0; // 2
|
border: 0; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. By using `float: left`, the legend will behave like a block element.
|
// 1. By using `float: left`, the legend will behave like a block element.
|
||||||
@ -503,17 +490,17 @@ fieldset {
|
|||||||
// See https://github.com/twbs/bootstrap/issues/29712
|
// See https://github.com/twbs/bootstrap/issues/29712
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
float: left; // 1
|
float: left; // 1
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: $legend-margin-bottom;
|
margin-bottom: $legend-margin-bottom;
|
||||||
@include font-size($legend-font-size);
|
@include font-size($legend-font-size);
|
||||||
font-weight: $legend-font-weight;
|
font-weight: $legend-font-weight;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
|
||||||
+ * {
|
+ * {
|
||||||
clear: left; // 2
|
clear: left; // 2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fix height of inputs with a type of datetime-local, date, month, week, or time
|
// Fix height of inputs with a type of datetime-local, date, month, week, or time
|
||||||
@ -526,11 +513,11 @@ legend {
|
|||||||
::-webkit-datetime-edit-day-field,
|
::-webkit-datetime-edit-day-field,
|
||||||
::-webkit-datetime-edit-month-field,
|
::-webkit-datetime-edit-month-field,
|
||||||
::-webkit-datetime-edit-year-field {
|
::-webkit-datetime-edit-year-field {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-inner-spin-button {
|
::-webkit-inner-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the outline style in Safari.
|
// 1. Correct the outline style in Safari.
|
||||||
@ -540,8 +527,8 @@ legend {
|
|||||||
// https://github.com/twbs/bootstrap/issues/11586.
|
// https://github.com/twbs/bootstrap/issues/11586.
|
||||||
|
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
outline-offset: -2px; // 1
|
outline-offset: -2px; // 1
|
||||||
-webkit-appearance: textfield; // 2
|
-webkit-appearance: textfield; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. A few input types should stay LTR
|
// 1. A few input types should stay LTR
|
||||||
@ -561,40 +548,39 @@ legend {
|
|||||||
// Remove the inner padding in Chrome and Safari on macOS.
|
// Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
|
||||||
::-webkit-search-decoration {
|
::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove padding around color pickers in webkit browsers
|
// Remove padding around color pickers in webkit browsers
|
||||||
|
|
||||||
::-webkit-color-swatch-wrapper {
|
::-webkit-color-swatch-wrapper {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Inherit font family and line height for file input buttons
|
// Inherit font family and line height for file input buttons
|
||||||
|
|
||||||
::file-selector-button {
|
::file-selector-button {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Change font properties to `inherit`
|
// 1. Change font properties to `inherit`
|
||||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
font: inherit; // 1
|
font: inherit; // 1
|
||||||
-webkit-appearance: button; // 2
|
-webkit-appearance: button; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct element displays
|
// Correct element displays
|
||||||
|
|
||||||
output {
|
output {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove border from iframe
|
// Remove border from iframe
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Summary
|
// Summary
|
||||||
@ -602,24 +588,22 @@ iframe {
|
|||||||
// 1. Add the correct display in all browsers
|
// 1. Add the correct display in all browsers
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
display: list-item; // 1
|
display: list-item; // 1
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Progress
|
// Progress
|
||||||
//
|
//
|
||||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Hidden attribute
|
// Hidden attribute
|
||||||
//
|
//
|
||||||
// Always hide an element with the `hidden` HTML attribute.
|
// Always hide an element with the `hidden` HTML attribute.
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -390,7 +390,7 @@ $enable-cssgrid: true !default;
|
|||||||
$enable-button-pointers: true !default;
|
$enable-button-pointers: true !default;
|
||||||
$enable-rfs: true !default;
|
$enable-rfs: true !default;
|
||||||
$enable-validation-icons: true !default;
|
$enable-validation-icons: true !default;
|
||||||
$enable-negative-margins: false !default;
|
$enable-negative-margins: true !default;
|
||||||
$enable-deprecation-messages: true !default;
|
$enable-deprecation-messages: true !default;
|
||||||
$enable-important-utilities: true !default;
|
$enable-important-utilities: true !default;
|
||||||
|
|
||||||
|
|||||||
@ -303,6 +303,48 @@
|
|||||||
height: 15px;
|
height: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.icon-small-room {
|
||||||
|
background: url("../images/icons/small-room.png");
|
||||||
|
width: 17px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-cog {
|
||||||
|
background: url("../images/icons/cog.png");
|
||||||
|
width: 21px;
|
||||||
|
height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-chat-history {
|
||||||
|
background: url("../images/icons/chat-history.png");
|
||||||
|
width: 17px;
|
||||||
|
height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-room-link {
|
||||||
|
background: url("../images/icons/room-link.png");
|
||||||
|
width: 17px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-zoom-more {
|
||||||
|
background: url("../images/icons/zoom-more.png");
|
||||||
|
width: 12px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-zoom-less {
|
||||||
|
background: url("../images/icons/zoom-less.png");
|
||||||
|
width: 12px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-like-room {
|
||||||
|
background: url("../images/icons/like-room.png");
|
||||||
|
width: 20px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
&.icon-arrows {
|
&.icon-arrows {
|
||||||
background: url("../images/icons/arrows.png");
|
background: url("../images/icons/arrows.png");
|
||||||
width: 17px;
|
width: 17px;
|
||||||
|
|||||||
6
src/events/hc-center/HcCenterEvent.ts
Normal file
6
src/events/hc-center/HcCenterEvent.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||||
|
|
||||||
|
export class HcCenterEvent extends NitroEvent
|
||||||
|
{
|
||||||
|
public static TOGGLE_HC_CENTER: string = 'HCC_TOGGLE';
|
||||||
|
}
|
||||||
@ -66,6 +66,7 @@ $nitro-card-tabs-height: 33px;
|
|||||||
|
|
||||||
.nitro-card {
|
.nitro-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: calc(100% - #{$toolbar-height});
|
max-height: calc(100% - #{$toolbar-height});
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@ -1,26 +1,28 @@
|
|||||||
@import './shared/Shared';
|
@import "./shared/Shared";
|
||||||
@import './avatar-editor/AvatarEditorView';
|
@import "./avatar-editor/AvatarEditorView";
|
||||||
@import './camera/CameraWidgetView';
|
@import "./camera/CameraWidgetView";
|
||||||
@import './catalog/CatalogView';
|
@import "./catalog/CatalogView";
|
||||||
@import './friends/FriendsView';
|
@import "./friends/FriendsView";
|
||||||
@import './groups/GroupView';
|
@import "./groups/GroupView";
|
||||||
@import './hotel-view/HotelView';
|
@import "./hotel-view/HotelView";
|
||||||
@import './loading/LoadingView';
|
@import "./inventory/InventoryView";
|
||||||
@import './main/MainView';
|
@import "./loading/LoadingView";
|
||||||
@import './navigator/NavigatorView';
|
@import "./main/MainView";
|
||||||
@import './notification-center/NotificationCenterView';
|
@import "./navigator/NavigatorView";
|
||||||
@import './purse/PurseView';
|
@import "./notification-center/NotificationCenterView";
|
||||||
@import './right-side/RightSideView';
|
@import "./purse/PurseView";
|
||||||
@import './room/RoomView';
|
@import "./right-side/RightSideView";
|
||||||
@import './room-host/RoomHostView';
|
@import "./room/RoomView";
|
||||||
@import './toolbar/ToolbarView';
|
@import "./room-host/RoomHostView";
|
||||||
@import './wired/WiredView';
|
@import "./toolbar/ToolbarView";
|
||||||
@import './mod-tools/ModToolsView';
|
@import "./wired/WiredView";
|
||||||
@import './achievements/AchievementsView';
|
@import "./mod-tools/ModToolsView";
|
||||||
@import './user-settings/UserSettingsView';
|
@import "./achievements/AchievementsView";
|
||||||
@import './user-profile/UserProfileVew';
|
@import "./user-settings/UserSettingsView";
|
||||||
@import './chat-history/ChatHistoryView';
|
@import "./user-profile/UserProfileVew";
|
||||||
@import './help/HelpView';
|
@import "./chat-history/ChatHistoryView";
|
||||||
@import './floorplan-editor/FloorplanEditorView';
|
@import "./help/HelpView";
|
||||||
@import './nitropedia/NitropediaView';
|
@import "./floorplan-editor/FloorplanEditorView";
|
||||||
|
@import "./nitropedia/NitropediaView";
|
||||||
|
@import "./hc-center/HcCenterView.scss";
|
||||||
@import './campaign/CampaignView';
|
@import './campaign/CampaignView';
|
||||||
|
|||||||
@ -169,13 +169,14 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
|
|||||||
</div>
|
</div>
|
||||||
</NitroCardGridItemView>
|
</NitroCardGridItemView>
|
||||||
);
|
);
|
||||||
}) }
|
})}
|
||||||
|
<div className="mt-auto text-black">{ LocalizeText('catalog.vip.buy.hccenter') }</div>
|
||||||
</NitroCardGridView>
|
</NitroCardGridView>
|
||||||
</NitroLayoutGridColumn>
|
</NitroLayoutGridColumn>
|
||||||
<NitroLayoutGridColumn size={ 5 }>
|
<NitroLayoutGridColumn size={ 5 }>
|
||||||
<NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
|
<NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
|
||||||
{ GetCatalogPageImage(pageParser, 1) && <img className="" alt="" src={ GetCatalogPageImage(pageParser, 1) } /> }
|
{ GetCatalogPageImage(pageParser, 1) && <img className="" alt="" src={ GetCatalogPageImage(pageParser, 1) } /> }
|
||||||
<NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } />
|
<NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={{ __html: getSubscriptionDetails }} />
|
||||||
</NitroLayoutFlexColumn>
|
</NitroLayoutFlexColumn>
|
||||||
{ pendingOffer && <div className="mt-auto w-100 text-black">
|
{ pendingOffer && <div className="mt-auto w-100 text-black">
|
||||||
<div className="d-flex gap-2 mb-2 align-items-center">
|
<div className="d-flex gap-2 mb-2 align-items-center">
|
||||||
|
|||||||
@ -80,18 +80,19 @@ export const ChatHistoryView: FC<{}> = props =>
|
|||||||
parent={props.parent}
|
parent={props.parent}
|
||||||
rowIndex={props.index}
|
rowIndex={props.index}
|
||||||
>
|
>
|
||||||
<div key={props.key} style={props.style} className="row chathistory-entry justify-content-start">
|
<div key={props.key} style={props.style} className="chathistory-entry justify-content-start">
|
||||||
{(item.type === ChatEntryType.TYPE_CHAT) &&
|
{(item.type === ChatEntryType.TYPE_CHAT) &&
|
||||||
<div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
|
<div className={`p-1 d-flex gap-1 ${isDark ? 'dark' : 'light'}`}>
|
||||||
<div className="p-1">{item.timestamp}</div>
|
<div className="text-muted">{item.timestamp}</div>
|
||||||
<div className="p-1 fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
|
<div className="cursor-pointer d-flex text-nowrap" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
|
||||||
<div className="p-1 text-break text-wrap">{item.message}</div>
|
<div className="text-break text-wrap flex-grow-1">{item.message}</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
{(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
|
{(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
|
||||||
<div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
|
<div className={`p-1 d-flex gap-1 ${isDark ? 'dark' : 'light'}`}>
|
||||||
<div className="p-1">{item.timestamp}</div>
|
<div className="text-muted">{item.timestamp}</div>
|
||||||
<div className="p-1 fw-bold cursor-pointer">{item.name}</div>
|
<i className="icon icon-small-room" />
|
||||||
|
<div className="cursor-pointer text-break text-wrap">{item.name}</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -134,9 +135,9 @@ export const ChatHistoryView: FC<{}> = props =>
|
|||||||
<ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
|
<ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
|
||||||
<ChatHistoryMessageHandler />
|
<ChatHistoryMessageHandler />
|
||||||
{isVisible &&
|
{isVisible &&
|
||||||
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false } theme={'dark'} >
|
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false } theme={'dark'} >
|
||||||
<NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/>
|
<NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/>
|
||||||
<NitroCardContentView className="chat-history-content" theme={'dark'}>
|
<NitroCardContentView className="chat-history-content p-0" theme={'dark'}>
|
||||||
<div className="row w-100 h-100 chat-history-container">
|
<div className="row w-100 h-100 chat-history-container">
|
||||||
<AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
|
<AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
|
||||||
{({ height, width }) =>
|
{({ height, width }) =>
|
||||||
|
|||||||
@ -122,7 +122,7 @@ export const FloorplanEditorView: FC<{}> = props =>
|
|||||||
<>
|
<>
|
||||||
<FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}>
|
<FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}>
|
||||||
{isVisible &&
|
{isVisible &&
|
||||||
<NitroCardView className="nitro-floorplan-editor">
|
<NitroCardView uniqueKey="floorpan-editor" className="nitro-floorplan-editor" simple={ true }>
|
||||||
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
|
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
|
||||||
<NitroCardContentView>
|
<NitroCardContentView>
|
||||||
<NitroLayoutGrid>
|
<NitroLayoutGrid>
|
||||||
|
|||||||
@ -30,7 +30,7 @@ export class FloorplanEditor extends PixiApplicationProxy
|
|||||||
super({
|
super({
|
||||||
width: width,
|
width: width,
|
||||||
height: height,
|
height: height,
|
||||||
backgroundColor: 0x2b2b2b,
|
backgroundColor: 0x000000,
|
||||||
antialias: true,
|
antialias: true,
|
||||||
autoDensity: true,
|
autoDensity: true,
|
||||||
resolution: 1,
|
resolution: 1,
|
||||||
|
|||||||
@ -105,7 +105,9 @@ export const FloorplanCanvasView: FC<{}> = props =>
|
|||||||
</NitroLayoutFlex>
|
</NitroLayoutFlex>
|
||||||
<NitroLayoutFlex className="align-items-center justify-content-center">
|
<NitroLayoutFlex className="align-items-center justify-content-center">
|
||||||
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('left')}><i className="fas fa-arrow-left"/></button></div>
|
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('left')}><i className="fas fa-arrow-left"/></button></div>
|
||||||
<div ref={elementRef} className="editor-area" />
|
<div className="rounded-2 overflow-hidden">
|
||||||
|
<div ref={elementRef} className="editor-area" />
|
||||||
|
</div>
|
||||||
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('right')}><i className="fas fa-arrow-right"/></button></div>
|
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('right')}><i className="fas fa-arrow-right"/></button></div>
|
||||||
</NitroLayoutFlex>
|
</NitroLayoutFlex>
|
||||||
<NitroLayoutFlex className="align-items-center justify-content-center">
|
<NitroLayoutFlex className="align-items-center justify-content-center">
|
||||||
|
|||||||
5
src/views/friends/common/GroupType.ts
Normal file
5
src/views/friends/common/GroupType.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export class GroupType
|
||||||
|
{
|
||||||
|
public static readonly GROUP_CHAT = 0;
|
||||||
|
public static readonly PRIVATE_CHAT = 1;
|
||||||
|
}
|
||||||
@ -1,7 +1,9 @@
|
|||||||
import { LocalizeText } from '../../../api';
|
import { LocalizeText } from '../../../api';
|
||||||
|
import { GroupType } from './GroupType';
|
||||||
import { MessengerFriend } from './MessengerFriend';
|
import { MessengerFriend } from './MessengerFriend';
|
||||||
import { MessengerThreadChat } from './MessengerThreadChat';
|
import { MessengerThreadChat } from './MessengerThreadChat';
|
||||||
import { MessengerThreadChatGroup } from './MessengerThreadChatGroup';
|
import { MessengerThreadChatGroup } from './MessengerThreadChatGroup';
|
||||||
|
import { getGroupChatData } from './Utils';
|
||||||
|
|
||||||
export class MessengerThread
|
export class MessengerThread
|
||||||
{
|
{
|
||||||
@ -10,35 +12,40 @@ export class MessengerThread
|
|||||||
private _participant: MessengerFriend;
|
private _participant: MessengerFriend;
|
||||||
private _groups: MessengerThreadChatGroup[];
|
private _groups: MessengerThreadChatGroup[];
|
||||||
private _lastUpdated: Date;
|
private _lastUpdated: Date;
|
||||||
private _unread: boolean;
|
private _unreadCount: number;
|
||||||
|
|
||||||
constructor(participant: MessengerFriend, isNew: boolean = true)
|
constructor(participant: MessengerFriend, isNew: boolean = true)
|
||||||
{
|
{
|
||||||
this._participant = participant;
|
this._participant = participant;
|
||||||
this._groups = [];
|
this._groups = [];
|
||||||
this._lastUpdated = new Date();
|
this._lastUpdated = new Date();
|
||||||
this._unread = false;
|
this._unreadCount = 0;
|
||||||
|
|
||||||
if(isNew)
|
if(isNew)
|
||||||
{
|
{
|
||||||
this.addMessage(-1, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
|
this.addMessage(null, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
|
||||||
|
|
||||||
this._unread = false;
|
this._unreadCount = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public addMessage(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0): MessengerThreadChat
|
public addMessage(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0): MessengerThreadChat
|
||||||
{
|
{
|
||||||
const group = this.getLastGroup(senderId);
|
const isGroupChat = (senderId < 0 && extraData);
|
||||||
|
const userId = isGroupChat ? getGroupChatData(extraData).userId : senderId;
|
||||||
|
|
||||||
|
const group = this.getLastGroup(userId);
|
||||||
|
|
||||||
if(!group) return;
|
if(!group) return;
|
||||||
|
|
||||||
|
if(isGroupChat) group.type = GroupType.GROUP_CHAT;
|
||||||
|
|
||||||
const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);
|
const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);
|
||||||
|
|
||||||
group.addChat(chat);
|
group.addChat(chat);
|
||||||
|
|
||||||
this._lastUpdated = new Date();
|
this._lastUpdated = new Date();
|
||||||
this._unread = true;
|
this._unreadCount++;
|
||||||
|
|
||||||
return chat;
|
return chat;
|
||||||
}
|
}
|
||||||
@ -58,7 +65,7 @@ export class MessengerThread
|
|||||||
|
|
||||||
public setRead(): void
|
public setRead(): void
|
||||||
{
|
{
|
||||||
this._unread = false;
|
this._unreadCount = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
public get participant(): MessengerFriend
|
public get participant(): MessengerFriend
|
||||||
@ -76,8 +83,13 @@ export class MessengerThread
|
|||||||
return this._lastUpdated;
|
return this._lastUpdated;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public get unreadCount(): number
|
||||||
|
{
|
||||||
|
return this._unreadCount;
|
||||||
|
}
|
||||||
|
|
||||||
public get unread(): boolean
|
public get unread(): boolean
|
||||||
{
|
{
|
||||||
return this._unread;
|
return this._unreadCount > 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,17 @@
|
|||||||
|
import { GroupType } from './GroupType';
|
||||||
import { MessengerThreadChat } from './MessengerThreadChat';
|
import { MessengerThreadChat } from './MessengerThreadChat';
|
||||||
|
|
||||||
export class MessengerThreadChatGroup
|
export class MessengerThreadChatGroup
|
||||||
{
|
{
|
||||||
private _userId: number;
|
private _userId: number;
|
||||||
private _chats: MessengerThreadChat[];
|
private _chats: MessengerThreadChat[];
|
||||||
|
private _type: number;
|
||||||
|
|
||||||
constructor(userId: number)
|
constructor(userId: number, type = GroupType.PRIVATE_CHAT)
|
||||||
{
|
{
|
||||||
this._userId = userId;
|
this._userId = userId;
|
||||||
this._chats = [];
|
this._chats = [];
|
||||||
|
this._type = type;
|
||||||
}
|
}
|
||||||
|
|
||||||
public addChat(message: MessengerThreadChat): void
|
public addChat(message: MessengerThreadChat): void
|
||||||
@ -25,4 +28,14 @@ export class MessengerThreadChatGroup
|
|||||||
{
|
{
|
||||||
return this._chats;
|
return this._chats;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public get type(): number
|
||||||
|
{
|
||||||
|
return this._type;
|
||||||
|
}
|
||||||
|
|
||||||
|
public set type(type: number)
|
||||||
|
{
|
||||||
|
this._type = type;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
18
src/views/friends/common/Utils.ts
Normal file
18
src/views/friends/common/Utils.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
export const getGroupChatData = (extraData: string) =>
|
||||||
|
{
|
||||||
|
const splitData = extraData.split('/');
|
||||||
|
|
||||||
|
const username = splitData[0];
|
||||||
|
const figure = splitData[1];
|
||||||
|
const userId = parseInt(splitData[2]);
|
||||||
|
|
||||||
|
const result: IGroupChatData = { username: username, figure: figure, userId: userId }
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IGroupChatData
|
||||||
|
{
|
||||||
|
username: string;
|
||||||
|
figure: string;
|
||||||
|
userId: number;
|
||||||
|
}
|
||||||
@ -11,8 +11,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.friend-bar-item-head {
|
.friend-bar-item-head {
|
||||||
top: -30px;
|
&.avatar {
|
||||||
left: -30px;
|
top: -30px;
|
||||||
|
left: -30px;
|
||||||
|
}
|
||||||
|
&.group {
|
||||||
|
top: -5px;
|
||||||
|
left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { GetUserProfile, LocalizeText, OpenMessengerChat } from '../../../../api
|
|||||||
import { SendMessageHook } from '../../../../hooks/messages';
|
import { SendMessageHook } from '../../../../hooks/messages';
|
||||||
import { NitroLayoutBase } from '../../../../layout/base';
|
import { NitroLayoutBase } from '../../../../layout/base';
|
||||||
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
||||||
|
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
|
||||||
import { FriendBarItemViewProps } from './FriendBarItemView.types';
|
import { FriendBarItemViewProps } from './FriendBarItemView.types';
|
||||||
|
|
||||||
export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
|
export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
|
||||||
@ -58,8 +59,9 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
|
<div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
|
||||||
<div className="friend-bar-item-head position-absolute">
|
<div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
|
||||||
<AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } />
|
{ friend.id > 0 && <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
|
||||||
|
{ friend.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={ friend.figure} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-truncate">{ friend.name }</div>
|
<div className="text-truncate">{ friend.name }</div>
|
||||||
{ isVisible &&
|
{ isVisible &&
|
||||||
|
|||||||
@ -1,18 +1,31 @@
|
|||||||
import { FC } from 'react';
|
import { FC, useMemo } from 'react';
|
||||||
import { GetSessionDataManager } from '../../../../api';
|
import { GetSessionDataManager } from '../../../../api';
|
||||||
import { NitroLayoutFlex } from '../../../../layout';
|
import { NitroLayoutFlex } from '../../../../layout';
|
||||||
import { NitroLayoutBase } from '../../../../layout/base';
|
import { NitroLayoutBase } from '../../../../layout/base';
|
||||||
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
||||||
|
import { GroupType } from '../../common/GroupType';
|
||||||
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
||||||
|
import { getGroupChatData } from '../../common/Utils';
|
||||||
import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
|
import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
|
||||||
|
|
||||||
export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
|
export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
|
||||||
{
|
{
|
||||||
const { thread = null, group = null } = props;
|
const { thread = null, group = null } = props;
|
||||||
|
|
||||||
if(!thread || !group) return null;
|
const isOwnChat = useMemo(() =>
|
||||||
|
{
|
||||||
|
if(!thread || !group) return false;
|
||||||
|
|
||||||
|
if(group.type === GroupType.PRIVATE_CHAT && (group.userId === GetSessionDataManager().userId)) return true;
|
||||||
|
|
||||||
if(group.userId === -1)
|
if( (group.type === GroupType.GROUP_CHAT) && (group.chats.length && getGroupChatData(group.chats[0].extraData).userId === GetSessionDataManager().userId)) return true;
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}, [group, thread]);
|
||||||
|
|
||||||
|
if(!thread || !group) return null;
|
||||||
|
|
||||||
|
if(!group.userId)
|
||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<div className="d-flex gap-2 w-100 justify-content-start">
|
<div className="d-flex gap-2 w-100 justify-content-start">
|
||||||
@ -31,17 +44,28 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NitroLayoutFlex className={ 'w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') } gap={ 2 }>
|
<NitroLayoutFlex className={ 'w-100 justify-content-' + (isOwnChat ? 'end' : 'start') } gap={ 2 }>
|
||||||
{ (group.userId > 0) &&
|
|
||||||
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
||||||
|
{ (group.type === GroupType.PRIVATE_CHAT && !isOwnChat) &&
|
||||||
<AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
|
<AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
|
||||||
</NitroLayoutBase> }
|
}
|
||||||
<NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
|
{ (group.type === GroupType.GROUP_CHAT && !isOwnChat) &&
|
||||||
{ group.chats.map((chat, index) => <NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
|
<AvatarImageView figure={ getGroupChatData(group.chats[0].extraData).figure } direction={ 2} />
|
||||||
|
}
|
||||||
|
</NitroLayoutBase>
|
||||||
|
<NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
|
||||||
|
<NitroLayoutBase className='fw-bold'>
|
||||||
|
{
|
||||||
|
(isOwnChat) && GetSessionDataManager().userName
|
||||||
|
}
|
||||||
|
{ (!isOwnChat) && ((group.type === GroupType.GROUP_CHAT) ? getGroupChatData(group.chats[0].extraData).username : thread.participant.name)
|
||||||
|
}
|
||||||
|
</NitroLayoutBase>
|
||||||
|
{ group.chats.map((chat, index) =><NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
|
||||||
</NitroLayoutBase>
|
</NitroLayoutBase>
|
||||||
{ (group.userId === 0) &&
|
{ (isOwnChat) &&
|
||||||
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
<NitroLayoutBase className="message-avatar flex-shrink-0">
|
||||||
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
|
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
|
||||||
</NitroLayoutBase> }
|
</NitroLayoutBase> }
|
||||||
|
|||||||
@ -1,24 +1,27 @@
|
|||||||
.nitro-friends-messenger {
|
.nitro-friends-messenger {
|
||||||
width: 280px;
|
width: $messenger-width;
|
||||||
resize: both;
|
height: $messenger-height;
|
||||||
|
|
||||||
.friend-head {
|
.open-chat-entry {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 40px;
|
border: 2px solid;
|
||||||
height: 40px;
|
border-color: $light;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.icon {
|
&.active {
|
||||||
position: absolute;
|
border-color: #fffde9;
|
||||||
top: 1px;
|
background-color: #ececec
|
||||||
right: 1px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-image {
|
.friend-head {
|
||||||
position: absolute;
|
width: 45px;
|
||||||
margin-left: -27px;
|
height: 45px;
|
||||||
margin-top: -27px;
|
overflow: hidden;
|
||||||
|
|
||||||
|
.avatar-image {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -27px;
|
||||||
|
margin-top: -27px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -27,8 +30,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chat-messages {
|
.chat-messages {
|
||||||
height: 200px;
|
|
||||||
min-height: 200px;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.message-avatar {
|
.message-avatar {
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer } from '@nitrots/nitro-renderer';
|
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer } from '@nitrots/nitro-renderer';
|
||||||
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { AddEventLinkTracker, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
|
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
|
||||||
import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound';
|
import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound';
|
||||||
import { FriendsMessengerIconEvent } from '../../../../events';
|
import { FriendsMessengerIconEvent } from '../../../../events';
|
||||||
import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
|
import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
|
||||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
|
||||||
import { NitroLayoutBase } from '../../../../layout/base';
|
import { NitroLayoutBase } from '../../../../layout/base';
|
||||||
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
|
||||||
|
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
|
||||||
|
import { ItemCountView } from '../../../shared/item-count/ItemCountView';
|
||||||
import { MessengerThread } from '../../common/MessengerThread';
|
import { MessengerThread } from '../../common/MessengerThread';
|
||||||
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
|
||||||
import { useFriendsContext } from '../../context/FriendsContext';
|
import { useFriendsContext } from '../../context/FriendsContext';
|
||||||
@ -14,41 +16,41 @@ import { FriendsMessengerThreadView } from '../messenger-thread/FriendsMessenger
|
|||||||
|
|
||||||
export const FriendsMessengerView: FC<{}> = props =>
|
export const FriendsMessengerView: FC<{}> = props =>
|
||||||
{
|
{
|
||||||
const [ isVisible, setIsVisible ] = useState(false);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const [ messageThreads, setMessageThreads ] = useState<MessengerThread[]>([]);
|
const [messageThreads, setMessageThreads] = useState<MessengerThread[]>([]);
|
||||||
const [ activeThreadIndex, setActiveThreadIndex ] = useState(-1);
|
const [activeThreadIndex, setActiveThreadIndex] = useState(-1);
|
||||||
const [ hiddenThreadIndexes, setHiddenThreadIndexes ] = useState<number[]>([]);
|
const [hiddenThreadIndexes, setHiddenThreadIndexes] = useState<number[]>([]);
|
||||||
const [ messageText, setMessageText ] = useState('');
|
const [messageText, setMessageText] = useState('');
|
||||||
const [ updateValue, setUpdateValue ] = useState({});
|
const [updateValue, setUpdateValue] = useState({});
|
||||||
const { friends = [] } = useFriendsContext();
|
const { friends = [] } = useFriendsContext();
|
||||||
const messagesBox = useRef<HTMLDivElement>();
|
const messagesBox = useRef<HTMLDivElement>();
|
||||||
|
|
||||||
const followFriend = useCallback(() =>
|
const followFriend = useCallback(() =>
|
||||||
{
|
{
|
||||||
SendMessageHook(new FollowFriendMessageComposer(messageThreads[activeThreadIndex].participant.id));
|
SendMessageHook(new FollowFriendMessageComposer(messageThreads[activeThreadIndex].participant.id));
|
||||||
}, [ messageThreads, activeThreadIndex ]);
|
}, [messageThreads, activeThreadIndex]);
|
||||||
|
|
||||||
const openProfile = useCallback(() =>
|
const openProfile = useCallback(() =>
|
||||||
{
|
{
|
||||||
GetUserProfile(messageThreads[activeThreadIndex].participant.id);
|
GetUserProfile(messageThreads[activeThreadIndex].participant.id);
|
||||||
}, [ messageThreads, activeThreadIndex ]);
|
}, [messageThreads, activeThreadIndex]);
|
||||||
|
|
||||||
const getFriend = useCallback((userId: number) =>
|
const getFriend = useCallback((userId: number) =>
|
||||||
{
|
{
|
||||||
return ((friends.find(friend => (friend.id === userId))) || null);
|
return ((friends.find(friend => (friend.id === userId))) || null);
|
||||||
}, [ friends ]);
|
}, [friends]);
|
||||||
|
|
||||||
const visibleThreads = useMemo(() =>
|
const visibleThreads = useMemo(() =>
|
||||||
{
|
{
|
||||||
return messageThreads.filter((thread, index) =>
|
return messageThreads.filter((thread, index) =>
|
||||||
{
|
{
|
||||||
if(hiddenThreadIndexes.indexOf(index) >= 0) return false;
|
if(hiddenThreadIndexes.indexOf(index) >= 0) return false;
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
}, [ messageThreads, hiddenThreadIndexes ]);
|
}, [messageThreads, hiddenThreadIndexes]);
|
||||||
|
|
||||||
const getMessageThreadWithIndex = useCallback<(userId: number) => [ number, MessengerThread ]>((userId: number) =>
|
const getMessageThreadWithIndex = useCallback<(userId: number) => [number, MessengerThread]>((userId: number) =>
|
||||||
{
|
{
|
||||||
if(messageThreads.length > 0)
|
if(messageThreads.length > 0)
|
||||||
{
|
{
|
||||||
@ -63,43 +65,43 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
if(hiddenIndex >= 0)
|
if(hiddenIndex >= 0)
|
||||||
{
|
{
|
||||||
setHiddenThreadIndexes(prevValue =>
|
setHiddenThreadIndexes(prevValue =>
|
||||||
{
|
{
|
||||||
const newIndexes = [ ...prevValue ];
|
const newIndexes = [...prevValue];
|
||||||
|
|
||||||
newIndexes.splice(hiddenIndex, 1);
|
newIndexes.splice(hiddenIndex, 1);
|
||||||
|
|
||||||
return newIndexes;
|
return newIndexes;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return [ i, thread ];
|
return [i, thread];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const friend = getFriend(userId);
|
const friend = getFriend(userId);
|
||||||
|
|
||||||
if(!friend) return [ -1, null ];
|
if(!friend) return [-1, null];
|
||||||
|
|
||||||
const thread = new MessengerThread(friend);
|
const thread = new MessengerThread(friend);
|
||||||
const newThreads = [ ...messageThreads, thread ];
|
const newThreads = [...messageThreads, thread];
|
||||||
|
|
||||||
setMessageThreads(newThreads);
|
setMessageThreads(newThreads);
|
||||||
|
|
||||||
return [ (newThreads.length - 1), thread ];
|
return [(newThreads.length - 1), thread];
|
||||||
}, [ messageThreads, hiddenThreadIndexes, getFriend ]);
|
}, [messageThreads, hiddenThreadIndexes, getFriend]);
|
||||||
|
|
||||||
const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) =>
|
const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) =>
|
||||||
{
|
{
|
||||||
const parser = event.getParser();
|
const parser = event.getParser();
|
||||||
const [ threadIndex, thread ] = getMessageThreadWithIndex(parser.senderId);
|
const [threadIndex, thread] = getMessageThreadWithIndex(parser.senderId);
|
||||||
|
|
||||||
if((threadIndex === -1) || !thread) return;
|
if((threadIndex === -1) || !thread) return;
|
||||||
|
|
||||||
thread.addMessage(parser.senderId, parser.messageText, parser.secondsSinceSent, parser.extraData);
|
thread.addMessage(parser.senderId, parser.messageText, parser.secondsSinceSent, parser.extraData);
|
||||||
|
|
||||||
setMessageThreads(prevValue => [ ...prevValue ]);
|
setMessageThreads(prevValue => [...prevValue]);
|
||||||
}, [ getMessageThreadWithIndex ]);
|
}, [getMessageThreadWithIndex]);
|
||||||
|
|
||||||
CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent);
|
CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent);
|
||||||
|
|
||||||
@ -117,21 +119,21 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
|
|
||||||
if(messageThreads.length === 1 && thread.groups.length === 1) PlaySound(MESSENGER_NEW_THREAD);
|
if(messageThreads.length === 1 && thread.groups.length === 1) PlaySound(MESSENGER_NEW_THREAD);
|
||||||
|
|
||||||
thread.addMessage(0, messageText, 0, null, MessengerThreadChat.CHAT);
|
thread.addMessage(GetSessionDataManager().userId, messageText, 0, null, MessengerThreadChat.CHAT);
|
||||||
|
|
||||||
BatchUpdates(() =>
|
BatchUpdates(() =>
|
||||||
{
|
{
|
||||||
setMessageThreads(prevValue => [ ...prevValue ]);
|
setMessageThreads(prevValue => [...prevValue]);
|
||||||
setMessageText('');
|
setMessageText('');
|
||||||
});
|
});
|
||||||
}, [ messageThreads, activeThreadIndex, messageText ]);
|
}, [messageThreads, activeThreadIndex, messageText]);
|
||||||
|
|
||||||
const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
|
const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
|
||||||
{
|
{
|
||||||
if(event.key !== 'Enter') return;
|
if(event.key !== 'Enter') return;
|
||||||
|
|
||||||
sendMessage();
|
sendMessage();
|
||||||
}, [ sendMessage ]);
|
}, [sendMessage]);
|
||||||
|
|
||||||
const linkReceived = useCallback((url: string) =>
|
const linkReceived = useCallback((url: string) =>
|
||||||
{
|
{
|
||||||
@ -146,7 +148,7 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [ threadIndex ] = getMessageThreadWithIndex(parseInt(parts[2]));
|
const [threadIndex] = getMessageThreadWithIndex(parseInt(parts[2]));
|
||||||
|
|
||||||
if(threadIndex === -1) return;
|
if(threadIndex === -1) return;
|
||||||
|
|
||||||
@ -155,18 +157,18 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
setActiveThreadIndex(threadIndex);
|
setActiveThreadIndex(threadIndex);
|
||||||
setIsVisible(true);
|
setIsVisible(true);
|
||||||
});
|
});
|
||||||
}, [ getMessageThreadWithIndex ]);
|
}, [getMessageThreadWithIndex]);
|
||||||
|
|
||||||
const closeThread = useCallback((threadIndex: number) =>
|
const closeThread = useCallback((threadIndex: number) =>
|
||||||
{
|
{
|
||||||
setHiddenThreadIndexes(prevValue =>
|
setHiddenThreadIndexes(prevValue =>
|
||||||
{
|
{
|
||||||
const values = [ ...prevValue ];
|
const values = [...prevValue];
|
||||||
|
|
||||||
if(values.indexOf(threadIndex) === -1) values.push(threadIndex);
|
if(values.indexOf(threadIndex) === -1) values.push(threadIndex);
|
||||||
|
|
||||||
return values;
|
return values;
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
@ -179,19 +181,19 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
AddEventLinkTracker(linkTracker);
|
AddEventLinkTracker(linkTracker);
|
||||||
|
|
||||||
return () => RemoveLinkEventTracker(linkTracker);
|
return () => RemoveLinkEventTracker(linkTracker);
|
||||||
}, [ linkReceived ]);
|
}, [linkReceived]);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
if(!isVisible) return;
|
if(!isVisible) return;
|
||||||
|
|
||||||
if(activeThreadIndex === -1) setActiveThreadIndex(0);
|
if(activeThreadIndex === -1) setActiveThreadIndex(0);
|
||||||
}, [ isVisible, activeThreadIndex ]);
|
}, [isVisible, activeThreadIndex]);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
if(hiddenThreadIndexes.indexOf(activeThreadIndex) >= 0) setActiveThreadIndex(0);
|
if(hiddenThreadIndexes.indexOf(activeThreadIndex) >= 0) setActiveThreadIndex(0);
|
||||||
}, [ activeThreadIndex, hiddenThreadIndexes ]);
|
}, [activeThreadIndex, hiddenThreadIndexes]);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
@ -205,7 +207,7 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
activeThread.setRead();
|
activeThread.setRead();
|
||||||
setUpdateValue({});
|
setUpdateValue({});
|
||||||
}
|
}
|
||||||
}, [ isVisible, messageThreads, activeThreadIndex ]);
|
}, [isVisible, messageThreads, activeThreadIndex]);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
@ -222,7 +224,7 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
|
|
||||||
for(const thread of visibleThreads)
|
for(const thread of visibleThreads)
|
||||||
{
|
{
|
||||||
if(thread.unread)
|
if(thread.unreadCount > 0)
|
||||||
{
|
{
|
||||||
isUnread = true;
|
isUnread = true;
|
||||||
|
|
||||||
@ -231,65 +233,73 @@ export const FriendsMessengerView: FC<{}> = props =>
|
|||||||
}
|
}
|
||||||
|
|
||||||
if(isUnread) PlaySound(MESSENGER_MESSAGE_RECEIVED);
|
if(isUnread) PlaySound(MESSENGER_MESSAGE_RECEIVED);
|
||||||
|
|
||||||
dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, isUnread ? FriendsMessengerIconEvent.UNREAD_ICON : FriendsMessengerIconEvent.SHOW_ICON));
|
dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, isUnread ? FriendsMessengerIconEvent.UNREAD_ICON : FriendsMessengerIconEvent.SHOW_ICON));
|
||||||
}, [ visibleThreads, updateValue ]);
|
}, [visibleThreads, updateValue]);
|
||||||
|
|
||||||
if(!isVisible) return null;
|
if(!isVisible) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" simple={ true }>
|
<NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" simple={true}>
|
||||||
<NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', [ 'OPEN_CHAT_COUNT' ], [ visibleThreads.length.toString() ]) } onCloseClick={ event => setIsVisible(false) } />
|
<NitroCardHeaderView headerText={LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [visibleThreads.length.toString()])} onCloseClick={event => setIsVisible(false)} />
|
||||||
<NitroCardContentView>
|
<NitroCardContentView>
|
||||||
<NitroLayoutFlex gap={ 2 } overflow="auto">
|
<NitroLayoutGrid>
|
||||||
{ visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) =>
|
<NitroLayoutGridColumn size={ 4 }>
|
||||||
|
<NitroLayoutBase className='text-black fw-bold fs-5'>{LocalizeText('toolbar.icon.label.messenger')}</NitroLayoutBase>
|
||||||
|
<NitroLayoutFlexColumn className='h-100 overflow-auto'>
|
||||||
|
{visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) =>
|
||||||
{
|
{
|
||||||
const messageThreadIndex = messageThreads.indexOf(thread);
|
const messageThreadIndex = messageThreads.indexOf(thread);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={ index } className="position-relative friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
|
<NitroLayoutFlex key={index} className={`open-chat-entry p-1 cursor-pointer rounded ${activeThreadIndex === messageThreadIndex ? 'active' : ''}`} onClick={event => setActiveThreadIndex(messageThreadIndex)}>
|
||||||
{ thread.unread &&
|
{thread.unread &&
|
||||||
<NitroLayoutBase className="position-absolute nitro-friends-spritesheet icon-new-message top-1 end-1 z-index-1" /> }
|
<ItemCountView count={ thread.unreadCount }/>
|
||||||
<AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />
|
}
|
||||||
</div>
|
<div className="friend-head rounded flex-shrink-0">
|
||||||
|
|
||||||
|
{thread.participant.id > 0 && <AvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
|
||||||
|
{thread.participant.id <= 0 && <BadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<NitroLayoutBase className='d-flex text-truncate text-black ms-1 align-items-center'>{thread.participant.name}</NitroLayoutBase>
|
||||||
|
</NitroLayoutFlex>
|
||||||
);
|
);
|
||||||
}) }
|
})}
|
||||||
</NitroLayoutFlex>
|
|
||||||
<NitroLayoutFlex className="align-items-center my-1" position="relative">
|
|
||||||
{ (activeThreadIndex >= 0) &&
|
|
||||||
<NitroLayoutBase className="text-black bg-light pe-2 flex-none">
|
|
||||||
{ LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) }
|
|
||||||
</NitroLayoutBase> }
|
|
||||||
<hr className="bg-dark m-0 w-100" />
|
|
||||||
</NitroLayoutFlex>
|
|
||||||
{ (activeThreadIndex >= 0) &&
|
|
||||||
<>
|
|
||||||
<NitroLayoutFlex className="mb-2" gap={ 2 }>
|
|
||||||
<NitroLayoutButtonGroup>
|
|
||||||
<NitroLayoutButton variant="primary" size="sm" onClick={ followFriend }>
|
|
||||||
<NitroLayoutBase className="nitro-friends-spritesheet icon-follow" />
|
|
||||||
</NitroLayoutButton>
|
|
||||||
<NitroLayoutButton variant="primary" size="sm" onClick={ openProfile }>
|
|
||||||
<NitroLayoutBase className="nitro-friends-spritesheet icon-profile-sm" />
|
|
||||||
</NitroLayoutButton>
|
|
||||||
</NitroLayoutButtonGroup>
|
|
||||||
<NitroLayoutButton variant="danger" size="sm" onClick={ openProfile }>
|
|
||||||
{ LocalizeText('messenger.window.button.report') }
|
|
||||||
</NitroLayoutButton>
|
|
||||||
<NitroLayoutButton className="ms-auto" variant="primary" size="sm" onClick={ event => closeThread(activeThreadIndex) }>
|
|
||||||
<NitroLayoutBase className="fas fa-times" />
|
|
||||||
</NitroLayoutButton>
|
|
||||||
</NitroLayoutFlex>
|
|
||||||
<NitroLayoutFlexColumn innerRef={ messagesBox } className="bg-muted p-2 rounded chat-messages mb-2">
|
|
||||||
<FriendsMessengerThreadView thread={ messageThreads[activeThreadIndex] } />
|
|
||||||
</NitroLayoutFlexColumn>
|
</NitroLayoutFlexColumn>
|
||||||
<NitroLayoutFlex gap={ 2 }>
|
</NitroLayoutGridColumn>
|
||||||
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
|
<NitroLayoutGridColumn size={ 8 }>
|
||||||
<NitroLayoutButton variant="success" size="sm" onClick={ sendMessage }>
|
{(activeThreadIndex >= 0) &&
|
||||||
{ LocalizeText('widgets.chatinput.say') }
|
<>
|
||||||
</NitroLayoutButton>
|
<NitroLayoutBase className='mb-2 text-black text-center fw-bold fs-6'>{LocalizeText('messenger.window.separator', ['FRIEND_NAME'], [messageThreads[activeThreadIndex].participant.name])}</NitroLayoutBase>
|
||||||
</NitroLayoutFlex>
|
<NitroLayoutFlex className="mb-2" gap={2}>
|
||||||
</> }
|
<NitroLayoutButtonGroup>
|
||||||
|
<NitroLayoutButton variant="primary" size="sm" onClick={followFriend}>
|
||||||
|
<NitroLayoutBase className="nitro-friends-spritesheet icon-follow" />
|
||||||
|
</NitroLayoutButton>
|
||||||
|
<NitroLayoutButton variant="primary" size="sm" onClick={openProfile}>
|
||||||
|
<NitroLayoutBase className="nitro-friends-spritesheet icon-profile-sm" />
|
||||||
|
</NitroLayoutButton>
|
||||||
|
</NitroLayoutButtonGroup>
|
||||||
|
<NitroLayoutButton variant="danger" size="sm" onClick={openProfile}>
|
||||||
|
{LocalizeText('messenger.window.button.report')}
|
||||||
|
</NitroLayoutButton>
|
||||||
|
<NitroLayoutButton className="ms-auto" variant="primary" size="sm" onClick={event => closeThread(activeThreadIndex)}>
|
||||||
|
<NitroLayoutBase className="fas fa-times" />
|
||||||
|
</NitroLayoutButton>
|
||||||
|
</NitroLayoutFlex>
|
||||||
|
<NitroLayoutFlexColumn innerRef={messagesBox} className="bg-muted p-2 rounded chat-messages mb-2 h-100 w-100">
|
||||||
|
<FriendsMessengerThreadView thread={messageThreads[activeThreadIndex]} />
|
||||||
|
</NitroLayoutFlexColumn>
|
||||||
|
<NitroLayoutFlex gap={2}>
|
||||||
|
<input type="text" className="form-control form-control-sm" placeholder={LocalizeText('messenger.window.input.default', ['FRIEND_NAME'], [messageThreads[activeThreadIndex].participant.name])} value={messageText} onChange={event => setMessageText(event.target.value)} onKeyDown={onKeyDown} />
|
||||||
|
<NitroLayoutButton variant="success" size="sm" onClick={sendMessage}>
|
||||||
|
{LocalizeText('widgets.chatinput.say')}
|
||||||
|
</NitroLayoutButton>
|
||||||
|
</NitroLayoutFlex>
|
||||||
|
</>}
|
||||||
|
</NitroLayoutGridColumn>
|
||||||
|
</NitroLayoutGrid>
|
||||||
</NitroCardContentView>
|
</NitroCardContentView>
|
||||||
</NitroCardView>
|
</NitroCardView>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -27,7 +27,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}, [ groupColors, groupColorsA, groupColorsB ]);
|
}, [dispatchGroupsState, groupColors, groupColorsA, groupColorsB]);
|
||||||
|
|
||||||
const getGroupColor = useCallback((colorIndex: number) =>
|
const getGroupColor = useCallback((colorIndex: number) =>
|
||||||
{
|
{
|
||||||
@ -63,7 +63,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
|
|||||||
<div className="fw-bold">{ LocalizeText('group.edit.color.primary.color') }</div>
|
<div className="fw-bold">{ LocalizeText('group.edit.color.primary.color') }</div>
|
||||||
<div className="d-flex align-items-center gap-2">
|
<div className="d-flex align-items-center gap-2">
|
||||||
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
|
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||||
{ groupColorsA && groupColorsA.map((item, index) =>
|
{ groupColors && groupColorsA && groupColorsA.map((item, index) =>
|
||||||
{
|
{
|
||||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
|
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
|
||||||
}) }
|
}) }
|
||||||
|
|||||||
44
src/views/hc-center/HcCenterView.scss
Normal file
44
src/views/hc-center/HcCenterView.scss
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
.nitro-hc-center {
|
||||||
|
width: 430px;
|
||||||
|
resize: none;
|
||||||
|
|
||||||
|
.hc-logo {
|
||||||
|
width: 213px;
|
||||||
|
height: 37px;
|
||||||
|
background-image: url("../../assets/images/hc-center/hc_logo.gif");
|
||||||
|
}
|
||||||
|
|
||||||
|
.payday-special {
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payday {
|
||||||
|
width: 222px;
|
||||||
|
height: 150px;
|
||||||
|
background-image: url("../../assets/images/hc-center/payday.png");
|
||||||
|
z-index: 3;
|
||||||
|
color: #6b3502;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-image: url("../../assets/images/hc-center/clock.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.streak-info {
|
||||||
|
min-height: 64px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.habbo-avatar {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits {
|
||||||
|
background-image: url("../../assets/images/hc-center/benefits.png");
|
||||||
|
background-position: right top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
244
src/views/hc-center/HcCenterView.tsx
Normal file
244
src/views/hc-center/HcCenterView.tsx
Normal file
@ -0,0 +1,244 @@
|
|||||||
|
import { ClubGiftInfoEvent, FriendlyTime, GetClubGiftInfo, RequestBadgesComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
|
||||||
|
import { BadgesEvent, FigureUpdateEvent } from '@nitrots/nitro-renderer/src';
|
||||||
|
import { ScrGetKickbackInfoMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/user/ScrGetKickbackInfoMessageComposer';
|
||||||
|
import { FC, useCallback, useEffect, useState } from 'react';
|
||||||
|
import { OverlayTrigger, Popover } from 'react-bootstrap';
|
||||||
|
import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
|
||||||
|
import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
|
||||||
|
import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
|
||||||
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
|
||||||
|
import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
|
||||||
|
import { BadgeImageView } from '../shared/badge-image/BadgeImageView';
|
||||||
|
import { BadgeResolver } from './util/BadgeResolver';
|
||||||
|
import { ClubStatus } from './util/ClubStatus';
|
||||||
|
|
||||||
|
|
||||||
|
export const HcCenterView: FC<{}> = props =>
|
||||||
|
{
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
const [userFigure, setUserFigure] = useState<string>(null);
|
||||||
|
const [kickbackData, setKickbackData] = useState<ScrKickbackData>(null);
|
||||||
|
const [clubDays, setClubDays] = useState(0);
|
||||||
|
const [pastClubDays, setPastClubDays] = useState(0);
|
||||||
|
const [clubPeriods, setPastClubPeriods] = useState(0);
|
||||||
|
const [minsTillExpire, setMinsTillExpire] = useState(0);
|
||||||
|
const [clubStatus, setClubStatus] = useState(ClubStatus.NONE);
|
||||||
|
const [unclaimedGifts, setUnclaimedGifts] = useState(0);
|
||||||
|
|
||||||
|
const [badgeCode, setBadgeCode] = useState(BadgeResolver.default_badge);
|
||||||
|
|
||||||
|
const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
|
||||||
|
{
|
||||||
|
const parser = event.getParser();
|
||||||
|
setUserFigure(parser.userInfo.figure);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onUserFigureEvent = useCallback((event: FigureUpdateEvent) =>
|
||||||
|
{
|
||||||
|
const parser = event.getParser();
|
||||||
|
setUserFigure(parser.figure);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
CreateMessageHook(UserInfoEvent, onUserInfoEvent);
|
||||||
|
CreateMessageHook(FigureUpdateEvent, onUserFigureEvent);
|
||||||
|
|
||||||
|
const onHcCenterEvent = useCallback((event: HcCenterEvent) =>
|
||||||
|
{
|
||||||
|
switch(event.type)
|
||||||
|
{
|
||||||
|
case HcCenterEvent.TOGGLE_HC_CENTER:
|
||||||
|
setIsVisible(!isVisible);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}, [isVisible]);
|
||||||
|
|
||||||
|
useUiEvent(HcCenterEvent.TOGGLE_HC_CENTER, onHcCenterEvent);
|
||||||
|
|
||||||
|
const onClubGiftInfoEvent = useCallback((event: ClubGiftInfoEvent) =>
|
||||||
|
{
|
||||||
|
const parser = event.getParser();
|
||||||
|
|
||||||
|
setUnclaimedGifts(parser.giftsAvailable);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onScrSendKickbackInfo = useCallback((event: ScrSendKickbackInfoMessageEvent) =>
|
||||||
|
{
|
||||||
|
const parser = event.getParser();
|
||||||
|
|
||||||
|
setKickbackData(parser.data)
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onBadges = useCallback((event: BadgesEvent) =>
|
||||||
|
{
|
||||||
|
const parser = event.getParser();
|
||||||
|
|
||||||
|
setBadgeCode(BadgeResolver.getClubBadge(parser.getAllBadgeCodes()));
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
CreateMessageHook(ClubGiftInfoEvent, onClubGiftInfoEvent);
|
||||||
|
CreateMessageHook(ScrSendKickbackInfoMessageEvent, onScrSendKickbackInfo);
|
||||||
|
CreateMessageHook(BadgesEvent, onBadges);
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
SendMessageHook(new GetClubGiftInfo());
|
||||||
|
SendMessageHook(new ScrGetKickbackInfoMessageComposer());
|
||||||
|
SendMessageHook(new RequestBadgesComposer());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
|
||||||
|
{
|
||||||
|
const parser = event.getParser();
|
||||||
|
|
||||||
|
const productName = parser.productName;
|
||||||
|
|
||||||
|
if((productName !== 'club_habbo') && (productName !== 'habbo_club')) return;
|
||||||
|
|
||||||
|
setClubDays(Math.max(0, parser.daysToPeriodEnd));
|
||||||
|
setPastClubPeriods(Math.max(0, parser.periodsSubscribedAhead));
|
||||||
|
setPastClubDays(Math.max(0, parser.pastClubDays));
|
||||||
|
setMinsTillExpire(Math.max(0, parser.minutesUntilExpiration));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
if(clubDays > 0) return setClubStatus(ClubStatus.ACTIVE)
|
||||||
|
if(pastClubDays > 0) return setClubStatus(ClubStatus.EXPIRED);
|
||||||
|
|
||||||
|
}, [clubDays, pastClubDays]);
|
||||||
|
|
||||||
|
CreateMessageHook(UserSubscriptionEvent, onUserSubscriptionEvent);
|
||||||
|
|
||||||
|
const getClubText = useCallback(() =>
|
||||||
|
{
|
||||||
|
const totalDays = ((clubPeriods * 31) + clubDays);
|
||||||
|
const minutesUntilExpiration = minsTillExpire;
|
||||||
|
|
||||||
|
if(clubStatus !== ClubStatus.ACTIVE)
|
||||||
|
{
|
||||||
|
return LocalizeText('purse.clubdays.zero.amount.text');
|
||||||
|
}
|
||||||
|
else if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24)))
|
||||||
|
{
|
||||||
|
return FriendlyTime.shortFormat(minutesUntilExpiration * 60);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return FriendlyTime.shortFormat(totalDays * 86400);
|
||||||
|
}
|
||||||
|
}, [clubStatus, clubDays, clubPeriods, minsTillExpire]);
|
||||||
|
|
||||||
|
const getInfoText = useCallback(() =>
|
||||||
|
{
|
||||||
|
switch(clubStatus)
|
||||||
|
{
|
||||||
|
case ClubStatus.ACTIVE:
|
||||||
|
return LocalizeText('hccenter.status.' + clubStatus + '.info',
|
||||||
|
['timeleft', 'joindate', 'streakduration'],
|
||||||
|
[getClubText(), kickbackData.firstSubscriptionDate, FriendlyTime.shortFormat(kickbackData.currentHcStreak * 86400)]);
|
||||||
|
case ClubStatus.EXPIRED:
|
||||||
|
return LocalizeText('hccenter.status.' + clubStatus + '.info', ['joindate'], [kickbackData.firstSubscriptionDate])
|
||||||
|
default:
|
||||||
|
return LocalizeText('hccenter.status.' + clubStatus + '.info');
|
||||||
|
}
|
||||||
|
}, [clubStatus, kickbackData, getClubText]);
|
||||||
|
|
||||||
|
const getHcPaydayTime = useCallback(() =>
|
||||||
|
{
|
||||||
|
if(kickbackData.timeUntilPayday < 60) return LocalizeText('hccenter.special.time.soon');
|
||||||
|
return FriendlyTime.shortFormat(kickbackData.timeUntilPayday * 60);
|
||||||
|
}, [kickbackData]);
|
||||||
|
|
||||||
|
const getHcPaydayAmount = useCallback(() =>
|
||||||
|
{
|
||||||
|
return LocalizeText('hccenter.special.sum', ['credits'], [(kickbackData.creditRewardForStreakBonus + kickbackData.creditRewardForMonthlySpent).toString()])
|
||||||
|
}, [kickbackData])
|
||||||
|
|
||||||
|
if(!isVisible) return null;
|
||||||
|
|
||||||
|
const popover = (
|
||||||
|
<Popover id="popover-basic">
|
||||||
|
<Popover.Body className="text-black py-2 px-3">
|
||||||
|
<h5>{LocalizeText('hccenter.breakdown.title')}</h5>
|
||||||
|
<div>{LocalizeText('hccenter.breakdown.creditsspent', ['credits'], [kickbackData.totalCreditsSpent.toString()])}</div>
|
||||||
|
<div>{LocalizeText('hccenter.breakdown.paydayfactor.percent', ['percent'], [(kickbackData.kickbackPercentage * 100).toString()])}</div>
|
||||||
|
<div>{LocalizeText('hccenter.breakdown.streakbonus', ['credits'], [kickbackData.creditRewardForStreakBonus.toString()])}</div>
|
||||||
|
<hr className="w-100 text-black my-1" />
|
||||||
|
<div>{LocalizeText('hccenter.breakdown.total', ['credits', 'actual'], [getHcPaydayAmount(),
|
||||||
|
((((kickbackData.kickbackPercentage * kickbackData.totalCreditsSpent) + kickbackData.creditRewardForStreakBonus) * 100) / 100).toString()])}</div>
|
||||||
|
<div className="btn btn-link text-primary p-0" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{
|
||||||
|
LocalizeText('hccenter.special.infolink')}
|
||||||
|
</div>
|
||||||
|
</Popover.Body>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NitroCardView simple={true} className="nitro-hc-center">
|
||||||
|
<NitroCardHeaderView headerText={LocalizeText('generic.hccenter')} onCloseClick={() => setIsVisible(false)} />
|
||||||
|
<div className="bg-muted p-2 position-relative">
|
||||||
|
<div className="hc-logo mb-2" />
|
||||||
|
<button className="btn btn-success" onClick={ () => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.buy']) } }>
|
||||||
|
{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.extend' : 'hccenter.btn.buy')}
|
||||||
|
</button>
|
||||||
|
<div className="position-absolute end-0 p-4 top-0 habbo-avatar">
|
||||||
|
<AvatarImageView figure={userFigure} direction={4} scale={2} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NitroCardContentView>
|
||||||
|
<div className="d-flex flex-row mb-1">
|
||||||
|
<BadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
|
||||||
|
<div className="w-100 text-black streak-info">
|
||||||
|
<h6 className="mb-0">{LocalizeText('hccenter.status.' + clubStatus)}</h6>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: getInfoText() }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{GetConfiguration('hc.center')['payday.info'] &&
|
||||||
|
<div className="d-flex flex-row align-items-center mb-n2">
|
||||||
|
<div className="rounded-start bg-primary p-2 payday-special mb-1 d-flex flex-column">
|
||||||
|
<h4 className="mb-1">{LocalizeText('hccenter.special.title')}</h4>
|
||||||
|
<div>{LocalizeText('hccenter.special.info')}</div>
|
||||||
|
<div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{LocalizeText('hccenter.special.infolink')}</div>
|
||||||
|
</div>
|
||||||
|
<div className="payday flex-shrink-0 p-2">
|
||||||
|
<h5 className="mb-2 ms-2">{LocalizeText('hccenter.special.time.title')}</h5>
|
||||||
|
<div className="d-flex flex-row mb-2">
|
||||||
|
<div className="clock me-2" />
|
||||||
|
<h6 className="mb-0 align-self-center">{getHcPaydayTime()}</h6>
|
||||||
|
</div>
|
||||||
|
{clubStatus === ClubStatus.ACTIVE &&
|
||||||
|
<div className="pe-3">
|
||||||
|
<h5 className="ms-2 mb-1 bolder">{LocalizeText('hccenter.special.amount.title')}</h5>
|
||||||
|
<div className="d-flex flex-column">
|
||||||
|
<div className="w-100 text-center ms-4n">{getHcPaydayAmount()}</div>
|
||||||
|
<OverlayTrigger trigger="hover" placement="left" overlay={popover}>
|
||||||
|
<div className="btn btn-link align-self-end text-primary">
|
||||||
|
{LocalizeText('hccenter.breakdown.infolink')}
|
||||||
|
</div>
|
||||||
|
</OverlayTrigger>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{GetConfiguration('hc.center')['gift.info'] &&
|
||||||
|
<div className="rounded bg-success p-2 d-flex flex-row mb-0">
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-1">{LocalizeText('hccenter.gift.title')}</h4>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: unclaimedGifts > 0 ? LocalizeText('hccenter.unclaimedgifts', ['unclaimedgifts'], [unclaimedGifts.toString()]) : LocalizeText('hccenter.gift.info') }}></div>
|
||||||
|
</div>
|
||||||
|
<button className="btn btn-primary btn-lg align-self-center ms-auto" onClick={() => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.gifts']) }}>{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.gifts.redeem' : 'hccenter.btn.gifts.view')}</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{GetConfiguration('hc.center')['benefits.info'] &&
|
||||||
|
<div className="benefits text-black py-2">
|
||||||
|
<h5 className="mb-1 text-primary">{LocalizeText('hccenter.general.title')}</h5>
|
||||||
|
<div className="mb-2" dangerouslySetInnerHTML={{ __html: LocalizeText('hccenter.general.info') }} />
|
||||||
|
<button className="btn btn-link p-0 text-primary" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) }}>{LocalizeText('hccenter.general.infolink')}</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</NitroCardContentView>
|
||||||
|
</NitroCardView>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/views/hc-center/util/BadgeResolver.ts
Normal file
23
src/views/hc-center/util/BadgeResolver.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
|
||||||
|
export class BadgeResolver
|
||||||
|
{
|
||||||
|
public static default_badge: string = 'HC1';
|
||||||
|
public static badges: string[] = ['ACH_VipHC1', 'ACH_VipHC2', 'ACH_VipHC3', 'ACH_VipHC4', 'ACH_VipHC5', 'HC1', 'HC2', 'HC3', 'HC4', 'HC5'];
|
||||||
|
|
||||||
|
|
||||||
|
public static getClubBadge(k: string[]): string
|
||||||
|
{
|
||||||
|
var badgeCode: string = null;
|
||||||
|
|
||||||
|
this.badges.forEach(badge =>
|
||||||
|
{
|
||||||
|
if (k.indexOf(badge) > -1)
|
||||||
|
{
|
||||||
|
badgeCode = badge;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return badgeCode || this.default_badge;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
6
src/views/hc-center/util/ClubStatus.ts
Normal file
6
src/views/hc-center/util/ClubStatus.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export class ClubStatus
|
||||||
|
{
|
||||||
|
public static ACTIVE: string = 'active';
|
||||||
|
public static NONE: string = 'none';
|
||||||
|
public static EXPIRED: string = 'expired';
|
||||||
|
}
|
||||||
@ -13,6 +13,7 @@ import { ChatHistoryView } from '../chat-history/ChatHistoryView';
|
|||||||
import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
|
import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
|
||||||
import { FriendsView } from '../friends/FriendsView';
|
import { FriendsView } from '../friends/FriendsView';
|
||||||
import { GroupsView } from '../groups/GroupsView';
|
import { GroupsView } from '../groups/GroupsView';
|
||||||
|
import { HcCenterView } from '../hc-center/HcCenterView';
|
||||||
import { HelpView } from '../help/HelpView';
|
import { HelpView } from '../help/HelpView';
|
||||||
import { HotelView } from '../hotel-view/HotelView';
|
import { HotelView } from '../hotel-view/HotelView';
|
||||||
import { ModToolsView } from '../mod-tools/ModToolsView';
|
import { ModToolsView } from '../mod-tools/ModToolsView';
|
||||||
@ -115,6 +116,7 @@ export const MainView: FC<MainViewProps> = props =>
|
|||||||
<HelpView />
|
<HelpView />
|
||||||
<FloorplanEditorView />
|
<FloorplanEditorView />
|
||||||
<NitropediaView />
|
<NitropediaView />
|
||||||
|
<HcCenterView />
|
||||||
<CampaignView />
|
<CampaignView />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,21 +1,22 @@
|
|||||||
.nitro-purse {
|
.nitro-purse {
|
||||||
background-color: rgba($dark,.95);
|
background-color: rgba($dark, 0.95);
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
padding: 6px 5px;
|
padding: 6px 5px;
|
||||||
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
|
box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
|
||||||
|
inset 0 -4px darken(rgba($dark, 0.6), 4);
|
||||||
|
|
||||||
.notification-button {
|
.notification-button {
|
||||||
color:lighten($dark,20);
|
color: lighten($dark, 20);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nitro-purse-hc {
|
.nitro-purse-hc {
|
||||||
background-color: rgba($light,.1);
|
background-color: rgba($light, 0.1);
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,9 +30,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba($light,.1);
|
background-color: rgba($light, 0.1);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@import './views';
|
@import "./views";
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
|
import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
|
||||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
import { GetConfiguration, LocalizeText } from '../../api';
|
import { GetConfiguration, LocalizeText } from '../../api';
|
||||||
|
import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
|
||||||
import { HelpEvent } from '../../events/help/HelpEvent';
|
import { HelpEvent } from '../../events/help/HelpEvent';
|
||||||
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
|
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
|
||||||
import { dispatchUiEvent } from '../../hooks';
|
import { dispatchUiEvent } from '../../hooks';
|
||||||
@ -30,6 +31,11 @@ export const PurseView: FC<{}> = props =>
|
|||||||
dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
|
dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const handleHcCenterClick = useCallback(() =>
|
||||||
|
{
|
||||||
|
dispatchUiEvent(new HcCenterEvent(HcCenterEvent.TOGGLE_HC_CENTER));
|
||||||
|
}, []);
|
||||||
|
|
||||||
const displayedCurrencies = useMemo(() =>
|
const displayedCurrencies = useMemo(() =>
|
||||||
{
|
{
|
||||||
return GetConfiguration<number[]>('system.currency.types', []);
|
return GetConfiguration<number[]>('system.currency.types', []);
|
||||||
@ -139,7 +145,8 @@ export const PurseView: FC<{}> = props =>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-4 px-0">
|
<div className="col-4 px-0">
|
||||||
<div className="nitro-purse-hc rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100">
|
<div className="nitro-purse-hc nitro-purse-button rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100"
|
||||||
|
onClick={ handleHcCenterClick }>
|
||||||
<CurrencyIcon className="flex-shrink-0" type="hc" />
|
<CurrencyIcon className="flex-shrink-0" type="hc" />
|
||||||
<span>{ getClubText() }</span>
|
<span>{ getClubText() }</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
@import './currency/CurrencyView';
|
@import "./currency/CurrencyView";
|
||||||
@import './seasonal/SeasonalView';
|
@import "./seasonal/SeasonalView";
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.nitro-room-tools {
|
.nitro-room-tools {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 125px;
|
bottom: 125px;
|
||||||
left: -133px;
|
left: -145px;
|
||||||
background: rgba($dark,.95);
|
background: rgba($dark,.95);
|
||||||
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
|
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
|
||||||
border-top-right-radius: $border-radius;
|
border-top-right-radius: $border-radius;
|
||||||
@ -36,4 +36,16 @@
|
|||||||
opacity: .5;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tools-item {
|
||||||
|
.icon {
|
||||||
|
width: 22px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -45,21 +45,21 @@ export const RoomToolsWidgetView: FC<{}> = props =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
|
<div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
|
||||||
<div className="list-group list-group-flush w-100 me-1">
|
<div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
|
||||||
<div className="list-group-item" onClick={ () => handleToolClick('settings') }>
|
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
|
||||||
<i className="fas fa-cog me-2" />{ LocalizeText('room.settings.button.text') }
|
<i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
|
||||||
</div>
|
</div>
|
||||||
<div className="list-group-item" onClick={ () => handleToolClick('zoom') }>
|
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
|
||||||
<i className={ 'fas me-2 ' +classNames({ 'fa-search-minus': !isZoomedIn, 'fa-search-plus': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
|
<i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
|
||||||
</div>
|
</div>
|
||||||
<div className="list-group-item" onClick={ () => handleToolClick('chat_history') }>
|
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
|
||||||
<i className="fas fa-comment-alt me-2" />{ LocalizeText('room.chathistory.button.text') }
|
<i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
|
||||||
</div>
|
</div>
|
||||||
<div className={ 'list-group-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
|
<div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
|
||||||
<i className="fas fa-heart me-2" />{ LocalizeText('room.like.button.text') }
|
<i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
|
||||||
</div>
|
</div>
|
||||||
<div className="list-group-item" onClick={ () => handleToolClick('toggle_room_link') }>
|
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
|
||||||
<i className="fas fa-link me-2" />{ LocalizeText('navigator.embed.caption') }
|
<i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
|
<div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user