noury/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix EmojiBoard styling

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-30 14:17:55 +05:30
parent cd465ca35a
commit 34862f9ace
2 changed files with 40 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/organisms/emoji-board/EmojiBoard.jsx
View file

@ -64,7 +64,7 @@ function EmojiGroup({ name, groupEmojis }) {
alt={emoji.shortcode} alt={emoji.shortcode}
unicode={`:${emoji.shortcode}:`} unicode={`:${emoji.shortcode}:`}
shortcodes={emoji.shortcode} shortcodes={emoji.shortcode}
src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)} src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc, 38, 38, 'crop')}
data-mx-emoticon data-mx-emoticon
/> />
) )
@ -279,6 +279,7 @@ function EmojiBoard({ onSelect }) {
}) })
} }
</div> </div>
<div className="emoji-board__nav-twemoji">
{ {
[ [
[0, EmojiIC, 'Smilies'], [0, EmojiIC, 'Smilies'],
@ -300,6 +301,7 @@ function EmojiBoard({ onSelect }) {
)) ))
} }
</div> </div>
</div>
</ScrollView> </ScrollView>
</div> </div>
); );

32
src/app/organisms/emoji-board/EmojiBoard.scss
View file

@ -3,44 +3,44 @@
@use '../../partials/dir'; @use '../../partials/dir';
.emoji-board { .emoji-board {
--emoji-board-height: 390px;
--emoji-board-width: 286px;
display: flex; display: flex;
&__content { &__content {
@extend .cp-fx__item-one; @extend .cp-fx__item-one;
@extend .cp-fx__column; @extend .cp-fx__column;
height: 400px; height: var(--emoji-board-height);
width: 286px; width: var(--emoji-board-width);
} }
& > .scrollbar { & > .scrollbar {
width: initial; width: initial;
height: 400px; height: var(--emoji-board-height);
} }
&__nav { &__nav {
@extend .cp-fx__column; @extend .cp-fx__column;
justify-content: center; justify-content: center;
min-height: 100%;
padding: 4px 6px; padding: 4px 6px;
background-color: var(--bg-surface-low); background-color: var(--bg-surface-low);
@include dir.side(border, 1px solid var(--bg-surface-border), none); @include dir.side(border, 1px solid var(--bg-surface-border), none);
position: relative;
& .ic-btn-surface { & .ic-btn-surface {
margin: calc(var(--sp-ultra-tight) / 2) 0;
opacity: 0.8; opacity: 0.8;
} }
} }
&__nav-custom { &__nav-custom,
&__nav-twemoji {
@extend .cp-fx__column; @extend .cp-fx__column;
border-bottom: 1px solid var(--bg-surface-border);
& .ic-btn-surface {
& .ic-raw {
filter: grayscale(1);
}
&:hover, &:active, &:focus {
& .ic-raw {
filter: grayscale(0);
}
}
} }
&__nav-twemoji {
background: inherit;
position: sticky;
bottom: -70%;
z-index: 999;
} }
} }