Define the Visual Layout of the Application #6

New Issue

engineerjoe440 · 2022-08-22T23:35:49Z

engineerjoe440 commented

2022-08-22 23:35:49 +00:00

A good app is intuitive, elegant, and requires as few clicks as possible.

Per our list in #1, we need to provide the user with information about each laptop. We should consider some kind of list-based layout, with a form section, too. Something like the following, perhaps?

┌──────┬────────────────────────────────────────────────────────────────────────────────┐
│ File │                                                                                │
├──────┴────────────────────────────────────────────────────────────────────────────────┤
│ ┌────────────────────┬───────────────────────────────────────┬──────────────────────┐ │
│ │                           Tabular List of Computers                               │ │
│ └────────────────────┴───────────────────────────────────────┴──────────────────────┘ │
│                                                                                       │
│                                                             ┌──────────────┐          │
│                                                             │  Check Out   │          │
│                <Editable Fields>                            ╞══════════════╡          │
│                                                             │  Check  In   │          │
│                                                             └──────────────┘          │
└───────────────────────────────────────────────────────────────────────────────────────┘

If we're to use a table like the one defined by PySimpleGUI we should be able to bind an action to each click. That is, when a user clicks one of the rows in the table, the information shown in the editable fields will become populated.

We should consider making the editable fields disabled by default, with a button to change whether, or not, they're enabled. That way it'll be less likely we accidentally change values of the data when we're scrolling around and clicking things. Ya know?

A good app is intuitive, elegant, and requires as few clicks as possible. Per our list in #1, we need to provide the user with information about each laptop. We should consider some kind of list-based layout, with a form section, too. Something like the following, perhaps? ``` ┌──────┬────────────────────────────────────────────────────────────────────────────────┐ │ File │ │ ├──────┴────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────┬───────────────────────────────────────┬──────────────────────┐ │ │ │ Tabular List of Computers │ │ │ └────────────────────┴───────────────────────────────────────┴──────────────────────┘ │ │ │ │ ┌──────────────┐ │ │ │ Check Out │ │ │ <Editable Fields> ╞══════════════╡ │ │ │ Check In │ │ │ └──────────────┘ │ └───────────────────────────────────────────────────────────────────────────────────────┘ ``` If we're to use a table like the one defined by [PySimpleGUI](https://www.pysimplegui.org/en/latest/call%20reference/#table-element) we should be able to *bind* an action to each click. That is, when a user clicks one of the rows in the table, the information shown in the editable fields will become populated. We should consider making the editable fields disabled by default, with a button to change whether, or not, they're enabled. That way it'll be less likely we accidentally change values of the data when we're scrolling around and clicking things. Ya know?

engineerjoe440 added this to the Initial Prototype milestone 2022-08-22 23:35:49 +00:00

joshb was assigned by engineerjoe440

2022-08-22 23:35:49 +00:00

engineerjoe440 added the

gui

label 2022-08-22 23:37:02 +00:00

engineerjoe440 commented

2022-08-22 23:42:17 +00:00

As I think about this more, we can do some other intelligent things:

Disable Buttons Based on State

If we have check-in and check-out buttons, and we know the present state of whether a computer should be checked in, or checked out, then we should be able to enable or disable the buttons according to whether the laptop is currently available for check-out, or not.

Highlight the Table with Colors, Indicative of Availability

We should be able to highlight the individual rows of the table, based on whether or not they're laptops which are available to be checked out. Should be simple enough...

if laptop.is_checked_out():
    higlight_as_checked_out()
else:
    highlight_as_available()

As I think about this more, we can do some other intelligent things: ### Disable Buttons Based on State If we have check-in and check-out buttons, and we *know* the present state of whether a computer should be checked in, or checked out, then we should be able to enable or disable the buttons according to whether the laptop is currently available for check-out, or not. ### Highlight the Table with Colors, Indicative of Availability We should be able to highlight the individual rows of the table, based on whether or not they're laptops which are available to be checked out. Should be simple enough... ```python if laptop.is_checked_out(): higlight_as_checked_out() else: highlight_as_available() ```

engineerjoe440 referenced this issue

2022-08-26 01:28:07 +00:00

Add Highlighting and Button Functionality Based on State #7

engineerjoe440 commented

2022-08-26 02:32:36 +00:00

We've gotten the basic layout formatted, so this is complete! 😄

We've gotten the basic layout formatted, so this is complete! :smile:

engineerjoe440 closed this issue

2022-08-26 02:32:57 +00:00

Sign in to join this conversation.