hippoz/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

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

@ -64,7 +64,7 @@ function EmojiGroup({ name, groupEmojis }) {
alt={emoji.shortcode}
unicode={`:${emoji.shortcode}:`}
shortcodes={emoji.shortcode}
src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc, 38, 38, 'crop')}
data-mx-emoticon
/>
)
@ -279,26 +279,28 @@ function EmojiBoard({ onSelect }) {
})
}
</div>
{
[
[0, EmojiIC, 'Smilies'],
[1, DogIC, 'Animals'],
[2, CupIC, 'Food'],
[3, BallIC, 'Activities'],
[4, PhotoIC, 'Travel'],
[5, BulbIC, 'Objects'],
[6, PeaceIC, 'Symbols'],
[7, FlagIC, 'Flags'],
].map(([indx, ico, name]) => (
<IconButton
onClick={() => openGroup(availableEmojis.length + indx)}
key={indx}
src={ico}
tooltip={name}
tooltipPlacement="right"
/>
))
}
<div className="emoji-board__nav-twemoji">
{
[
[0, EmojiIC, 'Smilies'],
[1, DogIC, 'Animals'],
[2, CupIC, 'Food'],
[3, BallIC, 'Activities'],
[4, PhotoIC, 'Travel'],
[5, BulbIC, 'Objects'],
[6, PeaceIC, 'Symbols'],
[7, FlagIC, 'Flags'],
].map(([indx, ico, name]) => (
<IconButton
onClick={() => openGroup(availableEmojis.length + indx)}
key={indx}
src={ico}
tooltip={name}
tooltipPlacement="right"
/>
))
}
</div>
</div>
</ScrollView>
</div>

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

@ -3,44 +3,44 @@
@use '../../partials/dir';
.emoji-board {
--emoji-board-height: 390px;
--emoji-board-width: 286px;
display: flex;
&__content {
@extend .cp-fx__item-one;
@extend .cp-fx__column;
height: 400px;
width: 286px;
height: var(--emoji-board-height);
width: var(--emoji-board-width);
}
& > .scrollbar {
width: initial;
height: 400px;
height: var(--emoji-board-height);
}
&__nav {
@extend .cp-fx__column;
justify-content: center;
min-height: 100%;
padding: 4px 6px;
background-color: var(--bg-surface-low);
@include dir.side(border, 1px solid var(--bg-surface-border), none);
position: relative;
& .ic-btn-surface {
margin: calc(var(--sp-ultra-tight) / 2) 0;
opacity: 0.8;
}
}
&__nav-custom {
&__nav-custom,
&__nav-twemoji {
@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;
}
}