fixes #2903 - Rearrange layout of columns #2936

callumbooth · 2019-03-19T21:01:37Z

Description

Adds a button to change the orientation of the the split editing window to allow either vertical or horizontal

Issue fixed

#2903

Type of changes

⚪ Bug fix (Change that fixed an issue)
⚪ Breaking change (Change that can cause existing functionality to change)
⚪ Improvement (Change that improves the code. Maybe performance or development improvement)
🔘 Feature (Change that adds new functionality)
⚪ Documentation change (Change that modifies documentation. Maybe typo fixes)

Checklist:

🔘 My code follows the project code style
⚪ I have written test for my code and it has been tested
🔘 All existing tests have been passed
🔘 I have attached a screenshot/video to visualize my change if possible

IssueHunt Summary

IssueHunt has been backed by the following sponsors. Become a sponsor

MiloTodt · 2019-03-19T22:45:25Z

Could perhaps be better implemented by an option in preferences? I'm not sure if it's something people would switch between frequently enough to need a dedicated button on the UI, and the logo for it is very close visually to the one next to it.

MiloTodt · 2019-03-19T23:02:30Z

This doesn't appear to work correctly when used alongside toggling the code editor from split to full screen.

Results in unexpected behavior counter to button purpose.

callumbooth · 2019-03-20T09:26:57Z

Could perhaps be better implemented by an option in preferences? I'm not sure if it's something people would switch between frequently enough to need a dedicated button on the UI, and the logo for it is very close visually to the one next to it.

I think having to navigate to a new screen and find the orientation setting to change it each time would be quite jarring for the user. I know VSCode has the layout options in "View" of the top menu bar.

I agree changing the icon to make it more unique and identifiable would be better.

This doesn't appear to work correctly when used alongside toggling the code editor from split to full screen.

I'm struggling to replicate this. Can you let me know more details and I can investigate further

browser/components/CodeEditor.js

AWolf81 · 2019-05-26T23:05:09Z

browser/components/MarkdownSplitEditor.js

+    if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132)) editorIndentSize = 4
+    editorStyle.indentSize = editorIndentSize
+
+    if (isStacking) {


Nit. I think this would be more readable if you add it like following:

editorStyle = isStacking ? { width: '100%' , height: `${this.state.codeEditorHeightInPercent}%` } : { width: `${this.state.codeEditorWidthInPercent}%`, height: '100%' } previewStyle = isStacking ? { width: '100%', height: `${100 - this.state.codeEditorHeightInPercent}%` } : { width: `${100 - this.state.codeEditorWidthInPercent}%`, height: '100%' } sliderStyle = isStacking ? { left: 0, top: `${this.state.codeEditorHeightInPercent}%` } : { left: `${this.state.codeEditorWidthInPercent}%`, top: 0 }

if/else would be also OK but I would avoid adding each prop line by line & use backtick strings to add the % to the style.

I agree, I have changed the if statement however, this would override the previously set properties, so I have used object.assign to set the new properties. It might be beneficial to update the babel config to transpile the spread operator.

AWolf81 · 2019-05-26T23:46:32Z

@callumbooth can you please merge master into your branch?

For me it's also hard to reproduce the toggling issue that @MiloTodt mentioned. A step-by-step guide would help here as it's pretty fast in the screenrecording.

To the icon
I like how you've added the layout toggle button and it looks OK. But I also think adding it to the view menu would be better as that's a rarely used feature - so it shouldn't be in the UI.
@ZeroX-DG what would you prefer? The menu item or the button?

callumbooth · 2019-06-10T18:04:13Z

@callumbooth can you please merge master into your branch?

This has been done

ZeroX-DG

Sorry for the wait 😭 Can you resolve the conflict please.

ZeroX-DG · 2019-09-27T02:08:09Z

browser/main/lib/ConfigManager.js

    delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
    scrollPastEnd: false,
    type: 'SPLIT', // 'SPLIT', 'EDITOR_PREVIEW'
+    isStacking: false,


I think this should be in UI instead of editor

ZeroX-DG · 2019-09-27T02:11:13Z

browser/main/Detail/ToggleStackDirectionButton.js

+    <img styleName='iconInfo' src={isStacking ? '../resources/icon/icon-panel-split-vertical.svg' : '../resources/icon/icon-panel-split-horizontal.svg'} />
+    <span lang={i18n.locale} styleName='tooltip'>{
+          isStacking ? i18n.__('Split Panels Horizontally') : i18n.__('Split Panels Vertically')
+


Can you adjust the code format here? I think you should separate the src for image and the content for span tag into smaller variables for better readability

I have refactored the image src and the span text into smaller vars.

ZeroX-DG · 2019-09-27T02:17:01Z

browser/components/CodeEditor.js

+        width: width,
+        height: height
+      }
+      }


Can you fix the format here too please?

Flexo013 · 2019-10-08T12:45:39Z

