Hello again. Welcome to the second chapter of my series of developing the frontend of my current project using Vue.js and Vuetify mainly.
This week, I continued working on the storage aspect of the dashboard application. I had already made an interface for storage configuration, now I would just need to display the list of configured storage to the user and also enable them to add and configure more storage services on demand.
Apart from that, I also set up a small mock representation of how I might design the project viewing and editing aspect. Here is the progress for this week’s work:
The user avatar and the settings option are also there for display purposes now. One thing to note here is that I have decided to keep the colors of the application simple now. Decision on what specific colors to use can be done later.
In Vuetify, you can specify either a light theme or a dark theme to their components. The above image shows the light theme variant. You may also notice an option to change the theme of the application towards the bottom of the navigation drawer. This is what the application would look like with a dark theme:
I personally prefer the dark theme over the light theme, but not everyone feels the same as me. So while in development, I could switch to the dark or light theme to see how the application looks for both, as I continue to add more components to the user interface. From now on, my images would mostly show the dark theme variant.
Alright, now going back to the topic, the user could only use one storage service at a given time, since each storage may contain different sets of projects for different purposes. In the above example, the navigation drawer would show all the storage service the user has configured, with each storage having their custom name given by the user and the cloud service that is being used (the icon would show the Google Drive icon if a Google Drive storage was configured, for example).
The option to choose a particular storage would be disabled if the user is currently using that storage, such as “My Personal Projects” above. When switching to another storage, like in this case “My School Projects”, the user would see:
In case of errors:
When attempting to connect to the remote storage, the user would not be able to do anything until the application successfully connects and mounts the remote storage, and read in the database. If an error occurs, the application would just notify the user, then they could continue using the same storage they were using or try to connect again.
The snackbar and the progress indicator are being reused from the storage dialog configuration, although the message in the snackbar is different for this one.
Clicking on the “Add Storage” option would bring up to the storage configuration dialog, which I had done previously.
Moving on, the large project view is meant to display the current snapshot of the project and also the meta data related to the project. The user should also be able to edit the Project Title and its description from there too, as well as “starring the project”. There would always be an empty project, titled “My New Project” in this case, which the users could edit to make the project their own.
The issue with having a large view of the project is that the same image used for the project card below, cannot be used. Because doing so would stretch the image beyond its original resolution, resulting in a blurry and visually unappealing image. Therefore, the same image but of different resolution would be used for the large view. For the case above, I just produce an image that is 25% larger in size than its original image. To prevent stretching of the image , the height of the large view would be automatically adjusted depending on the height of the given image, so the size of the image could be anything, but should be sufficiently larger than its original image. The width of the image would also be retained although it could be smaller than the width of the large view, which is why it is centrally aligned.
That concludes the chapter for this week. Next thing I would be working on is displaying the list of projects (e.g: list of projects sorted by modification date, list of starred projects, maybe even a list projects based on a custom categorization by the user, which is something extra for now). Then, I would need to display the boards too and also figure out the procedure for downloading the firmware to the board.
0 Comments