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

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

@ -49,7 +49,7 @@ export const ChatInputColorSelectorView: FC<ChatInputColorSelectorViewProps> = p
</Base>
<Overlay show={ selectorVisible } target={ iconRef } placement="top">
<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 }>
{ 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">
<Popover className="nitro-chat-style-selector-container">
<NitroCardContentView overflow="hidden" className="bg-transparent">
<Grid columnCount={4} overflow="auto">
<Grid columnCount={3} overflow="auto">
{emojiList && emojiList.length > 0 && emojiList.map((emojiId) => {
return (
<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 (
<>
<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">
<Popover className="nitro-chat-style-selector-container image-rendering-pixelated">
<NitroCardContentView overflow="hidden" className="bg-transparent">
<Grid columnCount={ 3 } overflow="auto">
<Popover className="nitro-chat-style-selector-container">
<NitroCardContentView overflow="hidden" className="bg-transparent bubble-window image-rendering-pixelated">
<Grid gap={ 1 } columnCount={ 3 } overflow="auto">
{ chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
{
return (

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

@ -1,5 +1,6 @@
.nitro-chat-input-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
height: 40px;
@ -11,12 +12,13 @@
overflow: hidden;
width: -webkit-fill-available;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(xxl) {
display: flex;
position: absolute;
bottom: 70px;
left: calc(100% / 3);
width: 200px!important;
left: 50%;
transform: translateX(-50%);
width: auto;
}
&:before {
@ -53,6 +55,11 @@
outline: none;
}
}
.colour-container {
visibility: visible;
width: 100%;
}
.bubble-container {
@ -74,26 +81,8 @@
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 {
width: auto;
width: $chat-input-style-selector-widget-width;
max-height: $chat-input-style-selector-widget-height;
.content-area {
@ -136,4 +125,21 @@
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 &&
<Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
</div>
<ChatInputEmojiSelectorView addChatEmoji={ addEmojiToChat } />
<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
{ (showInfoHabboPages) &&
<Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
}
<Flex>
<ChatInputEmojiSelectorView addChatEmoji={ addEmojiToChat } />
<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
{
(showInfoHabboPages) && <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
}
</Flex>
</div>, document.getElementById('toolbar-chat-input-container'))
);
}