Having view-changing toggle hover over a portion of the text sounds like a UX accident

@FirebrandCoding <a class="user-mention notranslate" data-hovercard-type="user" data-h

Sounds very good. Reply We can dis

Comments (44)

penge commented on May 28, 2024 1

I just simply love the default scrollbar :D
But I understand in case of Windows I would not :D

Also replacing scroolbars was cool like 10 years ago. I would not replace Chrome OS scroolbars for nothing :D There must be a different way how to get around this.

from my-notes.

penge commented on May 28, 2024 1

So. Icons I made smaller. Now it is 80% of the text size (before 100%) and tabs text is 70% of the size (before 80%).

Context menu - won't be used.

Double click - cannot. Need to make it compatible with Android / touch devices / phones.

from my-notes.

penge commented on May 28, 2024 1

Here's the link where I share progress and functionalities that have been added:

https://github.com/penge/my-notes/projects/1?fullscreen=true

Once it is done, a private beta would be released.

from my-notes.

Hyperseeker commented on May 28, 2024 1

Just a heads-up: you can enable editing any element by setting its contenteditable attribute. Removing the attribute or setting it to false disables editability. That way, you don't have to be concerned with things that arise from replacing elements: exact styling of the input, element juggling etc.

Once you'd "activated" the element that way, you can even set the caret to where the click/touch element fired, thus following on the "editable text" convention set by every single text editor since 2000. The code for that is not straightforward, but from what I'd managed to do with it in my own app, it's performant enough to have no stutter on click-handling whatsoever. I can share the code as a library if you like.

from my-notes.

penge commented on May 28, 2024 1

Branch

https://github.com/penge/my-notes/tree/next

Hosted

https://penge.imfast.io/my-notes/1/notes.html

https://[GITHUB].imfast.io/[PROJECT]/[BUILD]/[FILE]

Slack

https://bit.ly/hellopenge #my-notes-next

@FirebrandCoding @JeromeDeLeon @antonlukin @bbb651

from my-notes.

penge commented on May 28, 2024 1

@FirebrandCoding @JeromeDeLeon @antonlukin @bbb651

Just released a new build #2

Manage notes (Open, Close, Delete, Export)
Export notes (Open, Closed, All) in TXT or MD
updated design

Hosted:
https://penge.imfast.io/my-notes/2/notes.html

Branch:
https://github.com/penge/my-notes/tree/next

from my-notes.

penge commented on May 28, 2024

Sounds very good.

We can discuss how it should look before I start working on it.

Based on what you said, I have following alternative way about it:

Preview

┌────────────────────────┐
│                        │
│                        │
│        Textarea        │
│                        │
│                        │
├────────────────────────┘
│ x │     Todos      │ + │
└────────────────────────┘

x – Deletes the current page. User is asked to confirm this action. Ideally by writing "YES". The easiest way to implement this would be by using a prompt. It works both on desktop and mobile. It is simple and doesn't require creating custom components.

Todos – Name of the page. Clicking the page name would show a list of other pages to choose from. If the page name is too long, it will end with ... (3 dots). The easiest way is to use option and select here.

+ – Adds a new page. User is asked to type a page name using a prompt. User can type any page name, not just 1, 2, 3.

Up to discussion:

Start with 1 page ("Notes") but be able to create up to, let's say any number of pages. Although, 10 would be probably enough. There must be at least 1 page as 0 pages doesn't make sense. After the page is created, it will be automatically switched to. That would be seen in the bottom middle. A hint that clicking the bottom middle might also change the page.
Pages 1, 2, 3, from previous version would be transferred under the same names.
I am thinking of how to Rename or Rearrange the pages. Rename could be nice. Rearrange is not that necessary as it can be achieved using Rename. It would be nice to keep 1 icon on the left and 1 icon on the right of the page name.
If page name can be any, it simplifies things in some way. Can show just one page, in the middle. No need to highlight the page or display as many can fit in.
I would try to use simple build-in components like prompt, option and select due to mobile compatibility. But, maybe I'll use custom components.

EDIT: It could be done differently.
I think pages 1,2,3, could be enough. All tabs visible at once. Or, the limit could be increased to 5. Then, + would disappear or get disabled.

If there is only 1 page visible, overview gets lost. Switching between pages becomes slow.

A different way and much easier way of switching the page could be using two arrows, one on each side. But, this gets slow too.

from my-notes.

Hyperseeker commented on May 28, 2024

