UI Enhancement

[GuillermoDylan]

Enhancing the UI

Hello everyone, this discussion is destined to topics related with the inprovement of the graphical interface of the application, any topic that is related to that (except for Sketches, those should be in the sketches discussion, would be appreciated to be treated here.

As a start point I have some points that I think would be good to treat in order to improve the UI we already have:

• Creating a main page
• Start using shortcuts
• A (small) help page
• Reworking the "Friends" page view
• Taking care of the README and the Wiki, it's style and content
• Customizing the map and its placemarks

I have also thrught of some additional OPTIONAL additions that I consider would be a great idea, and some would give a lot of value to our app, differentiating it from everyone elses version of LoMap:

• A profile page with information about the user
• A custom logo for the application
• Start using tooltips
• A search bar for places

There are also some small details that should be taken into account on some already created pages/components, this are some of them:

• Friends: a link to the friends profile
• Place information: when there is no image, don't show the buttons of the slideshow

[UO283428]

As the new UI is being aprroved right now, I have made a list of possible things to take into account regarding the UI:

• Map icons of the Placemarks in the map to match categories.
• Photos logic not being implemented.
• Adding a marging to the OverviewPage and ReviewsPage on the PointInformation page.
• There is an issue with the add comment text area that doesn't allow to click it in the the left space.
• It would be great to make the PublicMap tab only to show the public map and hide the combobox for showing the rest of maps.
• The panel of stars for the reviews would be great to show a "loading..." while it is not being shown.
• It is necessary a back button for the add place page.
• The add place page css should be changed.
• For the presentation, the places of the public map should be on a pod, as they don't work right without one.

[UO283428]

To implement:

• A My staff tab with the maps of the user
• A Public Map with a child class of the LeafletMap adapter with the pins of other colors.
• A groups part in the app. It could be part of the friends part. This group part should allow the user to create a group and add friends to it, delete groups. There should be a part where the information of the map is shown.

[GuillermoDylan]

New loading animation when fetching data

As requested, here is display of the pages that take time to load data with a loading animation, made by using Reacts MUI.

[GuillermoDylan]

New ways of presentation

All of the downwards commented components are in a folder called basic inside of the components folder (except for Modals).

• How to present a Modal

For the new version of the enhanced UI we have proposed to display some windows such as PointInformation or AddPlace as a Modal Dialog on the application, here is how it has been currently implemented in our system, for the PointInformation component.

PointInformation.tsx

<Modal open={this.state.open} onClose={() => {
                this.setState(({open: false}));
                this.goBack();
            }}>
                <ModalDialog> 
                    <ModalClose/> //Thisis the closing "x" at the top right of the dialog
                     {CONTENT}
                </ModalDialog>
</Modal>

Notice that for this we now must have an open: boolean attribute in our state, which is the one in charge of telling the modal if its open or not. Most importantly we also have a open: boolean filed in our props, this is because we need the parent component to tell us if we are representing this modal or if it is not active yet, to do this we pass it as a prop when creating the component and then initialize the state on the constructor on the following way:

this.state = {
            ...
            open: this.props.open
        };

As this way of presenting does not have a component, I presumed it was a good idea to leave here how it works.

• Paginated tables

This are already explained in it's own documented class PaginatedTable.tsx, but if any I think it is still important to remind certain aspects such as the page handlers, this handlers are mandatory (one per table) and must have a page field on the state of the component, this handlers must update the page so that the pagination system works.

• Loading Animation

The loading animation for a component that is fetching information should now replace any "Loading..." text or html element present in the interface, as it will make things much more understandable and visually comprehensive for users. The easiest way to put a loading animation on a view is to use the LoadingPage.tsx component, as it already provides a default way of being presented (full screen), but it's parameters can be optionally changed to fit a space on the screen.

• PassmeDropdown

This is more of a wrapper for elements that need to be displayed as a drop-down menu without necessarily being menu items, it takes the passed JSX.Element and places it inside of the component, it's very simple to use and it was mainly used to present the MapFilter that is located on the home page.

All of this classes have been provided with documentation and should be easy to use and apply to code, if in doubt about any please message @UO283069.

[GuillermoDylan]

Update

It seems that the table pagination is actually wrong, there is much more to it than initially thought, so for now it is going to be leaved as a normal table without pagination, if there is some spare time after all the basic functionality is accomplished it will be taken care of, (for an actual example of how the table row should look here is the React MUI reference https://mui.com/material-ui/react-table/#EnhancedTable.tsx)

[uo282892]

Remaining details

• Change the buttons of the comments and reviews, so that they take less presence in the page than the titles.
• Fix the superposition of the loading elements in the social page. (DONE)

[GuillermoDylan]

Group Creation Dialog

This is how the new group creation dialog is going to be displayed, the css still needs a little bit of work: