Resize line changes panel

hhagenson28 commented 5 years ago

Description

When viewing line changes for different files in the repo, more than half of each line is cut off and although you can scroll horizontally across, there is no affordance to show this functionality, like there is with the vertical scroll bar. Viewing all of the code would be more helpful for reviewing changes properly. Therefore, the panel should be resized to display more of the code. (Found on Windows 10)

Steps to reproduce:

Open up a local repository where changes have been made to files
Select a file on the left to view line changes

Acceptance criteria:

Users should know that they are able to scroll both horizontally and vertically on code to view all line changes properly.
Users should be able to view majority of the line changes on screen, without having to scroll a lot.

aorthi commented 5 years ago

A very valid issue - approved :)

DionBalmforth commented 5 years ago

I agree that this is an issue however horizontal and vertical scrollbars might not be the best solution as this can feel quite clunky for the user. Perhaps we can put overflow on the next line, this could be a nice alternative solution considering we now have line numbers?

cyrus-raitava commented 5 years ago

Approved - this would increase usability of the application, and greaten user satisfaction. Good find!

DionBalmforth commented 5 years ago

I approve the issue, however, @cyrus-raitava @aorthi would two scroll bars be the best solution? I still feel that a better solution to this issue would be to move the overflow to a new line.

hhagenson28 commented 5 years ago

Good point @dbal234 , I'm open to either solution for this. Just worried about the overall vertical length of a file if there are lots of changes and each line overflow was moved to a new line. Also, I think more than half of each line is currently being cut off so moving the overflow to the next line would probably result in each line turning into 3 or more lines. We may be able to resize the panel that the code is sitting within or resize the text to fit a bit better before adding a scroll bar or move the overflow to a new line.

DionBalmforth commented 5 years ago

Good point @dbal234 , I'm open to either solution for this. Just worried about the overall vertical length of a file if there are lots of changes and each line overflow was moved to a new line. Also, I think more than half of each line is currently being cut off so moving the overflow to the next line would probably result in each line turning into 3 or more lines. We may be able to resize the panel that the code is sitting within or resize the text to fit a bit better before adding a scroll bar or move the overflow to a new line.

I like that idea, re-sizing the panel/text sounds like a good idea to me :)

Jess-Alcantara commented 5 years ago

Hey, was looking at this issue and tested it on MacOS and found this was not an issue. I was able to scroll horizontally. There is an issue with the colours that I have indicated in issue #204

Jess-Alcantara commented 5 years ago

This issue could be changed to be a feature request about resizing the change panel as it's annoying only being able to see 1/3 of the code.

hhagenson28 commented 5 years ago

Yes, have since realised that the scrolling is not an issue, you can scroll horizontally across but there is no scroll bar to visually represent that this is possible. Agree that the panel should still be resized to accommodate more of the code being visible on the screen so I will update the issue accordingly.

hhagenson28 commented 5 years ago

Upon further investigation, I have found that there is already a horizontal scroll bar in place, it is just not currently visible, due to the placement of the command console so I will resize the file changes panel to fit better both horizontally and vertically.

hhagenson28 commented 5 years ago

This took a lot longer to fix than anticipated, due to the way the UI had originally been implemented and the original CSS styling of the main body panels, as shown in a screenshot on issue #279. Having little experience with CSS, it took me a while to figure out how each component was linked and layered together and what needed to be adjusted, in order to change the dimensions of the line changes panel. I ended up finding unused 'save' and 'cancel' buttons on this panel which were removed by PRs #283 and #311. I then tried resizing the diff-panel in relation to the footer but was unsuccessful with this attempt. I then tried resizing the whole body panel and then changing the diff-panel in relation to that and then ran into issues with the growing and shrinking of the header, due to varying lengths of repository and branch names. I ended up having to change the way the repository and branch name text was displayed, in order to keep the header a consistent size and thus, maintain the body and footer dimensions as well. This enabled all line changes and the horizontal bar to be visible and will be useful progress for fixing issue #279.

hhagenson28 commented 5 years ago

I am also going to update the size of this issue as there was more involved than originally anticipated, as mentioned above.

kblincoe / VisualGit_SE701_2019_1