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

Changes

Browse Source
This commit is contained in:
Bill 2021-11-01 23:39:38 -04:00
parent 20510ef057
commit c85113dd2c
5 changed files with 331 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

324
src/assets/styles/icons.scss
View File

@ -10,11 +10,11 @@
background-position: center; background-position: center;
&.icon-nitro-light { &.icon-nitro-light {
background-image: url('../images/nitro/nitro-n-light.svg'); background-image: url("../images/nitro/nitro-n-light.svg");
} }
&.icon-nitro-dark { &.icon-nitro-dark {
background-image: url('../images/nitro/nitro-n-dark.svg'); background-image: url("../images/nitro/nitro-n-dark.svg");
} }
&.icon-nitro-light, &.icon-nitro-light,
@ -24,693 +24,771 @@
} }
&.icon-catalog { &.icon-catalog {
background-image: url('../images/toolbar/icons/catalog.png'); background-image: url("../images/toolbar/icons/catalog.png");
width: 37px; width: 37px;
height: 36px; height: 36px;
} }
&.icon-rooms { &.icon-rooms {
background-image: url('../images/toolbar/icons/rooms.png'); background-image: url("../images/toolbar/icons/rooms.png");
width: 44px; width: 44px;
height: 30px; height: 30px;
} }
&.icon-house { &.icon-house {
background-image: url('../images/toolbar/icons/house.png'); background-image: url("../images/toolbar/icons/house.png");
height: 30px; height: 30px;
width: 32px; width: 32px;
} }
&.icon-inventory { &.icon-inventory {
background-image: url('../images/toolbar/icons/inventory.png'); background-image: url("../images/toolbar/icons/inventory.png");
height: 41px; height: 41px;
width: 44px; width: 44px;
} }
&.icon-modtools { &.icon-modtools {
background-image: url('../images/toolbar/icons/modtools.png'); background-image: url("../images/toolbar/icons/modtools.png");
height: 34px; height: 34px;
width: 29px; width: 29px;
} }
&.icon-friendall { &.icon-friendall {
background-image: url('../images/toolbar/icons/friend_all.png'); background-image: url("../images/toolbar/icons/friend_all.png");
height: 33px; height: 33px;
width: 32px; width: 32px;
} }
&.icon-friendsearch { &.icon-friendsearch {
background-image: url('../images/toolbar/icons/friend_search.png'); background-image: url("../images/toolbar/icons/friend_search.png");
height: 33px; height: 33px;
width: 29px; width: 29px;
} }
&.icon-sendmessage { &.icon-sendmessage {
background-image: url('../images/toolbar/icons/sendmessage.png'); background-image: url("../images/toolbar/icons/sendmessage.png");
width: 20px; width: 20px;
height: 21px; height: 21px;
} }
&.icon-me-talents { &.icon-me-talents {
background-image: url('../images/toolbar/icons/me-menu/talents.png'); background-image: url("../images/toolbar/icons/me-menu/talents.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-helper-tool { &.icon-me-helper-tool {
background-image: url('../images/toolbar/icons/me-menu/helper-tool.png'); background-image: url("../images/toolbar/icons/me-menu/helper-tool.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-profile { &.icon-me-profile {
background-image: url('../images/toolbar/icons/me-menu/profile.png'); background-image: url("../images/toolbar/icons/me-menu/profile.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-forums { &.icon-me-forums {
background-image: url('../images/toolbar/icons/me-menu/forums.png'); background-image: url("../images/toolbar/icons/me-menu/forums.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-rooms { &.icon-me-rooms {
background-image: url('../images/toolbar/icons/me-menu/my-rooms.png'); background-image: url("../images/toolbar/icons/me-menu/my-rooms.png");
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
&.icon-me-achievements { &.icon-me-achievements {
background-image: url('../images/toolbar/icons/me-menu/achievements.png'); background-image: url("../images/toolbar/icons/me-menu/achievements.png");
width: 31px; width: 31px;
height: 30px; height: 30px;
} }
&.icon-me-clothing { &.icon-me-clothing {
background-image: url('../images/toolbar/icons/me-menu/clothing.png'); background-image: url("../images/toolbar/icons/me-menu/clothing.png");
width: 27px; width: 27px;
height: 30px; height: 30px;
} }
&.icon-me-settings { &.icon-me-settings {
background-image: url('../images/toolbar/icons/me-menu/cog.png'); background-image: url("../images/toolbar/icons/me-menu/cog.png");
width: 28px; width: 28px;
height: 34px; height: 34px;
} }
&.icon-cog { &.icon-cog {
background: url('../images/icons/icon_cog.png'); background: url("../images/icons/icon_cog.png");
width: 14px; width: 14px;
height: 15px; height: 15px;
} }
&.icon-help { &.icon-help {
background: url('../images/icons/help.png'); background: url("../images/icons/help.png");
width: 13px; width: 13px;
height: 23px; height: 23px;
} }
&.icon-joinroom { &.icon-joinroom {
background-image: url('../images/toolbar/icons/joinroom.png'); background-image: url("../images/toolbar/icons/joinroom.png");
width: 21px; width: 21px;
height: 21px; height: 21px;
} }
&.icon-habbo { &.icon-habbo {
background-image: url('../images/toolbar/icons/habbo.png'); background-image: url("../images/toolbar/icons/habbo.png");
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
&.icon-camera { &.icon-camera {
background-image: url('../images/toolbar/icons/camera.png'); background-image: url("../images/toolbar/icons/camera.png");
width: 38px; width: 38px;
height: 45px; height: 45px;
} }
&.icon-message { &.icon-message {
background-image: url('../images/toolbar/icons/message.png'); background-image: url("../images/toolbar/icons/message.png");
width: 36px; width: 36px;
height: 32px; height: 32px;
&.is-unseen { &.is-unseen {
background-image: url('../images/toolbar/icons/message_unsee.gif'); background-image: url("../images/toolbar/icons/message_unsee.gif");
} }
} }
&.icon-deny { &.icon-deny {
background: url('../images/icons/deny.png'); background: url("../images/icons/deny.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.icon-accept { &.icon-accept {
background: url('../images/icons/accept.png'); background: url("../images/icons/accept.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.icon-wired-trigger { &.icon-wired-trigger {
background-image: url('../images/wired/icon_trigger.png'); background-image: url("../images/wired/icon_trigger.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.icon-wired-condition { &.icon-wired-condition {
background-image: url('../images/wired/icon_condition.png'); background-image: url("../images/wired/icon_condition.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.icon-wired-action { &.icon-wired-action {
background-image: url('../images/wired/icon_action.png'); background-image: url("../images/wired/icon_action.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.arrow-left-icon { &.arrow-left-icon {
background-image: url('../images/avatareditor/arrow-left-icon.png'); background-image: url("../images/avatareditor/arrow-left-icon.png");
width: 28px; width: 28px;
height: 21px; height: 21px;
} }
&.arrow-right-icon { &.arrow-right-icon {
background-image: url('../images/avatareditor/arrow-right-icon.png'); background-image: url("../images/avatareditor/arrow-right-icon.png");
width: 28px; width: 28px;
height: 21px; height: 21px;
} }
&.clear-icon { &.clear-icon {
background-image: url('../images/avatareditor/clear-icon.png'); background-image: url("../images/avatareditor/clear-icon.png");
width: 27px; width: 27px;
height: 27px; height: 27px;
} }
&.ca-icon { &.ca-icon {
background-image: url('../images/avatareditor/ca-icon.png'); background-image: url("../images/avatareditor/ca-icon.png");
width: 25px; width: 25px;
height: 25px; height: 25px;
&.selected { &.selected {
background-image: url('../images/avatareditor/ca-selected-icon.png'); background-image: url("../images/avatareditor/ca-selected-icon.png");
} }
} }
&.cc-icon { &.cc-icon {
background-image: url('../images/avatareditor/cc-icon.png'); background-image: url("../images/avatareditor/cc-icon.png");
width: 31px; width: 31px;
height: 29px; height: 29px;
&.selected { &.selected {
background-image: url('../images/avatareditor/cc-selected-icon.png'); background-image: url("../images/avatareditor/cc-selected-icon.png");
} }
} }
&.ch-icon { &.ch-icon {
background-image: url('../images/avatareditor/ch-icon.png'); background-image: url("../images/avatareditor/ch-icon.png");
width: 29px; width: 29px;
height: 24px; height: 24px;
&.selected { &.selected {
background-image: url('../images/avatareditor/ch-selected-icon.png'); background-image: url("../images/avatareditor/ch-selected-icon.png");
} }
} }
&.cp-icon { &.cp-icon {
background-image: url('../images/avatareditor/cp-icon.png'); background-image: url("../images/avatareditor/cp-icon.png");
width: 30px; width: 30px;
height: 24px; height: 24px;
&.selected { &.selected {
background-image: url('../images/avatareditor/cp-selected-icon.png'); background-image: url("../images/avatareditor/cp-selected-icon.png");
} }
} }
&.ea-icon { &.ea-icon {
background-image: url('../images/avatareditor/ea-icon.png'); background-image: url("../images/avatareditor/ea-icon.png");
width: 35px; width: 35px;
height: 16px; height: 16px;
&.selected { &.selected {
background-image: url('../images/avatareditor/ea-selected-icon.png'); background-image: url("../images/avatareditor/ea-selected-icon.png");
} }
} }
&.fa-icon { &.fa-icon {
background-image: url('../images/avatareditor/fa-icon.png'); background-image: url("../images/avatareditor/fa-icon.png");
width: 27px; width: 27px;
height: 20px; height: 20px;
&.selected { &.selected {
background-image: url('../images/avatareditor/fa-selected-icon.png'); background-image: url("../images/avatareditor/fa-selected-icon.png");
} }
} }
&.female-icon { &.female-icon {
background-image: url('../images/avatareditor/female-icon.png'); background-image: url("../images/avatareditor/female-icon.png");
width: 18px; width: 18px;
height: 27px; height: 27px;
&.selected { &.selected {
background-image: url('../images/avatareditor/female-selected-icon.png'); background-image: url("../images/avatareditor/female-selected-icon.png");
} }
} }
&.ha-icon { &.ha-icon {
background-image: url('../images/avatareditor/ha-icon.png'); background-image: url("../images/avatareditor/ha-icon.png");
width: 25px; width: 25px;
height: 22px; height: 22px;
&.selected { &.selected {
background-image: url('../images/avatareditor/ha-selected-icon.png'); background-image: url("../images/avatareditor/ha-selected-icon.png");
} }
} }
&.he-icon { &.he-icon {
background-image: url('../images/avatareditor/he-icon.png'); background-image: url("../images/avatareditor/he-icon.png");
width: 31px; width: 31px;
height: 27px; height: 27px;
&.selected { &.selected {
background-image: url('../images/avatareditor/he-selected-icon.png'); background-image: url("../images/avatareditor/he-selected-icon.png");
} }
} }
&.hr-icon { &.hr-icon {
background-image: url('../images/avatareditor/hr-icon.png'); background-image: url("../images/avatareditor/hr-icon.png");
width: 29px; width: 29px;
height: 25px; height: 25px;
&.selected { &.selected {
background-image: url('../images/avatareditor/hr-selected-icon.png'); background-image: url("../images/avatareditor/hr-selected-icon.png");
} }
} }
&.lg-icon { &.lg-icon {
background-image: url('../images/avatareditor/lg-icon.png'); background-image: url("../images/avatareditor/lg-icon.png");
width: 19px; width: 19px;
height: 20px; height: 20px;
&.selected { &.selected {
background-image: url('../images/avatareditor/lg-selected-icon.png'); background-image: url("../images/avatareditor/lg-selected-icon.png");
} }
} }
&.loading-icon { &.loading-icon {
background-image: url('../images/icons/loading-icon.png'); background-image: url("../images/icons/loading-icon.png");
width: 17px; width: 17px;
height: 21px; height: 21px;
} }
&.male-icon { &.male-icon {
background-image: url('../images/avatareditor/male-icon.png'); background-image: url("../images/avatareditor/male-icon.png");
width: 21px; width: 21px;
height: 21px; height: 21px;
&.selected { &.selected {
background-image: url('../images/avatareditor/male-selected-icon.png'); background-image: url("../images/avatareditor/male-selected-icon.png");
} }
} }
&.sh-icon { &.sh-icon {
background-image: url('../images/avatareditor/sh-icon.png'); background-image: url("../images/avatareditor/sh-icon.png");
width: 37px; width: 37px;
height: 10px; height: 10px;
&.selected { &.selected {
background-image: url('../images/avatareditor/sh-selected-icon.png'); background-image: url("../images/avatareditor/sh-selected-icon.png");
} }
} }
&.wa-icon { &.wa-icon {
background-image: url('../images/avatareditor/wa-icon.png'); background-image: url("../images/avatareditor/wa-icon.png");
width: 36px; width: 36px;
height: 18px; height: 18px;
&.selected { &.selected {
background-image: url('../images/avatareditor/wa-selected-icon.png'); background-image: url("../images/avatareditor/wa-selected-icon.png");
} }
} }
&.sellable-icon { &.sellable-icon {
background-image: url('../images/avatareditor/sellable-icon.png'); background-image: url("../images/avatareditor/sellable-icon.png");
width: 17px; width: 17px;
height: 15px; height: 15px;
} }
&.chatstyles-icon { &.chatstyles-icon {
background-image: url('../images/chat/styles-icon.png'); background-image: url("../images/chat/styles-icon.png");
width: 17px; width: 17px;
height: 19px; height: 19px;
} }
&.pencil-icon { &.pencil-icon {
background-image: url('../images/infostand/pencil-icon.png'); background-image: url("../images/infostand/pencil-icon.png");
width: 17px; width: 17px;
height: 18px; height: 18px;
} }
&.trade-locked-icon { &.trade-locked-icon {
background-image: url('../images/inventory/trading/locked-icon.png'); background-image: url("../images/inventory/trading/locked-icon.png");
width: 29px; width: 29px;
height: 43px; height: 43px;
} }
&.trade-unlocked-icon { &.trade-unlocked-icon {
background-image: url('../images/inventory/trading/unlocked-icon.png'); background-image: url("../images/inventory/trading/unlocked-icon.png");
width: 29px; width: 29px;
height: 43px; height: 43px;
} }
&.modtool-room-icon { &.modtool-room-icon {
background-image: url('../images/modtool/room.png'); background-image: url("../images/modtool/room.png");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-chatlog-icon { &.modtool-chatlog-icon {
background-image: url('../images/modtool/chatlog.gif'); background-image: url("../images/modtool/chatlog.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-user-icon{ &.modtool-user-icon {
background-image: url('../images/modtool/user.gif'); background-image: url("../images/modtool/user.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-reports-icon { &.modtool-reports-icon {
background-image: url('../images/modtool/reports.png'); background-image: url("../images/modtool/reports.png");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-wrench-icon { &.modtool-wrench-icon {
background-image: url('../images/modtool/wrench.gif'); background-image: url("../images/modtool/wrench.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-key-icon { &.modtool-key-icon {
background-image: url('../images/modtool/key.gif'); background-image: url("../images/modtool/key.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.icon-catalogue-hc_small { &.icon-catalogue-hc_small {
background-image: url('../images/catalog/hc_small.png'); background-image: url("../images/catalog/hc_small.png");
height: 17px; height: 17px;
width: 31px; width: 31px;
} }
&.icon-catalogue-hc_big { &.icon-catalogue-hc_big {
background: url('../images/catalog/hc_big.png'); background: url("../images/catalog/hc_big.png");
width: 68px; width: 68px;
height: 40px; height: 40px;
} }
&.icon-sign-exclamation { &.icon-sign-exclamation {
background: url('../images/icons/sign-exclamation.png'); background: url("../images/icons/sign-exclamation.png");
width: 7px; width: 7px;
height: 17px; height: 17px;
} }
&.icon-sign-heart { &.icon-sign-heart {
background: url('../images/icons/sign-heart.png'); background: url("../images/icons/sign-heart.png");
width: 15px; width: 15px;
height: 13px; height: 13px;
} }
&.icon-sign-red { &.icon-sign-red {
background: url('../images/icons/sign-red.png'); background: url("../images/icons/sign-red.png");
width: 11px; width: 11px;
height: 19px; height: 19px;
} }
&.icon-sign-yellow { &.icon-sign-yellow {
background: url('../images/icons/sign-yellow.png'); background: url("../images/icons/sign-yellow.png");
width: 11px; width: 11px;
height: 19px; height: 19px;
} }
&.icon-sign-skull { &.icon-sign-skull {
background: url('../images/icons/sign-skull.png'); background: url("../images/icons/sign-skull.png");
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
&.icon-sign-smile { &.icon-sign-smile {
background: url('../images/icons/sign-smile.png'); background: url("../images/icons/sign-smile.png");
width: 7px; width: 7px;
height: 14px; height: 14px;
} }
&.icon-sign-soccer { &.icon-sign-soccer {
background: url('../images/icons/sign-soccer.png'); background: url("../images/icons/sign-soccer.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-house-small { &.icon-house-small {
background: url('../images/icons/house-small.png'); background: url("../images/icons/house-small.png");
width: 19px; width: 19px;
height: 14px; height: 14px;
} }
&.icon-camera-small { &.icon-camera-small {
background: url('../images/icons/camera-small.png'); background: url("../images/icons/camera-small.png");
width: 17px; width: 17px;
height: 15px; height: 15px;
} }
&.icon-arrows { &.icon-arrows {
background: url('../images/icons/arrows.png'); background: url("../images/icons/arrows.png");
width: 17px; width: 17px;
height: 15px; height: 15px;
} }
&.icon-fb-profile { &.icon-fb-profile {
background: url('../images/toolbar/icons/friend-bar/profile.png'); background: url("../images/toolbar/icons/friend-bar/profile.png");
width: 21px; width: 21px;
height: 21px; height: 21px;
} }
&.icon-camera-colormatrix { &.icon-camera-colormatrix {
background: url('../images/icons/camera-colormatrix.png'); background: url("../images/icons/camera-colormatrix.png");
width: 32px; width: 32px;
height: 21px; height: 21px;
} }
&.icon-camera-composite { &.icon-camera-composite {
background: url('../images/icons/camera-composite.png'); background: url("../images/icons/camera-composite.png");
width: 32px; width: 32px;
height: 21px; height: 21px;
} }
&.icon-user-profile { &.icon-user-profile {
background: url('../images/icons/user-profile.png'); background: url("../images/icons/user-profile.png");
width: 13px; width: 13px;
height: 11px; height: 11px;
&:hover { &:hover {
background: url('../images/icons/user-profile-hover.png'); background: url("../images/icons/user-profile-hover.png");
} }
} }
&.icon-fb-profile { &.icon-fb-profile {
background: url('../images/toolbar/icons/friend-bar/profile.png'); background: url("../images/toolbar/icons/friend-bar/profile.png");
width: 21px; width: 21px;
height: 21px; height: 21px;
} }
&.icon-fb-chat { &.icon-fb-chat {
background: url('../images/toolbar/icons/friend-bar/chat.png'); background: url("../images/toolbar/icons/friend-bar/chat.png");
width: 20px; width: 20px;
height: 21px; height: 21px;
} }
&.icon-fb-visit { &.icon-fb-visit {
background: url('../images/toolbar/icons/friend-bar/visit.png'); background: url("../images/toolbar/icons/friend-bar/visit.png");
width: 21px; width: 21px;
height: 21px; height: 21px;
} }
&.icon-pf-online { &.icon-pf-online {
background: url('../images/profile/icons/online.gif'); background: url("../images/profile/icons/online.gif");
width: 40px; width: 40px;
height: 16px; height: 16px;
} }
&.icon-pf-offline { &.icon-pf-offline {
background: url('../images/profile/icons/offline.png'); background: url("../images/profile/icons/offline.png");
width: 39px; width: 39px;
height: 16px; height: 16px;
} }
&.icon-pf-tick { &.icon-pf-tick {
background: url('../images/profile/icons/tick.png'); background: url("../images/profile/icons/tick.png");
width: 11px; width: 11px;
height: 10px; height: 10px;
} }
&.icon-relationship-none { &.icon-relationship-none {
background: url('../images/friendlist/icons/icon_relationship_none.png'); background: url("../images/friendlist/icons/icon_relationship_none.png");
width: 16px; width: 16px;
height: 14px; height: 14px;
} }
&.icon-relationship-heart { &.icon-relationship-heart {
background: url('../images/profile/icons/heart.png'); background: url("../images/profile/icons/heart.png");
width: 16px; width: 16px;
height: 14px; height: 14px;
} }
&.icon-relationship-bobba { &.icon-relationship-bobba {
background: url('../images/profile/icons/bobba.png'); background: url("../images/profile/icons/bobba.png");
width: 16px; width: 16px;
height: 14px; height: 14px;
} }
&.icon-relationship-smile { &.icon-relationship-smile {
background: url('../images/profile/icons/smile.png'); background: url("../images/profile/icons/smile.png");
width: 16px; width: 16px;
height: 14px; height: 14px;
} }
&.icon-group-type-0 { &.icon-group-type-0 {
background: url('../images/groups/icons/grouptype_icon_0.png'); background: url("../images/groups/icons/grouptype_icon_0.png");
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.icon-group-type-1 { &.icon-group-type-1 {
background: url('../images/groups/icons/grouptype_icon_1.png'); background: url("../images/groups/icons/grouptype_icon_1.png");
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.icon-group-type-2 { &.icon-group-type-2 {
background: url('../images/groups/icons/grouptype_icon_2.png'); background: url("../images/groups/icons/grouptype_icon_2.png");
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.icon-group-decorate { &.icon-group-decorate {
background: url('../images/groups/icons/group_decorate_icon.png'); background: url("../images/groups/icons/group_decorate_icon.png");
width: 15px; width: 15px;
height: 15px; height: 15px;
} }
&.icon-group-member { &.icon-group-member {
background: url('../images/groups/icons/group_icon_big_member.png'); background: url("../images/groups/icons/group_icon_big_member.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-group-admin { &.icon-group-admin {
background: url('../images/groups/icons/group_icon_big_admin.png'); background: url("../images/groups/icons/group_icon_big_admin.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-group-owner { &.icon-group-owner {
background: url('../images/groups/icons/group_icon_big_owner.png'); background: url("../images/groups/icons/group_icon_big_owner.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-group-favorite { &.icon-group-favorite {
background: url('../images/groups/icons/group_favorite.png'); background: url("../images/groups/icons/group_favorite.png");
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
&.icon-group-not-favorite { &.icon-group-not-favorite {
background: url('../images/groups/icons/group_notfavorite.png'); background: url("../images/groups/icons/group_notfavorite.png");
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
&.icon-group-small-admin { &.icon-group-small-admin {
background: url('../images/groups/icons/group_icon_admin.png'); background: url("../images/groups/icons/group_icon_admin.png");
width: 11px; width: 11px;
height: 13px; height: 13px;
} }
&.icon-group-small-not-admin { &.icon-group-small-not-admin {
background: url('../images/groups/icons/group_icon_not_admin.png'); background: url("../images/groups/icons/group_icon_not_admin.png");
width: 11px; width: 11px;
height: 13px; height: 13px;
} }
&.icon-group-small-owner { &.icon-group-small-owner {
background: url('../images/groups/icons/group_icon_small_owner.png'); background: url("../images/groups/icons/group_icon_small_owner.png");
width: 13px; width: 13px;
height: 13px; height: 13px;
} }
&.icon-navigator-info { &.icon-navigator-info {
background: url('../images/navigator/icons/info.png'); background: url("../images/navigator/icons/info.png");
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
&.icon-navigator-room-locked { &.icon-navigator-room-locked {
background: url('../images/navigator/icons/room_locked.png'); background: url("../images/navigator/icons/room_locked.png");
width: 13px; width: 13px;
height: 16px; height: 16px;
} }
&.icon-navigator-room-password { &.icon-navigator-room-password {
background: url('../images/navigator/icons/room_password.png'); background: url("../images/navigator/icons/room_password.png");
width: 13px; width: 13px;
height: 16px; height: 16px;
} }
&.icon-navigator-room-invisible { &.icon-navigator-room-invisible {
background: url('../images/navigator/icons/room_invisible.png'); background: url("../images/navigator/icons/room_invisible.png");
width: 13px; width: 13px;
height: 16px; height: 16px;
} }
&.icon-navigator-room-group { &.icon-navigator-room-group {
background: url('../images/navigator/icons/room_group.png'); background: url("../images/navigator/icons/room_group.png");
width: 13px; width: 13px;
height: 11px; height: 11px;
} }
&.icon-friendlist-follow { &.icon-friendlist-follow {
background: url('../images/friendlist/icons/icon_follow.png'); background: url("../images/friendlist/icons/icon_follow.png");
width: 16px; width: 16px;
height: 14px; height: 14px;
} }
&.icon-friendlist-chat { &.icon-friendlist-chat {
background: url('../images/friendlist/icons/icon_chat.png'); background: url("../images/friendlist/icons/icon_chat.png");
width: 17px; width: 17px;
height: 16px; height: 16px;
} }
&.icon-friendlist-warning { &.icon-friendlist-warning {
background: url('../images/friendlist/icons/icon_warning.png'); background: url("../images/friendlist/icons/icon_warning.png");
width: 23px; width: 23px;
height: 21px; height: 21px;
} }
&.icon-friendlist-new-message { &.icon-friendlist-new-message {
background: url('../images/friendlist/icons/icon_new_message.png'); background: url("../images/friendlist/icons/icon_new_message.png");
width: 14px; width: 14px;
height: 16px; height: 16px;
} }
&.icon-hc-banner { &.icon-hc-banner {
background: url('../images/catalog/hc_big.png'); background: url("../images/catalog/hc_big.png");
width: 68px; width: 68px;
height: 40px; height: 40px;
} }
&.icon-set-tile {
background-image: url("../images/floorplaneditor/icon-tile-set.png");
width: 40px;
height: 40px;
}
&.icon-unset-tile {
background-image: url("../images/floorplaneditor/icon-tile-unset.png");
width: 40px;
height: 40px;
}
&.icon-increase-height {
background-image: url("../images/floorplaneditor/icon-tile-up.png");
width: 40px;
height: 40px;
}
&.icon-decrease-height {
background-image: url("../images/floorplaneditor/icon-tile-down.png");
width: 40px;
height: 40px;
}
&.icon-set-door {
background-image: url("../images/floorplaneditor/icon-door.png");
width: 40px;
height: 40px;
}
&.icon-door-direction-0 {
background-image: url("../images/floorplaneditor/door-direction-0.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-1 {
background-image: url("../images/floorplaneditor/door-direction-1.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-2 {
background-image: url("../images/floorplaneditor/door-direction-2.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-3 {
background-image: url("../images/floorplaneditor/door-direction-3.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-4 {
background-image: url("../images/floorplaneditor/door-direction-4.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-5 {
background-image: url("../images/floorplaneditor/door-direction-5.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-6 {
background-image: url("../images/floorplaneditor/door-direction-6.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-7 {
background-image: url("../images/floorplaneditor/door-direction-7.png");
width: 80px;
height: 45px;
}
&.spin { &.spin {
animation: rotating 1s linear infinite; animation: rotating 1s linear infinite;
} }

2
src/layout/button/NitroLayoutButton.tsx
View File

@ -7,7 +7,7 @@ export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
const getClassName = useMemo(() => const getClassName = useMemo(() =>
{ {
let newClassName = 'btn'; let newClassName = 'd-flex justify-content-center align-items-center btn';
if(variant && variant.length) newClassName += ` btn-${ variant }`; if(variant && variant.length) newClassName += ` btn-${ variant }`;

60
src/views/floorplan-editor/FloorplanEditorView.scss
View File

@ -7,64 +7,4 @@
height: 300px; height: 300px;
overflow-x: scroll; overflow-x: scroll;
} }
.tile-options {
.tile-option {
width: 50px;
height: 50px;
&.set-tile {
background-image: url("../../assets/images/floorplaneditor/icon-tile-set.png");
}
&.unset-tile {
background-image: url("../../assets/images/floorplaneditor/icon-tile-unset.png");
}
&.increase-height {
background-image: url("../../assets/images/floorplaneditor/icon-tile-up.png");
}
&.decrease-height {
background-image: url("../../assets/images/floorplaneditor/icon-tile-down.png");
}
&.set-door {
background-image: url("../../assets/images/floorplaneditor/icon-door.png");
}
}
}
.visualization-options {
.option {
width: 85px;
height: 50px;
&.door-direction-0 {
background-image: url("../../assets/images/floorplaneditor/door-direction-0.png");
}
&.door-direction-1 {
background-image: url("../../assets/images/floorplaneditor/door-direction-1.png");
}
&.door-direction-2 {
background-image: url("../../assets/images/floorplaneditor/door-direction-2.png");
}
&.door-direction-3 {
background-image: url("../../assets/images/floorplaneditor/door-direction-3.png");
}
&.door-direction-4 {
background-image: url("../../assets/images/floorplaneditor/door-direction-4.png");
}
&.door-direction-5 {
background-image: url("../../assets/images/floorplaneditor/door-direction-5.png");
}
&.door-direction-6 {
background-image: url("../../assets/images/floorplaneditor/door-direction-6.png");
}
&.door-direction-7 {
background-image: url("../../assets/images/floorplaneditor/door-direction-7.png");
}
}
}
} }

16
src/views/floorplan-editor/FloorplanEditorView.tsx
View File

@ -3,7 +3,7 @@ import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../api'; import { LocalizeText } from '../../api';
import { FloorplanEditorEvent } from '../../events/floorplan-editor/FloorplanEditorEvent'; import { FloorplanEditorEvent } from '../../events/floorplan-editor/FloorplanEditorEvent';
import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks'; import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
import { FloorplanEditor } from './common/FloorplanEditor'; import { FloorplanEditor } from './common/FloorplanEditor';
import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils'; import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils';
import { FloorplanEditorContextProvider } from './context/FloorplanEditorContext'; import { FloorplanEditorContextProvider } from './context/FloorplanEditorContext';
@ -89,14 +89,14 @@ export const FloorplanEditorView: FC<{}> = props =>
{isVisible && {isVisible &&
<NitroCardView className="nitro-floorplan-editor"> <NitroCardView className="nitro-floorplan-editor">
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} /> <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
<NitroCardContentView className="text-black"> <NitroCardContentView>
<NitroLayoutGrid>
<NitroLayoutGridColumn size={ 12 }>
<FloorplanOptionsView /> <FloorplanOptionsView />
<div className="row">
<div className="col">
<FloorplanCanvasView /> <FloorplanCanvasView />
</div> </NitroLayoutGridColumn>
</div> </NitroLayoutGrid>
<div className="row justify-content-between mt-2"> {/* <div className="row justify-content-between mt-2">
<div className="btn-group col-auto"> <div className="btn-group col-auto">
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.reload')}</button> <button className="btn btn-primary">{LocalizeText('floor.plan.editor.reload')}</button>
</div> </div>
@ -105,7 +105,7 @@ export const FloorplanEditorView: FC<{}> = props =>
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.import.export')}</button> <button className="btn btn-primary">{LocalizeText('floor.plan.editor.import.export')}</button>
<button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button> <button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
</div> </div>
</div> </div> */}
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
} }

149
src/views/floorplan-editor/views/FloorplanOptionsView.tsx
View File

@ -1,10 +1,14 @@
import { FC, useCallback, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../api'; import { LocalizeText } from '../../../api';
import { NitroCardGridItemView, NitroCardGridView } from '../../../layout'; import { NitroCardGridItemView, NitroCardGridView, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../layout';
import { NitroLayoutBase } from '../../../layout/base';
import { FloorAction } from '../common/Constants'; import { FloorAction } from '../common/Constants';
import { FloorplanEditor } from '../common/FloorplanEditor'; import { FloorplanEditor } from '../common/FloorplanEditor';
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext'; import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
const MIN_WALL_HEIGHT: number = 0;
const MAX_WALL_HEIGHT: number = 16;
export const FloorplanOptionsView: FC<{}> = props => export const FloorplanOptionsView: FC<{}> = props =>
{ {
const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext(); const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
@ -18,58 +22,127 @@ export const FloorplanOptionsView: FC<{}> = props =>
const changeDoorDirection = useCallback(() => const changeDoorDirection = useCallback(() =>
{ {
const settings = Object.assign({}, floorplanSettings); setFloorplanSettings(prevValue =>
if(settings.entryPointDir < 7)
{ {
++settings.entryPointDir; const newValue = Object.assign({}, prevValue);
if(newValue.entryPointDir < 7)
{
++newValue.entryPointDir;
} }
else else
{ {
settings.entryPointDir = 0; newValue.entryPointDir = 0;
} }
setFloorplanSettings(settings); return newValue;
}, [floorplanSettings, setFloorplanSettings]); });
}, [ setFloorplanSettings ]);
const onWallHeightChange = useCallback((value: number) => const onWallHeightChange = useCallback((value: number) =>
{ {
if(value > 16) value = 16; if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
if(value < 0) value = 0;
const settings = Object.assign({}, floorplanSettings); if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
settings.wallHeight = value; setFloorplanSettings(prevValue =>
{
const newValue = Object.assign({}, prevValue);
setFloorplanSettings(settings); newValue.wallHeight = value;
}, [floorplanSettings, setFloorplanSettings]);
return newValue;
});
}, [ setFloorplanSettings ]);
function increaseWallHeight(): void
{
let height = (floorplanSettings.wallHeight + 1);
if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
onWallHeightChange(height);
}
function decreaseWallHeight(): void
{
let height = (floorplanSettings.wallHeight - 1);
if(height <= 0) height = MIN_WALL_HEIGHT;
onWallHeightChange(height);
}
return ( return (
<> <NitroLayoutGrid className="h-auto">
<div className="row justify-content-between mb-1"> <NitroLayoutGridColumn size={ 5 }>
<div className="col-6"> <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
<label>{LocalizeText('floor.plan.editor.draw.mode')}</label> <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.draw.mode') }</NitroLayoutBase>
<NitroCardGridView className="tile-options"> <NitroCardGridView>
<NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" /> <NitroCardGridItemView itemActive={ (floorAction === FloorAction.SET) } onClick={ event => selectAction(FloorAction.SET) }>
<NitroCardGridItemView itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)} className="tile-option unset-tile" /> <i className="icon icon-set-tile" />
<NitroCardGridItemView itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)} className="tile-option increase-height" /> </NitroCardGridItemView>
<NitroCardGridItemView itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)} className="tile-option decrease-height" /> <NitroCardGridItemView itemActive={ (floorAction === FloorAction.UNSET) } onClick={ event => selectAction(FloorAction.UNSET) }>
<NitroCardGridItemView itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)} className="tile-option set-door" /> <i className="icon icon-unset-tile" />
</NitroCardGridItemView>
<NitroCardGridItemView itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
<i className="icon icon-increase-height" />
</NitroCardGridItemView>
<NitroCardGridItemView itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
<i className="icon icon-decrease-height" />
</NitroCardGridItemView>
<NitroCardGridItemView itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
<i className="icon icon-set-door" />
</NitroCardGridItemView>
</NitroCardGridView> </NitroCardGridView>
</div> </NitroLayoutFlexColumn>
<div className="col-6"> </NitroLayoutGridColumn>
<div className="d-flex w-100 gap-4"> <NitroLayoutGridColumn className="align-items-center" size={ 3 }>
<label>{LocalizeText('floor.plan.editor.enter.direction')}</label> <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
<label>{LocalizeText('floor.editor.wall.height')}</label> <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.enter.direction') }</NitroLayoutBase>
</div> <i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
<div className="d-flex w-100 gap-4 visualization-options"> </NitroLayoutFlexColumn>
<NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/> </NitroLayoutGridColumn>
<NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView> <NitroLayoutGridColumn className="align-items-center" size={ 3 }>
</div> <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
</div> <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.editor.wall.height') }</NitroLayoutBase>
</div> <NitroLayoutFlex className="align-items-center">
<div className="row justify-content-between mb-1"> <i className="fas fa-caret-left cursor-pointer me-1 text-black" onClick={ decreaseWallHeight } />
<input type="number" className="form-control form-control-sm quantity-input" value={ floorplanSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber)} />
<i className="fas fa-caret-right cursor-pointer ms-1 text-black" onClick={ increaseWallHeight } />
</NitroLayoutFlex>
</NitroLayoutFlexColumn>
</NitroLayoutGridColumn>
</NitroLayoutGrid>
// <NitroLayoutButton variant="primary" size="sm" onClick={ changeDoorDirection }>
// <i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir }` } />
// </NitroLayoutButton>
// <>
// <div className="row justify-content-between mb-1">
// <div className="col-6">
// <label>{LocalizeText('floor.plan.editor.draw.mode')}</label>
// <NitroCardGridView className="tile-options">
// <NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" />
// <NitroCardGridItemView itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)} className="tile-option unset-tile" />
// <NitroCardGridItemView itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)} className="tile-option increase-height" />
// <NitroCardGridItemView itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)} className="tile-option decrease-height" />
// <NitroCardGridItemView itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)} className="tile-option set-door" />
// </NitroCardGridView>
// </div>
// <div className="col-6">
// <div className="d-flex w-100 gap-4">
// <label>{LocalizeText('floor.plan.editor.enter.direction')}</label>
// <label>{LocalizeText('floor.editor.wall.height')}</label>
// </div>
// <div className="d-flex w-100 gap-4 visualization-options">
// <NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/>
// <NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView>
// </div>
// </div>
// </div>
// <div className="row justify-content-between mb-1">
</div> // </div>
</> // </>
); );
} }