In the previous entry of this series of posts I introduced the change I planned to transform QGit in a new app and plugin called GitQlient.
A new UI for GitQlient
In the old QGit there was a mix of UI files, in place widgets and classes that handle data and return widgets because… why not? A mess. For GitQlient, I separated the UI by scopes and I changed the main window for a QWidget so I can easily integrate it in QtCreator as a plugin.
Centralized controls
In QGit there were a lot of controls, menu and options all around. You could easily feel a bit lost not because of the amount but because of their unspecific behavior. In GitQlient, I’ve opted for a central controls widget, with the main used actions and some additional features but trying to avoid as much as a possible to overwhelm the user. The Controls is widget composed by a series of buttons. The widget allows you to apply the main Git actions but also to move between the different views.
Splitting WIP and commits
I’ve created new widgets for specific functionality. Now I have a CommitWidget that helps when commiting or ammending a commit. I’ve added two lists of files so know if you have dozens of files you can easily select which files you want. The separation between the list of staged files and unstaged files helps to see what exactly we want to add.
In the same way, I’ve added a RevisionWidget that shows all the information of a specific commit. I choose the name revision to differentiate between the work in progress and something that we already commited. Both widgets are handled in a QStackedWidget in GitQlient.
New view of the branch status
One new thing I’ve added is the visibility of the branches of a repo. In QGit there was no clear widget for that and I think is one of the most used features of medium to large projects. The widget BranchesWidget has tables where it shows the local branches (and their distance to origin and master). There is another table for the server branches, even if we checked them out or not. Finally there are list for tags, stashes and submodules. Where one can easily see in which commit are they. The BranchesWidget goes directly to the MainWindow as well.
The big boy: The central widget
QGit divides the view between the graph of the repository in the top part and it keeps the views of the revisions and diffs in the bottom. Every time you opened a file or a diff, QGit creates a new tab.
From my POV it adds a lot of overhead in the lower part of the screen, distracting the eyes from the things we want to see. What I wanted for GitQlient is: first, a layout that allows me to see where I’m in the tree at any time. Second, I wanted to control where are my branches, tags and current work. Finally, if I want to open a file diff or a commit diff, I don’t want to be distracted from it.
For that reason I created a central widget, that is a QStackedWidget that changes the view depending on what we want to see in that specific moment. You can always com back to the graph view, but you’ll never get lost in endless tabs. However, that means that I had to create different views for every option.
The repository graph view
The RepositoryView is the widget in charge of showing the graph of the repo. I created it according to the Qt MVC, so it has a model and delegates. Nowadays there is still some refactor work to do. So far, I’ve changed the way I ask Git to sort the commits and I adapted the colors of the branches to a lesser bright tone. I’ve also changed how the labels for the branches and tags are represented and painted.
The individual file diff
The FileDiffWidget is the widget that shows the content of the file between the previous commit and the selected one. GitQlient uses it indistinctly for the WIP or whatever commit you want. This shows the full file with embedded lines for the additions or removals. In the future I’d like to add the option to show both files side to side, but for the moment this works. I’ve added the line number and I changed the colors as well.
The revision diff widget
DiffWidget is the widget that shows scoped changes of all the files in a revision. I haven’t finished the refactor from the old QGit. So for the moment, I need to keep the odd and invasive inheritance from the Domain class.
One more thing…
I actually have one more widget that I think is interesting to mention: the Terminal widget. Originally there were two different widgets in the MainWindow that took git commands and showed the input. I think that is still interesting in case you want to do really specific or complex Git instructions. So I’ve moved those widgets into a new window that pops up when it’s triggered by the Controls widget.One more thing…
In next entries…
In the next entry I’ll explain what are my plans to keep GitQlient up to date and which big features I want to add next!
Leave a Reply