duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Small fix to the Chatbar, and make it better for small / phone screens

Browse Source
This commit is contained in:
duckietm 2024-03-22 14:58:33 +01:00
parent 20aaa143c5
commit fd39778722
6 changed files with 44 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/card/NitroCardView.scss
View File

@ -84,7 +84,7 @@ $nitro-card-tabs-height: 42px;
background-color: #ededed; background-color: #ededed;
.nav-item { .nav-item {
padding: 0.2rem 0.8rem; padding: 0.2rem 0.4rem;
background-color: #dedede; background-color: #dedede;
color: #000; color: #000;
z-index: 1; z-index: 1;
@ -95,7 +95,7 @@ $nitro-card-tabs-height: 42px;
border-top-right-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important;
&.active { &.active {
background-color: #ededed; background-color: #e1e5ff;
&:before { &:before {
background: $white; background: $white;

2
src/components/room/widgets/chat-input/ChatInputColorSelectorView.tsx
View File

@ -49,7 +49,7 @@ export const ChatInputColorSelectorView: FC<ChatInputColorSelectorViewProps> = p
</Base> </Base>
<Overlay show={ selectorVisible } target={ iconRef } placement="top"> <Overlay show={ selectorVisible } target={ iconRef } placement="top">
<Popover className="nitro-chat-style-selector-container"> <Popover className="nitro-chat-style-selector-container">
<NitroCardContentView overflow="hidden" className="bg-transparent"> <NitroCardContentView overflow="hidden" className="bg-transparent colour-container image-rendering-pixelated">
<AutoGrid gap={ 1 } columnCount={ 6 } columnMinWidth={ 20 } columnMinHeight={ 20 }> <AutoGrid gap={ 1 } columnCount={ 6 } columnMinWidth={ 20 } columnMinHeight={ 20 }>
{ colours && (colours.size > 0) && Array.from(colours).map(([ color, hex ]) => { colours && (colours.size > 0) && Array.from(colours).map(([ color, hex ]) =>
{ {

2
src/components/room/widgets/chat-input/ChatInputEmojiSelectorView.tsx
View File

@ -51,7 +51,7 @@ export const ChatInputEmojiSelectorView: FC<ChatInputEmojiSelectorViewProps> = p
<Overlay show={selectorVisible} target={iconRef} placement="top"> <Overlay show={selectorVisible} target={iconRef} placement="top">
<Popover className="nitro-chat-style-selector-container"> <Popover className="nitro-chat-style-selector-container">
<NitroCardContentView overflow="hidden" className="bg-transparent"> <NitroCardContentView overflow="hidden" className="bg-transparent">
<Grid columnCount={4} overflow="auto"> <Grid columnCount={3} overflow="auto">
{emojiList && emojiList.length > 0 && emojiList.map((emojiId) => { {emojiList && emojiList.length > 0 && emojiList.map((emojiId) => {
return ( return (
<Flex center pointer key={emojiId} onClick={(event) => selectEmoji(emojiId)}> <Flex center pointer key={emojiId} onClick={(event) => selectEmoji(emojiId)}>

8
src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
View File

@ -44,11 +44,11 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
return ( return (
<> <>
<Base pointer className="icon chatstyles-icon nitro-chat-style-box" onClick={ toggleSelector } /> <Base pointer className="icon chatstyles-icon" onClick={ toggleSelector } />
<Overlay show={ selectorVisible } target={ target } placement="top"> <Overlay show={ selectorVisible } target={ target } placement="top">
<Popover className="nitro-chat-style-selector-container image-rendering-pixelated"> <Popover className="nitro-chat-style-selector-container">
<NitroCardContentView overflow="hidden" className="bg-transparent"> <NitroCardContentView overflow="hidden" className="bg-transparent bubble-window image-rendering-pixelated">
<Grid columnCount={ 3 } overflow="auto"> <Grid gap={ 1 } columnCount={ 3 } overflow="auto">
{ chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) => { chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
{ {
return ( return (

50
src/components/room/widgets/chat-input/ChatInputView.scss
View File

@ -1,5 +1,6 @@
.nitro-chat-input-container { .nitro-chat-input-container {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
position: relative; position: relative;
height: 40px; height: 40px;
@ -11,12 +12,13 @@
overflow: hidden; overflow: hidden;
width: -webkit-fill-available; width: -webkit-fill-available;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(xxl) {
display: flex; display: flex;
position: absolute; position: absolute;
bottom: 70px; bottom: 70px;
left: calc(100% / 3); left: 50%;
width: 200px!important; transform: translateX(-50%);
width: auto;
} }
&:before { &:before {
@ -53,6 +55,11 @@
outline: none; outline: none;
} }
}
.colour-container {
visibility: visible;
width: 100%;
} }
.bubble-container { .bubble-container {
@ -74,26 +81,8 @@
width: calc(100% - 80px)!important; width: calc(100% - 80px)!important;
} }
.info-habbopages {
cursor: pointer;
background-image: url("@/assets/images/boxes/card/questionmark.png");
background-size: contain;
background-repeat: no-repeat;
width: 19px;
height: 20px;
position: relative;
&:hover {
background-image: url("@/assets/images/boxes/card/questionmark_hover.png");
}
&:active {
background-image: url("@/assets/images/boxes/card/questionmark_click.png");
}
}
.nitro-chat-style-selector-container { .nitro-chat-style-selector-container {
width: auto; width: $chat-input-style-selector-widget-width;
max-height: $chat-input-style-selector-widget-height; max-height: $chat-input-style-selector-widget-height;
.content-area { .content-area {
@ -136,4 +125,21 @@
width: 50px; width: 50px;
} }
} }
}
.info-habbopages {
cursor: pointer;
background-image: url("@/assets/images/boxes/card/questionmark.png");
width: 19px;
height: 20px;
right: -2px;
position: relative;
&:hover {
background-image: url("@/assets/images/boxes/card/questionmark_hover.png");
&:active {
background-image: url("@/assets/images/boxes/card/questionmark_click.png");
}
}
} }

14
src/components/room/widgets/chat-input/ChatInputView.tsx
View File

@ -251,12 +251,14 @@ export const ChatInputView: FC<{}> = props =>
{ floodBlocked && { floodBlocked &&
<Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> } <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
</div> </div>
<ChatInputEmojiSelectorView addChatEmoji={ addEmojiToChat } /> <Flex>
<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } /> <ChatInputEmojiSelectorView addChatEmoji={ addEmojiToChat } />
<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } /> <ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
{ (showInfoHabboPages) && <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
<Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base> {
} (showInfoHabboPages) && <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
}
</Flex>
</div>, document.getElementById('toolbar-chat-input-container')) </div>, document.getElementById('toolbar-chat-input-container'))
); );
} }