mu4e visual configuration

[Eduardo Mercovich]

Hello everybody.

There is a certain minimalist elegance in a text only display which I'd like a lot, and I started trying to customize how mu4e looks like.
However, being new to the world of Emacs I found it not so easy... ;)

After getting the customize-face and the inherit concepts, now I see 2 areas in which some work may soothe the path.

1. the design: that one is easy and can be discussed with the interested parties, if any.
2. the faces support: today they are inherited from Emacs, and this makes it really difficult (at least for me). Would it be possible to define a basic face for mu4e, and from there create a tree of face customizations that may do easier to touch this?

As an example, here is a possible-could-be (css like) groups and inheritance:
 
mu4e-face        ;; the basic face (basic font family, size and colors)
   home            ;; the initial menu

   list                ;; any list (basic font family, size and colors)
      headers      ;; list headers (font family, size and basic colors)
      date           ;; customizations over list-face-definition specific for headers
      flags           ;; customizations over list-face-definition specific for flags
      from           ;; customizations over list-face-definition specific for from
      to (or from/to) ;; customizations over list-face-definition specific for to (or from/to)
      subject       ;; customizations over list-face-definition specific for subject

   reader           ;; basic reader face (basic font family, size and colors)
      headers      ;; customizations over reader-face-definition for headers
      body           ;; customizations over reader-face-definition for text body
          links       ;; customizations over reader-face-definition for links in email body
      signature     ;; customizations over reader-face-definition for sigs.

   editor            ;; basic editor face (basic font family, size and colors)
      headers      ;; customizations over editor-face-definition for headers
      body           ;; customizations over editor-face-definition for text body
          links       ;; customizations over editor-face-definition for links in email body
      signature     ;; customizations over editor-face-definition for sigs.

Of course if anyone is interested on doing this, I offer volunteer myself to collaborate. :)
I don't know how to program, but I can help with:
* the design (at least, 2 basic styles, clear and dark),
* the face specifications (not the program, but yes the specs) and
* comments to help others touch it, and the manual documentation too.

I hope it isn't so unclear... ;)

Again, Dirk, thank you for such a great tool. :)))

Best...
--
e

[Dirk-Jan C. Binnema]

Hi Eduardo,

On Friday Nov 28 2014, Eduardo Mercovich wrote:

> Hello everybody.
>
> There is a certain minimalist elegance in a text only display which I'd
> like a lot, and I started trying to customize how mu4e looks like.
> However, being new to the world of Emacs I found it not so easy... ;)
>
> After getting the customize-face and the inherit concepts, now I see 2
> areas in which some work may soothe the path.
>
> 1. the design: that one is easy and can be discussed with the interested
> parties, if any.
> 2. the faces support: today they are inherited from Emacs, and this makes
> it really difficult (at least for me). Would it be possible to define a
> basic face for mu4e, and from there create a tree of face customizations
> that may do easier to touch this?

The faces are defined in mu4e-vars.el; 35 at this time. Mostly, they
derive from emacs' built-in face to ensure that they look somewhat
consistent, even when changing a theme.

Now, if you want to change those, I think the easiest path would be to
create your own theme; this is one I am using:
https://github.com/djcb/dream-theme

There are some online tools to play a bit with themes:
http://emacs-theme-creator.appspot.com/

Emacs faces / styles are not as expressive as css, but they do allow for
quite a bit of tweaking.

Cheers,
Dirk.

--
Dirk-Jan C. Binnema Helsinki, Finland
e:dj...@djcbsoftware.nl w:www.djcbsoftware.nl
pgp: D09C E664 897D 7D39 5047 A178 E96A C7A1 017D DA3C

[Eduardo Mercovich]

Hi Dirk.

> > [...] I started trying to customize how mu4e looks like.
> > [...] 2. the faces support: today they are inherited from Emacs,
> > [...] Would it be possible to define a

> > basic face for mu4e, and from there create a tree of face customizations
> > that may do easier to touch this?

> The faces are defined in mu4e-vars.el; 35 at this time. Mostly, they
> derive from emacs' built-in face to ensure that they look somewhat
> consistent, even when changing a theme.

