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

Gui refactored into separate views | rewrite of keydown handler into event handler #873

Merged
merged 13 commits into from
Mar 10, 2024

Conversation

KyleKlus
Copy link
Contributor

@KyleKlus KyleKlus commented Feb 9, 2024

Description

This PR implements a refactor of the flashcard-modal.tsx into serveral view files (DecksListView, FlashcardReviewView).
This was done to ensure code maintainability for possible later overhauls (eg. issue #872). Like this every view has its separate file, where only the code for this view is put.

Another thing, which this PR implements is the rewritten keydown handler. Now it is written as proper event listener, with extensibility (Through switch statements) and readability in mind.

Changes

  • Improved how spacing between the buttons was done
  • Centered the button groups, which wheren't centered
  • Fixed a hack in the response of the cram card mode
  • Refactored each view into it's own file, to reduce clutter and having a monolithic file
  • Fixed keydown handler with a proper event handler and a switch

@ronzulu
Copy link
Collaborator

ronzulu commented Feb 10, 2024

Hi @KyleKlus thanks so much for doing this, especially with the detailed explanations on #870.

Hopefully I'll get a chance to review over the next couple of days. I kind of got excited about #748, and how much research has gone into the https://github.com/open-spaced-repetition/fsrs4anki algorithm.

Actually, would love your thoughts regarding #851 whilst you are "in the neighborhood"

Cheers
Ronny

@KyleKlus
Copy link
Contributor Author

KyleKlus commented Feb 10, 2024

The new algorithm in #748 really looks nice and I think it could be a great benefit for the users. Maybe it could be first implemented as an opt-in feature so it can be tested first, how it behaves and feels.

I also had the same idea as mentioned in #851, but just for the normal review mode; I think it is particularly useful, so that one roughly knows how long the learning session might still take. And it would be very easy to implement it, as all data is already there and the ui has still some space for a subheading.

As for the random mode, your way of showing the remaining count is a better metric to go by and I think we can even remove the number of cards in the subdeck, as they are not relevant in this mode; only in the other modes. I am going to think a bit about how to show this information, maybe I'll find a better way of presenting this 🤔.

The only thing to consider with the subheading is a possible jump in the ui, if the root deck has cards and then after those are done it switches to the subdeck. The subheading could push the question section down if it appears, so I would pre allocate the space for the sub deck info, so it doesn't push anything down when it appears.

I would be happy to implement that after I've made the other ui changes in #872 😊.

@ronzulu
Copy link
Collaborator

ronzulu commented Feb 10, 2024

The new algorithm in #748 really looks nice and I think it could be a great benefit for the users. Maybe it could be first implemented as an opt-in feature so it can be tested first, how it behaves and feels.

I was thinking the same 👍

I also had the same idea as mentioned in #851, but just for the normal review mode; I think it is particularly useful, so that one roughly knows how long the learning session might still take.

Good point, I hadn't thought of that

The only thing to consider with the subheading is a possible jump in the ui, if the root deck has cards and then after those are done it switches to the subdeck. The subheading could push the question section down if it appears, so I would pre allocate the space for the sub deck info, so it doesn't push anything down when it appears.

I think I understand your point, personally it wouldn't bother me if occasionally after completing a card during the review, the next card is displayed at a slightly different vertical position because of the extra info. I only use Obsidian on the desktop so vertical space isn't a premium, as long as on a mobile the pre allocated space doesn't seem wasted when it's blank.

I would be happy to implement that after I've made the other ui changes in #872 😊.

Awesome!

@KyleKlus KyleKlus closed this Feb 11, 2024
@KyleKlus KyleKlus deleted the small-ui-overhaul branch February 11, 2024 09:59
@KyleKlus KyleKlus restored the small-ui-overhaul branch February 11, 2024 10:28
@KyleKlus KyleKlus reopened this Feb 11, 2024
@KyleKlus
Copy link
Contributor Author

KyleKlus commented Feb 12, 2024

Hi again, I am done now with all the ui improvements I wanted to do in #872. The PR for the this would build upon this unmerged PR, as I finalized/improved the view switching a bit there 🚀 (Link to the changes).

So would the reviewing process be easier if I wait until this one is finished or would it be better, if I close this one and open another one with all the ui changes at once?

I just don't want to overwhelm the review process with too many changes 😇.

@ronzulu
Copy link
Collaborator

ronzulu commented Feb 12, 2024

Hi @KyleKlus, I like your idea to make the UI changes under a separate PR. That way this PR is purely for the refactoring. Cheers

docs/changelog.md Outdated Show resolved Hide resolved
src/gui/DecksListView.tsx Outdated Show resolved Hide resolved
@ronzulu
Copy link
Collaborator

ronzulu commented Feb 13, 2024

Thanks for refactoring flashcard-modal.tsx, it's such a clean design now!

On this page lint lists unused variables which it considers a warning:
https://github.com/st3v3nmw/obsidian-spaced-repetition/pull/873/files#diff-fe52921716eb1c0226503468d074ab92ec012e027d6ada62341e7cd138d6f270

I'm surprised that the lint test above indicates that it passed. It seems that it doesn't consider warnings as a reason to block the merge.
image

Would be good if you looked at the warnings and fixed the code (usually simple things - remove unused variables, use const where appropriate etc)

Also I'm wanting to check on my Android phone, but can't work out how to overwrite the main.js file. In fact I can't even find it. Maybe I'll try https://tfthacker.com/BRAT

Cheers
Ronny

@KyleKlus
Copy link
Contributor Author

I think, I fixed now all the warnings. Sry, that I didn't removed the unused variables; I don't know why I forgot that 😅.

@st3v3nmw st3v3nmw merged commit 0b57099 into st3v3nmw:master Mar 10, 2024
1 check passed
@st3v3nmw
Copy link
Owner

LGTM, thanks!

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.

3 participants