Merge remote-tracking branch 'origin/master'

2018-05-06 16:35:03 -05:00
parent 5571e0d0d6 35555baf79
commit 19a0e432c6
14 changed files with 69 additions and 24 deletions
@@ -0,0 +1,5 @@
+.auth-panel__select {
+  &:focus {
+    outline: none;
+  }
+}
@@ -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');
@@ -0,0 +1,4 @@
+.comment__user-id {
+  color: #888;
+  font-weight: 400;
+}
@@ -3,10 +3,9 @@
  font-weight: 700;
  text-decoration: none;
  color: #777;
+  cursor: pointer;

-  &:link {
-    &:hover {
-      text-decoration: underline;
-    }
+  &:hover {
+    opacity: .75;
  }
 }
@@ -1,7 +0,0 @@
-.comment_pinned {
-  &, &.comment_view_admin {
-    .comment__username {
-      font-weight: 700;
-    }
-  }
-}
@@ -13,6 +13,7 @@ export default class Comment extends Component {

    this.state = {
      isInputVisible: false,
+      isUserIdVisible: false,
    };

    this.updateState(props);
@@ -20,6 +21,7 @@ export default class Comment extends Component {
    this.decreaseScore = this.decreaseScore.bind(this);
    this.increaseScore = this.increaseScore.bind(this);
    this.toggleInputVisibility = this.toggleInputVisibility.bind(this);
+    this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
    this.onReply = this.onReply.bind(this);
    this.onPinClick = this.onPinClick.bind(this);
    this.onUnpinClick = this.onUnpinClick.bind(this);
@@ -73,6 +75,10 @@ export default class Comment extends Component {
    }
  }

+  toggleUserIdVisibility() {
+    this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
+  }
+
  onPinClick() {
    const { id } = this.props.data;

@@ -175,7 +181,7 @@ export default class Comment extends Component {
    });
  }

-  render(props, { guest, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
+  render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
    const { data, mix, mods = {} } = props;
    const isAdmin = !guest && store.get('user').admin;
    const isGuest = guest || !Object.keys(store.get('user')).length;
@@ -242,7 +248,15 @@ export default class Comment extends Component {
              alt=""
            />

-            <span className="comment__username">{o.user.name}</span>
+            <span
+              className="comment__username"
+              title={o.user.id}
+              onClick={this.toggleUserIdVisibility}
+            >{o.user.name}</span>
+
+            {
+              isUserIdVisible && <span className="comment__user-id"> ({o.user.id})</span>
+            }

            <span className="comment__time">{o.time}</span>

@@ -358,6 +372,7 @@ export default class Comment extends Component {
            <Input
              mix="comment__input"
              onSubmit={this.onReply}
+              onCancel={this.toggleInputVisibility}
              pid={o.id}
              autoFocus
            />
@@ -22,6 +22,7 @@ require('./__score-value/comment__score-value.scss');
 require('./__status/comment__status.scss');
 require('./__text/comment__text.scss');
 require('./__time/comment__time.scss');
+require('./__user-id/comment__user-id.scss');
 require('./__username/comment__username.scss');

 require('./__vote/comment__vote.scss');
@@ -31,7 +32,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');

@@ -1,5 +1,6 @@
 .input__button {
  box-sizing: border-box;
+  margin: 0;
  padding: 8px 12px;
  font-size: 16px;
  border: 0;
@@ -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;
@@ -25,17 +25,22 @@ 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() {
    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) {
@@ -56,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?
@@ -76,7 +82,7 @@ export default class Input extends Component {
      });
  }

-  render(props, { height, isFieldDisabled, preview }) {
+  render(props, { isFieldDisabled, preview }) {
    return (
      <form className={b('input', props)} onSubmit={this.send}>
        <textarea
@@ -84,7 +90,6 @@ export default class Input extends Component {
          placeholder="Your comment here"
          onInput={this.autoResize}
          onKeyDown={this.onKeyDown}
-          style={{ height }}
          ref={r => (this.fieldNode = r)}
          required
          disabled={isFieldDisabled}
@@ -1,4 +1,6 @@
 .raw-content {
+  word-break: break-word;
+
  p {
    margin: 0;

@@ -1,4 +1,6 @@
 .root__pinned-comment {
+  border-bottom-color: #e2efef;
+
  &:last-child {
    margin-bottom: 0;
    border-bottom: 0;
@@ -3,6 +3,6 @@
 .root__pinned-comments {
  margin-top: 24px;
  padding: ($offset / 3) ($offset / 2);
-  border: 2px solid #0aa;
  border-radius: 2px;
+  background: #edf6f7;
 }
@@ -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 (
        <div id={NODE_ID}>
@@ -179,6 +195,7 @@ export default class Root extends Component {
        <div className="root">
          <AuthPanel
            user={user}
+            sort={sort}
            providers={config.auth_providers}
            onSignIn={this.onSignIn}
            onSignOut={this.onSignOut}