Remove progress circle from timer page
- This is partly to figure out what is happening in #206. - It's also because we have the global timer bar - Could never quite make it look like the text was centered
This commit is contained in:
parent
8e9a6be85d
commit
19307a2a3c
|
|
@ -1,13 +1,10 @@
|
|||
import { useFocusEffect } from "@react-navigation/native";
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { NativeModules, View } from "react-native";
|
||||
import { FAB, Text, useTheme } from "react-native-paper";
|
||||
import { ProgressCircle } from "react-native-svg-charts";
|
||||
import AppFab from "./AppFab";
|
||||
import { darkenRgba } from "./colors";
|
||||
import { MARGIN, PADDING } from "./constants";
|
||||
import { settingsRepo } from "./db";
|
||||
import DrawerHeader from "./DrawerHeader";
|
||||
import { settingsRepo } from "./db";
|
||||
import Settings from "./settings";
|
||||
import useTimer from "./use-timer";
|
||||
|
||||
|
|
@ -38,37 +35,20 @@ export default function TimerPage() {
|
|||
update();
|
||||
};
|
||||
|
||||
const progress = useMemo(() => {
|
||||
return (Number(minutes) * 60 + Number(seconds)) / 210;
|
||||
}, [minutes, seconds]);
|
||||
|
||||
const backgroundColor = useMemo(() => {
|
||||
if (colors.primary.match(/rgba/)) return darkenRgba(colors.primary, 0.6);
|
||||
return colors.primary + "80";
|
||||
}, [colors.primary]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DrawerHeader name="Timer" />
|
||||
<View style={{ flexGrow: 1, padding: PADDING }}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 70, position: "absolute" }}>
|
||||
{minutes}:{seconds}
|
||||
</Text>
|
||||
<ProgressCircle
|
||||
style={{ height: 300, width: 300, marginBottom: MARGIN }}
|
||||
progress={progress}
|
||||
strokeWidth={10}
|
||||
progressColor={colors.primary}
|
||||
backgroundColor={backgroundColor}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 70, position: "absolute" }}>
|
||||
{minutes}:{seconds}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<FAB
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "massive",
|
||||
"version": "2.7",
|
||||
"version": "2.8",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "massive",
|
||||
"version": "2.7",
|
||||
"version": "2.8",
|
||||
"license": "GPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||
|
|
@ -21,7 +21,6 @@
|
|||
"@testing-library/react-native": "^12.1.2",
|
||||
"@types/d3-shape": "^3.1.1",
|
||||
"@types/react-native-sqlite-storage": "^6.0.0",
|
||||
"@types/react-native-svg-charts": "^5.0.12",
|
||||
"@types/react-native-vector-icons": "^6.4.13",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"babel-preset-react-native": "^4.0.1",
|
||||
|
|
@ -44,7 +43,6 @@
|
|||
"react-native-share": "^9.2.3",
|
||||
"react-native-sqlite-storage": "^6.0.1",
|
||||
"react-native-svg": "^13.10.10",
|
||||
"react-native-svg-charts": "^5.4.0",
|
||||
"react-native-vector-icons": "^9.2.0",
|
||||
"react-native-view-shot": "^3.7.0",
|
||||
"typeorm": "^0.3.17"
|
||||
|
|
@ -3145,13 +3143,6 @@
|
|||
"version": "3.0.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "1.0.18",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "^1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.1",
|
||||
"license": "MIT",
|
||||
|
|
@ -3159,10 +3150,6 @@
|
|||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "1.1.1",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/graceful-fs": {
|
||||
"version": "4.1.6",
|
||||
"devOptional": true,
|
||||
|
|
@ -3229,62 +3216,10 @@
|
|||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-native": {
|
||||
"version": "0.72.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-native/virtualized-lists": "^0.72.4",
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-native-sqlite-storage": {
|
||||
"version": "6.0.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react-native-svg-charts": {
|
||||
"version": "5.0.12",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-scale": "^1",
|
||||
"@types/d3-shape": "^1",
|
||||
"@types/react": "*",
|
||||
"@types/react-native": "*",
|
||||
"react-native-svg": "^6.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-native-svg-charts/node_modules/@types/d3-path": {
|
||||
"version": "1.0.9",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react-native-svg-charts/node_modules/@types/d3-shape": {
|
||||
"version": "1.3.8",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "^1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-native-svg-charts/node_modules/color": {
|
||||
"version": "2.0.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^1.9.1",
|
||||
"color-string": "^1.5.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-native-svg-charts/node_modules/react-native-svg": {
|
||||
"version": "6.5.3",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color": "^2.0.1",
|
||||
"lodash": "^4.16.6",
|
||||
"pegjs": "^0.10.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.5.7",
|
||||
"react": "*",
|
||||
"react-native": ">=0.50.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-native-vector-icons": {
|
||||
"version": "6.4.13",
|
||||
"license": "MIT",
|
||||
|
|
@ -5225,71 +5160,6 @@
|
|||
"version": "3.1.2",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "1.2.4",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-collection": {
|
||||
"version": "1.0.7",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "1.4.1",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "1.4.5",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "1.4.0",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-color": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate-path": {
|
||||
"version": "2.0.0",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-interpolate": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "1.0.9",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "1.0.7",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-array": "^1.2.0",
|
||||
"d3-collection": "1",
|
||||
"d3-color": "1",
|
||||
"d3-format": "1",
|
||||
"d3-interpolate": "1",
|
||||
"d3-time": "1",
|
||||
"d3-time-format": "2"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "1.3.7",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-path": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "1.1.0",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "2.3.0",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-time": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.30.0",
|
||||
"license": "MIT",
|
||||
|
|
@ -9460,16 +9330,6 @@
|
|||
"node": ">=0.11.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pegjs": {
|
||||
"version": "0.10.0",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"pegjs": "bin/pegjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.0.0",
|
||||
"license": "ISC"
|
||||
|
|
@ -9969,22 +9829,6 @@
|
|||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-svg-charts": {
|
||||
"version": "5.4.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"d3-array": "^1.2.0",
|
||||
"d3-interpolate-path": "2.0.0",
|
||||
"d3-scale": "^1.0.6",
|
||||
"d3-shape": "^1.0.6",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.0.0-alpha.12",
|
||||
"react-native": ">=0.46.0",
|
||||
"react-native-svg": "^6.2.1||^7.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-vector-icons": {
|
||||
"version": "9.2.0",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
"@testing-library/react-native": "^12.1.2",
|
||||
"@types/d3-shape": "^3.1.1",
|
||||
"@types/react-native-sqlite-storage": "^6.0.0",
|
||||
"@types/react-native-svg-charts": "^5.0.12",
|
||||
"@types/react-native-vector-icons": "^6.4.13",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"babel-preset-react-native": "^4.0.1",
|
||||
|
|
@ -47,7 +46,6 @@
|
|||
"react-native-share": "^9.2.3",
|
||||
"react-native-sqlite-storage": "^6.0.1",
|
||||
"react-native-svg": "^13.10.10",
|
||||
"react-native-svg-charts": "^5.4.0",
|
||||
"react-native-vector-icons": "^9.2.0",
|
||||
"react-native-view-shot": "^3.7.0",
|
||||
"typeorm": "^0.3.17"
|
||||
|
|
|
|||
Loading…
Reference in New Issue