Merge pull request #106 from CaptainFact/staging

Release 0.8.6

README.md

@@ -30,9 +30,7 @@ This is a HTML5 application, built with [Brunch](http://brunch.io).
 - Redux: state management
 - ReactRouter: routing
 - phoenix: interaction with phoenix socket
-- Bulma: base styles (we're still using an old 0.3.2 version, documentation
-[here (Github)](https://github.com/jgthms/bulma/tree/0395dc59d8b147f2f47d057a6ffde2eb2966db49/docs/documentation))
-or [here (archive.org)](https://web.archive.org/web/20170518075321/http://bulma.io/documentation/overview/start/)
+- Bulma: base styles
 
 ## Conventions
 
@@ -64,7 +62,7 @@ Components files should export two versions :
 2. `export default MyComponent` : connected component
 
 Non-connected components exports are there for testing them without the need
-to be connected to a store. If component is always dump, you can export
+to be connected to a store. If component is always dumb, you can export
 `default` only.
 
 You might find some exceptions in old components but all new
@@ -82,6 +80,7 @@ See [CONTRIBUTING.md](CONTRIBUTING.md)
 ## Linked projects
 
 * [Extension](https://github.com/CaptainFact/captain-fact-extension)
+* [Overlay injector](https://github.com/CaptainFact/captain-fact-overlay-injector)
 
 ## Dependencies 
 

app/assets/assets/help/en/contribute/tasks.md

@@ -15,7 +15,7 @@ can [contact us](/help/contact) directly.
 If you have experience with legal structures issues and particularly with
 non-profit / common good companies your help could be extremely valuable. 
 
-# Traductions
+# Translation
 
 Helping to translate CaptainFact doesn't require any technical skills, it's just a matter
 of replacing strings in files.
@@ -31,4 +31,4 @@ of replacing strings in files.
 
 #### If you don't know what the heck git is about
 
-[Contact us](/help/contact) and we'll send you the files along with instructions.
+[Contact us](/help/contact) and we'll send you the files along with instructions.

app/assets/assets/help/fr/ambassadors.md

@@ -37,7 +37,7 @@ vous êtes là pour nous rappeler à l'ordre.
 Que ça soit sur la plateforme ou 
 le [Discord](https://discord.gg/2Qd7hMz), vous pouvez prendre la
 température des utilisateurs, modérer les échanges et garantir 
-une utilisation seine de la plateforme.
+une utilisation saine de la plateforme.
 
 
 ### 👁‍ Vous êtes en **auto-gestion** ! 
@@ -47,17 +47,16 @@ nous souhaitons construire une relation de confiance avec vous.
 
 ### ⏲‍ Vous êtes **mandatés** ! 
 Afin de garantir un minimum d'investissement et 
-un renouvellement régulier, votre mandat sera limité à une durée de 6 mois
-et renouvelable.
-
+un renouvellement régulier des ambassadeurs, votre mandat est de 6 mois 
+et il est renouvelable.
 
 ### 😃‍ Vous êtes **réels** ! 
 Nous allons travailler avec vous pour définir votre 
-statut juridique au sein de notre structure pour garantir
+statut juridique au sein de notre structure pour garantir votre indépendance.
 
 
 ### 🔗‍ Vous êtes **un lien** ! 
-Nous souhaitons casser cette dimension virtuelle de 
+Nous souhaitons casser la dimension virtuelle de 
 notre communauté et vous avez un rôle à jouer, que ca soit à travers la 
 promotion ou l'organisation d'événements nous serons là pour vous soutenir.
 
@@ -72,4 +71,4 @@ des règles qui vous sembleraient importantes.
 De quitter vos fonctions d'ambassadeur à tout moment.
 
 ### 😃‍ Vous êtes **géniaux** ! 
-Merci pour votre implication et votre travail.
+Merci pour votre implication et votre travail.

app/assets/assets/help/fr/bug_report.md

@@ -14,7 +14,7 @@ pour l'extension.
 
 # Pire ! Une faille de sécurité ?
 
-Nous croyons en la divulation responsable et l'encourageons.
+Nous croyons en la divulgation responsable et l'encourageons.
 
 Si votre signalement est relatif à une faille de sécurité critique, vous pouvez
 chiffrer votre message avec la clef PGP ci-dessous :

app/assets/assets/help/fr/contribute/tasks.md

@@ -6,7 +6,7 @@ Pour toutes les tâches liées au développement,
 # Design
 
 Pour les tâches liées à la ludification (gamification) vous pouvez jeter un
-coup d'oeuil [par ici](https://github.com/CaptainFact/captain-fact-frontend/issues/6)
+coup d'œuil [par ici](https://github.com/CaptainFact/captain-fact-frontend/issues/6)
 
 Pour tout le reste ou si vous n'êtes pas à l'aise avec Github vous pouvez 
 [nous contacter](/help/contact) directement.

app/assets/assets/help/fr/moderation.md

@@ -1,6 +1,6 @@
 > Si vous croisez un troll, mettez lui un vote négatif et ne le nourissez pas.
 
-Le système de signalement vous permet de signaler du contenu inaproprié. Vous êtes autorisé à effectuer
+Le système de signalement vous permet de signaler du contenu inapproprié. Vous êtes autorisé à effectuer
 un petit nombre de signalements chaque jour et devez les utiliser judicieusement: en abuser peut vous faire
 perdre beaucoup de réputation.
 
@@ -31,7 +31,7 @@ Pour chaque action signalée, les modérateurs ont 3 choix :
 
 ## Règles
 
-Il faut le vote d'au mois 3 modérateurs avant de pouvoir prendre une décision.
+Il faut le vote d'au moins 3 modérateurs avant de pouvoir prendre une décision.
 Un score est ensuite généré entre -1.0 et +1.0: 
 
 ```

app/assets/assets/help/fr/privacy.md

@@ -18,7 +18,7 @@ Vous devez par contre considérer toutes vos intéractions (ajout d'un commentai
 comme **publiques**. Vous êtes libre d'utiliser votre vrai nom ou juste un bon vieux
 pseudonyme si c'est ce que vous préférez.
 
-Bien que rien ne soit infaible, nous faisons attention à la sécurité et essayons de suivre les
+Bien que rien ne soit infaillible, nous faisons attention à la sécurité et essayons de suivre les
 meilleurs pratiques pour garder vos données aussi protégées que possible.
 
 Pour en savoir plus sur la politique de vie privée de l'extension pour navigateur,

app/components/App/Sidebar.jsx

@@ -8,6 +8,7 @@ import { Icon } from "../Utils"
 import { MOBILE_WIDTH_THRESHOLD, USER_PICTURE_SMALL } from '../../constants'
 import { MIN_REPUTATION_MODERATION } from "../../constants"
 import { LoadingFrame } from '../Utils/LoadingFrame'
+import RawIcon from '../Utils/RawIcon'
 import ReputationGuard from '../Utils/ReputationGuard'
 import LanguageSelector from './LanguageSelector'
 import capitalize from 'voca/capitalize'
@@ -41,7 +42,7 @@ export default class Sidebar extends React.PureComponent {
     const classes = classNames(className, {'link-with-icon': !!iconName})
     return (
       <Link className={classes} activeClassName='is-active' onClick={this.closeSideBarIfMobile} {...props}>
-        {iconName && <Icon name={iconName} withContainer={false}/>}
+        {iconName && <RawIcon name={iconName}/>}
         <span>{children}</span>
       </Link>
     )
@@ -61,9 +62,9 @@ export default class Sidebar extends React.PureComponent {
             <this.MenuLink to={baseLink} className="my-profile-link" onlyActiveOnIndex={true}>
               <div className="current-user-link">
                 <UserPicture size={USER_PICTURE_SMALL} user={this.props.CurrentUser}/>
-                <h4 className="title is-4" style={{fontSize: this.usernameFontSize()}}>
+                <span className="username" style={{fontSize: this.usernameFontSize()}}>
                   { username }
-                </h4>
+                </span>
                 <ScoreTag reputation={reputation}/>
               </div>
             </this.MenuLink>
@@ -77,10 +78,10 @@ export default class Sidebar extends React.PureComponent {
         </nav>
         <ul className="menu-list user-links">
           <this.MenuListLink to={`${baseLink}/settings`} iconName="cog" children={t('menu.settings')}/>
-          <this.MenuListLink to={`${username}/bookmarks`} iconName="bookmark" className="is-disabled">
+          <this.MenuListLink to={`${username}/bookmarks`} iconName="bookmark" disabled>
             { t('menu.myBookmarks') }
           </this.MenuListLink>
-          <this.MenuListLink to={`${baseLink}/activity`} iconName="tasks" className="is-disabled">
+          <this.MenuListLink to={`${baseLink}/activity`} iconName="tasks" disabled>
             { t('menu.myActivity') }
           </this.MenuListLink>
         </ul>
@@ -114,7 +115,7 @@ export default class Sidebar extends React.PureComponent {
         className={`menu ${className} ${sidebarExpended ? 'expended' : ''}`}>
         <div className="logo-banner">
           <div className="menu-collapse-button" onClick={() => this.props.toggleSidebar()}>
-            <Icon name="bars" withContainer={false}/>
+            <RawIcon name="bars"/>
           </div>
           <Link to="/"><Logo/></Link>
         </div>
@@ -153,7 +154,7 @@ export default class Sidebar extends React.PureComponent {
         <this.MenuListLink to="/videos" iconName="television" onlyActiveOnIndex={true}>
           { capitalize(t('entities.video_plural')) }
         </this.MenuListLink>
-        <this.MenuListLink to="/speakers" iconName="users" className="is-disabled">
+        <this.MenuListLink to="/speakers" iconName="users" disabled>
           { capitalize(t('entities.speaker_plural')) }
         </this.MenuListLink>
         <ReputationGuard requiredRep={MIN_REPUTATION_MODERATION}>
@@ -166,6 +167,6 @@ export default class Sidebar extends React.PureComponent {
   }
 
   usernameFontSize() {
-    return `${1.5 - this.props.CurrentUser.username.length / 38}em`
+    return `${1.4 - this.props.CurrentUser.username.length / 40}em`
   }
 }

app/components/App/index.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { connect } from "react-redux"
 import { I18nextProvider } from 'react-i18next'
+import { Helmet } from 'react-helmet'
 
 import i18n from '../../i18n/i18n'
 import { FlashMessages } from "../Utils"
@@ -20,6 +21,9 @@ export default class App extends React.PureComponent {
     return (
       <I18nextProvider i18n={i18n}>
         <div lang={this.props.locale}>
+          <Helmet>
+            <title>CaptainFact</title>
+          </Helmet>
           <MainModalContainer/>
           <div className="columns is-mobile is-gapless">
             <Sidebar className="column is-narrow"/>

app/components/Comments/CommentDisplay.jsx

@@ -22,33 +22,25 @@ import MediaLayout from '../Utils/MediaLayout'
 import Vote from './Vote'
 
 
-// TODO Use ReputationGuard to protect actions
-// Add the following possibilities to reputationGuard :
-// onUnauthorized = "hide" | "showMessage" | "flash"
-
 @connect(({CurrentUser, VideoDebate}, props) => ({
   currentUser: CurrentUser.data,
   myVote: VideoDebate.comments.voted.get(props.comment.id, 0),
   isVoting: VideoDebate.comments.voting.has(props.comment.id),
   replies: VideoDebate.comments.replies.get(props.comment.id),
-  isFlagged: VideoDebate.comments.myFlags.has(props.comment.id) // TODO Selector
+  isFlagged: VideoDebate.comments.myFlags.has(props.comment.id)
 }), {addModal, deleteComment, flagComment, commentVote, change, flashErrorUnauthenticated})
-@translate(['main', 'videoDebate'])
+@translate('main')
 export class CommentDisplay extends React.PureComponent {
   constructor(props) {
     super(props)
     this.state = {isBlurred: false, showReplies: props.nesting !== 4}
-    this.showRepliesToggle = this.showRepliesToggle.bind(this)
-
-    // Authenticated actions
-    this.actionReply = this.actionAuthenticated(this.actionReply.bind(this))
-    this.handleFlag = this.actionAuthenticated(this.handleFlag.bind(this))
   }
 
   render() {
     const { user, text, source, score, inserted_at, approve } = this.props.comment
     const { t, withoutActions, withoutHeader, replyingTo, nesting, replies, myVote, isVoting, hideThread, className, richMedias=true } = this.props
     const approveClass = approve !== null && (approve ? 'approve' : 'refute')
+    const showReplies = this.state.showReplies
     const isOwnComment = this.props.comment.user.id === this.props.currentUser.id
 
     return (
@@ -58,7 +50,9 @@ export class CommentDisplay extends React.PureComponent {
           ContainerType="article"
           left={!withoutActions &&
             <Vote isVoting={isVoting} score={score} myVote={myVote}
-                  onVote={value => this.props.commentVote({comment: this.props.comment, value})}/>
+                  onVote={value => this.ensureAuthenticated() &&
+                    this.props.commentVote({comment: this.props.comment, value})
+                  }/>
           }
           content={
             <div>
@@ -83,11 +77,12 @@ export class CommentDisplay extends React.PureComponent {
                 <nav className="comment-actions">
                   { isOwnComment ? this.renderOwnCommentActions() : this.renderOtherCommentActions()}
                   { replies &&
-                    <a onClick={this.showRepliesToggle}>
-                      <Icon size="small" name={this.state.showReplies ? "eye-slash" : "eye"}/>
+                    <a className={!showReplies ? "reply-collapsed" : null}
+                       onClick={() => this.setState({showReplies: !showReplies})}>
+                      <Icon size="small" name={showReplies ? "eye-slash" : "eye"}/>
                       <span>
                         {t('videoDebate:comment.replies', {
-                          context: this.state.showReplies ? 'hide' : 'show',
+                          context: showReplies ? 'hide' : 'show',
                           count: replies.size
                         })}
                       </span>
@@ -109,7 +104,7 @@ export class CommentDisplay extends React.PureComponent {
 
   renderOwnCommentActions() {
     return [
-      <a key="r" onClick={this.actionReply}>
+      <a key="r" onClick={() => this.actionReply()}>
         <Icon name="plus"/>
         <span> {this.props.t('actions.addToThread')}</span>
       </a>,
@@ -122,11 +117,11 @@ export class CommentDisplay extends React.PureComponent {
 
   renderOtherCommentActions() {
     return [
-      <a key="r" onClick={this.actionReply}>
+      <a key="r" onClick={() => this.actionReply()}>
         <Icon name="reply"/>
         <span> {this.props.t('actions.reply')}</span>
       </a>,
-      <a key="f" onClick={this.handleFlag}
+      <a key="f" onClick={() => this.handleFlag()}
          className={classNames('action-report', {selected: this.props.isFlagged})}>
         <Icon name="flag"/>
         <span> {this.props.t(this.props.isFlagged ? 'actions.flagged' : 'actions.flag')}</span>
@@ -146,7 +141,26 @@ export class CommentDisplay extends React.PureComponent {
     })
   }
 
+  // ---- Authenticated actions ----
+
+  ensureAuthenticated() {
+    if (!this.props.currentUser.id) {
+      this.props.flashErrorUnauthenticated()
+      return false
+    }
+    return true
+  }
+
+  actionReply() {
+    if (!this.ensureAuthenticated())
+      return
+    const formName = `formAddComment-${this.props.comment.statement_id}`
+    this.props.change(formName, 'reply_to', this.props.comment)
+  }
+
   handleFlag() {
+    if (!this.ensureAuthenticated())
+      return
     this.setState({isBlurred: true})
     this.props.addModal({
       Modal: ModalFlag,
@@ -160,22 +174,4 @@ export class CommentDisplay extends React.PureComponent {
       }
     })
   }
-
-  actionAuthenticated(func) {
-    return args => {
-      if (!this.props.currentUser.id)
-        this.props.flashErrorUnauthenticated()
-      else
-        func(args)
-    }
-  }
-
-  showRepliesToggle() {
-    this.setState({showReplies: !this.state.showReplies})
-  }
-
-  actionReply() {
-    const formName = `formAddComment-${this.props.comment.statement_id}`
-    this.props.change(formName, 'reply_to', this.props.comment)
-  }
 }