From f3f46ed4faa0f6503f30f7d2963c6df8f25949f8 Mon Sep 17 00:00:00 2001
From: Alexandros Georgantas <alexgeorg86@gmail.com>
Date: Mon, 8 May 2017 16:09:10 +0300
Subject: [PATCH] Comment box icons inserted
---
.../elements/icons/addComment.svg | 4 ++++
.../elements/icons/resolveAllComments.svg | 9 ++++++++
.../SimpleEditor/panes/Comments/CommentBox.js | 7 +++---
.../panes/Comments/commentsPane.scss | 23 +++++++++++--------
4 files changed, 30 insertions(+), 13 deletions(-)
create mode 100644 app/components/SimpleEditor/elements/icons/addComment.svg
create mode 100644 app/components/SimpleEditor/elements/icons/resolveAllComments.svg
diff --git a/app/components/SimpleEditor/elements/icons/addComment.svg b/app/components/SimpleEditor/elements/icons/addComment.svg
new file mode 100644
index 0000000..6ecd376
--- /dev/null
+++ b/app/components/SimpleEditor/elements/icons/addComment.svg
@@ -0,0 +1,4 @@
+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/>
+</svg>
\ No newline at end of file
diff --git a/app/components/SimpleEditor/elements/icons/resolveAllComments.svg b/app/components/SimpleEditor/elements/icons/resolveAllComments.svg
new file mode 100644
index 0000000..ee14b42
--- /dev/null
+++ b/app/components/SimpleEditor/elements/icons/resolveAllComments.svg
@@ -0,0 +1,9 @@
+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path d="M0 0h24v24H0V0z" id="a"/>
+ </defs>
+ <clipPath id="b">
+ <use overflow="visible" xlink:href="#a"/>
+ </clipPath>
+ <path clip-path="url(#b)" d="M14 10H2v2h12v-2zm0-4H2v2h12V6zM2 16h8v-2H2v2zm19.5-4.5L23 13l-6.99 7-4.51-4.5L13 14l3.01 3 5.49-5.5z"/>
+</svg>
\ No newline at end of file
diff --git a/app/components/SimpleEditor/panes/Comments/CommentBox.js b/app/components/SimpleEditor/panes/Comments/CommentBox.js
index c776591..ead6aaa 100644
--- a/app/components/SimpleEditor/panes/Comments/CommentBox.js
+++ b/app/components/SimpleEditor/panes/Comments/CommentBox.js
@@ -42,11 +42,10 @@ class CommentBox extends Component {
if (active) {
if (comments.length > 0) {
- const resolveIcon = $$(Icon, { icon: 'fa-check' })
+ // const resolveIcon = $$(Icon, { icon: 'fa-check' })
placeholderMsg = 'reply'
resolve = $$('button')
- .append(resolveIcon)
.attr('title', 'Resolve')
.addClass('comment-resolve')
.on('click', this.resolve)
@@ -60,14 +59,14 @@ class CommentBox extends Component {
.on('keydown', this.onKeyDown)
.on('input', this.textAreaAdjust)
- const replyIcon = $$(Icon, { icon: 'fa-plus' })
+ // const replyIcon = $$(Icon, { icon: 'fa-plus' })
// TODO -- refactor classes!!!
const reply = $$('button')
.attr('disabled', true)
.attr('title', 'Reply')
.addClass('comment-reply')
- .append(replyIcon)
+ // .append(replyIcon)
.ref('commentReplyButton')
.on('click', this.reply)
diff --git a/app/components/SimpleEditor/panes/Comments/commentsPane.scss b/app/components/SimpleEditor/panes/Comments/commentsPane.scss
index 0a716a0..c296603 100644
--- a/app/components/SimpleEditor/panes/Comments/commentsPane.scss
+++ b/app/components/SimpleEditor/panes/Comments/commentsPane.scss
@@ -62,34 +62,39 @@ $yellow: #ffab20;
.comment-reply {
background-color: $yellow;
- border: 0;
- border-radius: 50%;
- color: $white;
+ cursor: pointer;
float: right;
height: 25px;
margin-bottom: 5px;
position: relative;
right: -4px;
- text-align: center;
- transition: .2s;
width: 25px;
+ -webkit-mask: url('./elements/icons/addComment.svg') no-repeat 100% 100%;
+ mask: url('./elements/icons/addComment.svg') no-repeat 100% 100%;
+ -webkit-mask-size: cover;
+ mask-size: cover;
&:disabled {
background-color: $shadow-gray;
+ -webkit-mask: url('./elements/icons/addComment.svg') no-repeat 100% 100%;
+ mask: url('./elements/icons/addComment.svg') no-repeat 100% 100%;
+ -webkit-mask-size: cover;
+ mask-size: cover;
}
}
.comment-resolve {
background-color: $blue;
- border: 0;
- border-radius: 50%;
- color: $white;
+ cursor: pointer;
float: right;
height: 25px;
margin-bottom: 5px;
margin-right: 5px;
- text-align: center;
width: 25px;
+ -webkit-mask: url('./elements/icons/resolveAllComments.svg') no-repeat 100% 100%;
+ mask: url('./elements/icons/resolveAllComments.svg') no-repeat 100% 100%;
+ -webkit-mask-size: cover;
+ mask-size: cover;
}
.comment-list {
--
GitLab