Skip to content
This repository has been archived by the owner on Feb 21, 2019. It is now read-only.

Commit

Permalink
Merge e908704 into e8b9b60
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexiCauvin committed Sep 25, 2018
2 parents e8b9b60 + e908704 commit 0cebffc
Show file tree
Hide file tree
Showing 11 changed files with 219 additions and 124 deletions.
1 change: 0 additions & 1 deletion frontend/i18next.scanner/en/translation.json
View file
Expand Up @@ -69,7 +69,6 @@
"Recent activity": "Recent activity",
"Mark everything as read": "Mark everything as read",
"See more": "See more",
"Hi {{name}} ! Currently, you are ": "Hi {{name}} ! Currently, you are ",
"You have subscribed to this workspace's notifications": "You have subscribed to this workspace's notifications",
"subscribed": "subscribed",
"subscriber": "subscriber",
Expand Down
1 change: 0 additions & 1 deletion frontend/i18next.scanner/fr/translation.json
View file
Expand Up @@ -49,7 +49,6 @@
"You have subscribed to this workspace's notifications": "Vous êtes abonné aux notifications de cet espace de travail.",
"Connection": "Connexion",
"Forgotten password ?": "Mot de passe oublié ?",
"Hi {{name}} ! Currently, you are ": "Bonjour {{name}} ! Vous êtes actuellement",
"workspace detail": "Detail de l'espace de travail",
"member list": "Liste des membres",
"recent activity list": "Liste des activités récente",
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/component/Dashboard/ContentTypeBtn.styl
View file
Expand Up @@ -7,8 +7,8 @@
margin 15px 15px 0 0
border-radius 10px
padding 15px
width 230px
height 200px
width 150px
height 150px
box-shadow shadow-all
text-align center
cursor pointer
5 changes: 3 additions & 2 deletions frontend/src/component/Dashboard/MemberList.styl
View file
@@ -1,8 +1,8 @@
@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"

.memberlist
width calc(40% - 30px)
margin-left 30px
width calc(40% - 30px)
&__header
display flex
justify-content space-between
Expand All @@ -12,6 +12,7 @@
&__wrapper
position relative
border 1px solid grey
background-color offWhite
&__list
margin 0
padding 0
Expand Down Expand Up @@ -73,7 +74,7 @@
@media (min-width: min-md) and (max-width: max-md)

.memberlist
width 50%
width 100%

@media (min-width: min-sm) and (max-width: max-sm)
.memberlist
Expand Down
1 change: 1 addition & 0 deletions frontend/src/component/Dashboard/RecentActivity.styl
View file
Expand Up @@ -5,6 +5,7 @@
&__wrapper
border 1px solid grey
min-height 480px
background-color offWhite
&__header
display flex
justify-content space-between
Expand Down
132 changes: 80 additions & 52 deletions frontend/src/component/Dashboard/UserStatus.jsx
View file
Expand Up @@ -6,70 +6,98 @@ require('./UserStatus.styl')
// @TODO Côme - 2018/08/07 - since api yet doesn't handle notification subscriptions, this file is WIP
export const UserStatus = props =>
<div className='userstatus'>
<div className='userstatus__role'>
<div className='userstatus__role__msg'>
{props.t('Hi {{name}} ! Currently, you are ', {name: props.user.public_name})}

<div className='userstatus__wrapper'>
<div className='notchUp'>
<div className='notchUp__upLeft primaryColorBg' />
</div>
<div className='notchUp'>
<div className='notchUp__upRight primaryColorBg' />
</div>

{(() => {
const myself = props.curWs.memberList.find(m => m.id === props.user.user_id)
if (myself === undefined) return
<div className='userstatus__username'>
{props.user.public_name}
</div>

const myRole = ROLE.find(r => r.slug === myself.role)
<div className='userstatus__role'>
{(() => {
const myself = props.curWs.memberList.find(m => m.id === props.user.user_id)
if (myself === undefined) return

return (
<div className='userstatus__role__definition'>
<div className='userstatus__role__definition__icon'>
<i className={`fa fa-${myRole.faIcon}`} style={{color: myRole.hexcolor}} />
</div>
const myRole = ROLE.find(r => r.slug === myself.role)

return (
<div className='d-flex align-items-center'>
<div className='userstatus__role__icon'>
<i className={`fa fa-${myRole.faIcon}`} style={{color: myRole.hexcolor}} />
</div>

<div className='userstatus__role__definition__text'>
{props.t(myRole.label)}
<div className='userstatus__role__text' style={{color: myRole.hexcolor}}>
{props.t(myRole.label)}
</div>
</div>
</div>
)
})()}
</div>
)
})()}
</div>