To the icon
I like how you've added the layout toggle button and it looks OK. But I also think adding it to the view menu would be better as that's a rarely used feature - so it shouldn't be in the UI.
@ZeroX-DG what would you prefer? The menu item or the button?

Just adding my two cents: I think that adding this to the View menu would also be better. There would be less clutter in the UI, and this feature 100% pertains to the View.

ZeroX-DG · 2020-01-31T02:34:54Z

@callumbooth can you resolve the conflict before I can approve this please? thank you 😃

ZeroX-DG · 2020-01-31T02:36:12Z

Also I agree with the idea of moving this to the View menu instead of having it in the UI, this will keep the UI cleaner. Can you move this to the View menu?

ZeroX-DG · 2020-04-05T05:16:56Z

@callumbooth ping

…x-2903

callumbooth · 2020-04-18T13:27:25Z

@ZeroX-DG I've fixed the merge conflicts and moved the button the View menu

ZeroX-DG

@callumbooth can you update your code before I approve it?

ZeroX-DG · 2020-04-19T09:19:15Z

browser/main/Detail/MarkdownNoteDetail.js

      isLocked: false,
      editorType: props.config.editor.type,
-      switchPreview: props.config.editor.switchPreview,
-      RTL: false


Please don't remove this RTL key, this is for Right To Left feature, people who use this feature will be very angry 😄

callumbooth · 2020-04-22T07:58:53Z

@ZeroX-DG sorry, thats been fixed

ZeroX-DG

LGTM 🎉

fixes BoostIO#2903 - Rearrange layout of columns

93f0d3c

ZeroX-DG added the awaiting review ❇️ Pull request is awaiting a review. label Mar 20, 2019

ZeroX-DG reviewed Apr 28, 2019

View reviewed changes

browser/components/CodeEditor.js Outdated Show resolved Hide resolved

ZeroX-DG mentioned this pull request Apr 28, 2019

Split Window Horizontally #2981

Closed

AWolf81 reviewed May 26, 2019

View reviewed changes

callumbooth added 3 commits June 10, 2019 19:13

merge from master

b15a400

adds destructed fontFamily from props

a2fb50a

changes if state to be more readable

ba34458

ZeroX-DG requested changes Sep 27, 2019

View reviewed changes

ZeroX-DG added awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. and removed awaiting review ❇️ Pull request is awaiting a review. labels Sep 27, 2019

merge from upstream/master

4de6c69

callumbooth added 3 commits October 9, 2019 12:41

fix formatting

218fba1

Cleans up toggle button component

1993a65

move config value into ui

59e361c

Flexo013 added awaiting review ❇️ Pull request is awaiting a review. and removed awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. labels Oct 9, 2019

Callum Booth added 2 commits April 18, 2020 13:54

Merge branch 'master' of https://github.com/BoostIO/Boostnote into fi…

2f16784

…x-2903

moves orientation button to view menu

a7ead67

ZeroX-DG requested changes Apr 19, 2020

View reviewed changes

Callum Booth added 2 commits April 20, 2020 08:42

fix accidental deletion of rtl state

d138a54

remove redundant icons

c355f81

ZeroX-DG approved these changes Apr 23, 2020

View reviewed changes

ZeroX-DG added approved 👍 Pull request has been approved by sufficient reviewers. and removed awaiting review ❇️ Pull request is awaiting a review. labels Apr 23, 2020

Rokt33r added this to the v0.16.0 milestone Apr 23, 2020

Rokt33r merged commit 4b67026 into BoostIO:master Apr 23, 2020

callumbooth deleted the fix-2903 branch April 24, 2020 07:43

Uh oh!

fixes #2903 - Rearrange layout of columns #2936

fixes #2903 - Rearrange layout of columns #2936

Uh oh!

Conversation

callumbooth commented Mar 19, 2019 • edited by issuehunt-oss bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issue fixed

Type of changes

Checklist:

Uh oh!

MiloTodt commented Mar 19, 2019

Uh oh!

MiloTodt commented Mar 19, 2019

Uh oh!

callumbooth commented Mar 20, 2019

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AWolf81 commented May 26, 2019

Uh oh!

callumbooth commented Jun 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZeroX-DG left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Flexo013 commented Oct 8, 2019

Uh oh!

ZeroX-DG commented Jan 31, 2020

Uh oh!

ZeroX-DG commented Jan 31, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZeroX-DG commented Apr 5, 2020

Uh oh!

callumbooth commented Apr 18, 2020

Uh oh!

ZeroX-DG left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

callumbooth commented Apr 22, 2020

Uh oh!

ZeroX-DG left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

callumbooth commented Mar 19, 2019 •

edited by issuehunt-oss bot

Loading

callumbooth commented Jun 10, 2019 •

edited

Loading

ZeroX-DG commented Jan 31, 2020 •

edited

Loading