New UI with new MailTo button (#7)

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All changes to this plugin are listed here.
 
+## 0.6.0 (2023-08-17)
+
+### New
+
+- #7 Small UI improvements with new MailTo Button
+
 ## 0.5.0 (2023-07-01)
 
 ### New

main.ts

@@ -1,11 +1,11 @@
-import {Plugin, parseYaml, MarkdownRenderer, Component, MarkdownPostProcessorContext} from "obsidian";
+import {Plugin, parseYaml, MarkdownRenderer, Component, MarkdownPostProcessorContext, setIcon} from "obsidian";
 
 interface MailBlockParameters {
     to: string | undefined;
     cc: string | undefined;
     bcc: string | undefined;
     subject: string | undefined;
-    body: string | undefined; 
+    body: string | undefined;
     showmailto: boolean | undefined;
     variables: { [name: string]: string | undefined }
     from: string | undefined;
@@ -28,7 +28,9 @@ export default class MailBlockPlugin extends Plugin {
 
             // console.log("Render the Email " + parameters);
             try {
-                const rootEl = el.createEl("div", {cls: "email-block"});
+                const rootEl = el.createEl("div", {cls: "email-block email-block-border"});
+
+
                 if (parameters.from !== undefined) {
                     rootEl.createEl("div", {cls: "email-block-info", text: "From:"});
                     rootEl.createEl("div", {cls: "email-block-info-value", text: this.renderAddress(parameters.from)});
@@ -49,14 +51,18 @@ export default class MailBlockPlugin extends Plugin {
                 rootEl.createEl("div", {cls: "email-block-info-value", text: parameters.subject});
                 const bodyContent = rootEl.createEl("div", {cls: "email-block-body"});
                 await this.renderBody(bodyContent, parameters.body, parameters.variables, ctx);
-                const data = "mailto:" + this.encodeToHtml(parameters.to) +
-                    "?subject=" + this.encodeToHtml(parameters.subject) +
-                    (parameters.cc !== undefined ? "&cc=" + this.encodeToHtml(parameters.cc) : "") +
-                    (parameters.bcc !== undefined ? "&bcc=" + this.encodeToHtml(parameters.bcc) : "") +
-                    (bodyContent.innerText.length !== 0 ? "&body=" + this.encodeToHtml(bodyContent.innerText) : "");
                 if (parameters.showmailto) {
-                    rootEl.createEl("a", {href: data, text: "Mailto"});
+                    const data = "mailto:" + this.encodeToHtml(parameters.to) +
+                        "?subject=" + this.encodeToHtml(parameters.subject) +
+                        (parameters.cc !== undefined ? "&cc=" + this.encodeToHtml(parameters.cc) : "") +
+                        (parameters.bcc !== undefined ? "&bcc=" + this.encodeToHtml(parameters.bcc) : "") +
+                        (bodyContent.innerText.length !== 0 ? "&body=" + this.encodeToHtml(bodyContent.innerText) : "");
+                    const mailToButton = rootEl
+                        .createEl("div", {cls: "email-block-mailto"})
+                        .createEl("a", {href: data, text: "Mailto"});
+                    setIcon(mailToButton, "mail");
                 }
+
             } catch (error) {
                 el.createEl("h3", {text: error});
             }
@@ -70,7 +76,7 @@ export default class MailBlockPlugin extends Plugin {
             yamlString = yamlString.replace("]]", ']]"');
         }
         let extraBody = "";
-        if (yamlString.contains("---")){
+        if (yamlString.contains("---")) {
             let data = yamlString.split("---");
             yamlString = data[0];
             extraBody = data[1];
@@ -164,8 +170,7 @@ export default class MailBlockPlugin extends Plugin {
         if (rawStr === undefined) {
             return "";
         }
-        let retStr = encodeURIComponent(rawStr);
-        return retStr;
+        return encodeURIComponent(rawStr);
     }
 
     onunload() {

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "email-block-plugin",
 	"name": "Email code block",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"minAppVersion": "0.15.0",
 	"description": "This plugin renders an email code block.",
 	"author": "JoLeaf",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "email-block-plugin",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "This plugin renders an email code block.",
   "main": "main.js",
   "scripts": {

styles.css

@@ -2,12 +2,16 @@
 
 .email-block {
     display: grid;
-    grid-template-columns: 1fr 8fr;
-    row-gap: 5px;
-    border: 1px solid gray;
+    grid-template-columns: 1fr 6fr;
+    row-gap: 4px;
     padding: 4px;
 }
 
+.email-block-border {
+    border: 1px solid gray;
+    border-radius: 5px;
+}
+
 .email-block-info {
     font-style: italic;
     font-size: 80%;
@@ -15,7 +19,6 @@
 }
 
 .email-block-info-value {
-    font-weight: bold;
     font-size: 90%;
     align-self: center;
 }
@@ -23,7 +26,7 @@
 .email-block-body {
     grid-column-start: 1;
     grid-column-end: span 2;
-    border-left: 1px gray solid;
+    border-left: 2px gray solid;
     padding-left: 5px;
 }
 
@@ -33,7 +36,9 @@
 
 .email-block-mailto {
     grid-column-start: 1;
+    grid-row-start: 1;
     grid-column-end: span 2;
+    --icon-size: 2rem;
 }
 
 .email-block-error {

versions.json

@@ -7,5 +7,6 @@
   "0.3.2": "0.15.0",
   "0.3.3": "0.15.0",
   "0.4.0": "0.15.0",
-  "0.5.0": "0.15.0"
+  "0.5.0": "0.15.0",
+  "0.6.0": "0.15.0"
 }