[https://github.com/tracim/tracim/issues/644] added autogenerated avatar when missing

frontend/src/reducer/user.js

@@ -6,6 +6,7 @@ import {
   USER_DATA,
   USER_LANG
 } from '../action-creator.sync.js'
+import { generateAvatarFromPublicName } from 'tracim_frontend_lib'
 
 const defaultUser = {
   user_id: -1,
@@ -31,7 +32,9 @@ export default function user (state = defaultUser, action) {
       return {
         ...state,
         ...action.user,
-        avatar_url: 'https://www.algoo.fr/static/images/people_images/PERSO_SEUL.png' // @FIXME use avatar from api when db handles it
+        avatar_url: action.user.avatar_url
+          ? action.user.avatar_url
+          : generateAvatarFromPublicName(action.user.public_name)
       }
 
     case `${SET}/${USER_DISCONNECTED}`:

frontend_app_html-document/src/container/HtmlDocument.jsx

@@ -5,6 +5,7 @@ import i18n from '../i18n.js'
 import {
   addAllResourceI18n,
   handleFetchResult,
+  generateAvatarFromPublicName,
   PopinFixed,
   PopinFixedHeader,
   PopinFixedOption,
@@ -119,7 +120,16 @@ class HtmlDocument extends React.Component {
       handleFetchResult(await fetchResultRevision)
     ])
       .then(([resComment, resRevision]) => {
-        const resCommentWithProperDate = resComment.body.map(c => ({...c, created: (new Date(c.created)).toLocaleString()}))
+        const resCommentWithProperDateAndAvatar = resComment.body.map(c => ({
+          ...c,
+          created: (new Date(c.created)).toLocaleString(),
+          author: {
+            ...c.author,
+            avatar_url: c.author.avatar_url
+              ? c.author.avatar_url
+              : generateAvatarFromPublicName(c.author.public_name)
+          }
+        }))
 
         const revisionWithComment = resRevision.body
           .map((r, i) => ({
@@ -128,7 +138,7 @@ class HtmlDocument extends React.Component {
             timelineType: 'revision',
             commentList: r.comment_ids.map(ci => ({
               timelineType: 'comment',
-              ...resCommentWithProperDate.find(c => c.content_id === ci)
+              ...resCommentWithProperDateAndAvatar.find(c => c.content_id === ci)
             })),
             number: i + 1
           }))

frontend_app_html-document/src/css/index.styl

@@ -37,9 +37,6 @@
     &__messagelist
       min-height 70px
       &__item
-        &__avatar
-          border 1px solid darkHtmlColor
-          background-color off-white
         &__content
           color darkGrey
       &__version

frontend_app_thread/src/container/Thread.jsx

@@ -4,6 +4,7 @@ import { debug } from '../helper.js'
 import {
   addAllResourceI18n,
   handleFetchResult,
+  generateAvatarFromPublicName,
   PopinFixed,
   PopinFixedHeader,
   PopinFixedOption,
@@ -108,7 +109,13 @@ class Thread extends React.Component {
         listMessage: resComment.body.map(c => ({
           ...c,
           timelineType: 'comment',
-          created: (new Date(c.created)).toLocaleString()
+          created: (new Date(c.created)).toLocaleString(),
+          author: {
+            ...c.author,
+            avatar_url: c.author.avatar_url
+              ? c.author.avatar_url
+              : generateAvatarFromPublicName(c.author.public_name)
+          }
         }))
       }))
       .catch(e => console.log('Error loading Thread data.', e))

frontend_app_thread/src/css/index.styl

@@ -16,10 +16,6 @@
     &__contentpage
       &__content
         width 100%
-      &__messagelist
-        &__item__avatar
-          border 1px solid darkenThread
-          background-color off-white
       &__texteditor
         flex 0 0 auto
 

frontend_lib/dist/index.html

@@ -6,14 +6,14 @@
   <title>Tracim Lib</title>
   <link rel='shortcut icon' href='favicon.ico'>
 
-  <link rel="stylesheet" type="text/css" href="./font/font-awesome-4.7.0/css/font-awesome.css">
+  <link rel="stylesheet" type="text/css" href="./asset/font/font-awesome-4.7.0/css/font-awesome.css">
   <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="./dev/bootstrap-4.0.0-beta.css">
+  <link rel="stylesheet" type="text/css" href="./asset/bootstrap/bootstrap-4.0.0-beta.css">
 </head>
 <body>
-  <script src="./dev/jquery-3.2.1.js"></script>
-  <script src="./dev/popper-1.12.3.js"></script>
-  <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>
+  <script src="./asset/bootstrap/jquery-3.2.1.js"></script>
+  <script src="./asset/bootstrap/popper-1.12.3.js"></script>
+  <script src="./asset/bootstrap/bootstrap-4.0.0-beta.2.js"></script>
 
   <div id='content'></div>
 

frontend_lib/package.json

@@ -50,7 +50,7 @@
     "webpack-dev-server": "^2.9.2"
   },
   "standard": {
-    "globals": [],
+    "globals": ["G_vmlCanvasManager"],
     "parser": "babel-eslint",
     "ignore": []
   },

frontend_lib/src/component/Timeline/Comment.jsx

@@ -22,7 +22,7 @@ const Comment = props => {
     )}>
       <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__body__messagelist__item__wrapper')}>
         <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__body__messagelist__item__avatar')}>
-          {props.avatar ? <img src={props.avatar} /> : ''}
+          <img src={props.avatar} />
         </div>
       </div>
       <div className={classnames(`${props.customClass}__messagelist__item__authorandhour`, 'timeline__body__messagelist__item__authorandhour')}>

frontend_lib/src/helper.js

@@ -1,3 +1,5 @@
+import color from 'color'
+
 export const libHandleFetchResult = async fetchResult => {
   switch (fetchResult.status) {
     case 200:
@@ -28,3 +30,34 @@ export const libAddAllResourceI18n = (i18n, translation) => {
     )
   )
 }
+
+export const libGenerateAvatarFromPublicName = publicName => {
+  // code from https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript
+  const stringToHashCode = str => str.split('').reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0)
+
+  const intToRGB = i => {
+    const c = (i & 0x00FFFFFF).toString(16).toUpperCase()
+    return '00000'.substring(0, 6 - c.length) + c
+  }
+
+  const hexcolor = '#' + intToRGB(stringToHashCode(publicName))
+
+  let canvas = document.createElement('canvas')
+
+  // http://code.google.com/p/explorercanvas/wiki/Instructions#Dynamically_created_elements
+  if (!canvas.getContext) G_vmlCanvasManager.initElement(canvas)
+
+  let ctx = canvas.getContext('2d')
+  canvas.width = 44
+  canvas.height = 44
+
+  const { r, g, b } = color(hexcolor).desaturate(0.75).rgb()
+
+  ctx.beginPath()
+  ctx.arc(22, 22, 20, 0, 2 * Math.PI, false)
+  ctx.fillStyle = 'rgba(' + [r, g, b, 1].join() + ')'
+  ctx.fill()
+  ctx.stroke()
+
+  return canvas.toDataURL('image/png', '')
+}

frontend_lib/src/index.dev.js

@@ -18,6 +18,7 @@ import Delimiter from './component/Delimiter/Delimiter.jsx'
 import CardPopup from './component/CardPopup/CardPopup.jsx'
 import CardPopupCreateContent from './component/CardPopup/CardPopupCreateContent.jsx'
 
+import { libGenerateAvatarFromPublicName } from './helper.js'
 
 import NewVersionButton from './component/OptionComponent/NewVersionBtn.jsx'
 import ArchiveDeleteContent from './component/OptionComponent/ArchiveDeleteContent.jsx'
@@ -98,7 +99,18 @@ ReactDOM.render(
             email: 'osef@algoo.fr',
             avatar_url: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
           }}
-          timelineData={TimelineDebugData}
+          timelineData={TimelineDebugData.map(item => item.timelineType === 'comment'
+            ? {
+              ...item,
+              author: {
+                ...item.author,
+                avatar_url: item.author.avatar_url
+                  ? item.author.avatar_url
+                  : libGenerateAvatarFromPublicName(item.author.public_name)
+              }
+            }
+            : item
+          )}
           newComment={''}
           disableComment={false}
           wysiwyg={false}

frontend_lib/src/index.js

@@ -1,6 +1,7 @@
 import {
   libAddAllResourceI18n,
-  libHandleFetchResult
+  libHandleFetchResult,
+  libGenerateAvatarFromPublicName
 } from './helper.js'
 
 import libPopinFixed from './component/PopinFixed/PopinFixed.jsx'
@@ -28,8 +29,8 @@ import libArchiveDeleteContent from './component/OptionComponent/ArchiveDeleteCo
 import libSelectStatus from './component/Input/SelectStatus/SelectStatus.jsx'
 
 export const addAllResourceI18n = libAddAllResourceI18n
-
 export const handleFetchResult = libHandleFetchResult
+export const generateAvatarFromPublicName = libGenerateAvatarFromPublicName
 
 export const PopinFixed = libPopinFixed
 export const PopinFixedHeader = libPopinFixedHeader