Add moderation context menu to profiles
This commit is contained in:
parent
59cf1ff451
commit
44da58a569
|
|
@ -0,0 +1,51 @@
|
|||
import React from "react";
|
||||
import { Dimensions, View, Image } from "react-native";
|
||||
import {
|
||||
Menu,
|
||||
MenuOptions,
|
||||
MenuOption,
|
||||
MenuTrigger,
|
||||
renderers
|
||||
} from "react-native-popup-menu";
|
||||
|
||||
const { SlideInMenu } = renderers;
|
||||
|
||||
const SCREEN_WIDTH = Dimensions.get("window").width;
|
||||
|
||||
const ModerateMenuJsx = (props) => {
|
||||
const optionsStyles = {
|
||||
optionWrapper: { // The wrapper around a single option
|
||||
paddingLeft: SCREEN_WIDTH / 15,
|
||||
paddingTop: SCREEN_WIDTH / 30,
|
||||
paddingBottom: SCREEN_WIDTH / 30
|
||||
},
|
||||
optionsWrapper: { // The wrapper around all options
|
||||
marginTop: SCREEN_WIDTH / 20,
|
||||
marginBottom: SCREEN_WIDTH / 20,
|
||||
},
|
||||
optionsContainer: { // The Animated.View
|
||||
borderTopLeftRadius: 10,
|
||||
borderTopRightRadius: 10
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style = { props.containerStyle }>
|
||||
<Menu renderer = { SlideInMenu }>
|
||||
<MenuTrigger>
|
||||
<Image
|
||||
source = { require("assets/eva-icons/ellipsis.png") }
|
||||
style = { props.triggerStyle }/>
|
||||
</MenuTrigger>
|
||||
<MenuOptions customStyles = { optionsStyles }>
|
||||
<MenuOption text="Hide" />
|
||||
<MenuOption text="Unfollow" />
|
||||
<MenuOption text="Mute" />
|
||||
<MenuOption text="Block" />
|
||||
</MenuOptions>
|
||||
</Menu>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export { ModerateMenuJsx as default };
|
||||
|
|
@ -17,6 +17,8 @@ import {
|
|||
ScreenWithFullNavigationJsx
|
||||
} from "src/components/navigation/navigators";
|
||||
|
||||
import ModerateMenuJsx from "src/components/moderate-menu.js";
|
||||
|
||||
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
|
||||
const TEST_POSTS = [
|
||||
{
|
||||
|
|
@ -141,7 +143,8 @@ const ViewProfileJsx = ({navigation}) => {
|
|||
const ProfileDisplayJsx = ({navigation}) => {
|
||||
const accountName = navigation.getParam("acct", "");
|
||||
let [state, setState] = useState({
|
||||
loaded: false
|
||||
loaded: false,
|
||||
own: false
|
||||
});
|
||||
|
||||
const notif_pack = {
|
||||
|
|
@ -195,11 +198,22 @@ const ProfileDisplayJsx = ({navigation}) => {
|
|||
@{state.profile.username }
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableWithoutFeedback>
|
||||
<Image
|
||||
source = { activeOrNot(state.unread_notifs, notif_pack) }
|
||||
style = { styles.bell } />
|
||||
</TouchableWithoutFeedback>
|
||||
{
|
||||
state.own ?
|
||||
<TouchableWithoutFeedback>
|
||||
<Image
|
||||
source = { activeOrNot(state.unread_notifs, notif_pack) }
|
||||
style = {
|
||||
[
|
||||
styles.profileHeaderIcon,
|
||||
styles.profileContextConatiner
|
||||
]
|
||||
} />
|
||||
</TouchableWithoutFeedback>
|
||||
: <ModerateMenuJsx
|
||||
triggerStyle = { styles.profileHeaderIcon }
|
||||
containerStyle = { styles.profileContextContainer } />
|
||||
}
|
||||
</View>
|
||||
<Text style = { styles.accountStats }>
|
||||
{ state.profile.statuses_count } posts •
|
||||
|
|
@ -270,10 +284,11 @@ const styles = {
|
|||
borderRadius: "100%",
|
||||
marginRight: screen_width / 20
|
||||
},
|
||||
bell: {
|
||||
profileHeaderIcon: {
|
||||
width: screen_width / 12,
|
||||
height: screen_width / 12,
|
||||
|
||||
},
|
||||
profileContextContainer: {
|
||||
marginLeft: "auto",
|
||||
marginRight: screen_width / 15
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,26 +8,15 @@ import {
|
|||
ScrollView
|
||||
} from "react-native";
|
||||
|
||||
import {
|
||||
Menu,
|
||||
MenuOptions,
|
||||
MenuOption,
|
||||
MenuTrigger,
|
||||
renderers
|
||||
} from "react-native-popup-menu";
|
||||
|
||||
|
||||
import { pluralize, timeToAge } from "src/interface/rendering"
|
||||
import { pluralize, timeToAge} from "src/interface/rendering"
|
||||
|
||||
import PostActionBarJsx from "src/components/posts/post-action-bar";
|
||||
|
||||
import ModerateMenuJsx from "src/components/moderate-menu.js";
|
||||
|
||||
const SCREEN_WIDTH = Dimensions.get("window").width;
|
||||
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
|
||||
|
||||
// Extract the SlideInMenu function from `renderers`
|
||||
// This will be used in RawPostJsx
|
||||
const { SlideInMenu } = renderers;
|
||||
|
||||
function getAutoHeight(w1, h1, w2) {
|
||||
/*
|
||||
Given the original dimensions and the new width, calculate what would
|
||||
|
|
@ -90,20 +79,9 @@ export const RawPostJsx = (props) => {
|
|||
source = { { uri: props.data.avatar } } />
|
||||
<Text
|
||||
style = { styles.postHeaderName }>{ props.data.username }</Text>
|
||||
<View style = { styles.menu }>
|
||||
<Menu renderer = { SlideInMenu }>
|
||||
<MenuTrigger>
|
||||
<Image
|
||||
source = { require("assets/eva-icons/ellipsis.png") }
|
||||
style = { styles.ellipsis }/>
|
||||
</MenuTrigger>
|
||||
<MenuOptions customStyles = { optionsStyles }>
|
||||
<MenuOption text="Hide" />
|
||||
<MenuOption text="Unfollow" />
|
||||
<MenuOption text="Block" />
|
||||
</MenuOptions>
|
||||
</Menu>
|
||||
</View>
|
||||
<ModerateMenuJsx
|
||||
containerStyle = { styles.menu }
|
||||
triggerStyle = { styles.ellipsis } />
|
||||
</View>
|
||||
{
|
||||
props.data.media_attachments.length > 1 ?
|
||||
|
|
|
|||
Loading…
Reference in New Issue