Merge pull request #71 from CaptainFact/staging

Release 0.7.9

.travis.yml

@@ -1,8 +1,8 @@
 stages:
   - name: test
-    if: NOT branch IN (master, staging)
+    if: NOT (branch IN (master, staging) OR tag =~ ^v\d+)
   - name: deploy
-    if: branch IN (master, staging)
+    if: branch IN (master, staging) OR tag =~ ^v\d+
 
 jobs:
   include:

app/components/App/Sidebar.jsx

@@ -13,7 +13,7 @@ import ScoreTag from '../Users/ScoreTag'
 import { logout } from '../../state/users/current_user/effects'
 import { closeSidebar, toggleSidebar } from '../../state/user_preferences/reducer'
 import UserPicture from '../Users/UserPicture'
-import i18n from '../../i18n'
+import i18n from '../../i18n/i18n'
 import Logo from './Logo'
 
 

app/components/App/index.jsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux"
 import { I18nextProvider } from 'react-i18next'
 
 import { FlashMessages } from "../Utils"
-import i18n from '../../i18n'
+import i18n from '../../i18n/i18n'
 import { getCurrentUser } from '../../state/users/current_user/effects'
 import { default as Sidebar } from "./Sidebar"
 import { MainModalContainer } from "../Modal/MainModalContainer"

app/components/Comments/CommentDisplay.jsx

@@ -17,7 +17,7 @@ import { addModal } from '../../state/modals/reducer'
 import { commentVote, deleteComment, flagComment } from '../../state/video_debate/comments/effects'
 import {flashErrorUnauthenticated} from '../../state/flashes/reducer'
 import UserPicture from '../Users/UserPicture'
-import { USER_PICTURE_MEDIUM } from '../../constants'
+import { USER_PICTURE_SMALL } from '../../constants'
 import MediaLayout from '../Utils/MediaLayout'
 
 
@@ -132,24 +132,26 @@ export class CommentDisplay extends React.PureComponent {
                      onClick={() => myVote >= 0 ? this.vote(-1) : this.vote(0)}/>
              </div>
              }
-             <UserPicture user={user} size={USER_PICTURE_MEDIUM}/>
            </figure>
           }
           content={
-            <div className="content">
+            <div>
               <div>
                 {!withoutHeader && <div className="comment-header">
+                  <UserPicture user={user} size={USER_PICTURE_SMALL}/>
                   <UserAppellation user={user} withoutActions={withoutActions}/>
                   <span> - </span>
                   <TimeSince className="comment-time" time={inserted_at}/>
                 </div>}
+                {(text || replyingTo) &&
+                  <div className="comment-text">
+                    {nesting > 6 && replyingTo &&
+                      <Tag style={{marginRight: 5}}>@{replyingTo.username}</Tag>
+                    }
+                    { text }
+                  </div>
+                }
                 {source && <Source withoutPlayer={!richMedias} source={source}/>}
-                <div className="comment-text">
-                  {nesting > 4 && replyingTo &&
-                  <Tag style={{marginRight: 5}}>@{replyingTo.username}</Tag>
-                  }
-                  { text }
-                </div>
               </div>
               {!withoutActions &&
               <nav className="comment-actions">

app/components/Comments/Source.jsx

@@ -31,12 +31,14 @@ export const Source = ({ source: { url, title, site_name }, withoutPlayer }) =>
                          config={{youtube: {playerVars: { showinfo: 1 }}}}/>
   } else {
     return (
-      <a href={url} target="_BLANK" className="fact-source">
-        <span className="site-name">
-          {upperCase(site_name) || getDisplayableHostname(url)}
-        </span>
-        <span className="article-title">{title}</span>
-      </a>
+      <div>
+        <a href={url} target="_BLANK" className="fact-source">
+          <span className="site-name">
+            {upperCase(site_name) || getDisplayableHostname(url)}
+          </span>
+          <span className="article-title">{title}</span>
+        </a>
+      </div>
     )
   }
 }

app/components/Statements/Statement.jsx

