mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 05:25:58 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix(mobile): fix action bar button not appearing. Closes #2938

Browse source
This commit is contained in:
Gabe Kangas 2023-04-22 19:57:11 -07:00
parent b58d5e0b1a
commit 90d2739afd
No known key found for this signature in database
GPG key ID: 4345B2060657F330
2 changed files with 50 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/components/ui/Content/MobileContent.module.scss Normal file
View file

@ -0,0 +1,11 @@
.noTabsActionMenuButton {
position: absolute;
right: 0px;
margin-right: 10px;
z-index: 999;
}
.noTabsAboutContent {
position: relative;
top: 0px;
}

47
web/components/ui/Content/MobileContent.tsx
View file

@ -4,6 +4,7 @@ import { Skeleton, TabsProps } from 'antd';
import { ErrorBoundary } from 'react-error-boundary';
import { SocialLink } from '../../../interfaces/social-link.model';
import styles from './Content.module.scss';
import mobileStyles from './MobileContent.module.scss';
import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
import { ChatMessage } from '../../../interfaces/chat-message.model';
@ -87,6 +88,25 @@ const ChatContent: FC<ChatContentProps> = ({ showChat, chatEnabled, messages, cu
);
};
const ActionButton = ({
supportFediverseFeatures,
supportsBrowserNotifications,
actions,
setExternalActionToDisplay,
setShowNotifyPopup,
setShowFollowModal,
}) => (
<ActionButtonMenu
className={styles.actionButtonMenu}
showFollowItem={supportFediverseFeatures}
showNotifyItem={supportsBrowserNotifications}
actions={actions}
externalActionSelected={setExternalActionToDisplay}
notifyItemSelected={() => setShowNotifyPopup(true)}
followItemSelected={() => setShowFollowModal(true)}
/>
);
export const MobileContent: FC<MobileContentProps> = ({
name,
summary,
@ -143,14 +163,13 @@ export const MobileContent: FC<MobileContentProps> = ({
const replacementTabBar = (props, DefaultTabBar) => (
<div className={styles.replacementBar}>
<DefaultTabBar {...props} className={styles.defaultTabBar} />
<ActionButtonMenu
className={styles.actionButtonMenu}
showFollowItem={supportFediverseFeatures}
showNotifyItem={supportsBrowserNotifications}
<ActionButton
supportFediverseFeatures={supportFediverseFeatures}
supportsBrowserNotifications={supportsBrowserNotifications}
actions={actions}
externalActionSelected={setExternalActionToDisplay}
notifyItemSelected={() => setShowNotifyPopup(true)}
followItemSelected={() => setShowFollowModal(true)}
setExternalActionToDisplay={setExternalActionToDisplay}
setShowNotifyPopup={setShowNotifyPopup}
setShowFollowModal={setShowFollowModal}
/>
</div>
);
@ -171,7 +190,19 @@ export const MobileContent: FC<MobileContentProps> = ({
renderTabBar={replacementTabBar}
/>
) : (
aboutTabContent
<>
<div className={mobileStyles.noTabsActionMenuButton}>
<ActionButton
supportFediverseFeatures={supportFediverseFeatures}
supportsBrowserNotifications={supportsBrowserNotifications}
actions={actions}
setExternalActionToDisplay={setExternalActionToDisplay}
setShowNotifyPopup={setShowNotifyPopup}
setShowFollowModal={setShowFollowModal}
/>
</div>
<div className={mobileStyles.noTabsAboutContent}>{aboutTabContent}</div>
</>
)}
</div>
</ErrorBoundary>