Aesthetically, is there any way to improve the current options group to make it more like the older style and/or better separate out sections (as mentioned above)?
Also, can we make the buttons in the editor screen smaller? They’re quite large on mac
After several days using 45alpha3 for many hours a day, I’m still experiencing frequent crashes.
Unfortunately I am unable to describe the steps necessary to reproduce the problem, since the crashes seems to happen suddenly and randomly. But most (not always) of the times they occur after editing a card; and I always get this strange blank window just in the center of the screen for a few seconds before the program just gets closed:
I’ve never experienced any crashes before alpha3. Am I the only one with this problem? Is there anything I can do to provide more clues about it?
Other than that, the program and the new features are working great 
In the latest alpha version(anki-2.1.45+alpha3_f91f00a5-windows.exe), when night mode is enabled in the editor, I find it a bit hard to recognize the inner box shadow of the tool button that indicates whether the caret position is in bold, italic or underline.
Also, when night mode is enabled, hovering the mouse over the “Change Color(F8)” button causes the button to turn gray.
I agree, the inset shadow could be more prominent to make the pressed state more distinguishable.
That happens because the color picker symbol isn’t an image or text, but rather a background (with several gradients) itself:
background:
content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
border-box #666;
The CSS rule for hovering (change background to that gray color) overrides the colored background.
While we’re at it, I would like to bring back some attention on the following topic, because I feel like it hasn’t been discussed thoroughly yet:
This sort of button is used by all major text editors. In my opinion, this style is a lot more intuitive and saves space (because just one button is needed instead of two).
Google Docs:
LibreOffice:
Microsoft Word:
TinyMCE:
I think the best way to get to a satisfactory design would be to let the community experiment with that page and compare several approaches.
@hengiesel I tried to get to the HTML structure of the deck options with
http://localhost:40000/_anki/pages/deckoptions.html
but it doesn’t contain the Svelte components:
I also tried with AnkiWebView Inspector by changing the window modality to Qt.WindowModal, but that didn’t help either.
Is there any way to get Svelte to compile in order to see the finished HTML structure of the page? I would like to get that page into a format everyone can easily tinker with. I think that would be more efficient than modifying the Svelte components and restarting Anki each time.
Solved: The solution was in plain sight. While I don’t know how to give window.location.hash that #test prefix, I simply changed that script (in the picture above) to always execute. Feeling like an idiot haha.
@kleinerpirat
An overhaul of the color buttons was already planned anyway. I’ll see what I can do.
@NameLessGO
The sticky fields feature was made unobtrusive on purpose. The idea is not too overload the UI too much, as that will also make it uglier/crowded.
Here is my first proposal for the deckoptions layout.
Changes to original:
<h2> font size from 2em to 1.5emwidth: 100% instead of width: min(100vw, 35em)
<h2> + content in <div class="options-box"> (grid element).outer.svelte-fbeeyr a grid containergrid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); )Hit “Edit on Codepen” to get a bigger window.
This makes the page responsive and utilizes much more of the available screen space.
Not sure about the flow direction yet. Perhaps top to bottom and then to the next column would be better.
@everyone if you want to create your own redesign, simply fork the Codepen from my post above (it is set to default design).
Update: I made a PR on GitHub.
Here is a screenshot:
@kleinerpirat That is very nice. I love it!
Save learning steps is not working in alpha3:
Go to any deck >Deck options > change values > Save
Nothing is saved.
OK, I think I’ve found the culprit:
Maybe somebody can replicate.
Is there no more preview button in the browser?
Thanks for the bug reports, those should be fixed in the next build.
@hkr please feel free to send through a PR that makes the necessary tweaks - you clearly have the skills in this area
@kleinerpirat hmm, I’m not sure what is best here. With two columns it doesn’t look bad, but depending on the direction someone reads, less essential options may be read before more common ones. And if you expand the width to 3 or more columns, it starts looking a bit jumbled. @hengiesel’s suggestion of a navbar on the left is another way of filling out the space, though with the current amount of options, it feels a bit unnecessary. What does everyone think?
@AnKingMed the preview button should be next to fields/cards
I think a two-column layout (e.g. via media query for wide screens) would probably suffice to get all of the options onto the screen.
I suggest the following content flow:
The columns could be more distinctly separated with a sort of vertical <hr> in between to guide the reader’s eye along the columns instead of row-for-row.
It isn’t about filling out the space though, it’s about not wasting it.
Henrik’s refactoring (#1207) already looks a lot better with the smaller inputs and the better stretch on wide screens, but a second column would easily fit in there:
The title labels are scaled depending on the window’s width now, which is good for narrow aspect ratios… They get too big on full screen, though. Almost to big to read without moving the eye along the word. 1.5em at max would feel less in-your-face.
To add to what @kleinerpirat said, I think that defaults on a single column cover the case where people can read the options in the intended way. Specially for new people
When someone resize the window horizontally, they are expecting the @kleinerpirat design to happen and feel sad when the window grows larger but the content doesnt move with it 
You can also have a very simplified options with a more or advanced options button at the end so it doesnt really happen normally either
Looks like its an add-on issue. I’ll look more into it, but since it is potentially just the editor not being able to fill the space, I’m attaching a picture here.
UPDATE: It’s the Customize Keyboard Shortcuts add-on. Not sure why that is affecting anything.
Thanks, @dae. If there is something I can contribute to Anki’s codebase, I will try to submit a pull request.
Alpha 4 is now available.
@kleinerpirat I think I like that the most of the options that have been suggested so far. If anyone disagrees, please jump in; if I don’t hear anything then I’ll assume that’s the best way forward.
Thanks!
Just a minor detail, the info text here maybe should say: “Delays can be in minutes (eg 5m), hours (eg 1h), or days (eg 2d).”
Talking about minor things, it looks like every tooltip has a trailing new line. Or is the bottom padding supposed to be like this?
