Resolve conflicts

2018-05-13 02:07:38 +03:00
parent e6aa4111dd 28f279f41a
commit e96f571b06
35 changed files with 203 additions and 66 deletions
@@ -6,6 +6,8 @@ const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
 const DEFAULT_LAST_COMMENTS_MAX = 15;
 const DEFAULT_MAX_COMMENT_SIZE = 1000;
+const DEFAULT_SORT = '-score';
+const USELESS_COMMENT_SCORE = -10;
 const PROVIDER_NAMES = {
  google: 'Google',
  facebook: 'Facebook',
@@ -22,4 +24,6 @@ module.exports = {
  DEFAULT_LAST_COMMENTS_MAX,
  DEFAULT_MAX_COMMENT_SIZE,
  PROVIDER_NAMES,
+  DEFAULT_SORT,
+  USELESS_COMMENT_SCORE,
 };
@@ -1,6 +1,7 @@
 .auth-panel__column {
  &:nth-child(1) {
    overflow: hidden;
+    font-weight: 700;
    text-overflow: ellipsis;
  }

@@ -1,4 +1,9 @@
 .auth-panel_logged-in {
  font-size: 12px;
-  font-weight: 400;
+
+  .auth-panel__column {
+    &:first-child {
+      font-weight: 400;
+    }
+  }
 }
@@ -90,21 +90,17 @@ export default class AuthPanel extends Component {

          {user.admin && ' • '}

-          {
-            !!user.id && (
-              <span className="auth-panel__sort">
-                Sort by
-                {' '}
-                <select className="auth-panel__select" onChange={this.onSortChange}>
-                  {
-                    sortArray.map(sort => (
-                      <option value={sort.value} selected={sort.selected}>{sort.label}</option>
-                    ))
-                  }
-                </select>
-              </span>
-            )
-          }
+          <span className="auth-panel__sort">
+            Sort by
+            {' '}
+            <select className="auth-panel__select" onChange={this.onSortChange}>
+              {
+                sortArray.map(sort => (
+                  <option value={sort.value} selected={sort.selected}>{sort.label}</option>
+                ))
+              }
+            </select>
+          </span>
        </div>
      </div>
    );
@@ -2,6 +2,5 @@
  display: flex;
  justify-content: space-between;
  font-size: 14px;
-  font-weight: 700;
  line-height: 16px;
 }
@@ -0,0 +1,26 @@
+.comment__action_type_collapse {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+  line-height: 10px;
+  text-align: center;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  color: #ddd;
+
+  &:hover {
+    border-color: #0aa;
+    color: #0aa;
+  }
+
+  &.comment__action_selected {
+    background: #ddd;
+    color: #fff;
+
+    &:hover {
+      background: #0aa;
+    }
+  }
+}
@@ -1,5 +1,6 @@
 .comment__action {
  font-size: 14px;
+  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  color: #259C9A;
@@ -12,6 +13,10 @@
    outline: none;
  }

+  + .comment__action {
+    margin-left: 8px;
+  }
+
  + .comment__controls {
    &::before {
      content: '•';
@@ -1,3 +1,4 @@
 .comment__text {
  margin-bottom: 4px;
+  overflow: hidden;
 }
@@ -1,4 +1,3 @@
 .comment__vote_selected {
-  background-image: url('comment__vote_selected.svg');
  cursor: default;
 }
@@ -1,4 +1,10 @@
 .comment__vote_type_down {
  transform: scale(1, -1);
  margin-left: 4px;
+
+  &.comment__vote_selected {
+    &, &:hover {
+      background-image: url('comment__vote_type_down.svg');
+    }
+  }
 }
@@ -0,0 +1,3 @@
+<svg width="14" height="18" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#cc0606" d="M4.426 17.116V7.72H.394L7 .988l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>
@@ -1,3 +1,9 @@
 .comment__vote_type_up {
  margin-right: 4px;
+
+  &.comment__vote_selected {
+    &, &:hover {
+      background-image: url('comment__vote_type_up.svg');
+    }
+  }
 }
@@ -0,0 +1,3 @@
+<svg width="14" height="18" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#259e06" d="M4.426 17.116V7.72H.394L7 .988l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>
@@ -7,7 +7,7 @@ $step: 24px;

      &.comment_replying {
        .comment__input {
-          @media (hover: none) and (max-width: 768px) {
+          @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer:coarse) and (max-width: 768px) {
            margin-left: -$i * $step;
          }
        }
@@ -9,7 +9,7 @@
  }

  // it isn't mobile first, but it's fine here
-  @media (hover: none) and (max-width: 768px) {
+  @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer:coarse) and (max-width: 768px) {
    border: 8px solid #eee;
    padding-bottom: 0;

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';

 import api from 'common/api';
-import { API_BASE, BASE_URL, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants';
+import { API_BASE, BASE_URL, COMMENT_NODE_CLASSNAME_PREFIX, USELESS_COMMENT_SCORE } from 'common/constants';
 import { url } from 'common/settings';
 import store from 'common/store';

@@ -21,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.toggleCollapse = this.toggleCollapse.bind(this);
    this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
    this.scrollToParent = this.scrollToParent.bind(this);
    this.onReply = this.onReply.bind(this);
@@ -194,8 +195,14 @@ export default class Comment extends Component {
    }
  }

+  toggleCollapse() {
+    if (this.props.onCollapseToggle) {
+      this.props.onCollapseToggle();
+    }
+  }
+
  render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
-    const { data, mix, mods = {} } = props;
+    const { data, mods = {} } = props;
    const isAdmin = !guest && store.get('user').admin;
    const isGuest = guest || !Object.keys(store.get('user')).length;
    const isCurrentUser = (data.user && data.user.id) === (store.get('user') && store.get('user').id);
@@ -229,7 +236,7 @@ export default class Comment extends Component {

    const defaultMods = {
      pinned,
-      useless: userBlocked || deleted,
+      useless: userBlocked || deleted || (score <= USELESS_COMMENT_SCORE && !mods.pinned && !mods.disabled),
      // TODO: add default view mod or don't?
      view: o.user.admin ? 'admin' : null,
      replying: isInputVisible,
@@ -237,7 +244,7 @@ export default class Comment extends Component {

    if (mods.view === 'preview') {
      return (
-        <div className={b('comment', props, defaultMods)} id={`${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} role="listitem article" aria-level={mods.level}>
+        <div className={b('comment', props, defaultMods)} role="listitem article" aria-level={mods.level}>
          <div className="comment__body">
            <div className="comment__info">
              <a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__username">{o.user.name}</a>
@@ -328,7 +335,7 @@ export default class Comment extends Component {

          <div className="comment__actions">
            {
-              !mods.disabled && !isGuest && (
+              !deleted && !mods.disabled && !isGuest && (
                <span
                  className="comment__action"
                  role="button"
@@ -339,8 +346,16 @@ export default class Comment extends Component {
            }

            {
-              isAdmin &&
-              (
+              !mods.disabled && mods.collapsible && (
+                <span
+                  className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
+                  onClick={this.toggleCollapse}
+                >{mods.collapsed ? '+' : '−'}</span>
+              )
+            }
+
+            {
+              !deleted && isAdmin && (
                <span className="comment__controls">
                  {
                    !pinned && (
@@ -5,6 +5,7 @@ export { default } from './comment';
 require('./comment.scss');

 require('./__action/comment__action.scss');
+require('./__action/_type/_collapse/comment__action_type_collapse.scss');

 require('./__avatar/comment__avatar.scss');
 require('./__avatar/_default/comment__avatar_default.scss');
@@ -0,0 +1,4 @@
+.input__preview-wrapper {
+  overflow: hidden;
+  background: #eee;
+}
@@ -1,6 +1,7 @@
 .input__preview {
  margin-top: 8px;
  padding: 7px 11px;
+  overflow: hidden;
  font-size: 16px;
  line-height: 1.2;
  border: 1px dashed #eee;
@@ -14,3 +14,4 @@ require('./__error/input__error.scss');
 require('./__field/input__field.scss');
 require('./__field-wrapper/input__field-wrapper.scss');
 require('./__preview/input__preview.scss');
+require('./__preview-wrapper/input__preview-wrapper.scss');
@@ -149,10 +149,12 @@ export default class Input extends Component {
          // TODO: it can be more elegant;
          // for example it can render full comment component here (or above textarea on mobile)
          !!preview && (
-            <div
-              className={b('input__preview', { mix: 'raw-content' })}
-              dangerouslySetInnerHTML={{ __html: preview }}
-            />
+            <div className="input__preview-wrapper">
+              <div
+                className={b('input__preview', { mix: 'raw-content' })}
+                dangerouslySetInnerHTML={{ __html: preview }}
+              />
+            </div>
          )
        }
      </form>
@@ -58,5 +58,19 @@
  pre {
    overflow-x: auto;
    tab-size: 2;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  sup, sub {
+    sup, sub {
+      vertical-align: middle; // to prevent some visual cheats
+    }
  }
 }
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 import api from 'common/api';

-import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants';
+import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX, DEFAULT_SORT } from 'common/constants';
 import { url } from 'common/settings';
 import store from 'common/store';

@@ -21,9 +21,9 @@ export default class Root extends Component {
    let sort;

    try {
-      sort = localStorage.getItem(LS_SORT_KEY);
+      sort = localStorage.getItem(LS_SORT_KEY) || DEFAULT_SORT;
    } catch(e) {
-      sort = '-score';
+      sort = DEFAULT_SORT;
    }

    this.state = {
@@ -100,7 +100,7 @@ export default class Root extends Component {
    const newWindow = window.open(`${BASE_URL}/auth/${provider}/login?from=${encodeURIComponent(location.href)}`);

    let secondsPass = 0;
-    const checkMsDelay = 200;
+    const checkMsDelay = 100;
    const checkInterval = setInterval(() => {
      secondsPass += checkMsDelay;

@@ -3,20 +3,36 @@ import { h, Component } from 'preact';
 import Comment from 'components/comment';

 export default class Thread extends Component {
-  render(props) {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      collapsed: false,
+    };
+
+    this.onCollapseToggle = this.onCollapseToggle.bind(this);
+  }
+
+
+  onCollapseToggle() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
+  render(props, { collapsed }) {
    const { data: { comment, replies = [] }, mix, mods = {}, onReplyClick } = props;

    return (
      <div className={b('thread', props)} role="list" >
        <Comment
          data={comment}
-          mods={{ level: mods.level }}
+          mods={{ level: mods.level, collapsed, collapsible: !!replies.length }}
          onReply={props.onReply}
          onReplyClick={onReplyClick}
+          onCollapseToggle={this.onCollapseToggle}
        />

        {
-          !!replies.length && replies.map(thread => (
+          !collapsed && !!replies.length && replies.map(thread => (
            <Thread
              data={thread}
              mods={{ level: mods.level < 5 ? mods.level + 1 : mods.level }}
@@ -24,7 +24,7 @@

  <script>
    var remark_config = {
-ё      site_id: 'remark',
+      site_id: 'remark',
      url: 'https://remark42.com/demo/',
    };