Make center divider adjustable #403 #418

emer7 · 2018-12-12T01:31:51Z

RepoSense has a code panel and summary panel, each occupies
half of the screen. However, the code panel width cannot be resized.

Enabling resizing of the code panel will allow user to adjust it to
their comfort.

Let's have an adjustable code panel by dragging the width of the panel.

This is implemented by constantly changing the inline style following cursor movement.
I avoid direct DOM manipulation.

ongspxm

doesn't work on firefox, chrome too. i just clicked on the black bar and dragged, is it the right way to use it?

it doesn't really move, it just selects the text.

emer7 · 2018-12-13T09:06:59Z

Thank you for the comment. Right now it cannot be dragged very fast. The cursor need to stay in the black bar for the dragging to work.

Future plan: finding a way to allow more responsive dragging or allow dragging despite cursor not in the black bar.

damithc · 2018-12-13T09:16:00Z

Thank you for the comment. Right now it cannot be dragged very fast. The cursor need to stay in the black bar for the dragging to work.

hmm... we need something that works for all users when used as per normal user expectations. Can look for an alternative that doesn't have that restriction?

ongspxm · 2018-12-13T09:17:52Z

one way to do it is to do it relative to the global div (more specifically #app-wrapper), attach the mousemove event on #app-wrapper, moving the separator if a certain flag is triggered (this triggering of the flag will be attached to the mousedown and mouseup event of the bar, same to what you have now).

emer7 · 2018-12-13T09:28:02Z

yeah I thought of someting similar just now, using another div wrapper but turns out there is #app-wrapper. I will check on it. Thank you for the suggestion

emer7 · 2018-12-13T09:33:11Z

I will work on it on Sunday night, GMT+2 (currently in Israel on NOC). Unavailable until then. I apologize for the absence.

emer7 · 2018-12-16T20:53:23Z

Fixed the issue above. Now the dragging is more intuitive.

eugenepeh

Fixed the issue above. Now the dragging is more intuitive.

Looks good! Just 1 more thing though, can give it a minimum width or make it auto close when the code view has less than a certain width?

For e.g., I have accidentally slide too far right and now I couldn't adjust it anymore.

eugenepeh · 2018-12-18T09:31:18Z

frontend/src/static/js/v_authorship.js

@@ -13,7 +13,7 @@ function toggleNext(ele) {
  }

  parent.className = classes.join(' ');
-};
+}


for lines that are irrelevant to your PR, please avoid modifying them as it may cause unnecessary conflict and also deviates from the purpose of your PR.

This comes from ESLint

frontend/src/static/js/v_summary.js

ongspxm

using the flex prop is a smart trick 👍

it will be best if are could work on the lag, maybe the double rendering on both .tab-resize and app-wrapper might be the cause, do give a more detailed look.

ongspxm · 2018-12-19T00:25:50Z

frontend/src/index.jade

@@ -13,7 +13,7 @@ html
    script(src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js")
  body
    div#app
-      #app-wrapper(v-if="userUpdated")
+      #app-wrapper(v-if="userUpdated", v-on:mousemove="mouseMove", v-on:mouseup="deregisterMouseMove", v-bind:style="{ 'user-select': appWrapperUserSelect }")


haha, newline pls, just break on commas

ongspxm · 2018-12-19T00:28:17Z

frontend/src/index.jade

@@ -26,7 +26,8 @@ html
              strong RepoSense
            span &nbsp; on {{ creationDate }}

-        #tabs-wrapper(v-if="isTabActive")
+        #tabs-wrapper(v-if="isTabActive", v-bind:style="{ flex: `0 0 ${flexWidth * 100}%` }")
+          .tab-resize(v-on:mousedown="registerMouseMove", v-on:mousemove="mouseMove", v-on:mouseup="deregisterMouseMove")


same and why did you have to do it in two place tho? 🤔

At first I thought that without it, we can only register the mouse event outside of the resize bar

ongspxm · 2018-12-19T00:34:59Z

frontend/src/static/js/main.js

+            window.innerWidth - (DRAG_BAR_WIDTH / 2)
+          ) / window.innerWidth;
+
+        this.flexWidth = calculatedWidth;


just this.flexWidth = ..., dun need set const then set again.

ongspxm

if you want to deal with the lag, you can do some event buffering mechanism, so that the heavy lifting at the front can be avoided.

emer7 · 2019-01-27T06:14:13Z

Proposed commit message

RepoSense has code panel and summary panel, each occupies
half of the screen. However, the code panel width cannot be resized.

Enabling resizing the code panel will allow user to adjust the panel
size to their comfort.

Let's have an adjustable code panel by dragging the width of the panel.

eugenepeh · 2019-01-27T09:37:38Z

sorry @emer7 , i just realized something:

When I adjust the divider position, hiding the code panel and show it again, it resets to the middle position. Only when I interacts with the dashboard again, it goes back to the adjusted position.

Can you look into it to see if we can let it maintain the adjusted position through out?

emer7 · 2019-01-27T13:43:23Z

sorry @emer7 , i just realized something:

When I adjust the divider position, hiding the code panel and show it again, it resets to the middle position. Only when I interacts with the dashboard again, it goes back to the adjusted position.

Can you look into it to see if we can let it maintain the adjusted position through out?

Done, width now persists

