diff --git a/app/components/SimpleEditor/elements/icons/addComment.svg b/app/components/SimpleEditor/elements/icons/addComment.svg new file mode 100644 index 0000000000000000000000000000000000000000..6ecd376e5f52d99fdaaaebda5f5654154511588e --- /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 0000000000000000000000000000000000000000..ee14b42225ff608863fd48183cedac286b9c87f6 --- /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 c77659185359838de0524eff6aa5c27704ec4d29..ead6aaa1fc723ef68787d0885b2d9f4cd93a0ff3 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 0a716a04f44ad6beb1a50f8da300a3bc6fd566d4..c2966038ff23e3ffed163d253edcd24923d4271e 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 {