[idea] Mobile UI #11: Edit Dive / New Dive layout

[Bocio]

Previous idea here:
Mobile UI #1: general layout
Mobile UI #2: default action for main screen button
Mobile UI #3: Dive list item layout
Mobile UI #4: Dive list different layouts and menu option
Mobile UI #5: Sidebar
Mobile UI #6: Dive detail title
Mobile UI #7: Dive list EOL and Swipe To Refresh
Mobile UI #8: Sidebar Header
Mobile UI #9: Settings page
Mobile UI #10: Title Bar
All original mockups made with moqups and are online at: (https://app.moqups.com/Bocio/3SSyFCoEwP)

This is the current "new dive" or edit "dive" panel:

I see two problems:

• Text fields label. They are on the left at the same level of the input line wasting half of the scarce mobile horizontal space.
• The huge font doesn't help either.

For now I did not modify the number of text fields respect the current edit panel. I changed only the layout trying to get some of Android guidelines on text fields

I will try to resume how it should work:

We a have a simple text field with a label. Labels rest above the line when the text field is empty:

Labels float upward and become small when the text field is in focus or filled:

Optionally a text field can have a helper text:

For a light theme:
Resting label text is: Type: Roboto 16sp, Color: 54% black (4.5:1 contrast ratio)
Input text is Type: Roboto 16sp, Color: 87% black (15:1 contrast ratio)
Floating label and helper text are: Type: Roboto 12sp Color: 54% black (4.5:1 contrast ratio)

I omit all effects on different text field states... Just be careful at font sizes.
I do not know what is possible with kirigami. I guess they foresee some way to save space.
As last resort we could have small (12sp) labels above the text field with an input font of 16 sp.

- Dive date edit should open a calendar widget to help user.
- I used a fake helper text on coordinates just to show how it could be useful in some cases to guide the user.

PS

Two questions:

• In current dive details I do not see tags and stars. Why?
• How ido i fill cylinders and gas mix? (It's challenging) I see that multiple cylinders are not supported in the mobile app. I have several dives with multiple cylinders but I see only one.

[jbygdell]

Let's see what limitations Kirigami has about this.

For starters Suit, Buddy, Divemaster and Cylinder are not text fields, they are drop-down menus that have an autocomplete function embedded. Since that where the only way to get something to autocomplete with Kirigami 1.0 and QtQuick 1.x.

Since most of the work on the dive display went in just prior to the 1.0 release the mindset where "Let's make it usable" i.e. just add the most mandatory parts.

Star rating is something that could be added to the upper right corner of the dive display.

As for the multiple cylinders issue, let's make that a 2.x feature, we have enough to get the UI streamlined as it is.

[Bocio]

For starters Suit, Buddy, Divemaster and Cylinder are not text fields, they are drop-down menus that have an autocomplete function embedded. Since that where the only way to get something to autocomplete with Kirigami 1.0 and QtQuick 1.x.

Then I was the perfect guinea pig for these controls. They look as standard text fields so I did not try to use them.

Star rating is something that could be added to the upper right corner of the dive display.

Yes

As for the multiple cylinders issue, let's make that a 2.x feature, we have enough to get the UI streamlined as it is.

I agree

[dirkhh]

On Wed, Jul 19, 2017 at 10:52:42PM +0000, Bocio wrote: Two questions: - In current edit panel nor dive detail panel i do not see tags and stars. Why?

Because no one has implemented this? When Subsurface-mobile was started it was thought of as a quick solution to get the most useful data on a mobile device. I initial didn't intend for an editing functionality at all.

- How ido i fill cylinders and gas mix? (It's challenging) I see that multiple cylinders are not supported in the mobile app. I have several dives with multiple cylinders but I see only one.

Again, not something I ever contemplated. There is so much insane complexity in this. So many weird special cases. Happy to look at patches, but not something I'm going to tackle.

[Bocio]

Again, not something I ever contemplated. There is so much insane complexity in this. So many weird special cases. Happy to look at patches,
but not something I'm going to tackle

Dirk it was just a question :) I didn't even realize it was a dropbox...

[dirkhh]

On Jul 22, 2017, at 1:10 AM, Bocio ***@***.***> wrote: Again, not something I ever contemplated. There is so much insane complexity in this. So many weird special cases. Happy to look at patches, but not something I'm going to tackle Dirk it was just a question :) I didn't even realize it was a dropbox...

I keep doing this, so let me be very explicit here again. You are doing an AMAZING job helping us improve the UI. Seriously, download the 1.2 version from Google Play and compare it to what we have now - it's day and night. And it has improved so much BECAUSE OF YOUR CONTRIBUTIONS, @Bocio. I have a tendency to push back, and I have a tendency to do so rather forcefully. I will try to be more careful, but it's hard to change who you are at our age. I really am just trying to make sure we prioritize things correctly and we don't overlook some aspects that we've seen in the past. And while I am thrilled beyond words that @jbygdell @RickMWalsh and @janmulder are all woking on the QML UI as well now (seriously, you guys have no idea how happy this makes me), I still want to make sure we keep effort and reward in a reasonable balance. So please, @Bocio, keep pushing, keep proposing, keep helping us to create a better app.

[jbygdell]

Stars enabled.

[dirkhh]

I am rather worried that your backyard pool has only 4 star viz...
Other than that... NICE.

[jbygdell]

Unfortunately there is no date/time picker in QT so that one need to be created if we intend to use one.

[jbygdell]

Oh, and hiding the action button is not possible, it is hard coded as visible in Kirigami once it is active on a page. I have asked Marco about the logic on this choice.
It's just a one line fix in Kirigami.

[Bocio]

One tragic line fix actually

Despite of feasability did you like my idea?

[Bocio]

Never mind. I thought you were commenting on the alternate layout.

[dirkhh]

@jbygdell has Marco responded? Worst case, we can carry that one liner in Subsurface and apply it after cloning Kirigami. We've done far worse than this.

[jbygdell]

@dirkhh no respone yet, I just sent the question 10min ago.

[dirkhh]

Ha. You can also try to catch him on freenode - he's "notmart" and is usually in the #plasma channel - but I see right now he's not there. Of course he's Italian and it's summer - so he might be gone for three weeks :-)