From 1da3d252e8f4ed7e1a6573f87e6275ead403b1c1 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Thu, 11 Aug 2022 16:13:53 +0530 Subject: [PATCH] Add navigation bar to sticker board --- src/app/organisms/emoji-board/EmojiBoard.jsx | 104 +++++++++--------- src/app/organisms/emoji-board/EmojiBoard.scss | 9 +- .../organisms/sticker-board/StickerBoard.jsx | 31 +++++- .../organisms/sticker-board/StickerBoard.scss | 16 +++ 4 files changed, 103 insertions(+), 57 deletions(-) diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx index b97cab0..d976232 100644 --- a/src/app/organisms/emoji-board/EmojiBoard.jsx +++ b/src/app/organisms/emoji-board/EmojiBoard.jsx @@ -252,6 +252,58 @@ function EmojiBoard({ onSelect, searchRef }) { return (
+ +
+ {recentEmojis.length > 0 && ( + openGroup(0)} + src={RecentClockIC} + tooltip="Recent" + tooltipPlacement="left" + /> + )} +
+ { + availableEmojis.map((pack) => { + const src = initMatrix.matrixClient + .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc); + return ( + openGroup(recentOffset + pack.packIndex)} + src={src} + key={pack.packIndex} + tooltip={pack.displayName ?? 'Unknown'} + tooltipPlacement="left" + isImage + /> + ); + }) + } +
+
+ { + [ + [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]) => ( + openGroup(recentOffset + availableEmojis.length + indx)} + key={indx} + src={ico} + tooltip={name} + tooltipPlacement="left" + /> + )) + } +
+
+
@@ -285,58 +337,6 @@ function EmojiBoard({ onSelect, searchRef }) { :slight_smile:
- -
- {recentEmojis.length > 0 && ( - openGroup(0)} - src={RecentClockIC} - tooltip="Recent" - tooltipPlacement="right" - /> - )} -
- { - availableEmojis.map((pack) => { - const src = initMatrix.matrixClient - .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc); - return ( - openGroup(recentOffset + pack.packIndex)} - src={src} - key={pack.packIndex} - tooltip={pack.displayName ?? 'Unknown'} - tooltipPlacement="right" - isImage - /> - ); - }) - } -
-
- { - [ - [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]) => ( - openGroup(recentOffset + availableEmojis.length + indx)} - key={indx} - src={ico} - tooltip={name} - tooltipPlacement="right" - /> - )) - } -
-
-
); } diff --git a/src/app/organisms/emoji-board/EmojiBoard.scss b/src/app/organisms/emoji-board/EmojiBoard.scss index 6883e18..7bdaa06 100644 --- a/src/app/organisms/emoji-board/EmojiBoard.scss +++ b/src/app/organisms/emoji-board/EmojiBoard.scss @@ -26,7 +26,7 @@ min-height: 100%; padding: 4px 6px; background-color: var(--bg-surface-low); - @include dir.side(border, 1px solid var(--bg-surface-border), none); + @include dir.side(border, none, 1px solid var(--bg-surface-border)); position: relative; @@ -122,8 +122,11 @@ @include dir.side(margin, var(--left-margin), var(--right-margin)); } & .emoji { - width: 38px; - height: 38px; + max-width: 38px; + max-height: 38px; + width: 100%; + height: 100%; + overflow: hidden; object-fit: contain; padding: var(--emoji-padding); cursor: pointer; diff --git a/src/app/organisms/sticker-board/StickerBoard.jsx b/src/app/organisms/sticker-board/StickerBoard.jsx index 53b7563..91e2591 100644 --- a/src/app/organisms/sticker-board/StickerBoard.jsx +++ b/src/app/organisms/sticker-board/StickerBoard.jsx @@ -1,6 +1,6 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ -import React from 'react'; +import React, { useRef } from 'react'; import PropTypes from 'prop-types'; import './StickerBoard.scss'; @@ -9,10 +9,12 @@ import { getRelevantPacks } from '../emoji-board/custom-emoji'; import Text from '../../atoms/text/Text'; import ScrollView from '../../atoms/scroll/ScrollView'; +import IconButton from '../../atoms/button/IconButton'; function StickerBoard({ roomId, onSelect }) { const mx = initMatrix.matrixClient; const room = mx.getRoom(roomId); + const scrollRef = useRef(null); const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId); const parentRooms = [...parentIds].map((id) => mx.getRoom(id)); @@ -38,6 +40,11 @@ function StickerBoard({ roomId, onSelect }) { onSelect(stickerData); }; + const openGroup = (groupIndex) => { + const scrollContent = scrollRef.current.firstElementChild; + scrollContent.children[groupIndex].scrollIntoView(); + }; + const renderPack = (pack) => (
{pack.displayName ?? 'Unknown'} @@ -50,6 +57,7 @@ function StickerBoard({ roomId, onSelect }) { alt={sticker.shortcode} title={sticker.body ?? sticker.shortcode} data-mx-sticker={sticker.mxc} + loading="lazy" /> ))}
@@ -58,8 +66,27 @@ function StickerBoard({ roomId, onSelect }) { return (
+ {packs.length > 0 && ( + +
+ {packs.map((pack, index) => { + const src = mx.mxcUrlToHttp(pack.avatarUrl ?? pack.getStickers()[0].mxc); + return ( + openGroup(index)} + src={src} + tooltip={pack.displayName || 'Unknown'} + tooltipPlacement="left" + isImage + /> + ); + })} +
+
+ )}
- +
.scrollbar { + width: initial; + height: var(--sticker-board-height); + } + + &__sidebar { + display: flex; + flex-direction: column; + min-height: 100%; + padding: 4px 6px; + + background-color: var(--bg-surface-low); + @include dir.side(border, none, 1px solid var(--bg-surface-border)); + } &__container { flex-grow: 1;