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

Improve Color Scheme for Template to Enhance Readability #147

Closed
kristineds opened this Issue Oct 19, 2015 · 5 comments

Comments

Projects
None yet
3 participants
@kristineds
Contributor

kristineds commented Oct 19, 2015

Referencing: https://wordpress.org/support/topic/two-suggestions-8?replies=1


I must admit, though, that I have great difficulty reading the code sections for the templates. The colors just don't stand out enough against the black background. Could you, perhaps, experiment with some other color schemes to enhance readability?


Templates referred to are the Email header/footer and Site templates. Perhaps something like this:
Color Scheme: [#282A36, #DA5647, #F5AB55, #71DA8C, #57AFBD]

screen shot 2015-10-19 at 6 56 34 pm

@kristineds kristineds modified the milestone: Next Release Oct 19, 2015

@raamdev

This comment has been minimized.

Contributor

raamdev commented Oct 20, 2015

It would be nice to have a toggle somewhere that allows either changing the style, or just disabling syntax highlighting altogether. (Both would be ideal.)

@jaswrks

This comment has been minimized.

Member

jaswrks commented Oct 27, 2015

Overview

This syntax highlighting is a feature provided (and themed by) CodeMirror. See theme demos to experiment with other themes. See also: this line of code in Comment Mail where the CodeMirror theme is loaded; i.e., to get a general sense of how this works in Comment Mail.

Next Actions (Pro Version)

  • New feature branch in the websharks/comment-mail-pro repo.

  • After this line add a new option key.

    'template_syntax_theme' => 'ambiance',
  • Replace this line of code with the following:

    wp_enqueue_style('codemirror-'.$this->options['template_syntax_theme'].'-theme', set_url_scheme('//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/'.urlencode($this->options['template_syntax_theme']).'.min.css'), array('codemirror'), NULL, 'all');
  • After this line add the following.

    $_panel_body .= '<table>'.
                   '  <tbody>'.
                   $form_fields->select_row(
                     array(
                         'label'           => sprintf(__('Syntax Highlighting Theme', $this->plugin->text_domain), esc_html($this->plugin->name)),
                         'placeholder'     => __('Select an Option...', $this->plugin->text_domain),
                         'name'            => 'template_syntax_theme',
                         'current_value'   => $current_value_for('template_syntax_theme'),
                         'allow_arbitrary' => FALSE,
                         'options'         => array(
                             'ambiance'      => __('Ambiance', $this->plugin->text_domain),
                             'base16-dark'   => __('Base 16 Dark', $this->plugin->text_domain),
                                         // add additional lines each for each of the available themes.
                         ),
                         'notes_after'     => '',
                     )).
                   '  </tbody>'.
                   '</table>';

    Note that a select menu will be presented which allows a site owner to choose from any of the available .min.css theme files listed here.

    You will need to modify the code snippet above to include all available theme options; i.e., add new options to the 'options' => array in the snippet above. The only two listed at the moment are ambiance (default) and base16-dark. There are many others to choose from.

    With the above in place, you should find that a new configurable option will appear here.

    2015-10-27_00-59-17

  • Test your changes to be sure that it is possible to change the syntax theme as expected.

  • Submit PR.

Next Actions (Lite Version)

  • New feature branch in the websharks/comment-mail repo.

  • In the websharks/comment-mail (lite variation) repo, after this line add the following:

    'template_syntax_theme',
  • After this line add a new option key.

    'template_syntax_theme' => 'ambiance',
  • Replace this line of code with the following:

    wp_enqueue_style('codemirror-'.$this->options['template_syntax_theme'].'-theme', set_url_scheme('//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/'.urlencode($this->options['template_syntax_theme']).'.min.css'), array('codemirror'), NULL, 'all');
  • Delete the existing menu-page.php file in the lite version and replace it with an exact copy of the menu-page.php file that you worked on in the pro version; i.e., the one that now includes a new configurable option that allows you to choose a syntax theme.

    Note that both the lite/pro versions can use the same menu-page.php file. The file will automatically adapt accordingly. This also allows for a pro preview in the lite version. The syntax theme will only be configurable in the pro version however.

  • Test your changes to be sure that this option shows up in a pro preview in the lite version.

    2015-10-27_00-59-17

  • Submit PR.

@jaswrks

This comment has been minimized.

Member

jaswrks commented Oct 28, 2015

@kristineds While working on this issue feel free to choose a different default theme if you find another that you feel would work better as a default syntax theme/style.

The current default is:

'template_syntax_theme' => 'ambiance',

kristineds added a commit to websharks/comment-mail-pro that referenced this issue Oct 28, 2015

kristineds added a commit to websharks/comment-mail-pro that referenced this issue Oct 29, 2015

kristineds added a commit that referenced this issue Oct 29, 2015

kristineds added a commit to websharks/comment-mail-pro that referenced this issue Oct 30, 2015

kristineds added a commit that referenced this issue Nov 8, 2015

kristineds added a commit to websharks/comment-mail-pro that referenced this issue Nov 8, 2015

jaswrks pushed a commit to websharks/comment-mail-pro that referenced this issue Nov 9, 2015

JasWSInc
Merge pull request #24 from websharks/feature/147
Add syntax highlighting theme options; See: websharks/comment-mail#147
@jaswrks

This comment has been minimized.

Member

jaswrks commented Nov 9, 2015

Next Pro Release Changelog:

  • (Comment Mail Pro) Theme Syntax Highlighting: This release makes it possible for the color-scheme used in template file syntax highlighting to be changed to any one of 30+ options. See: Dashboard → Comment Mail → Config. Options → Template-Related Settings. Props @kristineds. See also: this GitHub issue if you'd like additional details.

@jaswrks jaswrks closed this Nov 9, 2015

@websharks websharks locked and limited conversation to collaborators Dec 24, 2015

@raamdev

This comment has been minimized.

Contributor

raamdev commented Dec 24, 2015

Comment Mail v151224 has been released and includes changes from this GitHub Issue: See the v151224 announcement for further details.


This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#147).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.