mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Changes
This commit is contained in:
Bill
parent
20510ef057
commit
c85113dd2c
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 }`;
|
||||||
|
|
||||||
|
|||||||
@ -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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
<FloorplanOptionsView />
|
<NitroLayoutGrid>
|
||||||
<div className="row">
|
<NitroLayoutGridColumn size={ 12 }>
|
||||||
<div className="col">
|
<FloorplanOptionsView />
|
||||||
<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>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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)
|
{
|
||||||
{
|
const newValue = Object.assign({}, prevValue);
|
||||||
++settings.entryPointDir;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
settings.entryPointDir = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
setFloorplanSettings(settings);
|
if(newValue.entryPointDir < 7)
|
||||||
}, [floorplanSettings, setFloorplanSettings]);
|
{
|
||||||
|
++newValue.entryPointDir;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
newValue.entryPointDir = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
return newValue;
|
||||||
|
});
|
||||||
|
}, [ 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" />
|
||||||
</NitroCardGridView>
|
</NitroCardGridItemView>
|
||||||
</div>
|
<NitroCardGridItemView itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
|
||||||
<div className="col-6">
|
<i className="icon icon-increase-height" />
|
||||||
<div className="d-flex w-100 gap-4">
|
</NitroCardGridItemView>
|
||||||
<label>{LocalizeText('floor.plan.editor.enter.direction')}</label>
|
<NitroCardGridItemView itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
|
||||||
<label>{LocalizeText('floor.editor.wall.height')}</label>
|
<i className="icon icon-decrease-height" />
|
||||||
</div>
|
</NitroCardGridItemView>
|
||||||
<div className="d-flex w-100 gap-4 visualization-options">
|
<NitroCardGridItemView itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
|
||||||
<NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/>
|
<i className="icon icon-set-door" />
|
||||||
<NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView>
|
</NitroCardGridItemView>
|
||||||
</div>
|
</NitroCardGridView>
|
||||||
</div>
|
</NitroLayoutFlexColumn>
|
||||||
</div>
|
</NitroLayoutGridColumn>
|
||||||
<div className="row justify-content-between mb-1">
|
<NitroLayoutGridColumn className="align-items-center" size={ 3 }>
|
||||||
|
<NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
|
||||||
|
<NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.enter.direction') }</NitroLayoutBase>
|
||||||
|
<i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
|
||||||
|
</NitroLayoutFlexColumn>
|
||||||
|
</NitroLayoutGridColumn>
|
||||||
|
<NitroLayoutGridColumn className="align-items-center" size={ 3 }>
|
||||||
|
<NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
|
||||||
|
<NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.editor.wall.height') }</NitroLayoutBase>
|
||||||
|
<NitroLayoutFlex className="align-items-center">
|
||||||
|
<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>
|
||||||
</>
|
// </>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user