ASÍ TUVO QUE SER #JOLLA EMAIL EN #SAILFISHOS 3.1.0.11 (Seitseminen)

Con cada actualización de SailfishOS es tradición aquí en linuxleon.org el "how-to" para la modificación gráfica del gestor de correo para que no rompa las líneas de diseño del sistema. Y queda así de bonito.

1.- Activando el soporte para diseño sensible (layout responsive):

devel-su nano /usr/share/jolla-email/pages/HtmlViewer.qml

Busca:

    function _updateLayout(width) {
        // Respect viewport meta tag if exists
        if (!hasViewportMetaTag(htmlBody)) {
            // This affects only to layouts that do not have width defined in body content.
            // Smaller content layout gets scaled up to WebView's width.
            experimental.customLayoutWidth = width / _scale
        } else {
            experimental.customLayoutWidth = width
        }
 // reload html
        loadHtml(htmlBody, "file:///usr/share/jolla-email")
    }

Y reemplázalo con:

    function _updateLayout(width) {
        // Respect viewport meta tag if exists
        // if (!hasViewportMetaTag(htmlBody)) {
            // This affects only to layouts that do not have width defined in body content.
            // Smaller content layout gets scaled up to WebView's width.
            experimental.customLayoutWidth = width / _scale
       // } else {
            experimental.customLayoutWidth = 350  
       // }
 // reload html
        loadHtml(htmlBody, "file:///usr/share/jolla-email")
    }

Reinicia Jolla Email para que la mayoría de los correos sean ya perfectamente legibles.

2.- Mostrando los correos electrónicos en la ventana de composición por defecto.

2.1.- Para los correos en texto plano:

devel-su nano /usr/share/jolla-email/pages/PlainTextViewer.qml

en la Línea 68 cambia el valor color de color: "white" a color: "transparent"
en la Línea 111 cambia el valor color de color: "black" a color: Theme.primaryColor
en la Línea 113 cambia el valor font.pixelSize de Theme.fontSizeSmall a Theme.fontSizeMedium y de Theme.fontSizeExtraSmall a Theme.fontSizeSmall

2.2.- Cambiando la ventana de carga de blanco a transparente:

devel-su nano /usr/share/jolla-email/pages/HtmlLoader.qml

en la Línea 127 cambia color: "white" a color: "transparent"

2.3.- Para los correos sin un background definido.

2.3.1. Modifica:

devel-su nano /usr/lib/qt5/qml/Sailfish/Silica/SilicaWebView.qml

en la Línea 125 cambia el valor a "true" o añade esta línea (como yo he tenido que hacer) 
experimental.transparentBackground: true

2.3.2. Modifica el fichero htmlViewer.css para lograr una completa integración con el fondo transparente. Añade al final del fichero:

devel-su nano /usr/share/jolla-email/pages/htmlViewer.css

Que originalmente tiene este contenido:

* { overflow-wrap: break-word; }
pre { white-space: pre-wrap; }

img[nemo-inline-image-loading=no] {
    margin-right: 6px;
    margin-bottom: 4px;
}

img[nemo-inline-image-loading=yes] {
    margin-right: 6px;
    margin-bottom: 4px;
    max-width: 30px;
    max-height: 30px;
    content: url('file:///usr/share/jolla-email/images/spinner.gif');
}

De forma que completo quede así:

* { overflow-wrap: break-word; }
pre { white-space: pre-wrap; }

img[nemo-inline-image-loading=no] {
    margin-right: 6px;
    margin-bottom: 4px;
}

img[nemo-inline-image-loading=yes] {
    margin-right: 6px;
    margin-bottom: 4px;
    max-width: 30px;
    max-height: 30px;
    content: url('file:///usr/share/jolla-email/images/spinner.gif');
}



/*--------------------------------------------------------------------------------------------------------------------------*/

/* Browser Background */
browser[type="content-primary"]
{
  background-color: transparent !important;
}

/*No background images. try to exclude icons, other misc items. */

  
*:not(:empty):not([onclick*="open"]):not(span):not([class*="stars"]):not([id*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="prite"]):not([id*="prite"]):not([id*="lbImage"])
  {
    background-image: none !important;
  }

/* Basic Bodies */
  html,
body
  {
    background: none transparent !important;
  }

/* Make descendents of the body element transparent.  Formerly "DIV + SPAN" rules. */
  body *
  {
    background-color: transparent !important;
  }

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* Universal - sets color of text, border */

* {
color: #CCC !important; 
border-color: #444 !important;
outline-color: #444 !important;
text-shadow: none !important;
}

html *:after,
html *:before {
color: #CCC !important;
border-color: #666 !important;
background: none transparent !important;
}


/* Link */

a:link,
a:link *:not(img){ 

color: #B1CBF7 !important;
background-color: transparent !important;
border-color: #666 !important;}

a:visited, 
a:visited * {
color: #CDB4E7 !important;
}

a:hover,
a:hover *:not(img){

color: #FFE900 !important; 
background-color: transparent !important;
border-color: #999 !important;
}

html [href*="#"]:hover {
color: #FFE900 !important;
background-color: transparent !important;
}


/* Event Handlers/Attributes */

[onclick],
[ondblclick],
[onmousedown] {
color: #DFD5BC !important;
text-indent: 0 !important;
}

[onclick]:hover,
[ondblclick]:hover,
[onmousedown]:hover {
color: #FEFF97 !important;
}


/* Make images transparent */

img {
opacity: .75 !important;
}

img:hover {
opacity: 1 !important;
background-color: transparent !important;
}

svg {
background: none #666 !important;
}

/* Highlight */
::-moz-selection {
background-color: transparent !important;
color: #F6F7B9 !important;
}

O sustitúyelo por el fichero ya modificado que te dejo a continuación:

 htmlViewer-transparent-bg

Copia de seguridad de ese fichero por si no te gusta el resultado:

 Original_htmlViewer

Una aplicación de correo completamente rediseñada para mejor.