<div className='userstatus__notification'>
<div className='userstatus__notification__text'>
{props.t("You have subscribed to this workspace's notifications")} (NYI)
<div className='userstatus__notification'>
<div className='userstatus__notification__icon'>
<i className='fa fa-fw fa-envelope-open-o' />
</div>
<div className='userstatus__notification__text ml-3'>
Abonné(e)
</div>
</div>

{props.displayNotifBtn
? (
<div className='userstatus__notification__subscribe dropdown'>
<button
className='userstatus__notification__subscribe__btn btn outlineTextBtn dropdown-toggle primaryColorBorder primaryColorBgHover primaryColorBorderDarken'
type='button'
id='dropdownMenuButton'
data-toggle='dropdown'
aria-haspopup='true'
aria-expanded='false'
>
{props.t('subscribed')}
</button>
<div className='notchDown notchDownLeftTop'>
<div className='notchDown__downLeft primaryColorBg' />
</div>
<div className='notchDown notchDownRightTop'>
<div className='notchDown__downRight primaryColorBg' />
</div>

<div className='userstatus__notification__subscribe__submenu dropdown-menu'>
<div className='userstatus__notification__subscribe__submenu__item dropdown-item primaryColorBgLightenHover'>
{props.t('subscriber')}
</div>
<div className='userstatus__notification__subscribe__submenu__item dropdown-item dropdown-item primaryColorBgLightenHover'>
{props.t('unsubscribed')}
</div>
{/*
<div className='userstatus__notification'>
<div className='userstatus__notification__text'>
{props.t("You have subscribed to this workspace's notifications")} (NYI)
</div>
{props.displayNotifBtn
? (
<div className='userstatus__notification__subscribe dropdown'>
<button
className='userstatus__notification__subscribe__btn btn outlineTextBtn dropdown-toggle primaryColorBorder primaryColorBgHover primaryColorBorderDarken'
type='button'
id='dropdownMenuButton'
data-toggle='dropdown'
aria-haspopup='true'
aria-expanded='false'
>
{props.t('subscribed')}
</button>
<div className='userstatus__notification__subscribe__submenu dropdown-menu'>
<div className='userstatus__notification__subscribe__submenu__item dropdown-item primaryColorBgLightenHover'>
{props.t('subscriber')}
</div>
<div className='userstatus__notification__subscribe__submenu__item dropdown-item dropdown-item primaryColorBgLightenHover'>
{props.t('unsubscribed')}
</div>
</div>
</div>
</div>
)
: (
<div
className='userstatus__notification__btn btn outlineTextBtn primaryColorBorder primaryColorBgHover primaryColorBorderDarkenHover'
onClick={props.onClickToggleNotifBtn}
>
{props.t('Change your status')}
</div>
)
}
</div>
)
: (
<div
className='userstatus__notification__btn btn outlineTextBtn primaryColorBorder primaryColorBgHover primaryColorBorderDarkenHover'
onClick={props.onClickToggleNotifBtn}
>
{props.t('Change your status')}
</div>
)
}
</div>
*/}
</div>

export default UserStatus
90 changes: 55 additions & 35 deletions frontend/src/component/Dashboard/UserStatus.styl
View file
@@ -1,60 +1,80 @@
@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"

detail()
margin-left calc(50% - 100px)
padding 25px 0
width 200px
font-size 25px

.userstatus
width 35%
width 27%
&__wrapper
position relative
top -60px
border-radius 5px
padding 40px 0
width 100%
background-color lightGrey
&__username
text-align center
font-size 20px
&__role
margin 20px 0
font-size 18px
&__msg
margin-right 15px
&__definition
display flex
&__icon
margin-right 5px
detail()
&__icon
margin-right 20px
&__notification
font-size 18px
&__btn
margin 20px 0
border-width 1px
border-style solid
&__subscribe
&__btn
margin 20px 0
border-width 1px
border-style solid
&:focus
box-shadow none
&__submenu
padding 0
&__item
padding 10px
cursor pointer
&:hover
color offWhite
display flex
align-items center
detail()
&__text
cursor pointer
// &__btn
// margin 20px 0
// border-width 1px
// border-style solid
// &__subscribe
// &__btn
// margin 20px 0
// border-width 1px
// border-style solid
// &:focus
// box-shadow none
// &__submenu
// padding 0
// &__item
// padding 10px
// cursor pointer
// &:hover
// color offWhite

// MEDIAQUERIES

@media (min-width: min-lg) and (max-width: max-lg)

.userstatus
width 100%
&__role
display flex
width 28%

@media (min-width: min-md) and (max-width: max-md)

.userstatus
width 100%
&__role
display flex
margin 35px auto
width 50%
&__wrapper
top 0

@media (min-width: min-sm) and (max-width: max-sm)

.userstatus
width 100%
margin 35px auto
width 50%
&__wrapper
top 0

@media (max-width: max-xs)

.userstatus
margin 35px auto
width 100%
&__wrapper
top 0

40 changes: 20 additions & 20 deletions frontend/src/container/Dashboard.jsx
View file
Expand Up @@ -278,7 +278,7 @@ class Dashboard extends React.Component {
title={props.t('Dashboard')}
subtitle={''}
>
<div className='dashboard__header__advancedmode mr-3'>
<div className='dashboard__header__advancedmode ml-3'>
{idRoleUserWorkspace >= 8 &&
<button
type='button'
Expand All @@ -302,6 +302,25 @@ class Dashboard extends React.Component {
className='dashboard__workspace__detail'
dangerouslySetInnerHTML={{__html: convertBackslashNToBr(props.curWs.description)}}
/>

<div className='dashboard__calltoaction'>
{props.appList.map(app => {
const contentType = props.contentType.find(ct => app.slug.includes(ct.slug)) || {creationLabel: '', slug: ''}
return (
<ContentTypeBtn
customClass='dashboard__calltoaction__button'
hexcolor={app.hexcolor}
label={app.label}
faIcon={app.faIcon}
// @fixme Côme - 2018/09/12 - trad key bellow is a little hacky. The creation label comes from api but since there is no translation in backend
// every files has a 'externalTradList' array just to generate the translation key in the json files through i18n.scanner
creationLabel={props.t(contentType.creationLabel)}
onClickBtn={() => props.history.push(`${PAGE.WORKSPACE.NEW(props.curWs.id, contentType.slug)}?parent_id=null`)}
key={app.label}
/>
)
})}
</div>
</div>

<UserStatus
Expand All @@ -313,25 +332,6 @@ class Dashboard extends React.Component {
/>
</div>

<div className='dashboard__calltoaction justify-content-sm-center'>
{props.appList.map(app => {
const contentType = props.contentType.find(ct => app.slug.includes(ct.slug)) || {creationLabel: '', slug: ''}
return (
<ContentTypeBtn
customClass='dashboard__calltoaction__button'
hexcolor={app.hexcolor}
label={app.label}
faIcon={app.faIcon}
// @fixme Côme - 2018/09/12 - trad key bellow is a little hacky. The creation label comes from api but since there is no translation in backend
// every files has a 'externalTradList' array just to generate the translation key in the json files through i18n.scanner
creationLabel={props.t(contentType.creationLabel)}
onClickBtn={() => props.history.push(`${PAGE.WORKSPACE.NEW(props.curWs.id, contentType.slug)}?parent_id=null`)}
key={app.label}
/>
)
})}
</div>

<div className='dashboard__workspaceInfo'>
<RecentActivity
customClass='dashboard__activity'
Expand Down

0 comments on commit 0cebffc

Please sign in to comment.