martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

moving activity indicator to button

Browse Source
This commit is contained in:
balzack 2023-09-12 22:42:46 -07:00
parent ef75799ed5
commit 04e4da7aa3
2 changed files with 57 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/mobile/src/session/settings/Settings.jsx
View File

@ -339,7 +339,6 @@ export function Settings() {
</TouchableOpacity>
</View>
<Text style={styles.modalHeader}>{ state.strings.sealedTopics }</Text>
<ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
{ !state.sealEnabled && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealUnset }</Text>
@ -355,7 +354,12 @@ export function Settings() {
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.generateKey)}>
<Text style={styles.enabledButtonText}>{ state.strings.generate }</Text>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.generate }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
@ -382,7 +386,12 @@ export function Settings() {
<View style={styles.buttons}>
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.unlockKey)}>
<Text style={styles.enabledButtonText}>{ state.strings.unlock }</Text>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.unlock }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
@ -400,7 +409,12 @@ export function Settings() {
<>
<Text style={styles.modalDescription}>{ state.strings.sealUnlocked }</Text>
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.disableKey)}>
<Text style={styles.enabledButtonText}>{ state.strings.disable }</Text>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.disable }</Text>
)}
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={actions.showSealUpdate}>
<Text style={styles.modeText}>{ state.strings.changeKey }</Text>
@ -422,7 +436,12 @@ export function Settings() {
/>
{ state.sealDelete === state.strings.deleteKey && (
<TouchableOpacity style={styles.dangerButton} activeOpacity={1} onPress={() => sealAction(actions.removeKey)}>
<Text style={styles.dangerButtonText}>{ state.strings.delete }</Text>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.dangerButtonText}>{ state.strings.delete }</Text>
)}
</TouchableOpacity>
)}
{ state.sealDelete !== state.strings.deleteKey && (
@ -455,7 +474,12 @@ export function Settings() {
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.updateKey)}>
<Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (

49
app/mobile/src/session/settings/Settings.styled.js
View File

@ -114,7 +114,6 @@ export const styles = StyleSheet.create({
notifications: {
transform: [{ scaleX: .6 }, { scaleY: .6 }],
},
modalOverlay: {
display: 'flex',
width: '100%',
@ -124,7 +123,7 @@ export const styles = StyleSheet.create({
},
modalContainer: {
backgroundColor: Colors.modalBase,
width: '80%',
width: '90%',
maxWidth: 400,
display: 'flex',
alignItems: 'center',
@ -133,6 +132,7 @@ export const styles = StyleSheet.create({
modalHeader: {
fontSize: 18,
paddingTop: 16,
paddingBottom: 16,
color: Colors.labelText,
fontFamily: 'Roboto',
},
@ -194,12 +194,13 @@ export const styles = StyleSheet.create({
enabledButton: {
marginTop: 8,
marginBottom: 16,
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 32,
paddingRight: 32,
borderRadius: 4,
backgroundColor: Colors.primaryButton,
width: '33%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 32,
},
enabledButtonText: {
color: Colors.primaryButtonText,
@ -208,12 +209,13 @@ export const styles = StyleSheet.create({
disabledButton: {
marginTop: 8,
marginBottom: 16,
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 32,
paddingRight: 32,
borderRadius: 4,
backgroundColor: Colors.disabledButton,
width: '33%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 32,
},
disabledButtonText: {
color: Colors.disabledButtonText,
@ -222,12 +224,13 @@ export const styles = StyleSheet.create({
dangerButton: {
marginTop: 8,
marginBottom: 16,
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 32,
paddingRight: 32,
borderRadius: 4,
backgroundColor: Colors.dangerButton,
width: '33%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 32,
},
dangerButtonText: {
color: Colors.dangerButtonText,
@ -253,12 +256,13 @@ export const styles = StyleSheet.create({
marginTop: 8,
marginBottom: 16,
marginRight: 16,
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 32,
paddingRight: 32,
borderRadius: 4,
backgroundColor: Colors.cancelButton,
width: '33%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 32,
},
cancelButtonText: {
color: Colors.cancelButtonText,
@ -267,12 +271,13 @@ export const styles = StyleSheet.create({
promptButton: {
marginTop: 8,
marginBottom: 16,
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 32,
paddingRight: 32,
borderRadius: 4,
backgroundColor: Colors.primaryButton,
width: '33%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 32,
},
hintButtons: {
display: 'flex',