From 2b68c8e8d39b78217c49fa98b110c3b424efc2ad Mon Sep 17 00:00:00 2001
From: konstantin krivlenia <krivlenia@gmail.com>
Date: Fri, 12 Apr 2019 20:32:02 +0300
Subject: [PATCH] #299 add italic format button

---
 web/app/@types/markdown-toolbar-element/index.d.ts  |  2 ++
 .../__markdown-toolbar/input__markdown-toolbar.scss |  2 +-
 .../input/markdown-toolbar-icons/italic-icon.tsx    | 13 +++++++++++++
 web/app/components/input/markdown-toolbar.tsx       |  7 ++++++-
 4 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/input/markdown-toolbar-icons/italic-icon.tsx

diff --git a/web/app/@types/markdown-toolbar-element/index.d.ts b/web/app/@types/markdown-toolbar-element/index.d.ts
index d5eaab75..b7849c6a 100644
--- a/web/app/@types/markdown-toolbar-element/index.d.ts
+++ b/web/app/@types/markdown-toolbar-element/index.d.ts
@@ -3,8 +3,10 @@ declare namespace JSX {
     'markdown-toolbar': {
       for: string;
       children?: any;
+      className: string;
     };
     'md-bold': any;
     'md-header': any;
+    'md-italic': any;
   }
 }
diff --git a/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss b/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss
index 7db3f8ba..1122ca4e 100644
--- a/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss
+++ b/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss
@@ -1,4 +1,4 @@
-markdown-toolbar {
+.input__toolbar {
   display: block;
   float: right;
 }
diff --git a/web/app/components/input/markdown-toolbar-icons/italic-icon.tsx b/web/app/components/input/markdown-toolbar-icons/italic-icon.tsx
new file mode 100644
index 00000000..19fec985
--- /dev/null
+++ b/web/app/components/input/markdown-toolbar-icons/italic-icon.tsx
@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'preact';
+
+export default function ItalicIcon() {
+  return (
+    <svg className="input__toolbar-icon" viewBox="0 0 6 16" version="1.1" width="6" height="16" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        d="M2.81 5h1.98L3 14H1l1.81-9zm.36-2.7c0-.7.58-1.3 1.33-1.3.56 0 1.13.38 1.13 1.03 0 .75-.59 1.3-1.33 1.3-.58 0-1.13-.38-1.13-1.03z"
+      />
+    </svg>
+  );
+}
diff --git a/web/app/components/input/markdown-toolbar.tsx b/web/app/components/input/markdown-toolbar.tsx
index 40183ebf..3ff6b30d 100644
--- a/web/app/components/input/markdown-toolbar.tsx
+++ b/web/app/components/input/markdown-toolbar.tsx
@@ -3,6 +3,7 @@ import { h, Component, RenderableProps } from 'preact';
 import '@github/markdown-toolbar-element';
 import BoldIcon from './markdown-toolbar-icons/bold-icon';
 import HeaderIcon from './markdown-toolbar-icons/header-icon';
+import ItalicIcon from './markdown-toolbar-icons/italic-icon';
 
 interface Props {
   textareaId: string;
@@ -10,11 +11,12 @@ interface Props {
 
 const boldLabel = 'Add bold text <cmd-b>';
 const headerLabel = 'Add header text';
+const italicLabel = 'Add italic text <cmd-i>';
 
 export default class MarkdownToolbar extends Component<Props> {
   render(props: RenderableProps<Props>) {
     return (
-      <markdown-toolbar for={props.textareaId}>
+      <markdown-toolbar className="input__toolbar" for={props.textareaId}>
         <div className="input__toolbar-group">
           <md-header className="input__toolbar-item" title={headerLabel} aria-label={headerLabel}>
             <HeaderIcon />
@@ -22,6 +24,9 @@ export default class MarkdownToolbar extends Component<Props> {
           <md-bold className="input__toolbar-item" title={boldLabel} aria-label={boldLabel}>
             <BoldIcon />
           </md-bold>
+          <md-italic className="input__toolbar-item" title={italicLabel} aria-label={italicLabel}>
+            <ItalicIcon />
+          </md-italic>
         </div>
       </markdown-toolbar>
     );