mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 05:25:58 +03:00
fix(mobile): fix action bar button not appearing. Closes #2938
This commit is contained in:
parent
b58d5e0b1a
commit
90d2739afd
2 changed files with 50 additions and 8 deletions
11
web/components/ui/Content/MobileContent.module.scss
Normal file
11
web/components/ui/Content/MobileContent.module.scss
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
.noTabsActionMenuButton {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
margin-right: 10px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noTabsAboutContent {
|
||||||
|
position: relative;
|
||||||
|
top: 0px;
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ import { Skeleton, TabsProps } from 'antd';
|
||||||
import { ErrorBoundary } from 'react-error-boundary';
|
import { ErrorBoundary } from 'react-error-boundary';
|
||||||
import { SocialLink } from '../../../interfaces/social-link.model';
|
import { SocialLink } from '../../../interfaces/social-link.model';
|
||||||
import styles from './Content.module.scss';
|
import styles from './Content.module.scss';
|
||||||
|
import mobileStyles from './MobileContent.module.scss';
|
||||||
import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
|
import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
|
||||||
import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
|
import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
|
||||||
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
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> = ({
|
export const MobileContent: FC<MobileContentProps> = ({
|
||||||
name,
|
name,
|
||||||
summary,
|
summary,
|
||||||
|
@ -143,14 +163,13 @@ export const MobileContent: FC<MobileContentProps> = ({
|
||||||
const replacementTabBar = (props, DefaultTabBar) => (
|
const replacementTabBar = (props, DefaultTabBar) => (
|
||||||
<div className={styles.replacementBar}>
|
<div className={styles.replacementBar}>
|
||||||
<DefaultTabBar {...props} className={styles.defaultTabBar} />
|
<DefaultTabBar {...props} className={styles.defaultTabBar} />
|
||||||
<ActionButtonMenu
|
<ActionButton
|
||||||
className={styles.actionButtonMenu}
|
supportFediverseFeatures={supportFediverseFeatures}
|
||||||
showFollowItem={supportFediverseFeatures}
|
supportsBrowserNotifications={supportsBrowserNotifications}
|
||||||
showNotifyItem={supportsBrowserNotifications}
|
|
||||||
actions={actions}
|
actions={actions}
|
||||||
externalActionSelected={setExternalActionToDisplay}
|
setExternalActionToDisplay={setExternalActionToDisplay}
|
||||||
notifyItemSelected={() => setShowNotifyPopup(true)}
|
setShowNotifyPopup={setShowNotifyPopup}
|
||||||
followItemSelected={() => setShowFollowModal(true)}
|
setShowFollowModal={setShowFollowModal}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -171,7 +190,19 @@ export const MobileContent: FC<MobileContentProps> = ({
|
||||||
renderTabBar={replacementTabBar}
|
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>
|
</div>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
|
|
Loading…
Reference in a new issue