wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: redesign

Browse Source
This commit is contained in:
amaliadwiy
2026-02-18 17:26:19 +08:00
parent 31b7cf6a30
commit 4681f0a0cc
7 changed files with 89 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/(application)/announcement/[id].tsx
View File

@@ -205,7 +205,7 @@ export default function DetailAnnouncement() {
}
>
<View style={[Styles.p15, Styles.mb50]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={[Styles.wrapPaper, Styles.borderAll, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
{
loading ?
<View>
@@ -243,7 +243,7 @@ export default function DetailAnnouncement() {
</View>
{
dataFile.length > 0 && (
<View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={[Styles.wrapPaper, Styles.borderAll, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>File</Text>
</View>
@@ -268,7 +268,7 @@ export default function DetailAnnouncement() {
</View>
)
}
<View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={[Styles.wrapPaper, Styles.borderAll, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
{
loading ?
arrSkeleton.map((item, index) => {

6
app/(application)/announcement/index.tsx
View File

@@ -112,9 +112,9 @@ export default function Announcement() {
borderType="bottom"
bgColor="transparent"
icon={
<View style={[Styles.iconContent]}>
<MaterialIcons name="campaign" size={25} color={'black'} />
</View>
// <View style={[Styles.iconContent]}>
<MaterialIcons name="campaign" size={25} color={'white'} />
// </View>
}
title={item.title}
desc={item.desc.replace(/<[^>]*>?/gm, '').replace(/\r?\n|\r/g, ' ')}

11
components/borderBottomItem.tsx
View File

@@ -18,17 +18,14 @@ type Props = {
rightBottomInfo?: React.ReactNode | string
titleWeight?: 'normal' | 'bold'
bgColor?: string
width?: number
descEllipsize?: boolean
textColor?: string,
colorPress?: boolean
titleShowAll?: boolean
}
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll }: Props) {
const lebarDim = Dimensions.get("window").width;
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, descEllipsize, textColor, colorPress, titleShowAll }: Props) {
const { colors } = useTheme();
const lebar = width ? lebarDim * width / 100 : 'auto';
const textColorFix = textColor ? textColor : colors.text;
const [isTap, setIsTap] = useState(false);
@@ -50,8 +47,8 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
>
<View style={[Styles.rowItemsCenter]}>
{icon}
<View style={[Styles.rowSpaceBetween, width ? { width: lebar } : { width: '88%' }]}>
<View style={[Styles.ml10, rightTopInfo ? { width: '70%' } : { width: '90%' }]}>
<View style={[Styles.rowSpaceBetween, Styles.flex1]}>
<View style={[Styles.ml10, Styles.flex1, Styles.mr10]}>
<Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
{
subtitle &&
@@ -81,7 +78,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
}
{
typeof rightBottomInfo == 'string' ?
<Text style={[Styles.textInformation, {color: colors.dimmed }]}>{rightBottomInfo}</Text>
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{rightBottomInfo}</Text>
:
rightBottomInfo
}

6
components/borderBottomItemVertical.tsx
View File

@@ -1,7 +1,7 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import React, { useState } from "react";
import { Dimensions, Pressable, View } from "react-native";
import { Pressable, View } from "react-native";
import Text from "./Text";
type Props = {
@@ -36,9 +36,9 @@ export default function BorderBottomItemVertical({ title, icon, desc, onPress, o
>
<View style={Styles.rowItemsCenter}>
{icon}
<View style={[Styles.ml10, { flex: 1 }]}>
<View style={[Styles.ml10, Styles.flex1]}>
<View style={Styles.rowSpaceBetween}>
<View style={{ flex: 1, marginRight: 10 }}>
<View style={[Styles.flex1, Styles.mr10]}>
<Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
</View>
{

38
components/division/FiturGridItem.tsx Normal file
View File

@@ -0,0 +1,38 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import React from "react";
import { Pressable, View } from "react-native";
import Text from "../Text";
type Props = {
title: string;
subtitle: string;
icon: React.ReactNode;
onPress: () => void;
};
export default function FiturGridItem({ title, subtitle, icon, onPress }: Props) {
const { colors } = useTheme();
return (
<Pressable
onPress={onPress}
style={({ pressed }) => [
Styles.wrapGridItem,
{
backgroundColor: colors.card,
borderColor: colors.icon + '20',
},
pressed && { opacity: 0.7 }
]}
>
<View style={[Styles.p05, { marginRight: 10 }]}>
{icon}
</View>
<View style={{ flex: 1 }}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text, lineHeight: 20 }]} numberOfLines={1}>{title}</Text>
<Text style={[Styles.textMediumNormal, { color: colors.dimmed, lineHeight: 15 }]} numberOfLines={1}>{subtitle}</Text>
</View>
</Pressable>
);
}

84
components/division/fiturDivisionDetail.tsx
View File

@@ -6,9 +6,9 @@ import { AntDesign, Feather, MaterialIcons, SimpleLineIcons } from "@expo/vector
import { router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
import { View } from "react-native"
import BorderBottomItem from "../borderBottomItem"
import { useTheme } from "@/providers/ThemeProvider"
import Text from "../Text"
import FiturGridItem from "./FiturGridItem"
type Props = {
tugas: number
@@ -50,66 +50,34 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Fitur</Text>
<View>
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.p05]}>
<AntDesign name="filetext1" size={28} color={colors.text} />
</View>
}
title="Tugas"
subtitle={`${data.tugas} Tugas`}
width={30}
onPress={() => { router.push(`/division/${id}/task?status=0`) }}
/>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
<FiturGridItem
title="Tugas"
subtitle={`${data.tugas} Tugas`}
icon={<AntDesign name="filetext1" size={28} color={colors.text} />}
onPress={() => { router.push(`/division/${id}/task?status=0`) }}
/>
<BorderBottomItem
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.p05]}>
<Feather name="paperclip" size={28} color={colors.text} />
</View>
}
title="Dokumen"
subtitle={`${data.dokumen} File`}
width={30}
onPress={() => { router.push(`/division/${id}/document`) }}
/>
</View>
<FiturGridItem
title="Dokumen"
subtitle={`${data.dokumen} File`}
icon={<Feather name="paperclip" size={28} color={colors.text} />}
onPress={() => { router.push(`/division/${id}/document`) }}
/>
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.p05]}>
<SimpleLineIcons name="bubbles" size={28} color={colors.text} />
</View>
}
title="Diskusi"
subtitle={`${data.diskusi} Diskusi`}
width={30}
onPress={() => { router.push(`/division/${id}/discussion?active=true`) }}
/>
<FiturGridItem
title="Diskusi"
subtitle={`${data.diskusi} Diskusi`}
icon={<SimpleLineIcons name="bubbles" size={28} color={colors.text} />}
onPress={() => { router.push(`/division/${id}/discussion?active=true`) }}
/>
<BorderBottomItem
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.p05]}>
<AntDesign name="calendar" size={28} color={colors.text} />
</View>
}
title="Kalender"
subtitle={`${data.kalender} Acara`}
width={30}
onPress={() => { router.push(`/division/${id}/calendar`) }}
/>
</View>
<FiturGridItem
title="Kalender"
subtitle={`${data.kalender} Acara`}
icon={<AntDesign name="calendar" size={28} color={colors.text} />}
onPress={() => { router.push(`/division/${id}/calendar`) }}
/>
</View>
</View>
)

12
constants/Styles.ts
View File

@@ -780,6 +780,18 @@ const Styles = StyleSheet.create({
width: 1,
height: '100%',
},
wrapGridItem: {
borderWidth: 1,
borderRadius: 5,
padding: 10,
flexDirection: 'row',
alignItems: 'center',
width: '48.5%',
marginBottom: 10,
},
flex1: {
flex: 1
}
})
export default Styles;