Skip to content

Commit

Permalink
Merge pull request #1594 from ever-co/develop
Browse files Browse the repository at this point in the history 
Release
  • Loading branch information
@evereq
evereq authored Oct 19, 2023
2 parents 263bc6f + 37da1e7 commit fd8c4f6
Show file tree
Hide file tree
Showing 10 changed files with 130 additions and 105 deletions.
7 changes: 4 additions & 3 deletions apps/mobile/app/components/HeaderTimer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { useStores } from "../models"
import { useTimer } from "../services/hooks/useTimer"
import { typography, useAppTheme } from "../theme"
import { SvgXml } from "react-native-svg"
import { timerSmallPlayIcon, timerSmallStopIcon } from "./svgs/icons"
import { timerSmallDarkPlayIcon, timerSmallPlayIcon, timerSmallStopIcon } from "./svgs/icons"

const HeaderTimer = observer(() => {
const { colors } = useAppTheme()
const { colors, dark } = useAppTheme()
const {
TimerStore: { timeCounterState, localTimerStatus },
TaskStore: { activeTask },
Expand Down Expand Up @@ -54,8 +54,9 @@ const HeaderTimer = observer(() => {
onPress={() => handleTimer()}
>
{localTimerStatus.running ? (
// <Image style={styles.btnImage} source={require("../../assets/icons/new/stop-blue.png")} />
<SvgXml xml={timerSmallStopIcon} />
) : dark ? (
<SvgXml xml={timerSmallDarkPlayIcon} />
) : (
<SvgXml xml={timerSmallPlayIcon} />
)}
Expand Down
51 changes: 15 additions & 36 deletions apps/mobile/app/components/TimerButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useTimer } from "../services/hooks/useTimer"
import { ITeamTask } from "../services/interfaces/ITask"
import { useAppTheme } from "../theme"
import { SvgXml } from "react-native-svg"
import { timerLargePlayIcon, timerLargeStopIcon } from "./svgs/icons"
import { timerLargeDarkPlayIcon, timerLargePlayIcon, timerLargeStopIcon } from "./svgs/icons"

type TimerButtonProps = {
task?: ITeamTask
Expand All @@ -25,55 +25,34 @@ const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle }) => {
const { canRunTimer, startTimer, stopTimer } = useTimer()
const { dark } = useAppTheme()

if (dark) {
return (
<View>
{!localTimerStatus.running ? (
<>
<Pressable
style={[
styles.timerBtnDarkTheme,
containerStyle,
{ backgroundColor: "#fff", opacity: canRunTimer ? 1 : 0.4 },
]}
disabled={!canRunTimer}
onPress={() => startTimer()}
>
<SvgXml xml={timerLargePlayIcon} />
</Pressable>
</>
) : (
<Pressable
onPress={() => stopTimer()}
style={[styles.timerBtnDarkTheme, { backgroundColor: "#e11d48" }, containerStyle]}
>
<SvgXml xml={timerLargeStopIcon} />
</Pressable>
)}
</View>
)
}

return (
<View>
{!localTimerStatus.running ? (
<>
<Pressable
style={[
styles.timerBtnInactive,
dark ? styles.timerBtnDarkTheme : styles.timerBtnInactive,
containerStyle,
{ backgroundColor: "#fff", opacity: canRunTimer ? 1 : 0.4 },
{
backgroundColor: dark ? "#1e2430" : "#fff",
opacity: canRunTimer ? 1 : 0.4,
borderColor: dark ? "#28292F" : "#0000001A",
},
]}
disabled={!canRunTimer}
onPress={() => (canRunTimer ? startTimer() : {})}
onPress={() => startTimer()}
>
<SvgXml xml={timerLargePlayIcon} />
<SvgXml xml={dark ? timerLargeDarkPlayIcon : timerLargePlayIcon} />
</Pressable>
</>
) : (
<Pressable
onPress={() => stopTimer()}
style={[styles.timerBtnActive, { backgroundColor: "#e11d48" }, containerStyle]}
style={[
dark ? styles.timerBtnDarkTheme : styles.timerBtnActive,
{ backgroundColor: "#e11d48", borderColor: dark ? "#28292F" : "#0000001A" },
containerStyle,
]}
>
<SvgXml xml={timerLargeStopIcon} />
</Pressable>
Expand Down Expand Up @@ -106,7 +85,7 @@ const styles = StyleSheet.create({
},
timerBtnDarkTheme: {
alignItems: "center",
backgroundColor: "#3826A6",
// backgroundColor: "#3826A6",
borderColor: "rgba(0, 0, 0, 0.1)",
borderRadius: 30,
borderWidth: 1,
Expand Down
33 changes: 33 additions & 0 deletions apps/mobile/app/components/svgs/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,28 @@ export const timerLargePlayIcon = `<svg
<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
</svg>`

export const timerLargeDarkPlayIcon = `<svg
width="30"
height="30"
viewBox="0 0 28 28"
fill="#FFFFFF"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
</svg>`

export const timerMediumDarkPlayIcon = `<svg
width="21"
height="21"
viewBox="0 0 28 28"
fill="#FFFFFF"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
</svg>`

export const timerMediumPlayIcon = `<svg
width="21"
height="21"
Expand All @@ -287,6 +309,17 @@ export const timerSmallPlayIcon = `<svg
<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
</svg>`

export const timerSmallDarkPlayIcon = `<svg
width="17"
height="17"
viewBox="0 0 28 28"
fill="#FFFFFF"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
</svg>`

export const peopleNotFocusedDark = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 7.16C17.94 7.15 17.87 7.15 17.81 7.16C16.43 7.11 15.33 5.98 15.33 4.58C15.33 3.15 16.48 2 17.91 2C19.34 2 20.49 3.16 20.49 4.58C20.48 5.98 19.38 7.11 18 7.16Z" stroke="#484A4E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.9699 14.44C18.3399 14.67 19.8499 14.43 20.9099 13.72C22.3199 12.78 22.3199 11.24 20.9099 10.3C19.8399 9.59004 18.3099 9.35003 16.9399 9.59003" stroke="#484A4E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export const ListItemContent: React.FC<ListItemProps> = observer((props) => {
<TaskTitleDisplay task={props.task} editMode={editTitle} setEditMode={setEditTitle} />
</View>
{!enableEstimate ? (
<TouchableOpacity onLongPress={() => setEnableEstimate(true)}>
<TouchableOpacity onPress={() => setEnableEstimate(true)}>
<AnimatedCircularProgress
size={56}
width={7}
Expand Down
69 changes: 34 additions & 35 deletions apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
/* eslint-disable react-native/no-inline-styles */

import React, { FC } from "react"
import { LinearGradient } from "expo-linear-gradient"
import { StyleSheet } from "react-native"
import { useStores } from "../../../../models"
import { useTimer } from "../../../../services/hooks/useTimer"
Expand All @@ -12,7 +11,11 @@ import { useTeamTasks } from "../../../../services/hooks/features/useTeamTasks"
import { TouchableOpacity } from "react-native-gesture-handler"
import { useAppTheme } from "../../../../theme"
import { SvgXml } from "react-native-svg"
import { timerMediumPlayIcon, timerMediumStopIcon } from "../../../../components/svgs/icons"
import {
timerMediumDarkPlayIcon,
timerMediumPlayIcon,
timerMediumStopIcon,
} from "../../../../components/svgs/icons"

interface Props {
isActiveTask: boolean
Expand Down Expand Up @@ -40,68 +43,64 @@ const TimerButton: FC<Props> = observer(({ isActiveTask, task }) => {
stopTimer()
}

if (!dark) {
return (
<TouchableOpacity
style={[
styles.timerBtn,
{
backgroundColor:
localTimerStatus.running && isActiveTask ? "#e11d48" : colors.background,
borderColor: localTimerStatus.running && isActiveTask ? "#e11d48" : colors.background,
},
]}
onPress={() => handleStartTimer()}
>
{localTimerStatus.running && isActiveTask ? (
<SvgXml xml={timerMediumStopIcon} />
) : (
<SvgXml xml={timerMediumPlayIcon} />
)}
</TouchableOpacity>
)
}

return (
<>
{localTimerStatus.running && isActiveTask ? (
<TouchableOpacity
style={[
styles.timerBtn,
!dark && styles.shadowTimerRunning,
{
backgroundColor: "#e11d48",
borderColor: "#e11d48",
borderColor: dark ? "#28292F" : "#0000001A",
},
]}
onPress={() => handleStartTimer()}
>
<SvgXml xml={timerMediumStopIcon} />
</TouchableOpacity>
) : (
<LinearGradient colors={["#E93CB9", "#6A71E7"]} style={styles.timerBtn}>
<TouchableOpacity onPress={() => handleStartTimer()}>
<SvgXml xml={timerMediumPlayIcon} />
</TouchableOpacity>
</LinearGradient>
<TouchableOpacity
style={[
styles.timerBtn,
!dark && styles.shadowTimerNotRunning,
{
backgroundColor: dark ? "#1e2430" : colors.background,
borderColor: dark ? "#28292F" : "#0000001A",
},
]}
onPress={() => handleStartTimer()}
>
{dark ? <SvgXml xml={timerMediumDarkPlayIcon} /> : <SvgXml xml={timerMediumPlayIcon} />}
</TouchableOpacity>
)}
</>
)
})

const styles = StyleSheet.create({
shadowTimerNotRunning: {
elevation: 10,
shadowColor: "#3826A6",
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.5,
shadowRadius: 10,
},
shadowTimerRunning: {
elevation: 10,
shadowColor: "#e11d48",
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.5,
shadowRadius: 10,
},
timerBtn: {
alignItems: "center",
borderColor: "rgba(0, 0, 0, 0.4)",
borderRadius: 20,
borderWidth: 1,
elevation: 10,
height: 42,
justifyContent: "center",
marginRight: 10,
shadowColor: "rgba(0,0,0,0.16)",
shadowOffset: { width: 5, height: 10 },
shadowOpacity: 1,
shadowRadius: 10,
width: 42,
},
timerIcon: {
Expand Down
8 changes: 3 additions & 5 deletions apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import UnassignedTasksList from "./UnassignedTaskList"
import { translate } from "../../../../i18n"
import moment from "moment-timezone"
import { useTimer } from "../../../../services/hooks/useTimer"
import { SettingScreenNavigationProp } from "../../../../navigators/AuthenticatedNavigator"

export type ListItemProps = {
member: OT_Member
Expand Down Expand Up @@ -133,16 +134,13 @@ const ListCardItem: React.FC<Props> = observer((props) => {
const { timerStatus } = useTimer()
const [showUnassignedList, setShowUnassignedList] = useState<boolean>(false)

const navigation = useNavigation()
const navigation = useNavigation<SettingScreenNavigationProp<"Profile">>()

const onPressIn = () => {
taskEdition.setEditMode(false)
taskEdition.setEstimateEditMode(false)
props.setOpenMenuIndex(null)
navigation.navigate(
"Profile" as never,
{ userId: memberInfo.memberUser.id, activeTab: "worked" } as never,
)
navigation.navigate("Profile", { userId: memberInfo.memberUser.id, activeTab: "worked" })
}

return (
Expand Down
13 changes: 11 additions & 2 deletions apps/mobile/app/screens/Authenticated/TimerScreen/components/TimerTaskSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import TaskSize from "../../../../components/TaskSize"
import { RTuseTaskInput } from "../../../../services/hooks/features/useTaskInput"
import TaskLabels from "../../../../components/TaskLabels"
import IssuesModal from "../../../../components/IssuesModal"
import { useStores } from "../../../../models"

const TimerTaskSection = observer(
({ taskInput, outsideClick }: { taskInput: RTuseTaskInput; outsideClick: () => unknown }) => {
Expand All @@ -44,6 +45,9 @@ const TimerTaskSection = observer(

const [combxShow, setCombxShow] = useState<boolean>(false)
const inputRef = useRef<TextInput>(null)
const {
TimerStore: { localTimerStatus },
} = useStores()

const closeCombox = useCallback(() => {
setCombxShow(false)
Expand Down Expand Up @@ -88,14 +92,19 @@ const TimerTaskSection = observer(
placeholderTextColor={colors.tertiary}
style={[
styles.textInput,
{ backgroundColor: colors.background, color: colors.primary, width: "80%" },
{
backgroundColor: colors.background,
color: colors.primary,
width: "80%",
opacity: localTimerStatus.running ? 0.5 : 1,
},
]}
placeholder={translate("myWorkScreen.taskFieldPlaceholder")}
defaultValue={activeTask ? activeTask.title : ""}
autoFocus={false}
autoCapitalize="none"
autoCorrect={false}
editable={true}
editable={!localTimerStatus.running}
onFocus={() => setEditMode(true)}
// onBlur={() => setEditMode(false)}
onChangeText={(newText) => setQuery(newText)}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/lib/features/team/invite/user-invite-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,13 +281,13 @@ export function InviteUserTeamCard({
<VerticalSeparator />

{/* Task information */}
<Text className="opacity-40 2xl:w-80 w-1/5 px-4 text-center text-xs sm:text-sm">
<Text className="opacity-40 2xl:w-80 3xl:w-[32rem] px-4 text-center text-xs sm:text-sm">
{trans.common.TASK_TITTLE}
</Text>
<VerticalSeparator className="ml-2" />

{/* TaskTime */}
<div className="opacity-40 flex text-center space-x-2 items-center mb-2 2xl:w-48 3xl:w-60 w-1/5 font-normal lg:px-4 px-2 text-xs md:text-sm">
<div className="opacity-40 flex text-center space-x-2 items-center mb-2 2xl:w-48 3xl:w-[12rem] w-1/5 font-normal lg:px-4 px-2 text-xs md:text-sm">
<span>{trans.common.TODAY}:</span>
<Text>00h : 00m</Text>
</div>
Expand Down
Loading

0 comments on commit fd8c4f6

Please sign in to comment.