I do understand, but... should mu4e be so consistent with emacs?

> Now, if you want to change those, I think the easiest path would be to

> create your own theme; [...]

I understood that part of theming, sorry I was unclear... my question is: is it possible to create a hierarchical definition of font faces for mu4e, starting with one "mu4e-basic-face" only, so it is easier to tweak from then on?

Maybe better: how do I create that tree of hierarchical font-face definitions? (as I'm learning, in emacs question is not "if", but "how"). ;)

Emacs font-face definitions are enough to make something not only useful, but beautiful and soothing also.

Some ideas to explore:
* changing to bold in read/unread changes the font screen horizontal size and "moves" the line when you pass over it; maybe we can use foreground and background colors to show read/unread.
* Unread mails should call more your attention that read ones. Same thing could be done for specific flags.
* Lists could use a condensed font, so vertical (side to side) reading it's made easier while allowing more space for the mail content (there is a limit to messages wide, so let's try to make a better use of our big/wide horizontal screens).
* Certain fields (sender, subject) may be more important that others (date); this is true for lists, reading and writing.
* Body text is the core, should be the most legible object, more than the headers.

And so on.
Creating this "tree" of definitions would make it easier to tweak all this... so, how it is done? :)

Sorry for such a long rant. I know by professional experience that we humans are visual animals, and I'd like to make mu4e not only easier to use, but beautiful and easier to tweak also if that it's possible. :)

Best...

--
e

[Jay Dresser]

The package 'load-theme-buffer-local' will let you have a theme for mu4e that is different from your usual emacs theme.

[Eduardo Mercovich]

Hi Jay.

> The package 'load-theme-buffer-local' will let you have a theme for mu4e that is different from your usual emacs theme.

Thanks a lot, sorry I am unable to express myself...
I'd like to order hierarchically the face-definitions (clases in CSS language) that exists defined for mu4e, to make easy to customize mu4e UI.

I will try to learn a bit more of emacs face customization for this. :)

Thanks...

--
e

[Dirk-Jan C. Binnema]

Emacs faces support inheritance, but only when you define them. They do
not dynamically change based on context like in CSS. Also, you cannot
really have contexts (like <div> or <span>) in emacs.

You could emulate it a bit by having a lot more context-specific
defface's and specify them manually; but that would be a bit of a
nightmare, I think... So, probably best to try first to see how far you
get with the current faces and some theming.

[Eduardo Mercovich]

Hi!

> Emacs faces support inheritance, but only when you define them. [...]

> You could emulate it a bit by having a lot more context-specific
> defface's and specify them manually; but that would be a bit of a
> nightmare, I think... So, probably best to try first to see how far you
> get with the current faces and some theming.

Ok.
If I got it right (not easy, being an emacs newbie), the existing
inheritance ;; parent
  face definitions ;; face definition name (prefixed by a space)...
... are:

default    
 mu4e-header-face

font-lock-builtin-face
 mu4e-cited-1-face
 mu4e-forwarded-face
 mu4e-replied-face

font-lock-comment-delimiter-face
 mu4e-cited-6-face

font-lock-comment-face
 mu4e-cited-5-face
 mu4e-footer-face
 mu4e-moved-face
 mu4e-ok-face
 mu4e-system-face
 mu4e-trashed-face

font-lock-comment-face
 mu4e-trashed-face

font-lock-constant-face
 mu4e-flagged-face

font-lock-doc-face
 mu4e-header-value-face

font-lock-keyword-face
 mu4e-cited-4-face
 mu4e-unread-face

font-lock-preprocessor-face
 mu4e-cited-7-face
 mu4e-header-marks-face

font-lock-pseudo-keyword-face
 mu4e-highlight-face

font-lock-reference-face
 mu4e-url-number-face

font-lock-string-face
 mu4e-draft-face

font-lock-type-face
 mu4e-cited-2-face
 mu4e-header-title-face
 mu4e-title-face

