LogalDeveloper/owncast
0
Fork 0
Code Activity

fix: #2957 Portrait Buttons Make Action Buttons Wrap (#2965)

Browse Source 
Co-authored-by: thisProjects <wibbet@wobbet.com>
This commit is contained in:
Nathan
2023-04-28 20:09:00 +01:00
committed by GitHub
parent 7b3890debd
commit cd74c42967
4 changed files with 54 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/components/ui/Content/ActionButtons.tsx
View File

@@ -10,7 +10,6 @@ import styles from './Content.module.scss';
import { ActionButton } from '../../action-buttons/ActionButton/ActionButton';
interface ActionButtonProps {
isMobile: boolean;
supportFediverseFeatures: boolean;
externalActions: ExternalAction[];
supportsBrowserNotifications: boolean;
@@ -31,7 +30,6 @@ const NotifyReminderPopup = dynamic(
);
const ActionButtons: FC<ActionButtonProps> = ({
isMobile,
supportFediverseFeatures,
supportsBrowserNotifications,
showNotifyReminder,
@@ -50,38 +48,37 @@ const ActionButtons: FC<ActionButtonProps> = ({
/>
));
if (!isMobile) {
return (
<ActionButtonRow>
{externalActionButtons}
{supportFediverseFeatures && (
<FollowButton size="small" onClick={() => setShowFollowModal(true)} />
)}
{supportsBrowserNotifications && (
<NotifyReminderPopup
open={showNotifyReminder}
notificationClicked={() => setShowNotifyModal(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyModal(true)} />
</NotifyReminderPopup>
)}
</ActionButtonRow>
);
}
return (
<div className={styles.mobileActionButtonMenu}>
<ActionButtonMenu
className={styles.actionButtonMenu}
showFollowItem={supportFediverseFeatures}
showNotifyItem={supportsBrowserNotifications}
actions={externalActions}
externalActionSelected={setExternalActionToDisplay}
notifyItemSelected={() => setShowNotifyModal(true)}
followItemSelected={() => setShowFollowModal(true)}
/>
</div>
<>
<div className={styles.desktopActionButtons}>
<ActionButtonRow>
{externalActionButtons}
{supportFediverseFeatures && (
<FollowButton size="small" onClick={() => setShowFollowModal(true)} />
)}
{supportsBrowserNotifications && (
<NotifyReminderPopup
open={showNotifyReminder}
notificationClicked={() => setShowNotifyModal(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyModal(true)} />
</NotifyReminderPopup>
)}
</ActionButtonRow>
</div>
<div className={styles.mobileActionButtonMenu}>
<ActionButtonMenu
className={styles.actionButtonMenu}
showFollowItem={supportFediverseFeatures}
showNotifyItem={supportsBrowserNotifications}
actions={externalActions}
externalActionSelected={setExternalActionToDisplay}
notifyItemSelected={() => setShowNotifyModal(true)}
followItemSelected={() => setShowFollowModal(true)}
/>
</div>
</>
);
};