lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use icon font for home icons

Browse Source
This commit is contained in:
Julia Friesel
2018-11-30 11:24:28 +01:00
parent 563e9303ab
commit a9923fae9f
14 changed files with 69 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
android/app/src/main/assets/fonts/drip-home-icon-font.ttf
BIN
View File
Binary file not shown.
android/app/src/main/assets/fonts/drip-home-icons.ttf
BIN
View File
Binary file not shown.
assets/drip-home-icons.js
+4
View File
@@ -0,0 +1,4 @@
import { createIconSetFromFontello } from 'react-native-vector-icons'
import fontelloConfig from './fonts/config-drip-home-icons.json'
export default createIconSetFromFontello(fontelloConfig)
assets/drip-icons.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { createIconSetFromFontello } from 'react-native-vector-icons'
import fontelloConfig from './fonts/config.json'
import fontelloConfig from './fonts/config-drip-icon-font.json'
export default createIconSetFromFontello(fontelloConfig)
assets/fonts/config-drip-home-icons.json
+38
View File
@@ -0,0 +1,38 @@
{
"name": "drip-home-icons",
"css_prefix_text": "icon-",
"css_use_suffix": false,
"hinting": true,
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
{
"uid": "3b01a0a3395a3845dd3194e1a7ad96ff",
"css": "drop",
"code": 59393,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M438.7 21.6L432.4 26.2C419.8 35.5 406.3 43.6 394.5 54.4 366.3 80.3 338.7 106.7 311.8 133.8 245.3 200.8 184.2 272.4 129.6 349.5 98.6 393.2 69.3 438.1 47.8 487.9 33.4 521.1 22.7 555.5 20.7 592.3 18.1 640.4 25.6 687 40.6 732.5 66.6 811.5 113.1 875.4 184.7 919.4H184.7C257.5 964 337.2 982.1 422.1 977.4 472.7 974.6 521.1 962.2 566.4 939.3H566.4C666.3 888.9 731.2 808.4 763.4 701.8V701.7C776.9 657 780.7 611.3 772.8 565V565C765.3 521.1 748.6 480.9 726.4 443H726.4C697.3 393.4 660.4 350 623.3 307.2 587.2 265.5 551 224.1 516.3 181.5 489.9 149.1 468 113.9 454.2 74.5V74.5C449.3 60.4 445.7 45.6 440.9 29.1ZM435.6 29.9C440.4 46.3 444.1 61.2 449.1 75.6 463.2 115.7 485.4 151.5 512.1 184.2 546.9 226.9 583.1 268.3 619.2 310 656.3 352.8 692.9 395.9 721.7 445 743.7 482.5 760.1 522 767.4 565.2 775.2 610.7 771.5 655.4 758.2 699.5 726.4 804.9 662.7 884 564 933.8 519.3 956.3 471.7 968.5 421.8 971.3 337.9 975.9 259.4 958.1 187.5 914 117 870.8 71.4 808.1 45.7 730.1 31 685.2 23.6 639.2 26.2 591.9 28 555.9 38.5 522.2 52.7 489.3 74 440.1 103.1 395.5 134 351.9 188.5 275.1 249.3 203.7 315.6 137 342.5 109.9 370.1 83.5 398.2 57.7 409.4 47.3 422.7 39.3 435.6 29.9Z",
"width": 798
},
"search": [
"drop2px"
]
},
{
"uid": "ce239ac4aab54b2846603081216e0e84",
"css": "circle",
"code": 59392,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M271.2 13.4C284.9 14 294.1 18 300.4 24.3 306.6 30.6 310.5 40 310.8 53.8 311.3 70.7 311 87.8 310.9 105.1H310.6V115.3C310.6 136.2 310.7 157 310.5 177.9V177.9 177.9C310.5 181.3 309.6 182.3 309.1 182.7 308.6 183.1 307.8 183.7 304.9 183H304.8L304.8 182.9C303.1 182.5 302.7 182.1 302.6 182 302.6 181.9 302.4 182 302.4 180.7V180.6 180.6C302.6 148.3 303.1 116.1 303.5 83.7V83.7 83.7C303.5 75.9 304 67.5 303.7 58.7L303.7 58.7V58.7C303.3 48.2 300.6 38.7 294 31.8 287.4 24.8 277.9 21.7 267.3 21H267.3C254 20.1 241.1 20.8 228.8 20.9 201.1 21.2 173.5 21.6 145.9 21.7H145.9C142.8 21.7 141.8 21 141.4 20.7 141.1 20.4 140.6 20 140.6 17.6 140.5 15.2 141.1 14.6 141.4 14.3 141.6 14 142.1 13.5 144.5 13.5H144.5 144.6C174.1 13.4 203.5 13.4 233.1 13.4 246.2 13.4 258.9 12.9 271.2 13.4ZM742.5 56.6C743.2 56.5 745 56.4 747.9 58.1L747.9 58.1H747.9C834.2 107.1 900.3 175.2 946.7 262.8 976.6 319.3 995 379.2 1001.3 442.6 1012.7 556.6 987.8 661.9 925.8 758.2 851.7 873.1 748.8 947.6 614.9 974.9H614.9C444.5 1009.7 294.6 969.3 167.2 849.5 87.6 774.6 39.5 682.3 21.1 574.3V574.3C16.6 547.8 15.1 520.6 13.2 502.8 16.2 355.8 64.4 240.3 159 142.8 183.4 117.7 210.5 96 239.6 76.1 243 73.8 244.9 73.8 245.7 73.9 246.5 74 246.8 74.3 247.3 75 248.6 77 248.6 77.8 248.3 78.8 248 79.8 247 81.6 243.9 83.7 148.8 147.5 82.9 234.5 46.5 342.9V342.9C27 401.4 19 461.9 23.2 523.4V523.4C31.2 640.8 76.8 742.9 157.6 828 231.5 905.8 322.1 955.6 428.4 971.8 584.4 995.4 724.4 954.8 841.1 847.3H841.1C922.7 772.1 972.8 677.6 989.5 568V568C1013.4 410.6 967.3 272.1 859.7 155.8 826 119.4 786.8 89.8 744 65.6L744 65.6 744 65.5C740.6 63.7 739.6 62.1 739.5 61.6 739.3 61.1 739 60.9 740.2 58.7L740.2 58.7 740.2 58.7C741.2 56.9 741.7 56.8 742.5 56.6Z",
"width": 1017
},
"search": [
"circle2px"
]
}
]
}
assets/fonts/config.json → assets/fonts/config-drip-icon-font.json
View File
assets/fonts/drip-home-icons.ttf
BIN
View File
Binary file not shown.
assets/home-circle.js
-15
View File
@@ -1,15 +0,0 @@
import React from 'react'
import { Group as G, Shape, Transform } from 'react-native/Libraries/ART/ReactNativeART'
const circle = "m 43,12 c -27.59196,17.168 -43.07131,51.34003 -37.74253,83.40217 4.65932,33.15379 31.20731,61.73087 63.90256,68.88417 30.61528,7.42782 64.74574,-4.34916 84.21519,-29.12633 21.61526,-26.12878 24.59233,-65.67005 7.10091,-94.73675 -7.6702,-13.15691 -18.99314,-24.14869 -32.37613,-31.41826"
const pointyPart = "m 43,32 c -0.0509,-6.38363 0.10148,-12.77739 -0.0757,-19.15472 -1.02117,-5.71918 -7.64221,-3.72111 -11.7681,-4.08628 -3.79908,0 -7.59816,0 -11.39724,0"
const color = "#1E0B7A"
export default function CycleDayIcon(props) {
return (
<G transform={new Transform().scale(props.scale)}>
<Shape stroke={color} strokeWidth={props.strokeWidth} d={circle}/>
<Shape stroke={color} strokeWidth={props.strokeWidth} d={pointyPart}/>
</G>
)
}
assets/home-drop.js
-14
View File
@@ -1,14 +0,0 @@
import React from 'react'
import { Surface, Group as G, Shape, Transform } from 'react-native/Libraries/ART/ReactNativeART'
export default function HomeDropIcon(props) {
return (
<Surface width={83} height={103.56}>
<G transform={new Transform().scale(props.scale).translate(-345, -330)}>
<Shape stroke="#89113E" strokeWidth="2" d="M492.723,455.44
c-5.531,39.136-41.74,66.377-80.876,60.847C372.712,510.757,351,483.64,351,444.115c0-37.555,79.739-114.673,80.391-105.969
C434.248,376.247,499.843,405.058,492.723,455.44z"/>
</G>
</Surface>
)
}
components/chart/chart.js
+6 -11
View File
@@ -2,7 +2,6 @@ import React, { Component } from 'react'
import { View, FlatList, ActivityIndicator } from 'react-native'
import range from 'date-range'
import { LocalDate } from 'js-joda'
import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
import nfpLines from './nfp-lines'
import DayColumn from './day-column'
@@ -13,7 +12,7 @@ import config from '../../config'
import AppText from '../app-text'
import { shared as labels } from '../../i18n/en/labels'
import DripIcon from '../../assets/drip-icons'
import CycleDayIcon from '../../assets/home-circle'
import DripHomeIcon from '../../assets/drip-home-icons'
import nothingChanged from '../../db/db-unchanged'
const symptomIcons = {
@@ -163,15 +162,11 @@ export default class CycleChart extends Component {
{makeYAxisLabels(this.columnHeight)}
</View>
<View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
<Surface
width={styles.yAxis.width * 0.8}
height={styles.yAxis.width * 0.8}
>
<CycleDayIcon
strokeWidth={10}
scale={0.12}
/>
</Surface>
<DripHomeIcon
name="circle"
size={styles.yAxis.width - 7}
color={styles.cycleDayColor}
/>
<AppText style={[
styles.column.label.date,
styles.yAxisLabels.dateLabel
components/home.js
+3 -13
View File
@@ -2,17 +2,15 @@ import React, { Component } from 'react'
import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native'
import { LocalDate, ChronoUnit } from 'js-joda'
import Icon from 'react-native-vector-icons/Entypo'
import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
import { secondaryColor, cycleDayColor, periodColor } from '../styles'
import { home as labels, bleedingPrediction as predictLabels, shared } from '../i18n/en/labels'
import CycleDayIcon from '../assets/home-circle'
import Drop from '../assets/home-drop'
import cycleModule from '../lib/cycle'
import { getCycleDaysSortedByDate } from '../db'
import { getFertilityStatusForDay } from '../lib/sympto-adapter'
import styles from '../styles'
import AppText, { AppTextLight } from './app-text'
import nothingChanged from '../db/db-unchanged'
import DripHomeIcon from '../assets/drip-home-icons'
export default class Home extends Component {
constructor(props) {
@@ -73,15 +71,7 @@ export default class Home extends Component {
style={styles.homeIconElement}
>
<View position='absolute'>
<Surface
width={80}
height={80}
>
<CycleDayIcon
strokeWidth={2}
scale={0.46}
/>
</Surface>
<DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
</View>
<View style={[styles.homeIconTextWrapper, styles.wrapperCycle]}>
<AppTextLight style={styles.iconText}>
@@ -107,7 +97,7 @@ export default class Home extends Component {
style={styles.homeIconElement}
>
<View position='absolute'>
<Drop scale={0.55}/>
<DripHomeIcon name="drop" size={105} color={periodColor} />
</View>
<View style={[styles.homeIconTextWrapper, styles.wrapperDrop]}>
<AppTextLight style={styles.iconText}>
ios/drip.xcodeproj/project.pbxproj
+14 -6
View File
@@ -69,6 +69,8 @@
F165D5E4692041AD900573C8 /* Prompt-Thin.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CB2405AD4098483C85C1A261 /* Prompt-Thin.ttf */; };
BF3587E45FCA48DEA13183A1 /* fontello.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BB0CB875BB2749F4A46AA5F1 /* fontello.ttf */; };
BBD61F152BE74DD7AED99DFB /* drip-icon-font.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 05154E9AE0EA4BE19F3D9E0B /* drip-icon-font.ttf */; };
DAA390B1EE7442D88A768596 /* drip-home-icon-font.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 94973D7B7BBA4B0FBE713A0E /* drip-home-icon-font.ttf */; };
BA7CE1E95B7843D7B0CF85FF /* drip-home-icons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@@ -412,6 +414,8 @@
CB2405AD4098483C85C1A261 /* Prompt-Thin.ttf */ = {isa = PBXFileReference; name = "Prompt-Thin.ttf"; path = "../assets/fonts/Prompt-Thin.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
BB0CB875BB2749F4A46AA5F1 /* fontello.ttf */ = {isa = PBXFileReference; name = "fontello.ttf"; path = "../assets/fonts/fontello.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
05154E9AE0EA4BE19F3D9E0B /* drip-icon-font.ttf */ = {isa = PBXFileReference; name = "drip-icon-font.ttf"; path = "../assets/fonts/drip-icon-font.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
94973D7B7BBA4B0FBE713A0E /* drip-home-icon-font.ttf */ = {isa = PBXFileReference; name = "drip-home-icon-font.ttf"; path = "../assets/fonts/drip-home-icon-font.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */ = {isa = PBXFileReference; name = "drip-home-icons.ttf"; path = "../assets/fonts/drip-home-icons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@@ -720,6 +724,8 @@
CB2405AD4098483C85C1A261 /* Prompt-Thin.ttf */,
BB0CB875BB2749F4A46AA5F1 /* fontello.ttf */,
05154E9AE0EA4BE19F3D9E0B /* drip-icon-font.ttf */,
94973D7B7BBA4B0FBE713A0E /* drip-home-icon-font.ttf */,
887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */,
);
name = Resources;
sourceTree = "<group>";
@@ -755,9 +761,9 @@
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
2B572382D4504B8FB4B9D251 /* Embed Frameworks */,
F64994825D454BDD8D73467F /* Build NodeJS Mobile Native Modules */,
E01FA74D87244C06A5D9B389 /* Sign NodeJS Mobile Native Modules */,
28C4AB8094CC4A7E8DE0E83B /* Remove NodeJS Mobile Framework Simulator Strips */,
0909337B049F4ECB933412B2 /* Build NodeJS Mobile Native Modules */,
B6AAD324BDBA4E92AB5627B3 /* Sign NodeJS Mobile Native Modules */,
3DE3CFA1BEC54E9D9B5B9D47 /* Remove NodeJS Mobile Framework Simulator Strips */,
);
buildRules = (
);
@@ -1196,6 +1202,8 @@
F165D5E4692041AD900573C8 /* Prompt-Thin.ttf in Resources */,
BF3587E45FCA48DEA13183A1 /* fontello.ttf in Resources */,
BBD61F152BE74DD7AED99DFB /* drip-icon-font.ttf in Resources */,
DAA390B1EE7442D88A768596 /* drip-home-icon-font.ttf in Resources */,
BA7CE1E95B7843D7B0CF85FF /* drip-home-icons.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -1245,7 +1253,7 @@
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
};
F64994825D454BDD8D73467F /* Build NodeJS Mobile Native Modules */ = {
0909337B049F4ECB933412B2 /* Build NodeJS Mobile Native Modules */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@@ -1313,7 +1321,7 @@ fi
popd
";
};
E01FA74D87244C06A5D9B389 /* Sign NodeJS Mobile Native Modules */ = {
B6AAD324BDBA4E92AB5627B3 /* Sign NodeJS Mobile Native Modules */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@@ -1373,7 +1381,7 @@ find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -del
find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
";
};
28C4AB8094CC4A7E8DE0E83B /* Remove NodeJS Mobile Framework Simulator Strips */ = {
3DE3CFA1BEC54E9D9B5B9D47 /* Remove NodeJS Mobile Framework Simulator Strips */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
ios/drip/Info.plist
+2
View File
@@ -72,6 +72,8 @@
<string>Prompt-Thin.ttf</string>
<string>fontello.ttf</string>
<string>drip-icon-font.ttf</string>
<string>drip-home-icon-font.ttf</string>
<string>drip-home-icons.ttf</string>
</array>
</dict>
</plist>
styles/index.js
+1 -1
View File
@@ -110,7 +110,7 @@ export default StyleSheet.create({
},
homeCircle: {
borderRadius: 100,
borderWidth: 1,
borderWidth: 0.7,
width: 80,
height: 80,
alignItems: 'center',