fix comment area display #7716

Merged
jessopb merged 1 commit from fix-commentAreaDisplay into master 2022-11-04 15:44:36 +01:00
5 changed files with 16 additions and 34 deletions

View file

@ -363,31 +363,6 @@ export function CommentCreate(props: Props) {
.catch(() => {});
}, [canReceiveFiatTip, claim.claim_id, claim.name, claim.signing_channel, stickerSelector]);
// LIVESTREAM ONLY - REMOVE
// Handle keyboard shortcut comment creation
// React.useEffect(() => {
// function altEnterListener(e: SyntheticKeyboardEvent<*>) {
// const inputRef = formFieldRef && formFieldRef.current && formFieldRef.current.input;
//
// if (inputRef && inputRef.current === document.activeElement) {
// // $FlowFixMe
// const isTyping = e.target.attributes['term'];
//
// if (((isLivestream && !isTyping) || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
// e.preventDefault();
// buttonRef.current.click();
// }
// }
// }
//
// window.addEventListener('keydown', altEnterListener);
//
// // removes the listener so it doesn't cause problems elsewhere in the app
// return () => {
// window.removeEventListener('keydown', altEnterListener);
// };
// }, [isLivestream]);
// **************************************************************************
// Render
// **************************************************************************

View file

@ -366,9 +366,9 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
const sortButtonProps = { activeSort: sort, changeSort };
return (
<>
<div className={'comment__actions-row'}>
{totalComments > 1 && ENABLE_COMMENT_REACTIONS && (
<span className="comment__sort">
<div className="comment__sort-group">
<SortButton {...sortButtonProps} label={__('Best')} icon={ICONS.BEST} sortOption={SORT_BY.POPULARITY} />
<SortButton
{...sortButtonProps}
@ -377,11 +377,9 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
sortOption={SORT_BY.CONTROVERSY}
/>
<SortButton {...sortButtonProps} label={__('New')} icon={ICONS.NEW} sortOption={SORT_BY.NEWEST} />
</span>
)}
<div className="button_refresh">
<Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
</div>
)}
{allServers.length >= 2 && (
<div className="button__selected-server">
<FormField
@ -408,7 +406,10 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
</FormField>
</div>
)}
</>
<div className="button_refresh">
<Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
</div>
</div>
);
};

View file

@ -13,7 +13,7 @@ const select = (state, props) => {
if (claimUriBeingPlayed) {
const claim = makeSelectClaimForUri(props.uri)(state);
const claimBeingPlayed = makeSelectClaimForUri(claimUriBeingPlayed)(state);
isBeingPlayed = claim.claim_id === claimBeingPlayed.claim_id;
isBeingPlayed = claim && claim.claim_id === claimBeingPlayed.claim_id;
}
return {

View file

@ -615,7 +615,7 @@
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
border-bottom: none;
.button--link {
font-size: var(--font-xsmall);
margin: 0px;

View file

@ -45,6 +45,12 @@ $thumbnailWidthSmall: 1rem;
}
}
.comment__actions-row {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.comment {
width: 100%;
display: flex;