ongspxm · 2019-01-27T16:01:17Z

frontend/src/static/js/main.js

+  mouseMove = throttledEvent(30, innerMouseMove);
+};
+
+const deregisterMouseMove = () => {


lint your code, migth not be able to do this, do window.deregisterMouseMove instead, same above

there is this pesky #514 that is going to go in, it will fail your code, so lint on local first

I changed const xxx = ... to window.xxx = ... but I don't lint everything

damithc

Good work @emer7 👍

damithc · 2019-01-29T01:14:43Z

Thanks to reviewers too, for shepherding this PR all this way 💯

emer7 added 2 commits December 12, 2018 03:20

Make center divider adjustable

01f6a41

Fix styling

b9519b5

damithc requested review from eugenepeh and ongspxm December 13, 2018 05:19

ongspxm suggested changes Dec 13, 2018

View reviewed changes

eugenepeh added the s.Ongoing label Dec 14, 2018

Smoother dragging and prevent text selection when dragging

8d51755

yamidark requested a review from ongspxm December 18, 2018 05:25

yamidark added s.ToReview and removed s.Ongoing labels Dec 18, 2018

eugenepeh reviewed Dec 18, 2018

View reviewed changes

emer7 force-pushed the resizable-pane branch from 7fe7e5b to 5564678 Compare December 18, 2018 23:19

Fixed es lint warning and added minimum panel size

9e7d245

emer7 force-pushed the resizable-pane branch from 5564678 to 9e7d245 Compare December 18, 2018 23:21

Merge branch 'master' into resizable-pane

1ae8ab3

ongspxm suggested changes Dec 19, 2018

View reviewed changes

yamidark added s.Ongoing and removed s.ToReview labels Dec 19, 2018

emer7 added 2 commits December 20, 2018 01:43

Remove duplicate event handler

ad9cc90

Fix code quality

4988b15

ongspxm approved these changes Dec 24, 2018

View reviewed changes

Merge branch 'master' into resizable-pane

f89e384

yamidark added s.ToReview and removed s.Ongoing labels Jan 5, 2019

eugenepeh approved these changes Jan 27, 2019

View reviewed changes

eugenepeh requested a review from damithc January 27, 2019 04:36

damithc approved these changes Jan 27, 2019

View reviewed changes

yamidark added s.ToMerge and removed s.ToReview labels Jan 27, 2019

eugenepeh added s.Ongoing and removed s.ToMerge labels Jan 27, 2019

Persists code panel width even after hiding

047c481

ongspxm suggested changes Jan 27, 2019

View reviewed changes

yamidark added the s.ToReview label Jan 27, 2019

yamidark requested review from ongspxm and eugenepeh January 27, 2019 17:36

eugenepeh approved these changes Jan 27, 2019

View reviewed changes

emer7 added 2 commits January 28, 2019 11:22

Merge branch 'master' into resizable-pane

a45bf09

Fix some linting error

edfcbc8

yamidark removed the s.Ongoing label Jan 28, 2019

yamidark requested review from ongspxm and damithc and removed request for ongspxm January 28, 2019 16:58

damithc approved these changes Jan 29, 2019

View reviewed changes

ongspxm approved these changes Jan 29, 2019

View reviewed changes

Merge branch 'master' into resizable-pane

93ba067

yamidark added s.ToMerge and removed s.ToReview labels Jan 29, 2019

Merge branch 'master' into resizable-pane

4c0f36a

yamidark merged commit 73e47bf into reposense:master Jan 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make center divider adjustable #403 #418

Make center divider adjustable #403 #418

emer7 commented Dec 12, 2018 •

edited by yamidark

ongspxm left a comment

emer7 commented Dec 13, 2018

damithc commented Dec 13, 2018

ongspxm commented Dec 13, 2018

emer7 commented Dec 13, 2018

emer7 commented Dec 13, 2018

emer7 commented Dec 16, 2018

eugenepeh left a comment

eugenepeh Dec 18, 2018

emer7 Dec 18, 2018

ongspxm left a comment

ongspxm Dec 19, 2018

ongspxm Dec 19, 2018

emer7 Dec 19, 2018

ongspxm Dec 19, 2018

ongspxm left a comment

emer7 commented Jan 27, 2019

eugenepeh commented Jan 27, 2019

emer7 commented Jan 27, 2019

ongspxm Jan 27, 2019

ongspxm Jan 27, 2019

emer7 Jan 28, 2019

damithc left a comment

damithc commented Jan 29, 2019

Make center divider adjustable #403 #418

Make center divider adjustable #403 #418

Conversation

emer7 commented Dec 12, 2018 • edited by yamidark

ongspxm left a comment

Choose a reason for hiding this comment

emer7 commented Dec 13, 2018

damithc commented Dec 13, 2018

ongspxm commented Dec 13, 2018

emer7 commented Dec 13, 2018

emer7 commented Dec 13, 2018

emer7 commented Dec 16, 2018

eugenepeh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ongspxm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ongspxm left a comment

Choose a reason for hiding this comment

emer7 commented Jan 27, 2019

eugenepeh commented Jan 27, 2019

emer7 commented Jan 27, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damithc left a comment

Choose a reason for hiding this comment

damithc commented Jan 29, 2019

emer7 commented Dec 12, 2018 •

edited by yamidark