@@ -43,6 +43,7 @@ export class Statement extends React.PureComponent {
   constructor(props) {
     super(props)
     this.state = { isDeleting: false, isEditing: false }
+    this.showHistory = this.showHistory.bind(this)
   }
 
   componentDidUpdate(prevProps) {
@@ -85,6 +86,8 @@ export class Statement extends React.PureComponent {
   }
 
   renderCardHeaderAndContent(isAuthenticated, speaker, statement) {
+    const {t, forcePosition, setScrollTo, addModal} = this.props
+
     if (this.state.isEditing) return (
       <StatementForm
         form={`StatementForm-${statement.id}`}
@@ -106,8 +109,8 @@ export class Statement extends React.PureComponent {
         <header className="card-header">
           <p className="card-header-title">
             <TimeDisplay time={statement.time} handleClick={t => {
-              this.props.forcePosition(t)
-              this.props.setScrollTo({id: statement.id, __forceAutoScroll: true})
+              forcePosition(t)
+              setScrollTo({id: statement.id, __forceAutoScroll: true})
             }}/>
             {speaker && speaker.picture &&
             <img className="speaker-mini" src={staticResource(speaker.picture)}/>
@@ -116,19 +119,25 @@ export class Statement extends React.PureComponent {
           </p>
 
           <div className="card-header-icon">
-            <LinkWithIcon iconName="history" onClick={ this.showHistory.bind(this) }/>
-            {isAuthenticated && <LinkWithIcon iconName="pencil" onClick={() => this.setState({isEditing: true})}/>}
-            <LinkWithIcon iconName="share-alt" onClick={() => this.props.addModal({
+            <LinkWithIcon iconName="history" title={t('history')} onClick={ this.showHistory }/>
+            {isAuthenticated &&
+              <LinkWithIcon iconName="pencil"
+                            title={t('main:actions.edit')}
+                            onClick={() => this.setState({isEditing: true})}/>
+            }
+            <LinkWithIcon iconName="share-alt" title={t('main:actions.share')} onClick={() => addModal({
               Modal: ShareModal,
               props: {path: `${location.pathname}?statement=${statement.id}`}
             })}/>
-            {isAuthenticated && <LinkWithIcon iconName="times" onClick={() => this.setState({isDeleting: true})}/>}
+            {isAuthenticated &&
+              <LinkWithIcon iconName="times"
+                            title={t('main:actions.remove')}
+                            onClick={() => this.setState({isDeleting: true})}/>
+            }
           </div>
         </header>
         <div className="card-content statement-text-container">
-          <div className="statement-text">
-            {statement.text}
-          </div>
+          <h3 className="statement-text">{statement.text}</h3>
         </div>
       </div>
     )

app/components/Statements/StatementForm.jsx

@@ -114,11 +114,11 @@ export class StatementForm extends React.PureComponent {
           </div>
         </header>
         <div className="card-content">
-          <div className="statement-text">
+          <h3 className="statement-text">
             <Field autoFocus component={renderTextareaField} name="text" autosize={true}
               normalize={cleanStrMultiline} maxLength={STATEMENT_LENGTH[1]}
               placeholder={speaker ? t('statement.textPlaceholder') : t('statement.noSpeakerTextPlaceholder')}/>
-          </div>
+          </h3>
         </div>
         <footer className="card-footer">
           <LinkWithIcon iconName="floppy-o"

app/components/Users/UserPicture.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {staticResource} from '../../API/resources'
 
 
+// TODO In 0.7.8 user picture URL will never be null
 const getImageUrl = (userId, url, url_mini, size) => {
   if (!url || !url_mini)
     return `https://api.adorable.io/avatars/${size}/${userId}.png`

app/components/UsersActions/ActionsTable.jsx

@@ -87,7 +87,7 @@ class ActionsTable extends PureComponent {
       <tr key={action.id}>
         <td><TimeSince time={ action.time }/></td>
         <td><UserAppellation user={action.user} compact/></td>
-        <td>{this.renderActionIcon(action.type)}<strong>{ t(`action.${action.type}`) }</strong></td>
+        <td>{this.renderActionIcon(action.type)}<strong> { t(`action.${action.type}`) }</strong></td>
         {showEntity && <td><EntityTitle entity={action.entity} entityId={action.entity_id}/></td>}
         <td>
           <a className='button' onClick={() => this.toggleDiff(action, isDiffing)}>

app/components/Utils/TimeSince.jsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import differenceInSeconds from 'date-fns/difference_in_seconds'
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
 import format from 'date-fns/format'
-import { locales } from '../../i18n'
+import { locales } from '../../i18n/i18n'
 
 
 @connect(state => ({locale: state.UserPreferences.locale}))

app/components/VideoDebate/ColumnVideo.jsx

@@ -26,7 +26,7 @@ export class ColumnVideo extends React.PureComponent {
     return (
       <div id="col-video" className="column is-5">
         <VideoPlayer url={url}/>
-        <h3 className="title is-4">{title}</h3>
+        <h2 className="title is-4">{title}</h2>
         <div className="tabs is-toggle is-fullwidth">
           <ul>
             <li className={classNames({'is-active': view === "debate"})}>

app/i18n/en/index.js

@@ -0,0 +1,21 @@
+// TODO Declare translations directly in JS
+
+import achievements from '../../assets/assets/locales/en/achievements.json'
+import errors from '../../assets/assets/locales/en/errors.json'
+import help from '../../assets/assets/locales/en/help.json'
+import history from '../../assets/assets/locales/en/history.json'
+import home from '../../assets/assets/locales/en/home.json'
+import main from '../../assets/assets/locales/en/main.json'
+import user from '../../assets/assets/locales/en/user.json'
+import videoDebate from '../../assets/assets/locales/en/videoDebate.json'
+
+export default {
+  achievements,
+  errors,
+  help,
+  history,
+  home,
+  main,
+  user,
+  videoDebate
+}

app/i18n/fr/index.js

@@ -0,0 +1,21 @@
+// TODO Declare translations directly in JS
+
+import achievements from '../../assets/assets/locales/fr/achievements.json'
+import errors from '../../assets/assets/locales/fr/errors.json'
+import help from '../../assets/assets/locales/fr/help.json'
+import history from '../../assets/assets/locales/fr/history.json'
+import home from '../../assets/assets/locales/fr/home.json'
+import main from '../../assets/assets/locales/fr/main.json'
+import user from '../../assets/assets/locales/fr/user.json'
+import videoDebate from '../../assets/assets/locales/fr/videoDebate.json'
+
+export default {
+  achievements,
+  errors,
+  help,
+  history,
+  home,
+  main,
+  user,
+  videoDebate
+}

app/i18n/i18n.js

@@ -0,0 +1,48 @@
+import i18n from 'i18next'
+import titleCase from 'voca/title_case'
+
+import dateLocaleFR from 'date-fns/locale/fr'
+import datelocaleEN from 'date-fns/locale/en'
+import fr from './fr'
+import en from './en'
+import store from '../state/index'
+import { fetchLocale } from '../state/user_preferences/effects'
+import { JS_ENV } from '../config.jsenv'
+
+
+// Add default formats for dates
+dateLocaleFR.defaultDateTimeFormat = "[Le] D MMM YYYY [à] H:mm"
+dateLocaleFR.defaultDateFormat = "[Le] D MMM YYYY"
+datelocaleEN.defaultDateTimeFormat = "D MMM YYYY [at] H:mm"
+datelocaleEN.defaultDateFormat = "D MMM YYYY"
+
+export const locales = {fr: dateLocaleFR, en: datelocaleEN}
+
+// Configure I18N
+i18n
+  .init({
+    fallbackLng: 'en',
+    resources: {fr, en},
+    lng: store.getState().UserPreferences.locale,
+    defaultNS: 'main',
+    joinArrays: '\n',
+    debug: JS_ENV !== 'prod',
+    react: {
+      wait: true
+    },
+    interpolation: {
+      escapeValue: false, // Not needed for react
+      formatSeparator: ',',
+      format: function(value, format, lng) {
+        if (format === 'lowerCase') return value.toLowerCase();
+        if (format === 'upperCase') return value.toUpperCase();
+        if (format === 'titleCase') return titleCase(value);
+        if (format === 'unSnake') return value.replace('_', ' ');
+        return value;
+      }
+    }
+  });
+
+i18n.on('languageChanged', language => store.dispatch(fetchLocale(language)))
+
+export default i18n;

app/index.html

@@ -48,6 +48,7 @@
       <div id="preloading-frame">
         <img src="/assets/img/logo.png" class="animated-logo"/>
         <p>Loading...</p>
+        <noscript>Your browser does not support JavaScript!</noscript>
       </div>
     </div>
     <script src="/assets/js/vendor.js?v={!major!}.{!minor!}.{!maintenance!}"></script>

app/styles/_components/VideoDebate/history.sass

@@ -4,6 +4,8 @@
   background: white
 
 .actions-list.table
+  th .button
+    display: table-cell
   th, td, th> *
     vertical-align: middle
   margin-bottom: 0.5em

app/styles/_components/VideoDebate/video_debate.sass

@@ -12,7 +12,9 @@
 
   &> .tabs
     margin-bottom: 0
-    &> ul > li > a
+    .icon
+      font-size: 16px
+    a
       border-radius: 0
       &:first-child
         border-left: none