Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve consistency between Tree Detail and Planter Detail dialogs #10

Closed
nmcharlton opened this issue Oct 2, 2020 · 4 comments · Fixed by #143
Closed

Improve consistency between Tree Detail and Planter Detail dialogs #10

nmcharlton opened this issue Oct 2, 2020 · 4 comments · Fixed by #143
Assignees
Labels
good first issue Good for newcomers size: medium Medium-size issue tool: Verify Relates to the capture verification tool (Verify page) type: enhancement New feature or request UI/UX Requires some UI/UX design input

Comments

@nmcharlton
Copy link
Collaborator

Currently, planter details (and tree details on the Trees page) are shown on a side drawer, while tree details on the Verify page are shown as a modal popover dialog.

The two UIs could be more consistent.

Screenshot 2020-10-02 at 16 18 31

Screenshot 2020-10-02 at 16 16 53

@dadiorchen
Copy link
Collaborator

Previous UX for tree details looks just like the planter drawer, but the benefits for modal dialog is: it's bigger, good for checking some details of the tree picture.

@TANguyen1893 TANguyen1893 transferred this issue from Greenstand/treetracker-admin-api Feb 20, 2021
@nmcharlton nmcharlton added the type: enhancement New feature or request label Feb 21, 2021
@nmcharlton nmcharlton added tool: Verify Relates to the capture verification tool (Verify page) size: medium Medium-size issue tool: Growers Relates to the Grower Management tool (Growers page, formerly Planters) UI/UX Requires some UI/UX design input labels Apr 10, 2021
@nmcharlton nmcharlton added size: small Simple change good first issue Good for newcomers size: medium Medium-size issue and removed size: medium Medium-size issue size: small Simple change tool: Growers Relates to the Grower Management tool (Growers page, formerly Planters) labels Jul 18, 2021
@nmcharlton
Copy link
Collaborator Author

The Drawer component has a nice feel to it and works well for these sorts of detail dialogs.
A good first step would be to use a Drawer for the capture details, matching the planter detail layout (minus the image).
The Close button can also be replaced with the X used in the planter detail drawer.

The capture image could be centred on the remaining portion of the screen as a dialog with no need for padding, just a dark backdrop that ensures the image is in clearly visible and in focus:
Screenshot 2021-07-18 at 19 44 22

@chromium-52
Copy link
Contributor

Is anyone currently working on this issue? If not, could I try this one?

@nmcharlton
Copy link
Collaborator Author

@chromium-52 Go for it!

chromium-52 added a commit to chromium-52/treetracker-admin-client that referenced this issue Aug 8, 2021
chromium-52 added a commit to chromium-52/treetracker-admin-client that referenced this issue Aug 8, 2021
chromium-52 added a commit to chromium-52/treetracker-admin-client that referenced this issue Aug 8, 2021
nmcharlton pushed a commit that referenced this issue Aug 14, 2021
…ogs #10 (#143)

* feat: improve consistency between Tree Detail and Planter Detail dialogs #10

* fix: remove dialog transition, fix Close button exception, and make capture image larger
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers size: medium Medium-size issue tool: Verify Relates to the capture verification tool (Verify page) type: enhancement New feature or request UI/UX Requires some UI/UX design input
Projects
None yet
3 participants