Beaver-Notes
Some issues found on android
I try to build and debug on my Android. I'm not sure if this is a problem with my configuration.
-
Encounter CORS.
-
The title is blocked.
-
I can't call my keyboard. when the cursor disappears. Especially the ended element such as the table.
Well, here are some issues about experiences:
-
I think it would be better to put the language selection first or merge the language selection page with the welcome page. The carousel in here looks very strange.
-
The interactive design on this page has some problems. I waited for a while hoping it could disappear by itself. Then I realized I needed to tap the
start nowbutton myself. -
It would be better to put the add button in the middle. It would be nice to add an edit button.
-
Looks very ugly actually in here. These three pictures are too crowded. If pictures are not appropriate for display, only using text is OK too.
Thanks for your assessment. The CORS issue is driving me crazy since Android is theoretically running in HTTPS instead of HTTP. That being said, the issue doesn't appear on iOS, which is weird. I'm working on fixing the title and adding a way to focus the editor when pressing Enter. Regarding the welcome screen, I think I'll be redesigning it to provide a better UX. The idea to add an edit button like in Beaver Notes is brilliant, and we could move the add button to the center. As for the settings, I wanted to provide the same experience we have in Beaver Notes, but we could opt for a simple selector displaying the three options.
I fixed the title issues, and CORS doesn't seem to be complaining in Android Studio. I'll push the changes to the development branch. I'll work on a little diagram to rethink the whole welcome page, and I'll share it with you later to get your opinion.
I've worked on the title field, improved labels, and linked notes. I also fixed the UI/UX on tablets and am currently working on a redesign of the welcome screen. Here's what I came up with. What do you think?
The toolbar covers the title.
I tried it out basically, and the results were right, but the complex operations were still not very smooth. For example, table operations have improved before, but the experience on mobile is still not as good as on a PC. It is difficult to keep it consistent with PC; the mobile phone has its peculiarities. In some situations, it might be better to set the notes to read-only. Additionally, the back button integration is not very good; sometimes when navigating back from a secondary page, it jumps to the home page or even exits the app.
Regarding the design draft of the welcome page, I made some changes to the mobile section based on your design to express my ideas. In principle, I believe we should try to align with common mobile operating habits and adhere to native logic in the design as much as possible. Additionally, I prefer to place the content in the middle to lower part of the screen to make it easier for users to interact with and to align better with the visual sense of gravity. As for the iPad, I don't have many opinions since I haven't used it much and rarely use tablet applications so I regard your opinion.
I've added a design proposal to the Figma board to have the bottom toolbar change according to the selected element. I also fixed the toolbar, which shouldn't appear on mobile. As for the Tablet UI, I'll handle it myself, making the toolbar replicate the behavior proposed for the bottom toolbar on mobile.
The toolbar transition logic is quite simple: if nothing is selected, we get the default state. If one or more words are selected, the toolbar switches to the editor state with text formatting options. When a user is editing a table, the toolbar switches to the table editor. We determine what's active thanks to Tiptap with the following code: editor.isActive('Table').
By default, toggling the heading will affect the whole paragraph. I think it would be better to move it to another place. About the editing table, could there be a priority issue here? If people want to insert images or files into the table, how could they accomplish it?
I suppose we could move the headings in the default toolbar and add a plus button to the table editor to add images and files.
I think we can also collapse the default toolbar. Anyway, this is not a very important issue.
I've edited the bottom toolbar in the editor to be more suitable than the Figma design. The toolbar is now scrollable and sits atop the keyboard while typing. It adapts based on the selected element: default mode, editing mode (when text is selected), and table editing mode (when typing inside a table). Selecting text in a table switches the toolbar to editing mode. A scrollable toolbar is more user-friendly and versatile than the Figma design. I've attached a video to better demonstrate the workings of the toolbar.
https://github.com/user-attachments/assets/93163afd-7cd6-44a5-976c-61e1944d2b7e
I've updated Beaver Pocket and added some new features to reach feature parity with Beaver Notes. Check it out and let me know if you find any issues, so we can iron out all the quirks and release a release candidate before the final release.
Got an error when I tried to enter the focus mode.
After entering the editing page, using the return gesture will return to the desktop. On the editing page, the toolbar will shake when the viewport changes. When I click on the icons on the toolbar to take action, the keyboard suddenly collapses then pops up. Chinese font seems thin. Maybe it is related to the system font.
The above and below parts are placed as close to the center as possible. It looks too scattered.
Another thing I need to say is the import path. MacOS is not case-sensitive, but Linux is. I've encountered this problem more than once.
I'll work on fixing the issues with the import path on Beaver Locker. If you could handle that while I work on Beaver Pocket, it would be brilliant. Thanks!