Merge branch 'moderate-shortcuts' of https://github.com/gerardogalvez/talk into moderate-shortcuts

2026-08-19 12:40:16 +08:00 · 2017-10-06 20:20:48 -05:00
parent cbd7337dbc c7bf3c1a3c
commit e4ff48ea88
36 changed files with 1188 additions and 244 deletions
@@ -16,19 +16,18 @@
 }

 .header {
-  background-color: transparent;
  box-shadow: none;
  min-height: 58px;
  display: block;
+  background-color: #696969;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
 }

 .header > div {
-  background-color: #696969;
  position: relative;
  padding: 0;
-  min-width: 1280px;
+  width: 1280px;
  margin: 0 auto;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  height: 58px;
 }

@@ -1,5 +1,4 @@
 .layout {
-    max-width: 1280px;
    margin: 0 auto;
    background-color: #FAFAFA;
 }
@@ -2,6 +2,8 @@
  padding: 10px;
  display: flex;
  padding-bottom: 200px;
+  max-width: 1280px;
+  margin: 0 auto;
 }

 .mainFlaggedContent {
@@ -3,6 +3,8 @@
 */

 .container {
+  max-width: 1280px;
+  margin: 0 auto;
  display: flex;

  h3 {
@@ -4,6 +4,8 @@

 .Dashboard {
  display: flex;
+  max-width: 1280px;
+  margin: 0 auto;
 }

 .heading {
@@ -1,6 +1,8 @@
 .container {
  padding: 10px;
  display: flex;
+  max-width: 1280px;
+  margin: 0 auto;
 }

 .leftColumn {
@@ -35,16 +35,23 @@ export class CountdownSeconds extends React.Component {
    const {until, classNameForMsRemaining} = this.props;
    const msRemaining = until - now;
    const secRemaining = msRemaining / 1000;
-    const wholeSecRemaining = Math.floor(secRemaining);
-    const plural = secRemaining !== 1;
-    const units = t(plural ? 'edit_comment.seconds_plural' : 'edit_comment.second');
+    const minRemaining = secRemaining / 60;
+    const secToMinRemaining = secRemaining % 60;
+    const wholeMinRemaining = Math.floor(minRemaining);
+    const wholeSecRemaining = Math.floor(secToMinRemaining);
+    const secUnit = t(wholeSecRemaining !== 1 ? 'edit_comment.seconds_plural' : 'edit_comment.second');
+    const minUnit = t(wholeMinRemaining !== 1 ? 'edit_comment.minutes_plural' : 'edit_comment.minute');
    let classFromProp;
    if (typeof classNameForMsRemaining === 'function') {
      classFromProp = classNameForMsRemaining(msRemaining);
    }
+    const text = wholeMinRemaining > 0
+      ? `${wholeMinRemaining} ${minUnit} ${wholeSecRemaining} ${secUnit}`
+      : `${wholeSecRemaining} ${secUnit}`;
+
    return (
      <span className={classFromProp}>
-        {`${wholeSecRemaining} ${units}`}
+        {text}
      </span>
    );
  }
@@ -270,6 +270,7 @@ button.comment__action-button[disabled],
  width: 75%;
  font-size: 16px;
  border: 1px solid #ccc;
+  max-width: calc(100% - 40px);
 }

 /* Close comments */
@@ -1,6 +1,5 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import {expect} from 'chai';
 import Markdown from '../Markdown';

 const render = (props) => shallow(<Markdown {...props} />);
@@ -9,12 +8,12 @@ describe('Markdown', () => {
  it('should convert Markdown to html', () => {
    const wrapper = render({content: '*test*'});
    const html = wrapper.html();
-    expect(html).to.contain('<em>');
+    expect(html).toMatch('<em>');
  });

  it('should set target="_parent" for links', () => {
    const wrapper = render({content: '[link](https://coralproject.net)'});
    const html = wrapper.html();
-    expect(html).to.contain('target="_parent"');
+    expect(html).toMatch('target="_parent"');
  });
 });
@@ -13,7 +13,7 @@ import pt_BR from '../../../locales/pt_BR.yml';

 // Translations are happening at https://translate.lingohub.com/the-coral-project/dashboard

-const defaultLanguage = 'en';
+const defaultLanguage = process.env.TALK_DEFAULT_LANG;
 const translations = {...en, ...es, ...fr, ...pt_BR};

 let lang;
@@ -85,8 +85,8 @@ export class CommentForm extends React.Component {
  render() {
    const {maxCharCount, submitEnabled, cancelButtonClassName, submitButtonClassName, charCountEnable, body, loadingState} = this.props;

-    const length = body.length;
-    const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount;
+    const length = body.trim().length;
+    const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount; 
    const disableSubmitButton = !length || isRespectingMaxCount(length) || !submitEnabled({body}) || loadingState === 'loading';
    const disableCancelButton = loadingState === 'loading';
    const disableTextArea = loadingState === 'loading';
@@ -1,26 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentBox from '../CommentBox';
-
-describe('CommentBox', () => {
-  let comment;
-  let render;
-  beforeEach(() => {
-    comment = {};
-    const postItem = (item) => {
-      comment.posted = item;
-      return Promise.resolve(4);
-    };
-    render = shallow(<CommentBox
-      postItem={postItem}
-      updateItem={(e) => comment.text = e.target.value}
-      item_id={'1'}
-      comments={['1', '2', '3']}/>);
-  });
-
-  it('should render the CommentBox appropriately', () => {
-    expect(render.contains('<div class="CommentBox"')).to.be.true;
-    expect(render.contains('<button class="postCommentButton"')).to.be.true;
-  });
-});
@@ -1,29 +1,36 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import {expect} from 'chai';
 import InfoBox from '../InfoBox';
+import renderer from 'react-test-renderer';

 const render = (props) => shallow(<InfoBox {...props} />);

 describe('InfoBox', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <InfoBox content='test' enable/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
  it('should render hidden InfoBox', () => {
    const wrapper = render();
    const className = wrapper.prop('className');
-    expect(className).to.include('-info');
-    expect(className).to.include('hidden');
+    expect(className).toMatch('-info');
+    expect(className).toMatch('hidden');
  });

  it('should render enabled InfoBox', () => {
    const wrapper = render({enable: true});
    const className = wrapper.prop('className');
-    expect(className).to.include('-info');
-    expect(className).to.not.include('hidden');
+    expect(className).toMatch('-info');
+    expect(className).not.toMatch('hidden');
  });

  it('should render Markdown', () => {
    const wrapper = render({content: 'x'});
    const Markddown = wrapper.find('Markdown');
-    expect(Markddown).to.have.length(1);
-    expect(Markddown.prop('content')).to.equal('x');
+    expect(Markddown).toHaveLength(1);
+    expect(Markddown.prop('content')).toEqual('x');
  });
 });
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoBox renders correctly 1`] = `
+<div
+  className="talk-plugin-infobox-info "
+>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>test</p>
+",
+      }
+    }
+  />
+</div>
+`;