From 158991ed556bbba1002288fe8ab01af8348cd49f Mon Sep 17 00:00:00 2001 From: djmaze Date: Fri, 19 Feb 2021 12:11:20 +0100 Subject: [PATCH] Improve Squire UI design --- dev/External/SquireUI.js | 9 +- dev/Styles/SquireUI.less | 155 ++++++++++++------ .../templates/Views/User/MailMessageView.html | 4 +- 3 files changed, 114 insertions(+), 54 deletions(-) diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js index 4466cac14..0b2f8c194 100644 --- a/dev/External/SquireUI.js +++ b/dev/External/SquireUI.js @@ -353,8 +353,8 @@ class SquireUI } } - plain.className = 'squire-plain cke_plain cke_editable'; - wysiwyg.className = 'squire-wysiwyg cke_wysiwyg_div cke_editable'; + plain.className = 'squire-plain'; + wysiwyg.className = 'squire-wysiwyg cke_editable'; this.mode = ''; // 'plain' | 'wysiwyg' this.__plain = { getRawData: () => this.plain.value, @@ -366,14 +366,14 @@ class SquireUI this.plain = plain; this.wysiwyg = wysiwyg; - toolbar.className = 'squire-toolbar cke_top'; + toolbar.className = 'squire-toolbar'; let touchTap; for (let group in actions) { if ('bidi' == group && !rl.settings.app('allowHtmlEditorBitiButtons')) { continue; } let toolgroup = doc.createElement('div'); - toolgroup.className = 'squire-toolgroup cke_toolgroup'; + toolgroup.className = 'btn-group'; toolgroup.id = 'squire-toolgroup-'+group; for (let action in actions[group]) { if ('source' == action && !rl.settings.app('allowHtmlEditorSourceButton')) { @@ -408,6 +408,7 @@ class SquireUI } else { input = doc.createElement('button'); input.type = 'button'; + input.className = 'btn'; input.innerHTML = cfg.html; input.action_cmd = cfg.cmd; input.addEventListener('touchstart', () => touchTap = input, {passive:true}); diff --git a/dev/Styles/SquireUI.less b/dev/Styles/SquireUI.less index 608f6e772..4d6aab66a 100644 --- a/dev/Styles/SquireUI.less +++ b/dev/Styles/SquireUI.less @@ -1,58 +1,125 @@ + .squire-toolbar { + padding: 2px; + box-shadow: none; + border-bottom: 1px solid #b6b6b6; + background: #EEE; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } -.squire-toolgroup { +.squire-toolbar .btn-group { display: inline-block; - margin: 0 .25em 0 0; } -.squire-toolgroup > button, -.squire-toolgroup > select { - background: transparent; - border: 0; - box-shadow: none; - color: #000; - cursor: pointer; - font-size: 14px; - height: 1.5em; - line-height: 1.7; +.squire-toolbar select { + font-size: 12px; margin: 0; padding: 0; - vertical-align: bottom; - width: 2em; + vertical-align: middle; + width: 7em; } - -.squire-toolgroup button:hover, .squire-toolgroup button.active { - background: #f0f0f0; +.squire-toolbar select[data-action="fontSize"] { + width: 5em; } - -.squire-toolgroup select { - width: 7em !important; -} -.squire-toolgroup select[data-action="fontSize"] { - width: 4em !important; -} -.squire-toolgroup button[data-action="bold"] { +.squire-toolbar button[data-action="bold"] { font-weight: bold; } -.squire-toolgroup button[data-action="italic"] { +.squire-toolbar button[data-action="italic"] { font-style: italic; } /* -.squire-toolgroup button[data-action="underline"] { +.squire-toolbar button[data-action="underline"] { text-decoration: underline; } -.squire-toolgroup button[data-action="strikethrough"] { +.squire-toolbar button[data-action="strikethrough"] { text-decoration: line-through; } */ -.squire-wysiwyg { +.squire-wysiwyg, .squire-plain { box-sizing: border-box; + font-size: 13px; + line-height: 16px; + min-height: 200px; overflow: auto; + padding: 10px; +} + +.squire-wysiwyg { + font-family: var(--fontSans); + + ul { + padding-left: 40px; + li { + list-style-type: disc !important; + } + } + + ol { + padding-left: 40px; + li { + list-style-type: decimal !important; + } + } + + pre, code { + margin: 0; + padding: 0; + background: #fff; + border: none; + border-radius: 0; + font-family: var(--fontMono); + display: block; + word-break: normal; + word-wrap: break-word; + background-color: #f9f9f9; + } + + code { + display: inline; + padding: 2px 5px; + } + + pre { + padding: 5px 10px; + border-radius: 5px; + background-color: #f9f9f9; + } + + pre > code { + padding: 0; + } + + blockquote { + border: 0; + border-left: solid 2px #444; + margin: 5px 0 5px 5px; + padding-left: 5px; + } + + blockquote p { + margin: 0 0 10px; + font-size: 14px; + line-height: 20px; + } + + img { + vertical-align: bottom; + } + + a { + color: blue; + text-decoration: underline; + + &:visited { + color: #609; + } + &:active { + color: red; + } + } } /* This does make the block element focusable with mouse in Gecko and Webkit so we don't need a
. @@ -72,27 +139,25 @@ Secondly, we can't rely on MUA's what to do with :empty } */ -.squire-wysiwyg, .squire-plain { - min-height: 200px; - padding: .5em; -} - .squire-plain { + background-color: #fff; + border: 0; + border-radius: 0; + display: none; + font-family: var(--fontMono); + outline: none; + margin: 0; + resize: none; + white-space: pre-wrap; width: 100%; } - -.squire-plain { - display: none; -} -.squire-mode-plain .squire-wysiwyg { +.squire-mode-plain .squire-wysiwyg, +.squire-mode-plain .btn-group:not(#squire-toolgroup-mode) { display: none; } .squire-mode-plain .squire-plain { display: block; } -.squire-mode-plain .squire-toolgroup:not(#squire-toolgroup-mode) { - display: none; -} /* @media (hover: none) */ .rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar { @@ -105,12 +170,6 @@ Secondly, we can't rely on MUA's what to do with :empty left: 0; right: 0; } -.rl-mobile .squire-toolgroup > button, -.rl-mobile .squire-toolgroup > select { - height: 2.5em; - line-height: 2.8; - width: 3em; -} .rl-mobile #rl-popups .b-compose.modal, .rl-mobile #rl-popups .b-identity-content.modal { diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html index 1fc71c08d..fd80db93e 100644 --- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html +++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html @@ -53,8 +53,8 @@ data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">→
- ⋮ - + ⋮ +