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 { 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 { NativeModules, View } from "react-native";
|
||||||
import { FAB, Text, useTheme } from "react-native-paper";
|
import { FAB, Text, useTheme } from "react-native-paper";
|
||||||
import { ProgressCircle } from "react-native-svg-charts";
|
|
||||||
import AppFab from "./AppFab";
|
import AppFab from "./AppFab";
|
||||||
import { darkenRgba } from "./colors";
|
|
||||||
import { MARGIN, PADDING } from "./constants";
|
|
||||||
import { settingsRepo } from "./db";
|
|
||||||
import DrawerHeader from "./DrawerHeader";
|
import DrawerHeader from "./DrawerHeader";
|
||||||
|
import { settingsRepo } from "./db";
|
||||||
import Settings from "./settings";
|
import Settings from "./settings";
|
||||||
import useTimer from "./use-timer";
|
import useTimer from "./use-timer";
|
||||||
|
|
||||||
|
@ -38,37 +35,20 @@ export default function TimerPage() {
|
||||||
update();
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<DrawerHeader name="Timer" />
|
<DrawerHeader name="Timer" />
|
||||||
<View style={{ flexGrow: 1, padding: PADDING }}>
|
<View
|
||||||
<View
|
style={{
|
||||||
style={{
|
flex: 1,
|
||||||
flex: 1,
|
flexGrow: 1,
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text style={{ fontSize: 70, position: "absolute" }}>
|
<Text style={{ fontSize: 70, position: "absolute" }}>
|
||||||
{minutes}:{seconds}
|
{minutes}:{seconds}
|
||||||
</Text>
|
</Text>
|
||||||
<ProgressCircle
|
|
||||||
style={{ height: 300, width: 300, marginBottom: MARGIN }}
|
|
||||||
progress={progress}
|
|
||||||
strokeWidth={10}
|
|
||||||
progressColor={colors.primary}
|
|
||||||
backgroundColor={backgroundColor}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<FAB
|
<FAB
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "massive",
|
"name": "massive",
|
||||||
"version": "2.7",
|
"version": "2.8",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "massive",
|
"name": "massive",
|
||||||
"version": "2.7",
|
"version": "2.8",
|
||||||
"license": "GPL-3.0-only",
|
"license": "GPL-3.0-only",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||||
|
@ -21,7 +21,6 @@
|
||||||
"@testing-library/react-native": "^12.1.2",
|
"@testing-library/react-native": "^12.1.2",
|
||||||
"@types/d3-shape": "^3.1.1",
|
"@types/d3-shape": "^3.1.1",
|
||||||
"@types/react-native-sqlite-storage": "^6.0.0",
|
"@types/react-native-sqlite-storage": "^6.0.0",
|
||||||
"@types/react-native-svg-charts": "^5.0.12",
|
|
||||||
"@types/react-native-vector-icons": "^6.4.13",
|
"@types/react-native-vector-icons": "^6.4.13",
|
||||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||||
"babel-preset-react-native": "^4.0.1",
|
"babel-preset-react-native": "^4.0.1",
|
||||||
|
@ -44,7 +43,6 @@
|
||||||
"react-native-share": "^9.2.3",
|
"react-native-share": "^9.2.3",
|
||||||
"react-native-sqlite-storage": "^6.0.1",
|
"react-native-sqlite-storage": "^6.0.1",
|
||||||
"react-native-svg": "^13.10.10",
|
"react-native-svg": "^13.10.10",
|
||||||
"react-native-svg-charts": "^5.4.0",
|
|
||||||
"react-native-vector-icons": "^9.2.0",
|
"react-native-vector-icons": "^9.2.0",
|
||||||
"react-native-view-shot": "^3.7.0",
|
"react-native-view-shot": "^3.7.0",
|
||||||
"typeorm": "^0.3.17"
|
"typeorm": "^0.3.17"
|
||||||
|
@ -3145,13 +3143,6 @@
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@types/d3-scale": {
|
|
||||||
"version": "1.0.18",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@types/d3-time": "^1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@types/d3-shape": {
|
"node_modules/@types/d3-shape": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
@ -3159,10 +3150,6 @@
|
||||||
"@types/d3-path": "*"
|
"@types/d3-path": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/d3-time": {
|
|
||||||
"version": "1.1.1",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@types/graceful-fs": {
|
"node_modules/@types/graceful-fs": {
|
||||||
"version": "4.1.6",
|
"version": "4.1.6",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
|
@ -3229,62 +3216,10 @@
|
||||||
"csstype": "^3.0.2"
|
"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": {
|
"node_modules/@types/react-native-sqlite-storage": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@types/react-native-vector-icons": {
|
||||||
"version": "6.4.13",
|
"version": "6.4.13",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
@ -5225,71 +5160,6 @@
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/date-fns": {
|
||||||
"version": "2.30.0",
|
"version": "2.30.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
@ -9460,16 +9330,6 @@
|
||||||
"node": ">=0.11.0"
|
"node": ">=0.11.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/pegjs": {
|
|
||||||
"version": "0.10.0",
|
|
||||||
"license": "MIT",
|
|
||||||
"bin": {
|
|
||||||
"pegjs": "bin/pegjs"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/picocolors": {
|
"node_modules/picocolors": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
|
@ -9969,22 +9829,6 @@
|
||||||
"react-native": "*"
|
"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": {
|
"node_modules/react-native-vector-icons": {
|
||||||
"version": "9.2.0",
|
"version": "9.2.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -24,7 +24,6 @@
|
||||||
"@testing-library/react-native": "^12.1.2",
|
"@testing-library/react-native": "^12.1.2",
|
||||||
"@types/d3-shape": "^3.1.1",
|
"@types/d3-shape": "^3.1.1",
|
||||||
"@types/react-native-sqlite-storage": "^6.0.0",
|
"@types/react-native-sqlite-storage": "^6.0.0",
|
||||||
"@types/react-native-svg-charts": "^5.0.12",
|
|
||||||
"@types/react-native-vector-icons": "^6.4.13",
|
"@types/react-native-vector-icons": "^6.4.13",
|
||||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||||
"babel-preset-react-native": "^4.0.1",
|
"babel-preset-react-native": "^4.0.1",
|
||||||
|
@ -47,7 +46,6 @@
|
||||||
"react-native-share": "^9.2.3",
|
"react-native-share": "^9.2.3",
|
||||||
"react-native-sqlite-storage": "^6.0.1",
|
"react-native-sqlite-storage": "^6.0.1",
|
||||||
"react-native-svg": "^13.10.10",
|
"react-native-svg": "^13.10.10",
|
||||||
"react-native-svg-charts": "^5.4.0",
|
|
||||||
"react-native-vector-icons": "^9.2.0",
|
"react-native-vector-icons": "^9.2.0",
|
||||||
"react-native-view-shot": "^3.7.0",
|
"react-native-view-shot": "^3.7.0",
|
||||||
"typeorm": "^0.3.17"
|
"typeorm": "^0.3.17"
|
||||||
|
|
Loading…
Reference in New Issue