I like how you took the close-page cross to the left side of the tab. No matter how many tabs are visible, it means the user can't possibly misclick between two different states (close tab or create new page).

Clicking the page name would show a list of other pages to choose from.

Hiding any sort of navigation is detrimental to user experience: it makes more difficult something that isn't supposed to be, and people don't like that. "Friction" is what UX designers are calling this.

An alternative would be to show all tabs and, on creation or removal of one, decide whether to hide a portion of them or not, based on each tab's current (post-creation/removal) width.

The width should be enough to display multiple tabs on desktop comfortably, where none is too big or too small. At a glance, I would say somewhere between 100px and 150px should be enough. It would mean larger monitors would be able to use the list of pages more effectively. (Meaningless space on 1440p monitors, especially for centered articles, is an issue already.)

If, on creation or removal, one tab would have to be lower than the set width, create some sort of a container that stores those additional tabs, that can be viewed without committing to scrolling across the other tabs (same user experience issue).

I think pages 1,2,3, could be enough.

Let the user decide. They know better what is enough for them.

They may never switch from page 1, or they may find themselves needing more than 3, on occasion or permanently.

(There are people out there that can't handle the notion of having just one "notebook". They need more than one to match their mental model. I know because several people asked me to implement this in my own app, and have cited that as one reason to stay away from a particular one-page-only app.)

Giving the user the opportunity to engage more fully with your extension is whatever the opposite of friction is ("joy"?).

Rearrange is not that necessary as it can be achieved using Rename.

You mean manually copy-pasting your notes around the pages then renaming them? That's not good. The option to rearrange the pages would serve the user much better.

I like the idea that an interface – whether UI, API, or any other – should make easy things easy and hard things possible. Rearranging is one of the things you expect to have from an app that has pages, because their order has to match the user's mental model of their notes in order to compute more easily (i.e. with less friction). It's one of the easy things. It should remain easy for the user.

If there is only 1 page visible, overview gets lost.

Not unless you have a button that indicates there may be more pages added. Those who need it will use it, and those who don't won't mind.

from my-notes.

penge commented on May 28, 2024

Some thoughts

I really like where it's going and I agree with your points.

I would say keys to good UI/UX could be:

I don't have to think about it, which brings me to second point,
it is predictable and doesn't take many forms, which now brings me to the last point,
it always works. (as one would say - No conditions apply.)

Some thoughts:

x – My main idea here was to save a lot of space (as tabs don't have to have x), also to mirror the + button which is on the opposite side (both buttons live in their own small container so I wanted to maintain that style across). I am glad you liked that.
What I see as the downside to x, is, it doesn't translate the same style as everywhere else – text editor tabs, chrome tabs. But on the contrary, closing the tab here means a completely different thing – a deletion, so, it shouldn't be easily accessible (no miss-clicks as you said).
But. Does it have to be that way? (referring to point 2). I am now thinking about a very "different" approach. Why not perceive tabs as tabs – closing them doesn't delete them. I could have this way 10s of small "files" that I could open at any point, open as many like, and delete at a different place, delete in the same manner as files. (open tabs and the order of open tabs would be saved between sessions).
Yes, Drag & Drop was the first thing I was thinking about, I just wanted to be easy on myself. I now look at the options. The wheel shouldn't be reinvented. And, the best design or principles might be old 30 years and that's cool because there was enough time to accept them as standard. I am now looking at draggable (https://shopify.github.io/draggable/examples/) which seems very nice. HTML5 drag/drop functionality works, but not on phone. I know there is at least one Kiwi browser user out there (based on one github issue in the past) and I'd like to maintain cross-device functionality. Even if it is for minor group.
What bothers me about Drag & Drop, is, it wouldn't always work the same way (points 2 and 3 under UI/UX) if I would display as many tabs I can, and hide the other tabs. Drag & Drop between open tabs could work, but doing the same between the tabs that are hidden, or dragging them to focus - that wouldn't be that simple.

I like the point number 3 – perceive notes as "files" and order them alphabetically. Drag & Drop between open files (point 5) would work just like in text editor, or browser. The x could be added back to every tab. (just a sidenote: if icons would be to the sides only, "x" could be in red circle as "bad", and "+" in green circle as good).

Conclusion. I think it's getting some shape. And even describing something that won't be used, narrows options nicely. What do you think about a very different approach like this:

Preview 2

┌────────────────────────┐
│                        │
│                        │
│        Textarea        │
│                        │
│                        │
├────────────────────────┘
│ Todos x |       │ Menu │
└────────────────────────┘

What I did here, I added x to every open tab as closing the tab is not destructive – it just closes the tab. And. I added one textual button "Menu". Icons are great but many times text is just better.

Clicking "Menu" would open the context menu in the bottom right and there would be all kind of stuff:

Amazon
Road trip
Todos
(any other pages, pages are ordered alphabetically)
----------------------
Add a new page
----------------------
Rename "Todos" (name of active page)
Delete "Todos" (name of active page)

I think it's on a good way and we can figure this out.

Today or tomorrow I will publish a new extension which I am pretty excited about – it will automatically close the youtube ads. Even before the actual Close Ad button is visible (because although it's not visible - in 3 to 5 seconds - it is already present on the page. Ads get closed pretty quickly. (video ads and banners too)

from my-notes.

penge commented on May 28, 2024

@FirebrandCoding

Screenshots

I am sending first mockups of the design.

1 Overview

https://user-images.githubusercontent.com/907255/71741663-10317100-2e92-11ea-9cfc-f4c5eee94081.png

^ ^ ^

Multiple tabs
Amazon shopping active
Menu button on the right

2 Different tab active

https://user-images.githubusercontent.com/907255/71741663-10317100-2e92-11ea-9cfc-f4c5eee94081.png

https://user-images.githubusercontent.com/907255/71741660-0f004400-2e92-11ea-9b96-6e24b1cd7a4b.png

https://user-images.githubusercontent.com/907255/71741662-0f98da80-2e92-11ea-97db-8602f3b9d40d.png

https://user-images.githubusercontent.com/907255/71741661-0f98da80-2e92-11ea-9379-768f0a2e3e95.png

^ ^ ^

Active tab is bold
Active tab can be closed with x

3 Narrow screen

https://user-images.githubusercontent.com/907255/71741663-10317100-2e92-11ea-9cfc-f4c5eee94081.png

https://user-images.githubusercontent.com/907255/71741659-0e67ad80-2e92-11ea-9e2b-21751be18d42.png

https://user-images.githubusercontent.com/907255/71741657-0dcf1700-2e92-11ea-8fdf-55aef9d57af8.png

https://user-images.githubusercontent.com/907255/71741656-0d368080-2e92-11ea-940c-278b9f9afbb2.png

https://user-images.githubusercontent.com/907255/71741654-0c9dea00-2e92-11ea-89e7-4508677fe526.png

^ ^ ^

Tabs are stacked on next line
Tabs are always visible

What do you think?

Next step would be the menu. I can take the advantage of the whole text area.

from my-notes.

penge commented on May 28, 2024

@bbb651, @JeromeDeLeon, and @antonlukin

I am inviting you to review the new design in the post above.

from my-notes.

JeromeDeLeon commented on May 28, 2024

Why Amazon shopping is kinda highlighted in black even when selecting different tab?

Instead of stacking the tabs, why not make it scrollable? If you make it scrollable, we can just change the default scrollbar to make it look the dame accross platform.

Also, make it draggable tabs in order to change the order of the tabs.

Shorcut keys:
Ctrl+Tab - move through tabs
Ctrl+N or Ctrl+Shift+N - create new notes
Delete - delet current note

When we're deleting, please, add confirmation dialog.

Note: Will Google allow such extension?

from my-notes.

antonlukin commented on May 28, 2024

+1 to scrollable tabs.
Just want to note to @JeromeDeLeon comment that Ctrl+Tab reserved to move browser tabs.
So it doesn't seem like a good idea to use this shortcut.

from my-notes.

JeromeDeLeon commented on May 28, 2024

What about Ctrl+Shift+Tab?

from my-notes.

penge commented on May 28, 2024

@JeromeDeLeon

Why Amazon shopping is kinda highlighted in black even when selecting different tab?

There was a missing span. Replaced images. It is fixed.

Instead of stacking the tabs, why not make it scrollable?

What's scrollable is not visible at a glance.

Also, make it draggable tabs in order to change the order of the tabs.

This will be.

Delete

I don't have delete key :D

When we're deleting, please, add confirmation dialog.

This will be too. Hitting x will btw not delete. It will only close the tab.

Note: Will Google allow such extension?

Why woudn't. If they can allow AdBlock, they will allow it. Anyway extension is long time published.

@antonlukin

+1 to scrollable tabs.

How would that work?

Shortcuts like Ctrl + Shift + 1/2/3 or Option + 1/2/3 might be removed, or kept. It would change the tab 1,2,3, whatever is at that position.

from my-notes.

penge commented on May 28, 2024

Sometimes I find it annoying if I open 10 tabs and everywhere I see the same notes.

What is your opinion on changing the extension to Chrome App? Or opening My Notes by clicking the icon in Chrome. That means, new tab would no longer be overridden.

https://developer.chrome.com/apps/about_apps

from my-notes.

penge commented on May 28, 2024

Also. My Notes could be open 1x per Window. What do you think? There's no need to have it open multiple times per Window. (1 Window = 1 My Notes Tab)

If you click the icon it would open My Notes.

If you click the icon again it would bring existing tab into focus.

from my-notes.

antonlukin commented on May 28, 2024

Scrollable tabs. Something like this

from my-notes.

penge commented on May 28, 2024

@antonlukin

Here you go! :D

YOU POSTED IT RIGHT BEFORE ME :D

https://user-images.githubusercontent.com/907255/71743796-0874cb00-2e98-11ea-8b69-4389712ae09a.png

https://user-images.githubusercontent.com/907255/71743795-0874cb00-2e98-11ea-9936-11e353e49a96.png

@antonlukin and @JeromeDeLeon What do you think?

Works 100%!!

EDIT: Wait I update it so MENU is always VISIBLE! Or??? It actually looks nice as is. Scroll the whole bottom. Anyway. Going to menu won't be something like I do every minute... Let's leave it like this! Mmm? :))

EDIT2: I think on Windows it might look ugly though.

from my-notes.

JeromeDeLeon commented on May 28, 2024

Did the scrollbar only applies to tabs? or is it universal? make it universal. Thanks

from my-notes.

JeromeDeLeon commented on May 28, 2024

The menu should stick on the right side. I'm good with that.

For changing the behavior of the extension? I think clicking the icon is fine.

I don't get what you mean by (1 Window = 1 My Notes Tab)?

from my-notes.

penge commented on May 28, 2024

@JeromeDeLeon

One instance per window (feature cancelled)

Chrome => Windows => Tabs => My Notes Tab => Tab in My Notes

I just find it unnecessary to open multiple times per Window. Either clicking the icon would bring into focus existing Tab in that Window if exists. Or, clicking the icon would open new Tab regardless if it exists or not. It just would happen on user request.

What do you mean by universal? Like same looking scrollbar across OS?

I am somehow against overriding the scrollbar. It's hack. In Chrome OS though, scrollbar looks best as it gives you a glimpse it's there and then only show when you need it. Second would be OSX where it also looks good. Windows or other could also look fine, if the scrollbar is on the side only. If scrollbar is always visible from both sides, that would just look ugly, don't you think?

from my-notes.

JeromeDeLeon commented on May 28, 2024

I don't think is a hack tho. I suggested it because you override the scrollbar on the tabs, so to make it look more consistent, why not override the scrollbar of the notes as well?

from my-notes.

JeromeDeLeon commented on May 28, 2024

As for the new behavior, I leave it up to you :)

from my-notes.

Hyperseeker commented on May 28, 2024

I like the latest design.

A few notes:

System defaults should outweigh overrides, since they offer better operability. You can solve the "ugly scrollbar" issue by only making it appear on hover over the tabs row, and only if tabs overflow viewport width. The Russian KFC site solved it elegantly, without overloading the browser on lower-end hardware (like the US KFC site does): check out the scrollable right under the "Меню".
If you ever want the menu to be used, make it persistently-visible as long it provides some sort of value to the user.
The closing cross should, at the very least, be bigger. If it is bigger (== its click/touch area is bigger), it should look bigger. My suggestion: separate it from the tab's title with a thin border, and make the whole resulting area clickable.
How does one add notes?
How does one delete note page permanently?
How does the note page scrolling stack? Does it move the tabs row, or does it remain within the visual rectangle of the notes part?

from my-notes.

penge commented on May 28, 2024

Hi @FirebrandCoding

Preview

1. Scroolbars

I have checked the Russian KFC site and actually it is the kind of behavior I am getting on Chrome OS by default (regarding scrollbars).

I made it explicit as advised. Scrollbar is now hidden if not used and displayed (if needed) when I hover the tabs. On Chrome OS, it looks the same. On Mac, it should look fine.

Still concerned a bit about Windows. Its scrollbar is displayed inside/inset = pushes content inside.
I guess this would result in a scrollbar pushing up the tabs on every hover. That could be annoying. Tabs don't have a fixed height (relative to Notes size). Even if there would be fixed height, if scrollbar would overlay the tabs with its 100% opacity, that wouldn't be ideal. Possible solution would be to display the scrollbar (if needed) always in case of Windows.

2. Menu button

True. I made it always visible now.
I changed the button to Add Note, or open Closed Notes.
(See Preview below)

3. Close button

Agree. I made it bigger (also its active area) and have added a light separator.
I changed the button here to hold important actions about Note.
(See Preview below)

4. Add Note, and 5. Delete Note

Initially I thought about having a menu button in the corner but I changed it.
Add Note is among most important actions (should be 1 click away) so I put it in the corner now.
(See Preview below)

6. Scrolling Notes

Notes: scrolling within its text area only, scrolling is only vertical (if needed).
Tabs: always visible, not affected by Notes, scrolling is only horizontal (if needed).

Preview

https://user-images.githubusercontent.com/907255/72071236-e6f36380-331d-11ea-82e1-3c60f8d43977.png

https://user-images.githubusercontent.com/907255/72071234-e6f36380-331d-11ea-942f-649c9c1ccbd8.png

https://user-images.githubusercontent.com/907255/72071232-e65acd00-331d-11ea-8a42-b48ad128e4c6.png

Icons

The gear icon – Rename Cooking, Close Cooking, Delete Cooking
The plus icon – Add Note, Closed Notes (closed notes that can be reopen)

Content

The whole textarea place would be used to place content (gear icon, add icon).

Next version

I soon start working on next version, once I implement the preview, I'll add new screenshots.

from my-notes.

JeromeDeLeon commented on May 28, 2024

Icons

The icon is a little big for me.

Context Menu

The margin is off.
Remove underline and color and instead of context menu, why not like when double click, change to textfield to rename and just "X" icon for closing?

from my-notes.

Hyperseeker commented on May 28, 2024

Still concerned a bit about Windows. Its scrollbar is displayed inside/inset = pushes content inside.

That's a concern.

Isn't the Windows scrollbar of the same thickness (height when horizontal, width when vertical) in all cases? It's hacky, but you could try pushing the scrollbar outside the tabs container if it's the extension is used on Windows. I can't currently recall how it's done or where to look up a similar solution, but it's been done.

Double click - cannot. Need to make it compatible with Android / touch devices / phones.

You can make double click and long press react as if it's the same event, thus adding baked-in support for cursors and touch screens. Mozilla had done a similar thing with clicks and touch events.

If you do this, you can also put (re)naming the tab to double-click/long-press, thus keeping the button simple yet offering deep functionality... as long as you can explain that to the user. Also, "Add note" + double-click/long-press = "All notes"?

Like how you made a neat little border between the tab and the context element. See if making the border full-height makes it better.

Also, I've just noticed: you moved the close button / context item to the right. Was it not working on the left side? I feel like the kind of misclick protection it offered by its positioning was neat.

from my-notes.

penge commented on May 28, 2024

Scrollbar, Buttons and Events

Scrollbar on Windows:
Scrollbar width / height might not always be the same (not only different OS, but also different density). This could work:
https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
And then calculate the padding before the scrollbar is displayed.

Button placement:
Add Note: It doesn't have a context and so it is placed to the side. Right side because new tabs are added to the end.

Note actions: This one is related to a specific Note so I have put it inside the same box. To avoid jumping from one box (Note tab) to another box (button). After all they are related and "talk" to each other, represent 1.
I tried full height separator or slightly different background color. It didn't look alright.

Some thoughts:

There could be just one button (without context), on the right side, that does everything (Open Note, Add Note, Rename Note, Delete Note,...). All those actions would be happening in the "textarea" (place for this) and the icon could be "arrow up", to indicate that. Question is if to have one big place, or rather break it down based on context (One Note, Open Note / Add Note).

Double click, Long press, Single click, Right click:
I'd like to maintain same manual (how to use it) for every device or screen size.
Long press would be reserved for rearranging the tabs.

I will certainly look more into events but need to figure out, what would be an alternative way on a phone.
Renaming the tab right at its place would be cool. What wouldn't be cool, if renaming happens at one place, but for example closing or deleting at different place (actions scattered around the place).

Drag / Drop can be enhanced. For example, If I drag the Tab (to reorder), it will also display 2 boxes in the main area. One box = Close Tab on drop, Another box = Delete Tab on Drop + Confirmation.

I would take few days time to rewrite important parts into components, as there are ongrowing visual dependencies and events. Then can come back to finish the design.
Edit: I would also make it public to test it at that point.

from my-notes.

penge commented on May 28, 2024

Icons on the side

A quick preview how it might look with icons on the side.

https://user-images.githubusercontent.com/907255/72093345-c5f33880-3346-11ea-8113-5e04d71e68a2.png

https://user-images.githubusercontent.com/907255/72093348-c68bcf00-3346-11ea-9711-47e8c6a49c52.png

Details:

icon on the left always visible
icon on the right always visible
scrolling happens in between

from my-notes.

Hyperseeker commented on May 28, 2024

You know what? I love the preview; it's beautiful and nicely symmertical – but its UX is bad. Instead of the tab itself, the user would have to locate something else to close it? Jarring, especially when every single app around them has the close button around the app bar, or the element itself.

Shame. It looks real nice.

Question is if to have one big place, or rather break it down based on context (One Note, Open Note / Add Note).

Generally, the more actions immediately available to the user (== the more buttons immediately visible, without spoiling anything else), the better. I'd say that's true for My Notes because it's a simple app that features little overhead logic (that being note opening vs. node deletion).

Renaming the tab right at its place would be cool. What wouldn't be cool, if renaming happens at one place, but for example closing or deleting at different place (actions scattered around the place).

I agree. The question, then, is to determine that should be displayed immediately and what could be tucked away into its own little menu.

I'm thinking that adding, closing, reordering, and renaming are the four things that should be available at all times. Note management (i.e. deletion and extended renaming) could be sacrificed and put into its own informational layer (i.e. hidden behind a button) because it's non-immediate and deals with higher-level app logic. That should be accessible when needed, and out of sight when not.

May I suggest that you only make the new model public once all the kinks are worked out? Testing is important, but users should only ever be given things that you're reasonably sure can work already. If the users say it's okay, it's okay: job done well. If not, then it's back to the drawing board.

from my-notes.

penge commented on May 28, 2024

Reply to FirebrandCoding

Drag and Drop
If user knows how to rearrange the tabs, this could be leveraged to do Rename/Close/Delete if these actions are displayed as 3 boxes in the main area, and they perform the action on drop.

The benefits would be: The button on the left can go away (less buttons). Need to remember one kind of interaction (drag/drop) that can be utilized to do multiple things.

The conflict would be: Drag/Drop to those 3 boxes would introduce different UI than Add button on the right. On phone, especially in landscape, that drop areas might be tiny.

Should be intuitive
I said if user knows in above. So I would stop right there.
I think user is not entitled to know. Or understand the UI out of the box. Something that is essential, like Adding a new note, should be immediately available, without a question. Renaming or Closing and even Deleting, that's also having some importance. Rearranging the tabs is really not that crucial so even if it's there (as drag/drop) and not immediately available or I don't know about it, nothing bad would happen.

If only delete
If Tabs/Notes could be only deleted (not closed), then adding a new Note could be more simple: It could add a new tab immediately with an input "New Note". That could (or also not) possibly explain that double click, or long click, can possibly change tab into its rename state, as newly added tab would look different to others. But question remains: How I apply the name? Need to click away? Unless there is not a dedicated button, confusion may arise. How to Rename? Need to create new tab? Oh, I can rename existing.

Closing the tab can be useful so I would keep it.

Only one way to do it
I think keeping least amout of ways to interact (like drap/drop, and left click) would make it easier (no right click, no long press, no double click; unless there is also an alternative, easy way).

The easiest action of all, left click, could be accompanied with drag/drop, which everyone knows from a browser, to rearrange the tabs.

What also everyone knows from the browser, is right click on the tab. So I could possibly make a custom right click menu here. The menu would have Rename/Close/Delete. Although Delete could be somewhere else, again, actions would become scattered and I'd like to see the note before I delete it anyway.

So far I think having one button (actions related to one note) + one more button (Add / Open). It would work. Question is, if some gestures would make it easier or not. 95% of time is about writing note. Other actions should be simple, no brainer.

Sure. I would make it available only here. Would be as a branch. Or could upload it (as a non extension; like a site), and share the link here.

from my-notes.

penge commented on May 28, 2024

Here's a new possible layout.

Layout

1

Details:

Next to the Tab is a Close button. It only closes the Tab. Non-destructive.
Add Note is near the last Tab. To explain the Tab can be added to the list.
On far right, is Gear button. This would open management where I can Rename or Delete Tabs.

2

Details:

I want to focus on writing Note. Closing Note is a distraction. It's hidden under Gear.
Add Note have same function, it's at the end of Tabs list.
Gear icon brings management where I can Close, Open, Rename, Delete.
The conflict here: If I want to Add New, or Open existing, I would have to go to 2 places to figure that out. To see if the Note already exists or not.

Adding a Note, or Management, are two screens between which I can change at any moment.

3

Details:

This is the easiest cleanest way possible. No distractions. One button.
Gear button opens management where I can Add, Open / Close, Rename, Delete.
Benefits: Simple. I can do all at one place without context switching (like selecting the tab first to open its management)

Management

How management would work. At the top is Add Note.
Below is a table of all notes and possible actions.

Example:

# Add Note
[Input]                 [Add]

# Notes
Amazon shopping         [Close]  [Rename]  [Delete]
Todos                   [Close]  [Rename]  [Delete]
Songs                   [Close]  [Rename]  [Delete]
Cooking                 [Close]  [Rename]  [Delete]
Movies to watch         [Close]  [Rename]  [Delete]
New article             [Close]  [Rename]  [Delete]

Articles                [Open]   [Rename]  [Delete]
Vacation                [Open]   [Rename]  [Delete]
Zumba                   [Open]   [Rename]  [Delete]

^ ^ ^
Open Notes are at the top of the list. Have the same order as tabs.
Closed Notes come next. They are ordered alphabetically.
Adding a Note adds it to the end of Open Notes. It will be Open by default.
Closing a Note will put it back to Closed Notes. Place it alphabetically.

1, 2, or 3

I like the symmetrical too. Although UX is not right there.

So it's 1,2, or 3. Possibly 3. Management is not a place where I spent lots of time.

Here's the previous to compare:

from my-notes.

Hyperseeker commented on May 28, 2024

My take on this:

"close note" button, on the left side of the tab
"create note" button, fixed at the very right edge of the tabs row
"manage notes" button, just to the left of the "create note" button
to rename a tab, open it and click/touch the title of the tab (exit editing by clicking anywhere else)

EDIT: I like how the tabs management window looks. Will it open instead of the notes? or as a modal?

Preview of my idea

[Amazon shopping] [Todos] [Cooking | ❌] [Movies to watch] [New article] (empty space) ⚙ | ➕

from my-notes.

penge commented on May 28, 2024

Reply on points 1-4

I check the design how it could look/work with these 1-4 points; ~~and put some screenshot tomorrow.~~

Some commentary (pros/cons):

If close is next to active Tab = need to activate Tab first in order to close it.
If close is next to every Tab = too many icons.
If close is in management = can close multiple tabs; can open multiple tabs too.

Close and Delete are "similar", I think they should be together. One puts Note away temporarily, other completely. Compared to browser, where is only one way to close. Here are two.

Create could immediately put a new tab at the end, with editable title. I get quickly to creation, but don't know, if note exists (with same or similar name).

Compared to browser, where is one way to open tab, here again, two. One creates new, other opens existing. Again. Maybe having them together would be better.

Opens Management but Rename and Close wouldn't be there because of points 1 and 4. That would leave Open/Close, and Delete.

"Management" in that case wouldn't manage much.

Rename on click could work. And same would apply if new tab is added.

Management:
Management would temporarily replace the text area (as there is plenty of space to use, good for mobile). Tabs would continue to be visible. If Rename, Close, Add, are outside of Management, in Tabs area, it wouldn't be twice in Management.

from my-notes.

penge commented on May 28, 2024

Cool suggestion!

It is now implemented.

How did you manage to set the caret position?

I have btw used a different approach here. I found it easier and also more elegant. That is:

title is all pre-selected on rename (double click), so it can be quickly changed
title for last-added new tab (add button) is also all pre-selected, so it can be quickly defined

That means rename and last-added new tab follow the same style. In case of new tab it is more beneficial as default new tab title ("New Note") needs to be replaced (caret would make it harder).
But in both cases the main benefit is, it is visually more prominent. Compared to caret it doesn't get overlooked. Pre-selected title looks nice.

In comparison to input, it is way more functional. The tab gets stretched or squeezed based on the title as I am typing. I like it! I stopped writing notes, I play with tabs now, literally.

from my-notes.

Hyperseeker commented on May 28, 2024

I like the strategy to auto-select for rename. You're right: it's more effective than click-based caret placement.

For my case, I adapted this component to work for text-based nodes that have to be selected to be edited. You can see it in action on the app's website: click on any note until it's bright-red, then click on any point in text. It's imprecise at the moment, in that it sometimes places the caret after the letter you clicked on, even if the click position would suggest that you wanted to place caret behind it.

from my-notes.

penge commented on May 28, 2024

I checked the app. The design for the boxes is nice. And the caret position worked well!
What happened though after a minute of testing, is this – screenshot.

What I did and could be a way to reproduce: I clicked the box to edit it and then I clicked the other box I wanted to edit next. Clearing site data didn't fix it.

There is also some misplacement for the footer on the phone – android.

The way to reproduce: Scroll to the bottom of the page and further.

from my-notes.

Hyperseeker commented on May 28, 2024

I think I know what causes the first bug: something similar has already been reported. The footer being a mess on mobile is also a known bug. I'll get to them as soon as I'm done with the current project.

How are the My Notes tab looking? Is there anywhere I can check without having to visit this issue?

from my-notes.

penge commented on May 28, 2024

I've run into an unexpected bug:

# mithril/api/mount-redraw.js:15

TypeError: Cannot set property 'nodeValue' of null
    at updateElement (render.js?a4e3:472)
    at updateNode (render.js?a4e3:416)
    at updateComponent (render.js?a4e3:488)
    at updateNode (render.js?a4e3:419)
    at updateNodes (render.js?a4e3:302)
    at updateElement (render.js?a4e3:477)
    at updateNode (render.js?a4e3:416)
    at updateComponent (render.js?a4e3:488)
    at updateNode (render.js?a4e3:419)
    at updateNodes (render.js?a4e3:302)

It happens when deleting Notes. Notes in store are deleted correctly though, they are just, for some weird reason, rendered wrongly – as I would always delete the last Note. Cannot render something that doesn't exist.

Example:

If I had Notes with IDs 1,2,3,4,5 and deleted 4, in store it will be as 1,2,3,5.
But Mithril is trying to render 1,2,3,4 as if I would have deleted the last Note. It would by coincidence work if I would have deleted the last Note, but other that, I end up with the error.

I'll make a switch to React and see how that works. React is battle-tested so I expect it to work there.

Once fixed, I'll put a branch here, host it, and set up some better channel for talk.

Talk:

Talk, as well as support, can continue on Slack. What do you think? Any preference?

Edit: ^^ Fixed. It was just wrong use of the key. Anyway. I would appreciate if it would tell me as it does in React. Something like Warning: Each child in a list should have a unique "key" prop.
As I am half-way through React, I will finish it and compare the solutions. React is a little bit more talkative but with hooks it's not that bad.

Edit2: Decided to keep React. Its devtools, support and docs, are just better option for all who'd like to contribute to the project.

Edit3: Soon I will add a branch, hosted My Notes to quickly check it out. And Slack for chat.
It will be first testable version. Management screen and connecting it to Chrome Storage (as the extension does) would be the next step.

from my-notes.

JeromeDeLeon commented on May 28, 2024

Everything is going pretty well aside from the color that doesn't look appealing at least for me and the animation of gear.

from my-notes.

penge commented on May 28, 2024

I'll put an updated design in 10 minutes.

It will have different tabs (with I hope better design and better contrast).

I also try to remove the animation so design and no-animation things can be compared together.

I also create a new Issue (continuation to this one) as this one is getting huge.

from my-notes.

JeromeDeLeon commented on May 28, 2024

Yeah, I hardly noticed the animation.
Users will focus only on the settings that's why I think is unnecessary.

from my-notes.

penge commented on May 28, 2024

My intention with the animation was to tell Manage is open. Something is going on there and needs to be clicked again to come back.

Here's a new design btw:
https://penge.imfast.io/my-notes/3/notes.html

I will create new issue because this one is loading long.

from my-notes.

Comments (44)

Branch

Hosted

Slack

Preview

Preview 2

1 Overview

2 Different tab active

3 Narrow screen

Preview

Icons

Content

Next version

Next

1

2

3

Management

1, 2, or 3

Related Issues (20)

Recommend Projects

Recommend Topics

Recommend Org