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

Show pack icon or first emoji as fallback in EmojiBoard sidebar

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-30 12:46:48 +05:30
parent c2402ddb72
commit 93251e0029
2 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,6 @@ import Input from '../../atoms/input/Input';
import ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import SearchIC from '../../../../public/res/ic/outlined/search.svg';
import StarIC from '../../../../public/res/ic/outlined/star.svg';
import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg'; import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
import DogIC from '../../../../public/res/ic/outlined/dog.svg'; import DogIC from '../../../../public/res/ic/outlined/dog.svg';
import CupIC from '../../../../public/res/ic/outlined/cup.svg'; import CupIC from '../../../../public/res/ic/outlined/cup.svg';
@ -65,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, 38, 38, 'crop')} src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
data-mx-emoticon data-mx-emoticon
/> />
) )
@ -263,18 +262,23 @@ function EmojiBoard({ onSelect }) {
</div> </div>
<ScrollView invisible> <ScrollView invisible>
<div className="emoji-board__nav"> <div className="emoji-board__nav">
<div className="emoji-board__nav-custom">
{ {
availableEmojis.map((pack) => ( availableEmojis.map((pack) => {
// TODO (future PR?): Use the pack icon, and only use StarIC as a fallback const src = initMatrix.matrixClient.mxcUrlToHttp(pack.avatar ?? pack.images[0].mxc);
return (
<IconButton <IconButton
onClick={() => openGroup(pack.packIndex)} onClick={() => openGroup(pack.packIndex)}
src={StarIC} src={src}
key={pack.packIndex} key={pack.packIndex}
tooltip={pack.displayName} tooltip={pack.displayName}
tooltipPlacement="right" tooltipPlacement="right"
isImage
/> />
)) );
})
} }
</div>
{ {
[ [
[0, EmojiIC, 'Smilies'], [0, EmojiIC, 'Smilies'],

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

@ -22,11 +22,26 @@
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);
& > .ic-btn-surface { & .ic-btn-surface {
margin: calc(var(--sp-ultra-tight) / 2) 0; margin: calc(var(--sp-ultra-tight) / 2) 0;
opacity: 0.8; opacity: 0.8;
} }
} }
&__nav-custom {
@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);
}
}
}
}
} }
.emoji-board__content__search { .emoji-board__content__search {