git ssb

1+

Daan Patchwork / manyverse



Commit 8d76d0cd2ee434d8c1eff5f8d5a4eddb5385dd8e

Browse Files

ux: improve the looks of the bottom tab buttons

Andre Staltz committed on 5/31/2020, 12:51:37 PM
Parent: 008d3f1c6557714916f5a1eb6ea05ab51add37de

Files changed

android/app/src/main/assets/translations/en.jsonchanged
src/frontend/screens/central/styles.tschanged
src/frontend/screens/central/view.tschanged
typings/i18n-js.d.tschanged
android/app/src/main/assets/translations/en.jsonView
@@ -170,8 +170,13 @@
170170 "public": "Public board",
171171 "private": "Private messages",
172172 "connections": "Connections"
173173 },
174+ "tab_footers": {
175+ "public": "Public",
176+ "private": "Private",
177+ "connections": "Connections"
178+ },
174179 "loading": "Loading...",
175180 "building_indexes": "Building database indexes...\nThis may take up to several minutes",
176181 "tabs": {
177182 "public": {
src/frontend/screens/central/styles.tsView
@@ -1,14 +1,15 @@
1-/* Copyright (C) 2018-2019 The Manyverse Authors.
1+/* Copyright (C) 2018-2020 The Manyverse Authors.
22 *
33 * This Source Code Form is subject to the terms of the Mozilla Public
44 * License, v. 2.0. If a copy of the MPL was not distributed with this
55 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
66
77 import {StyleSheet, ViewStyle} from 'react-native';
8+import {getStatusBarHeight} from 'react-native-status-bar-height';
89 import {Palette} from '../../global-styles/palette';
910 import {Dimensions} from '../../global-styles/dimens';
10-import {getStatusBarHeight} from 'react-native-status-bar-height';
11+import {Typography} from '../../global-styles/typography';
1112
1213 const page: ViewStyle = {
1314 position: 'absolute',
1415 top: 0,
@@ -50,8 +51,21 @@
5051 justifyContent: 'center',
5152 alignItems: 'center',
5253 },
5354
55+ tabButtonText: {
56+ fontFamily: Typography.fontFamilyReadableText,
57+ fontSize: Typography.fontSizeSmall,
58+ color: Palette.textWeak,
59+ },
60+
61+ tabButtonTextSelected: {
62+ fontFamily: Typography.fontFamilyReadableText,
63+ fontSize: Typography.fontSizeSmall,
64+ color: Palette.textBrand,
65+ fontWeight: 'bold',
66+ },
67+
5468 menuBackdrop: {
5569 backgroundColor: Palette.transparencyDarkStrong,
5670 opacity: 1,
5771 },
src/frontend/screens/central/view.tsView
@@ -7,8 +7,9 @@
77 import xs, {Stream} from 'xstream';
88 import {ReactElement, Fragment, PureComponent, Component} from 'react';
99 import {
1010 View,
11+ Text,
1112 Platform,
1213 TouchableNativeFeedback,
1314 TouchableOpacity,
1415 } from 'react-native';
@@ -108,8 +109,19 @@
108109 ? styles.updatesCoverSome
109110 : styles.updatesCoverAll,
110111 }),
111112 ]),
113+
114+ h(
115+ Text,
116+ {
117+ style: isSelected
118+ ? styles.tabButtonTextSelected
119+ : styles.tabButtonText,
120+ numberOfLines: 1,
121+ },
122+ t('central.tab_footers.public'),
123+ ),
112124 ]),
113125 ],
114126 );
115127 }
@@ -130,19 +142,10 @@
130142 if (prevNum >= 1 && nextNum < 1) return true;
131143 return false;
132144 }
133145
134- private getIconName() {
146+ public render() {
135147 const {isSelected, numOfUpdates} = this.props;
136- if (numOfUpdates >= 1) {
137- return isSelected ? 'message-text' : 'message-text-outline';
138- } else {
139- return isSelected ? 'message' : 'message-outline';
140- }
141- }
142-
143- public render() {
144- const {isSelected} = this.props;
145148 return h(
146149 Touchable,
147150 {
148151 ...touchableProps,
@@ -155,12 +158,24 @@
155158 [
156159 h(View, {style: styles.tabButton, pointerEvents: 'box-only'}, [
157160 h(View, [
158161 h(Icon, {
159- name: this.getIconName(),
162+ name:
163+ numOfUpdates >= 1 ? 'message-text-outline' : 'message-outline',
160164 ...(isSelected ? iconProps.tabSelected : iconProps.tab),
161165 }),
162166 ]),
167+
168+ h(
169+ Text,
170+ {
171+ style: isSelected
172+ ? styles.tabButtonTextSelected
173+ : styles.tabButtonText,
174+ numberOfLines: 1,
175+ },
176+ t('central.tab_footers.private'),
177+ ),
163178 ]),
164179 ],
165180 );
166181 }
@@ -205,20 +220,21 @@
205220 return false;
206221 }
207222
208223 private getIconName() {
209- const {isSelected, details} = this.props;
224+ const {details} = this.props;
210225 if (ConnectionsTabIcon.countConnected(details) > 0) {
211- return isSelected ? 'check-network' : 'check-network-outline';
226+ return 'check-network-outline';
212227 }
213228 const d = details;
214229 if (d?.bluetoothEnabled || d?.internetEnabled || d?.lanEnabled) {
215- return isSelected ? 'network' : 'network-outline';
230+ return 'network-outline';
216231 }
217- return isSelected ? 'network-off' : 'network-off-outline';
232+ return 'network-off-outline';
218233 }
219234
220235 public render() {
236+ const {isSelected} = this.props;
221237 return h(
222238 Touchable,
223239 {
224240 ...touchableProps,
@@ -231,10 +247,21 @@
231247 [
232248 h(View, {style: styles.tabButton, pointerEvents: 'box-only'}, [
233249 h(Icon, {
234250 name: this.getIconName(),
235- ...(this.props.isSelected ? iconProps.tabSelected : iconProps.tab),
251+ ...(isSelected ? iconProps.tabSelected : iconProps.tab),
236252 }),
253+
254+ h(
255+ Text,
256+ {
257+ style: isSelected
258+ ? styles.tabButtonTextSelected
259+ : styles.tabButtonText,
260+ numberOfLines: 1,
261+ },
262+ t('central.tab_footers.connections'),
263+ ),
237264 ]),
238265 ],
239266 );
240267 }
typings/i18n-js.d.tsView
@@ -79,8 +79,11 @@
7979 | 'central.app_name'
8080 | 'central.tab_headers.public'
8181 | 'central.tab_headers.private'
8282 | 'central.tab_headers.connections'
83+ | 'central.tab_footers.public'
84+ | 'central.tab_footers.private'
85+ | 'central.tab_footers.connections'
8386 | 'central.loading'
8487 | 'central.building_indexes'
8588 | 'central.tabs.public.accessibility_label'
8689 | 'central.tabs.private.accessibility_label'

Built with git-ssb-web