From cfe3ea5cde304b0191076d53c741b7147ddd3f1c Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 6 May 2018 23:03:41 +0300 Subject: [PATCH 01/11] try to fix blinking of text field in Safari --- web/app/components/input/__field/input__field.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web/app/components/input/__field/input__field.scss b/web/app/components/input/__field/input__field.scss index e9929f94..26ac0500 100644 --- a/web/app/components/input/__field/input__field.scss +++ b/web/app/components/input/__field/input__field.scss @@ -16,6 +16,7 @@ background: #fff; border: 0; resize: none; + backface-visibility: hidden; // let's try to fix blinking in Safari &:focus { box-shadow: inset 0 0 0 2px #259C9A; From 9bdbe6fd9575cb5615b5ae44b2fe9f92d62dab9c Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 6 May 2018 23:06:33 +0300 Subject: [PATCH 02/11] close input for reply on escape --- web/app/components/comment/comment.jsx | 1 + web/app/components/input/input.jsx | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 83608ef0..a5d24de7 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -358,6 +358,7 @@ export default class Comment extends Component { diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx index 439a083e..21b7d308 100644 --- a/web/app/components/input/input.jsx +++ b/web/app/components/input/input.jsx @@ -25,9 +25,15 @@ export default class Input extends Component { } onKeyDown(e) { + // send on cmd+enter / ctrl+enter if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) { this.send(); } + + // cancel on esc + if (e.keyCode === 27 && this.props.onCancel) { + this.props.onCancel(); + } } autoResize() { From 5457157856dca28fb6afacdbc45b80ed11a65bb2 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 6 May 2018 23:17:37 +0300 Subject: [PATCH 03/11] save comment sort to LS --- web/app/components/root/root.jsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index 4dbe89ef..473cf4fa 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -12,15 +12,25 @@ import Input from 'components/input'; import Preloader from 'components/preloader'; import Thread from 'components/thread'; +const LS_SORT_KEY = '__remarkSort'; + export default class Root extends Component { constructor(props) { super(props); + let sort; + + try { + sort = localStorage.getItem(LS_SORT_KEY); + } catch(e) { + sort = '-score'; + } + this.state = { loaded: false, user: {}, replyingCommentId: null, - sort: '-score', + sort, }; this.addComment = this.addComment.bind(this); @@ -141,6 +151,12 @@ export default class Root extends Component { this.setState({ sort }); + try { + localStorage.setItem(LS_SORT_KEY, sort); + } catch (e) { + // can't save; ignore it + } + api.find({ sort, url }).then(({ comments } = {}) => store.set('comments', comments)); } @@ -159,7 +175,7 @@ export default class Root extends Component { }); } - render({}, { config = {}, comments = [], user, loaded, isBlockedVisible, bannedUsers, replyingCommentId }) { + render({}, { config = {}, comments = [], user, sort, loaded, isBlockedVisible, bannedUsers, replyingCommentId }) { if (!loaded) { return (
@@ -179,6 +195,7 @@ export default class Root extends Component {
Date: Sun, 6 May 2018 23:21:03 +0300 Subject: [PATCH 04/11] remove outline from sort select --- .../components/auth-panel/__select/auth-panel__select.scss | 5 +++++ web/app/components/auth-panel/index.js | 1 + 2 files changed, 6 insertions(+) create mode 100644 web/app/components/auth-panel/__select/auth-panel__select.scss diff --git a/web/app/components/auth-panel/__select/auth-panel__select.scss b/web/app/components/auth-panel/__select/auth-panel__select.scss new file mode 100644 index 00000000..e4c04dbc --- /dev/null +++ b/web/app/components/auth-panel/__select/auth-panel__select.scss @@ -0,0 +1,5 @@ +.auth-panel__select { + &:focus { + outline: none; + } +} diff --git a/web/app/components/auth-panel/index.js b/web/app/components/auth-panel/index.js index 2bc0ac08..18533567 100644 --- a/web/app/components/auth-panel/index.js +++ b/web/app/components/auth-panel/index.js @@ -4,6 +4,7 @@ require('./auth-panel.scss'); require('./__column/auth-panel__column.scss'); require('./__pseudo-link/auth-panel__pseudo-link.scss'); +require('./__select/auth-panel__select.scss'); require('./__sort/auth-panel__sort.scss'); require('./__username/auth-panel__username.scss'); require('./__user-id/auth-panel__user-id.scss'); From ca240000f18ee4ec7dde3ab8803eeb772b31be6f Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 6 May 2018 23:26:51 +0300 Subject: [PATCH 05/11] fix pinned comments style --- web/app/components/comment/_pinned/comment_pinned.scss | 7 ------- web/app/components/comment/index.js | 1 - .../root/__pinned-comment/root__pinned-comment.scss | 2 ++ .../root/__pinned-comments/root__pinned-comments.scss | 2 +- 4 files changed, 3 insertions(+), 9 deletions(-) delete mode 100644 web/app/components/comment/_pinned/comment_pinned.scss diff --git a/web/app/components/comment/_pinned/comment_pinned.scss b/web/app/components/comment/_pinned/comment_pinned.scss deleted file mode 100644 index 5a30cbec..00000000 --- a/web/app/components/comment/_pinned/comment_pinned.scss +++ /dev/null @@ -1,7 +0,0 @@ -.comment_pinned { - &, &.comment_view_admin { - .comment__username { - font-weight: 700; - } - } -} diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js index 95a94aa4..202e79c7 100644 --- a/web/app/components/comment/index.js +++ b/web/app/components/comment/index.js @@ -31,7 +31,6 @@ require('./__vote/_type/_down/comment__vote_type_down.scss'); require('./__vote/_type/_up/comment__vote_type_up.scss'); require('./_level/comment_level.scss'); -require('./_pinned/comment_pinned.scss'); require('./_replying/comment_replying.scss'); require('./_useless/comment_useless.scss'); diff --git a/web/app/components/root/__pinned-comment/root__pinned-comment.scss b/web/app/components/root/__pinned-comment/root__pinned-comment.scss index 0765cfda..64166ed2 100644 --- a/web/app/components/root/__pinned-comment/root__pinned-comment.scss +++ b/web/app/components/root/__pinned-comment/root__pinned-comment.scss @@ -1,4 +1,6 @@ .root__pinned-comment { + border-bottom-color: #bdd8d8; + &:last-child { margin-bottom: 0; border-bottom: 0; diff --git a/web/app/components/root/__pinned-comments/root__pinned-comments.scss b/web/app/components/root/__pinned-comments/root__pinned-comments.scss index e0c3f88c..089cebd5 100644 --- a/web/app/components/root/__pinned-comments/root__pinned-comments.scss +++ b/web/app/components/root/__pinned-comments/root__pinned-comments.scss @@ -3,6 +3,6 @@ .root__pinned-comments { margin-top: 24px; padding: ($offset / 3) ($offset / 2); - border: 2px solid #0aa; border-radius: 2px; + background: #d8efef; } From def6505e3149d8161c2e73873bdba5d4ee27fd3c Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 6 May 2018 23:28:51 +0300 Subject: [PATCH 06/11] show user id on hover of their name --- web/app/components/comment/comment.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index a5d24de7..1f10c748 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -242,7 +242,7 @@ export default class Comment extends Component { alt="" /> - {o.user.name} + {o.user.name} {o.time} From 8095496a0e4ed5a1cddd5597921f5b5f9a2234c5 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 6 May 2018 23:53:20 +0300 Subject: [PATCH 07/11] fix pinned comments colors --- .../components/root/__pinned-comment/root__pinned-comment.scss | 2 +- .../root/__pinned-comments/root__pinned-comments.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/app/components/root/__pinned-comment/root__pinned-comment.scss b/web/app/components/root/__pinned-comment/root__pinned-comment.scss index 64166ed2..79eca1f8 100644 --- a/web/app/components/root/__pinned-comment/root__pinned-comment.scss +++ b/web/app/components/root/__pinned-comment/root__pinned-comment.scss @@ -1,5 +1,5 @@ .root__pinned-comment { - border-bottom-color: #bdd8d8; + border-bottom-color: #e2efef; &:last-child { margin-bottom: 0; diff --git a/web/app/components/root/__pinned-comments/root__pinned-comments.scss b/web/app/components/root/__pinned-comments/root__pinned-comments.scss index 089cebd5..cc4c1604 100644 --- a/web/app/components/root/__pinned-comments/root__pinned-comments.scss +++ b/web/app/components/root/__pinned-comments/root__pinned-comments.scss @@ -4,5 +4,5 @@ margin-top: 24px; padding: ($offset / 3) ($offset / 2); border-radius: 2px; - background: #d8efef; + background: #edf6f7; } From 9f2427763a54d0f7e9c4f56a43f98e3870978eb6 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Mon, 7 May 2018 00:00:55 +0300 Subject: [PATCH 08/11] change input field size directly instead of using component state --- web/app/components/input/input.jsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx index 21b7d308..f47b5fca 100644 --- a/web/app/components/input/input.jsx +++ b/web/app/components/input/input.jsx @@ -38,10 +38,9 @@ export default class Input extends Component { autoResize() { this.fieldNode.style.height = ''; - this.setState({ - height: this.fieldNode.scrollHeight, - preview: null, - }); + this.fieldNode.style.height = `${this.fieldNode.scrollHeight}px`; + + this.setState({ preview: null }); } send(e) { @@ -62,7 +61,8 @@ export default class Input extends Component { } this.fieldNode.value = ''; - this.setState({ height: null, preview: null }); + this.fieldNode.style.height = ''; + this.setState({ preview: null }); }) .catch(() => { // TODO: do smth? @@ -82,7 +82,7 @@ export default class Input extends Component { }); } - render(props, { height, isFieldDisabled, preview }) { + render(props, { isFieldDisabled, preview }) { return (