From d5dc27d788d944603e7c7c07e59f7cb4edc36a79 Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Sun, 19 Nov 2017 23:34:41 +0000 Subject: [PATCH] Use SVG icons for checkboxes --- Assets/check-square-o.svg | 2 ++ Assets/check-square.svg | 2 ++ Assets/square-o.svg | 2 ++ ReactNativeClient/lib/MdToHtml.js | 22 ++++++++++++++++------ 4 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 Assets/check-square-o.svg create mode 100644 Assets/check-square.svg create mode 100644 Assets/square-o.svg diff --git a/Assets/check-square-o.svg b/Assets/check-square-o.svg new file mode 100644 index 0000000000..0d07b95e33 --- /dev/null +++ b/Assets/check-square-o.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/Assets/check-square.svg b/Assets/check-square.svg new file mode 100644 index 0000000000..6da396e482 --- /dev/null +++ b/Assets/check-square.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/Assets/square-o.svg b/Assets/square-o.svg new file mode 100644 index 0000000000..9d9aee6d33 --- /dev/null +++ b/Assets/square-o.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ReactNativeClient/lib/MdToHtml.js b/ReactNativeClient/lib/MdToHtml.js index 45fb102833..379f06b731 100644 --- a/ReactNativeClient/lib/MdToHtml.js +++ b/ReactNativeClient/lib/MdToHtml.js @@ -288,8 +288,9 @@ class MdToHtml { let loopCount = 0; while (renderedBody.indexOf('mJOPm') >= 0) { renderedBody = renderedBody.replace(/mJOPmCHECKBOXm([A-Z]+)m(\d+)m/, function(v, type, index) { - const js = options.postMessageSyntax + "('checkboxclick:" + type + ':' + index + "'); this.textContent = this.textContent == '☐' ? '☑' : '☐'; return false;"; - return '' + (type == 'NOTICK' ? '☐' : '☑') + ''; + + const js = options.postMessageSyntax + "('checkboxclick:" + type + ':' + index + "'); this.classList.contains('tick') ? this.classList.remove('tick') : this.classList.add('tick'); return false;"; + return '' + '' + ''; }); if (loopCount++ >= 9999) break; } @@ -328,14 +329,23 @@ class MdToHtml { } ul { padding-left: 1.3em; - } a.checkbox { - font-size: 1.6em; + display: inline-block; position: relative; - top: 0.1em; + top: .5em; text-decoration: none; - color: ` + style.htmlColor + `; + width: 1.9em; + height: 1.9em; + margin-right: .3em; + background-color: ` + style.htmlColor + `; + /* Awesome Font square-o */ + -webkit-mask: url("data:image/svg+xml;utf8,"); + } + a.checkbox.tick { + left: .05em; /* square-o and check-square-o aren't exactly aligned so add this extra gap to align them */ + /* Awesome Font check-square-o */ + -webkit-mask: url("data:image/svg+xml;utf8,"); } table { border-collapse: collapse;