font-lock-variable-name-face
 mu4e-attach-number-face
 mu4e-cited-3-face
 mu4e-contact-face
 mu4e-special-header-value-face

font-lock-warning-face
 mu4e-warning-face

link
 mu4e-link-face

message-header-name-face
 mu4e-header-key-face

message-separator
 mu4e-compose-header-face
 mu4e-compose-separator-face

region
 mu4e-header-highlight-face

???
 mu4e-region-code

Now, if again indentation shows inheritance (new potential faces are denoted by a "+" as first char just to see which are the added ones), we could define a more mu4e-oriented grouped faces:

+mu4e-basic-face           ;;Face defining the starting point for the rest of mu4e

MESSAGE LIST         ;; (inherits from mu4e-basic-face)
mu4e-unread-face        ;;Face for an unread message header.
+mu4e-read-face            ;;Face for an read message header (it is not specified, or the basic face?)
mu4e-draft-face                ;;Face for a draft message header, i.e. a message with the draft flag set.
mu4e-flagged-face        ;;Face for a flagged message header.
mu4e-forwarded-face        ;;Face for a passed (forwarded) message header.
mu4e-moved-face                ;;Face for a message header that has been moved to some folder.
mu4e-replied-face        ;;Face for a replied message header.
mu4e-trashed-face        ;;Face for an message header in the trash folder.


READ/WRITE         ;; (inherits from mu4e-basic-face)
mu4e-contact-face        ;;Face for showing URLs and attachments in the message view.
mu4e-compose-header-face    ;;Face for the separator between headers / message in mu4e-compose-mode.
mu4e-compose-separator-face    ;;Face for the separator between headers / message in mu4e-compose-mode.
mu4e-link-face                ;;Face for showing URLs and attachments in the message view.
mu4e-url-number-face        ;;Face for the number tags for URLs.
mu4e-attach-number-face        ;;Face for the number tags for attachments.
mu4e-cited-1-face        ;;Face for cited message parts (level 1).
 mu4e-cited-2-face        ;;Face for cited message parts (level 2).
  mu4e-cited-3-face        ;;Face for cited message parts (level 3).
   mu4e-cited-4-face        ;;Face for cited message parts (level 4).
    mu4e-cited-5-face        ;;Face for cited message parts (level 5).
     mu4e-cited-6-face        ;;Face for cited message parts (level 6).
      mu4e-cited-7-face    ;;Face for cited message parts (level 7).

mu4e-header-face        ;;Face for a header without any special flags.
mu4e-header-highlight-face    ;;Face for the header at point.
mu4e-header-key-face        ;;Face for a header key (such as \"Foo\" in \"Subject:\ Foo\").
mu4e-header-marks-face        ;;Face for the mark in the headers list.
mu4e-header-title-face        ;;Face for a header title in the headers view.
mu4e-header-value-face        ;;Face for a header value (such as \
mu4e-footer-face        ;;Face for message footers (signatures).

VARIOUS
mu4e-highlight-face        ;;Face for highlighting things.
mu4e-region-code        ;;Face for highlighting marked region in mu4e-view buffer.
mu4e-special-header-value-face    ;;Face for special header values.
mu4e-system-face        ;;Face for system message (such as the footers for message headers).
mu4e-title-face                ;;Face for a header title in the headers view.
mu4e-ok-face                ;;Face for things that are okay.
mu4e-warning-face        ;;Face for warnings / error.

I assume (please correct me if I'm wrong) that inheritance can be defined like this:

(defface mu4e-cited-1-face
  '((t :inherit mu4e-basic-face [face appearance here]))
  "face human description"
  :group 'mu4e-faces)

(defface mu4e-cited-2-face
  '((t :inherit mu4e-cited-2-face [face appearance here]))
  "face human description"
  :group 'mu4e-faces)

This is, mu4e-cited-1-face inherits from mu4e-basic-face; after that, mu4e-cited-2-face inherits from mu4e-cited-1-face.
If this is ok, I can create from that a whole integrated mu4e look, optimized for email reading, being in horizontal or vertical listing, and then a basic dark and a basic light theme that are easy to customize.

--
e