Commit Graph

138 Commits

Author SHA1 Message Date
Amanda Bullington
5ee4a433df Add location picker to ObsEdit (#593)
* Crosshairs, location accuracy warnings, text input for location picker

* Add LocationPicker tests

* UI improvements and code refactor into smaller components; get GMaps working

* Add shadows to icons/text boxes

* Use debouncing to avoid map jitter when typing in location

* Show place results & let user pick new location from web api

* Add tests for location picker with remote results

* Add gmaps api key to github actions

* Try adding manifest placeholders for env variable to work in github actions

* Add key to printf in github actions

* Try accessing GMAPS_API_KEY a different way

* Update android e2e env file step

This updates the "Create .env file" step to use printf to print the Google Maps key into a newly created .env file in the GitHub Action runner. Using the same key as in env.example.

* Fix newline

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-04-26 10:51:05 -07:00
Angie
343a3ded61 472 standardcamera large screen layout (#567)
* StandardCamera for large layouts

* StandardCamera and main  merge cleanup

* Refactoring flashButton render

* Adjust margins and button spacing for large layouts

* Change conditionals to include screen size breakpoints

* Remove redundant conditionals

* Added PhotoPreview large screens landscape, styling cleanup, ios portrait mode lock on phones

* Update unit test, update snapshots

* Rotate icons in landscape and fix photolist direction in phones

* Rotate icon function adjusted

* Several fixes for orientation chages; keep camera buttons in place

Orientation was not being set correctly, but given the different definitions
and different values for orientation used by differe libraries, that's pretty
understandable. Here's I've tried to standardize around some constants and
make sure it gets set correct and variables like `isLandscapeMode` actuall
have the value the claim to hold.

Also redid the "no photos" state for the camera to be closer to spec, though
the text rotation is quite a pain.

Camera buttons should now stay in place even when the flash button appears or
disappears depending on the camera in use.

* Use isLargeScreen consistently

* Don't track orientation change when it doesn't do anything

i.e. on a phone. This was causing a crash in Android when rotating into
portrait orientation.

* Orientation change updates for StandardCamera

* go back to supporting rotation on small devices for the icons
* fixed android crash when rotating from landscape to portrait on a small
  device
* handled FACE-UP and FACE-DOWN orientations by just not changing layout in
  those scenarios

* Fix discard changes sheet in camera

---------

Co-authored-by: Ken-ichi Ueda <kenichi.ueda@gmail.com>
Co-authored-by: Amanda Bullington <albullington@gmail.com>
2023-04-21 14:03:39 -07:00
Amanda Bullington
fa94ab5b42 ObsEdit - bottom sheets (#570)
* Add KebabMenu to shared components index

* Separate EvidenceList from PhotoCarousel component

* Remove unneeded props from PhotoCarousel

* Create notes bottom sheet

* Fix tests for delete obs sheet

* Add wild status sheet

* Show date from observations uploaded via website

* Move media viewer modal into evidence section

* Fix mock

* Move location fetching into its own hook

* Refactor ObsEdit header; move code into Header component

* Add discard changes sheet

* Styling updates and save changes button

* Add classes to buttons based on evidence/id missing

* Add imprecise location sheet

* Add jest.fn from provider to ObsEdit tests

* Remove fakeTimers from ObsEditWithoutProvider.test.js; minor cleanup

* Show discard obs sheet anytime a user tries to navigate back

* Fixes to bottom sheet backdrop, evidence, add discard changes sheet

* Switch to paper radio buttons instead of checkmarks

* Fix bottom sheet backdrop in android by wrapping with GestureHandlerRootView

* Update bottom sheet for add comment & notes

* Fix test

* Remove fake timer from ObsEdit test to get tests passing

* Force update github actions cache

---------

Co-authored-by: Ken-ichi Ueda <kenichi.ueda@gmail.com>
2023-04-20 17:02:19 -07:00
Ken-ichi
5747d4d1d9 Several minor UI fixes (#572)
* use `shrink` tailwind class instead of hard-coded max widths to control
  overflow in a few situations
* fixed some spacing issues with the Toolbar during upload
* center text in buttons by default
* export KebabMenu from SharedComponents (how was it working without this?)
* added some extra colors for debugging purposes
2023-04-17 15:50:39 -07:00
Angie
8ef2fbb89c 440 activityitem component (#564)
* ActivityItem component main styling, ActivityHeader added Body4

* ActivityItem component, onAgree icon

* Remove console logs

* onAgree prop

* Changes requested, text wrap, styling to match figma

* Add ActivityItem to UILibrary

* onAgree button shows conditionally

* onAgree button shows conditionally

---------

Co-authored-by: Amanda Bullington <albullington@gmail.com>
2023-04-06 13:09:32 -07:00
Angie
ae8e85098f 474 adjust photopreview sizes in standardcamera for different breakpoints (#559)
* Adjust PhotoPreview sizes for StandardCamera for different breakpoints

* PhotoCarousel tests

* Merge main into branch

* PhotoPreview styling after merge

* Update PhotoCarousel snapshots

* Moved getBreakpoint into Sharedhelper, changes requested.

* PhotoPreview for large layouts

* Remove testing color

* Update snapshots

---------

Co-authored-by: Amanda Bullington <albullington@gmail.com>
2023-04-06 13:09:17 -07:00
Chris
98a6663fe1 561 fix hidden bottom sheet (#563)
* Show bottom sheet over tab bar

* use present method

* Ensure bottom sheet works elsewhere

* Ensure bottom sheet works elsewhere

* Add provider to test

* lint

* Fix tests

* Merge fixes

---------

Co-authored-by: Amanda Bullington <35536439+albullington@users.noreply.github.com>
Co-authored-by: Amanda Bullington <albullington@gmail.com>
2023-04-04 12:30:07 -07:00
Amanda Bullington
bf2aa516c3 UI updates for Obs Edit (#565)
* Styling updates to ObsEdit screen

* Fix padding/margins and font style in TextInput

* Styling updates for identification section

* UI changes; add checkmarks for evidence

* Only show arrows for multiple observations
2023-04-04 11:37:05 -07:00
Ken-ichi Ueda
4a621c2fb5 Wrap useTranslation to catch java.lang.NoClassDefFoundError in Android
This error seems to happen on the first few attempts to use i18next.translate
on Android when there are numerical interpolations, e.g. plurals. This
extends a bandaid fix by @Chrischuck in
https://github.com/inaturalist/iNaturalistReactNative/pull/515 to handle all
uses of translation.
2023-03-31 18:38:21 -07:00
Amanda Bullington
c623c02272 Refactor DiscardChangesSheet and show only when leaving screen (#562)
* Only render bottom sheet when needed; refactor; fixes #556

* Fix test: add useFocusEffect to mocked nav
2023-03-31 10:26:23 -07:00
Amanda Bullington
20bd896d20 Fix orientation of thumbnails and checkmark; closes #475 (#557) 2023-03-30 13:52:34 -07:00
Angie
18dcccc705 Snapshot and unit tests, and default color for QualityGradeStatus (#512) 2023-03-30 11:18:53 -07:00
Chris
5385c5404b Implement forced state update to rerender svg content (#550)
* Implement forced state update to rerender svg content

* Fix tests
2023-03-20 15:26:56 -07:00
Johannes Klein
868c95ee13 494 activity count (#495)
* Refactor to boolean prop for white or gray

* Rename prop

* Add component for comments count

* Reorder strings

* Use CommentsCount

* Add identifications count component

* Add snapshot test for ActivityCount

* Add tests TODO for component

* Updated with new icons

* Add snapshot tests

* Update ActivityCount.test.js.snap

* Unit test for count text

* Remove testing comments count in ObsList test

* Update with changes from main

* Update IdentificationsCount.test.js.snap

* Remove components from ObsStatus
2023-03-17 11:55:29 -07:00
Amanda Bullington
32245cb526 Fix camera button alignment & add eslint indent rule 2023-03-15 17:26:44 -07:00
Chris
5b35e83b5c Utilize floating action bar and sticky toolbar in group photos ui (#527)
* lint

* Fix shadow on fab android

* lint
2023-03-14 12:42:53 -07:00
Amanda Bullington
bbc5b9d67d MyObservations refactor (#510)
* WIP: very rough start at pulling state up into a container for MyObservations

I made a parallel MyObservations component and container so ObservationViews
can still be used as a working reference, but the ultimate goal here is to
focus MyObservations on presentation, and pull state and other business logic
up into a container component. This should make MyObservations a bit more
testable and clean up a very large and confusing file.

I'm also trying to move away from a generalized representation of observations
on all screens, which is why I want to name it MyObservations and not
ObservationViews. MyObservations has a lot of unique functionality that we
won't need elsewhere, and we can modularize stuff when we need to use it in
multiple places.

* UI updates for header, toolbar, empty component

* Add pressable component and login sheet

* UI improvements; get infinite scroll working

* UI improvements & additions for empty screen & bottom sheet

* Show login sheet when a user presses sync but is not logged in

* Fix backdrop close for AddObsModal

* Move UI elements to MyObservations

* Fix unit tests for MyObservations

* Fix for login sheet

* Set header height to a different height on Android to account for safe area

* Fix failing tests & rerender of user icon in navbar

* Remove scientific name from DisplayTaxonName to match Figma UI

* Set height above toolbar dynamically for sticky toolbar

* Add prop to display or hide second name in DisplayTaxonName

* Use RN styling to style grid view for MyObs flatlist

* Fix failing project obs test

* Create separate ToolbarContainer to separate presentation from logic; fix upload count

* Merge main and show onboarding based on user's total obs count

* Fix display taxon name styling and remove header fade on iOS

* Add header text for 0 observations, logged out state

* Update infinite scroll to 50 obs at a time; make loading wheel show faster

* Add uploaded status to toolbar

* Apply bandaid fix to stop Android from crashing on start

* Start adding new icons to MyObs

* Add circular progress; show upload icons at correct times during upload

* Add disabled props for accessibility state

* Fix tests; update snapshots

* Code cleanup

* Code cleanup & add inaturalist icon

* Fix merge conflict and add icon

* Add inaturalist icon

* Fix navigation to obs list and toolbar status when upload completes

* Move showLoginSheet code to MyObsContainer

* Fix toolbar status text

* Sync toolbar with upload status progress

* Clear toolbar after nav

* Tests passing

* Update e2e test

* Target login button in e2e tests

* Fix failing e2e tests with new testID for login button

* Update button snapshot to include new testID

---------

Co-authored-by: Ken-ichi Ueda <kenichi.ueda@gmail.com>
2023-03-14 10:54:33 -07:00
Chris
da743537bc 501 502 date dispaly location styling (#524)
* Use new icons for date + location display

* lint

* Update new icon in obsdetails
2023-03-12 13:18:45 +01:00
Chris
54479f22b3 Use trash-outline icon (#526) 2023-03-12 12:53:05 +01:00
Ken-ichi
3320aec7f6 Add icons to repo & use script to generate font (#518)
This uses an npm package to convert SVGs into an icon font, allowing us to
not step on each others' toes when adding new icons in branches and
simplifying the icon addition process. It also allows us to track changes to
the icons, and embed them directly as SVGs if we need to.

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-03-10 12:21:09 -08:00
Chris
01099be1ce Create tab navigator (#507)
* Create tab navigator

* Add add obs button

* lint

* Wire up routes

* Fix login

* Add keys

* Fix delayed state bug

* Lint

* space parens

* Add details to tab nav

* Lint

* re-add back btn

* Rebase off main

* Fix format

* Fix back button

* Remove unused change

* Replace lowercase folder

* I don't know why that is needed

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-03-10 14:57:32 +01:00
Angie
fb23d925c4 400 uploadstatus component (#488)
* UploadStatus component

* Added UploadStatus to SharedComponents/index.js

* Change upload complete icon and color

* QualityGradeStatus accessibility labels

* Saved Observation Animation for UploadStatus

* Changed widths of component

* Unit test for UploadStatus

* Unit test and snapshot for UploadStatus

* Update snapshot tests

* Changes requested, accessibility labels for UploadStatus progress, accessibility tests

* Update snapshot tests

* Testing updated snapshot test

* Fix style

* And again

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-03-09 17:49:32 +01:00
Yahia Jabeur
3342dfa9e2 483 create PhotoCount component (#497)
* 483 create PhotoCount component

* 483 PhotoCount refinement

* 483 add PhotoCount component unit test

* 483 add shadow to PhotoCount component

* Use Body3 component instead of SVG text

* 483 fix unit tests

* Find component by text rather than by ID

* Remove unused test id

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-03-09 16:44:45 +01:00
Ken-ichi
6047a44241 Reverted icon names in Fontastic to match main (mostly) (#511)
Somehow many of the icon names in Fontastic were changed. This changes them
back to match what we use on the web and what we use in the main branch of
this repo, with a few exceptions to attempt to make names more consistent.

Also updated the README in the hopes of avoiding situations like this in the
future.

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-03-07 15:01:29 -08:00
Chris
3565bcfe9d 484 - Create sticky toolbar (#506)
* Create sticky toolbar

* Clean up code

* Rebase off main

* Fix shadows
2023-03-07 14:42:44 -08:00
Chris
206934f7ad 471 create camera cancel bottom sheet (#516)
* Add confirmation modal for discard photos in standard camera

* Add confirmation modal for discard photos in standard camera

* Fix tests

* Make requested changes

* Add close via overlay
2023-03-07 11:06:57 -08:00
Angie
c3ad393a0d 455 update colors and unify usage in the app (#505)
* Update tailwind colors to match current designs, update PaperProviderColors, unify usage

* Change snapshot test colors to match current design colors

* Added accessibility labels

* Edited accessibility labels

* Remove surface color, unify usage

* Update colors
2023-03-06 11:43:42 -08:00
Angie Ta
9eb031ea0b Fix getShadowStyle import 2023-03-02 16:05:03 -08:00
Chris
cb0a78f906 500 add obs btn styling (#504)
* Add gradient and shadow to add obs button

* lint

* Fix tests

* Rebase main

* Switch drop shadow color

* Move drop shadow style into styles folder

* Remove intermediate View

* Delete getShadowStyle.js

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-03-01 12:02:33 +01:00
Chris
0843b96eee Create Floating Action Bar component (#492)
* Create Floating Action Bar component
* Add fn to get shadow stylesheet

Closes #485
2023-02-24 17:31:57 -08:00
Johannes Klein
4ecac24e3c Default color for INatIcon component (#493)
* Move INatIcon file
* Create base component for icon
* Add icon to SharedComponents index
* Refactor imports
2023-02-21 16:34:06 -08:00
Chris
dafe00bcce 473 Create hold to delete photo interaction (#479)
* Create hold to delete photo interaction

* Delete w/o modal

* Clean code

* move delete back to review

* lint

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-02-20 14:22:10 +01:00
Johannes Klein
f0977a47e6 Cleanup some missing changes from PR486 2023-02-17 14:22:41 +01:00
Chris
4d4ad83e64 432 obs list item 2 (#486)
* 432 obs list item

* Fix gradient

* Merge conflict essential change

* Merge conflict change required

* Fix tests

* Lint

* Make requested changes

* Space params

* Fix projects ui

* lint

* Use it.each

* lint

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-02-17 14:10:33 +01:00
Chris
e0606a0c20 453 Integrate reusable components into obs details (#478)
* Integrate reusable components into obs details

* Add map to shared component index

* Add map to shared components index

* Fix merge

* Add missing color

* Fix tests and comments

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-02-16 18:10:23 +01:00
Amanda Bullington
b25aa6953c Replace SecondaryCTAButton with Appbar; styling updates; closes #452 (#459)
Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-02-15 12:54:21 +01:00
Johannes Klein
621c39dfda 415 snapshot testing for UI buttons (#458)
* Add font weight to Typography elements

* Add Heading5

* Typography snapshot tests

* Add letterSpacing to Heading 4 and 5

* Update Button padding

* Update Button styling

* Add rounded-lg

* Code style and comments

* Add button tests

* Added loading state color to buttons

* Add default color to text

* Use text class name instead

* Change text

* Add non default color text

* Snapshot for icon

* Default text color into button snap

* Update INatIcon.js

* Add Divider component

* Updates to Tabs UI

* Update color

* Add Divider test

* Show underline only when active

* Tabs snapshot

* Update Button UI

* Revert "Update Button UI"

This reverts commit 5361f57dac.

* Update ActivityCount.js

* Get color from theme in buttons

* Use translated string for hints in Tabs snapshots

* Refactor fct args

* Update Tabs

* Remove async

* Use .each in Button test

* Remove comment

* Structuring

* Remove duplicate application of style defaults

* Remove async from Typography
2023-02-15 11:31:16 +01:00
Amanda Bullington
7a98b6faf1 Timeless dates (#457)
* Add DateDisplay to ObsCard and make first pass at translation strings

* Add failing tests (due to lack of localization) for timeless dates

* WIP: trying to ensure i18next gets initialized before tests run

The remaining test failures might be legit. This probably breaks the actual
app, though.

* Got the rest of the tests working

* Updated tests to assume UTC
* Updated README to advise against using `npx jest` so test runs always have
  the env vars we specify in our `npm test` script
* Moved i18next initialization to an explicitly-named file
* Use i18next init function in app
* Fixed up remaining tests

* Added test for non-English localization of date format

* Cleanup

* Made DateDisplay explicitly handle strings not Dates

* Restore skipped localization tests for MyObservations

* Remove duplicative tests from DateDisplay unit test

* Added note to the README about initializing i18next

* Updated change to DateDisplay in main

---------

Co-authored-by: Ken-ichi Ueda <kenichi.ueda@gmail.com>
2023-02-14 22:14:38 +01:00
Ken-ichi
f76e02e4fb Support custom font in UserText (#454) 2023-02-09 15:10:59 -08:00
Chris
885f2e72d8 Location display component (#446)
Closes #438
2023-02-07 23:19:50 -05:00
Chris
41e7fb3ff7 Obs status component (#443)
Closes #443
2023-02-07 22:52:58 -05:00
Chris
dc53c47a2a Date display component (#445)
Closes #437
2023-02-07 20:54:59 -05:00
Ken-ichi
09ab2de8d6 Remove eslint rule requiring acc. hint with label and other minor changes (#447)
* Added identification-solid icon
* Used ActivityCount on obs detail to test out label without hint
* Minor fixes to the README
2023-02-07 18:58:28 -05:00
Johannes Klein
e57aac93f6 418 create an index.js file for importing shared components (#427)
* Update .eslintrc.js

* Create index.js

* Change Button usage in GridItem

* Replace imports

* Add strings

* Add hint prop to button

* Add a11y hint prop to EvidenceButton

* Add EvidenceButton to index

* Add a11y props to EvidenceButton

* Update UiLibrary.js

* Add a11y props to CloseButton

* Add CloseButton to index and UiLib

* Rename function

* Update string

* Add a11y props to AddObsButton

* Add Tabs to index

* Linebreak

* Add Typography to index

* Remove unused text

* Refactor UserIcon test coverage in it's own test

* Add UserIcon to index

* Add UserIcon to UiLib

* Add InlineUser to index

* Add Quality badge to index

* Update UiLibrary.js

* Remove unused component

* Change AddObsButton a11y label

* Change hint

* Use consistent uri in snapshots

* Add snapshot to InlineUser

* Fix wrong user key

* Update Tabs.test.js

* Snapshot TODO

* Update NavButton.js

* Update snapshot

* Add snapshot for active user icon

* Remove snapshot result

* Add ActivityCount to index

* Update UiLibrary.js
2023-02-04 15:18:42 +01:00
Amanda Bullington
5bd4fc7ea9 Activity Count component (#426)
* Create ActivityCount component and add to UI Library

* Add accessibility label

* Make ActivityCount component compatible with identifications

* Localize numbers; add large number to UI library

* Fix ObsCard tests with waitFor ActivityCount

* Make testID dynamic and optional in ActivityCount
2023-02-03 08:30:40 -08:00
Chris
158966b74e Fix nearby projects query for android (#406)
* Fix nearby projects query for android

* clean up code

* remove logs

* Fix delay and add loading return data

* Simplify hook

* Make minimal required changes

* Flatten if/elif

* Lint
2023-02-03 12:40:14 +01:00
Chris
44b28ff54e Incremental changes to navbar component (#407)
* Incremental changes to navbar component

* Fix tests

* Fix ally tests

* Space parens

* Add box shadow for android

* Add accessibility role

* Add a11y

* lint

* Add basic tests

* Fix tests

* Fix tests

* Update colors

* Merge remote changes

* Lint

* Add more comprehensive test

* Incremental changes to navbar component

* Fix tests

* Fix ally tests

* Space parens

* Add box shadow for android

* Add accessibility role

* Add a11y

* lint

* Add basic tests

* Fix tests

* Fix tests

* Update colors

* Merge remote changes

* Lint

* Add more comprehensive test

* switch to react native paper

* Make explore button nav to explore

* Remove inline styles

* Fix border on android

* Use user icon component in nav bar

* Rename props

* Remove t from nav button

* Change accessibility props

* Use a11y role for tabs

* Update NavBar.js

* Mock route for messages

* Mock route in tests

* Remove not needed function

* Remove NavBar unit test

* Create integration test file

* Add container mock to user profile test

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2023-02-03 11:42:55 +01:00
Angie
d76446bbc6 Merge pull request #424 from inaturalist/397-qualitygradestatus-component
397 qualitygradestatus component
2023-02-01 16:58:17 -08:00
Chris
4e99ee3526 create view hider component (#412)
* Create view hider component

* Fix logic to be easier to use on consumer side

* Add tests

* Fix errors and tests

---------

Co-authored-by: Amanda Bullington <35536439+albullington@users.noreply.github.com>
Co-authored-by: Amanda Bullington <albullington@gmail.com>
2023-02-01 15:23:16 -08:00
Angie Ta
b71bc274e0 Merge branch 'main' into 397-qualitygradestatus-component 2023-02-01 15:15:45 -08:00