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

44
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,26 +279,28 @@ function EmojiBoard({ onSelect }) {
}) })
} }
</div> </div>
{ <div className="emoji-board__nav-twemoji">
[ {
[0, EmojiIC, 'Smilies'], [
[1, DogIC, 'Animals'], [0, EmojiIC, 'Smilies'],
[2, CupIC, 'Food'], [1, DogIC, 'Animals'],
[3, BallIC, 'Activities'], [2, CupIC, 'Food'],
[4, PhotoIC, 'Travel'], [3, BallIC, 'Activities'],
[5, BulbIC, 'Objects'], [4, PhotoIC, 'Travel'],
[6, PeaceIC, 'Symbols'], [5, BulbIC, 'Objects'],
[7, FlagIC, 'Flags'], [6, PeaceIC, 'Symbols'],
].map(([indx, ico, name]) => ( [7, FlagIC, 'Flags'],
<IconButton ].map(([indx, ico, name]) => (
onClick={() => openGroup(availableEmojis.length + indx)} <IconButton
key={indx} onClick={() => openGroup(availableEmojis.length + indx)}
src={ico} key={indx}
tooltip={name} src={ico}
tooltipPlacement="right" tooltip={name}
/> tooltipPlacement="right"
)) />
} ))
}
</div>
</div> </div>
</ScrollView> </ScrollView>
</div> </div>

34
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); }
&__nav-twemoji {
& .ic-btn-surface { background: inherit;
& .ic-raw { position: sticky;
filter: grayscale(1); bottom: -70%;
} z-index: 999;
&:hover, &:active, &:focus {
& .ic-raw {
filter: grayscale(0);
}
}
}
} }
} }