When comparing the differences between the files in your local repository and in the remote repository, you can now open up a text editor that can be used to edit the file from within the application.
Adding this feature involved restructuring the existing differences panel to give it the 'Edit file' button, as well as structuring and styling the text editor panel. The implementation of the transitions between the two panels was achieved through setting 'on click' listeners on the buttons in the panels, which are calls to functions that change the sizes of the panels or add/remove inner HTML to/from different HTML elements. The save button also has a listener on the file's text area, so that the button can become enabled when changes to the text area are detected. When the text editor panel is closed, the differences panel is reopened showing the newly saved changes to the file. Finally, I had allow for the background colour of the text editor panel to be affected by the colour theme in the same way that the differences panel is.
When comparing the differences between the files in your local repository and in the remote repository, you can now open up a text editor that can be used to edit the file from within the application.
Adding this feature involved restructuring the existing differences panel to give it the 'Edit file' button, as well as structuring and styling the text editor panel. The implementation of the transitions between the two panels was achieved through setting 'on click' listeners on the buttons in the panels, which are calls to functions that change the sizes of the panels or add/remove inner HTML to/from different HTML elements. The save button also has a listener on the file's text area, so that the button can become enabled when changes to the text area are detected. When the text editor panel is closed, the differences panel is reopened showing the newly saved changes to the file. Finally, I had allow for the background colour of the text editor panel to be affected by the colour theme in the same way that the differences panel is.