Closed ConradSelig closed 4 years ago
@missyschoenbaum Trying some new formatting - how do you feel about the "Apply" and "Cancel" button placement on the following screenshots? The advantage to this formatting is that buttons are no longer fixed in scrolling frames, ie if the user has lots of listed items in a panel (like production types for example) the buttons will NEVER be overlapping the options.
I know this doesn't follow standard styling for the program, so I'm running it past you now before waiting until the next update.
This is an interesting one, as the Scenario Description page is NOT a center or right panel, but looks like it uses the base edit buttons template file.
Some pages (like Vaccination Global) remain unchanged, this is because they are using a different set of buttons - even though they look and act the same.
By the way, these are not the only places the buttons will have moved - any "Apply" or "Cancel" buttons from the standard button holder would be moved. This does include the "Delete Results and Apply" button, as well as the "Remove References before Deleting" and "Delete" buttons (which I've never actually seen in the program- I'm not even sure how to get them to show up - but they sure are in the code!).
If you are worried about any particular page I would be more than happy to send you a screenshot of it.
Regardless of what Missy has to say about button placement, the above commit does fix an overlapping issue that I discovered while working on this ticket.
I'm thinking we have moved these buttons around a few times, and don't recall all the reasons why. Want to check for old tickets before we do anything else? I do like the up close placement. It makes more sense to me.
Likely #931, which I think was covering a similar issue. If you like the change I'll go ahead and make it so this ticket can go into testing - we can revert it if you change your mind.
I bet the "Remove References before Deleting" was before we reworked how functions act. It now gives you delete disabled if there are references.
Just a thought, did we have these in the other place because sometimes they are out of the vision of the user when a scroll is necessary? There would be times when even I would miss them because they were outside my immediate vision. @BryanHurst, do you recall?
I don't recall. Ideally this fix will change the behavior us the apply and cancel buttons everywhere and this problem will go away for good.
If the screenshot above is recent and there are still missing buttons, then there are more place to look into applying this fix.
Yes, this is recent. It was #802 that we last change the apply. You guys want to look through the history before we proceed?
I found an image of the 2017 version, it looked like this and was a problem because long pages were hidden.
Long forms will cause the buttons to be below the screen with the current build. Are we sure that we don't want that action? We warn users to move slowly through the program to make sure that they don't miss or brush over anything they should be - it could be easy to skip over fields that are hiding below the bottom of the screen if they don't have to scroll down to the bottom to hit "Apply"
I agree in theory, but in practice what happens is that you just don't save. I did this repeatedly, and I know exactly how things should work. Therefore, I expect new people to completely be lost on this. This is a crazy idea, but could you turn the scrollbar red or something to indicate that save hasn't happened? That might call it out a little more. What would be our options to give us a warning that something more existed?
Hmmm let me think on the idea.
@missyschoenbaum What do you think about this idea?
The "red" on the tab would show regardless of if the tab is completed or incomplete - but would only turn red if there is an unsaved changed. My only fear here is that this is still not obvious enough, perhaps we could make the single bar more of an outline on the tab? Here is a mockup screenshot I made with paint:
First screenshot would be fairly easy to implement, second would take significantly more time.
Red color was chosen from "ADSM/fontandcolorguide.pdf" but could be made brighter.
Just to confirm I understand: Ondirty would cause the tab color to change to red, and is only resolved with a save? And if you just X out, then you lose your change, and lose your red tab because all changes were discarded?
Think of the red tab color like the apply button on any given page - if the apply button is usable (not grayed out) then the tab color would be red. Otherwise if would be it's normal green or yellow depending on the form state.
Could it also have hover text that says something like "Save required"? I like it.
Just so it is out there, changing the scroll bar color with a CSS class is a fairly simple task if we still want to take that approach.
I think that's doable - I'll see what I can make work
@missyschoenbaum do you like the scroll bar more? We can do hover text on either.
Wow, I love the scroll bar.
Speaking of the scroll bars, I think we should make them slightly more visible site wide and put them on the right side of their panels.
I think there was a reason Josiah put them left. Like they will conflict with links in on the right. They were odd on the left, but I'm accustom to it now.
I'm assuming you want to keep them on the left then, we can still make them a little more visible by increasing width by a few pixels and darkening colors across the board. I'll get the scroll bar to go to red colors when the current form is unsaved, and I'll see about some hover text as well. Going to be a lot of CSS work!
@missyschoenbaum Can I get some hover text wording?
How about "Apply to save changes" ?
Hover text does not seem possible with the way that CSS handles non-stacked elements. On the alternative, here is what I can offer:
@missyschoenbaum Do you like how this looks? Is this text obvious enough?
I'm pushing my changes as is - we can make small changes if we want.
I think that is good. I need to include these items in the training as well.
New issues done, documentation done. This one is good.