Skip to content
This repository has been archived by the owner on Dec 15, 2022. It is now read-only.

UI: task list checkboxes in the editor's theme #592

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

Benni3-1415
Copy link

@Benni3-1415 Benni3-1415 commented Mar 7, 2021

Description of the Change

  1. The checkboxes are getting the input-checkbox tag in Javascript, so that they are rendered like the editor's checkboxes.
  2. The obsolete settings are removed from the global style sheet.
  3. The editor's theme will be overwritten in the GitHub theme file.
  4. The position and margin adjustments are made for the different themes (including GitHub's).

Alternate Designs

  • Should the -webkit-appearance: checkbox; checkbox used for untested themes? (It would be a deviation from the editor's theme.)
  • Should the checkboxes centered on the lowercase letters (vertical-align: middle;) not on the uppercase letters (It wasn't like that before.)
  • The task list items aren't aligned with the list items in the exported HTML and doesn't scale in the Gecko and WebKit engine but in Blink engine.
    Like in the Github's theme.
    They can be aligned by using:
    transform: translate(~"calc(-50% - 13px)", ~"calc(-50% + 12.5px)");
    and moving the position: absolute; line back to the markdown-preview.less file.
  • If possible:
    Redirecting the .input-checkbox stylesheet to the checkboxes in default mode (without Javascript) so that there are no unnecessary input-checkbox classes in the GitHub and exported HTML.

Benefits

This lets the task lists checkboxes use the editor's theme (in the default preview mode):

tasklist

Possible Drawbacks

Only the themes One, Atom, Atom Material, Seti, Nucleus Dark and Solarized are tested!
With other themes, the space between the checkboxes could be too small or the boxes could be slightly off centered.

Note

The HTML based list doesn't get the class input-checkbox assigned,

<ul>
<li class="task-list-item"><input checked disabled type="checkbox"> Check</li>
</ul>

how a list with a checkbox doesn't get the class tasklist assigned.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant