Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add editor width setting #91

Merged
merged 4 commits into from
Aug 30, 2021

Conversation

tuur29
Copy link
Contributor

@tuur29 tuur29 commented Aug 7, 2021

Hi there, as mentioned on my discussions page, I've added a "editor width" setting. Feel free to review/merge if you feel this is something that fits in your idea of the editor 😄

Currently there are only 2 sizes with the ability to toggle between them on a page by page basis, with a default setting.

Screenshots

image image

components/settings/editor-width.tsx Outdated Show resolved Hide resolved
locales/en.json Outdated Show resolved Hide resolved
libs/shared/settings.ts Outdated Show resolved Hide resolved
@QingWei-Li
Copy link
Collaborator

Good job!
My idea is that each page can be set to a specific width, just like Notion. I also like the current method, but if the width can be set separately, more users may accept it. What do you thinks?

@tuur29
Copy link
Contributor Author

tuur29 commented Aug 18, 2021

Thanks! Sorry for the late answer. I immediately wanted to get started on my ideas, but life got in the way.
I agree that a per-page setting could be useful and it's something that I can do. However, I'd like your input first: do you have an idea how/where to put this setting?

Initially I was thinking about adding it in the SidebarMenu, but adding a dropdown there would not look nice.
Maybe I could add a horizontal list of dots/icons or a slider there instead? In any case, this will increase the complexity of the SidebarMenu component.

An alternative idea is to only support 2 sizes: small (current) and big, with a simple list item called "Toggle editor width", then I would remove the other 2 options from the settings page as well.

EDIT: just another thought I had: What if the user wants to remove the page specific config? Do we then also need to foresee a way to reset the page specific setting like a second menu item "Reset editor width", or a button in the settings that will reset everything at once?

@QingWei-Li
Copy link
Collaborator

The settings of each note can be put in meta
https://github.com/QingWei-Li/notea/blob/main/libs/shared/meta.ts

We only need to support two widths in the top menu, the default and the larger width. https://github.com/QingWei-Li/notea/blob/main/components/note-nav.tsx#L138

If necessary in the future, we can add more width options and reset the width option.

@@ -105,7 +105,7 @@ export const EditContainer = () => {
<NoteNav />
<DeleteAlert />
<section className="h-full">
<MainEditor />
<MainEditor note={note} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like typescript didn't catch this because of the async import. Didn't notice any side effects when adding this.

@tuur29 tuur29 requested a review from QingWei-Li August 29, 2021 11:19
@QingWei-Li QingWei-Li changed the title Add editor width setting feat: Add editor width setting Aug 30, 2021
@QingWei-Li QingWei-Li merged commit 54fae49 into notea-org:main Aug 30, 2021
@tuur29 tuur29 deleted the feature/editor-width branch August 30, 2021 06:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants