Commit 9bdd8dc5 authored by Yannis Barlas's avatar Yannis Barlas

Merge branch 'team-manager-design' into 'master'

Team manager design

See merge request !5
parents 4f4a4750 01ba2822
......@@ -21,9 +21,10 @@ export default class AddButton extends React.Component {
<div className={styles.sectionBtn}
style={{ 'marginRight': margin }}
onClick={this._addGroup}>
<a>
{ 'add ' + group }
</a>
<div className={styles.addBtnIcon}> </div>
<a>
{ 'add ' + group }
</a>
</div>
)
}
......
......@@ -202,12 +202,12 @@ export class BookBuilder extends React.Component {
let teamManagerButton = ''
if (isProductionEditor) {
teamManagerButton = (
<div
className={styles.teamManagerBtn}
onClick={this._toggleTeamManager}
>
<a>team manager</a>
</div>
<span onClick={this._toggleTeamManager}>
<div className={styles.teamManagerIcon} />
<div className={styles.teamManagerBtn}>
<a>team manager</a>
</div>
</span>
)
}
......@@ -223,11 +223,14 @@ export class BookBuilder extends React.Component {
className='col-lg-offset-2 col-lg-8 col-md-8 col-sm-12 col-xs-12'
ref='outerContainer'
>
<h1>{this.props.book.title}</h1>
<div className={styles.productionEditorContainer}>
<span>Production Editor: &nbsp; { productionEditor } </span>
{teamManagerButton}
<div className={styles.separator} />
</div>
<h1 className={styles.bookTitle}>{this.props.book.title}</h1>
<FileUploader
backChapters={backChapters}
bodyChapters={bodyChapters}
......@@ -238,9 +241,6 @@ export class BookBuilder extends React.Component {
update={updateFragment}
updateUploadStatus={this.updateUploadStatus}
/>
{teamManagerButton}
<div className={styles.separator} />
</div>
<Division
add={createFragment}
......
......@@ -32,6 +32,13 @@ export class Chapter extends React.Component {
// if (!this.state.isUploadInProgress) this.removeUploadState()
}
renderHasContent () {
const { chapter } = this.props
const source = chapter.source || ''
const hasContent = source.trim().length > 0
return hasContent
}
// getLocalStorageKey () {
// const { chapter } = this.props
// return 'chapter:upload:' + chapter.id
......@@ -80,7 +87,7 @@ export class Chapter extends React.Component {
} = this.props
// console.log('ch upl', this.props.uploading)
const hasContent = this.renderHasContent()
const { isUploadInProgress } = this.state
const listItemStyle = {
......@@ -95,14 +102,15 @@ export class Chapter extends React.Component {
style={listItemStyle}
>
<div className={styles.grabIcon + ' ' + (chapter.subCategory === 'part' ? styles.grabIconPart : '')}>
<i className='fa fa-circle' />
<div className={styles.tooltip}>
Grab to sort
<div className={'col-lg-1 '+ styles.grabContainer}>
<div className={ styles.grabIcon + ' ' + (hasContent === true ? styles.hasContent : '')}>
<div className={styles.tooltip}>
grab to sort
</div>
</div>
</div>
<div className={styles.chapterMainContent}>
<div className={'col-lg-11 ' + styles.chapterMainContent}>
<FirstRow
book={book}
chapter={chapter}
......@@ -115,10 +123,9 @@ export class Chapter extends React.Component {
update={this.update}
/>
<div className={styles.chapterBottomLine} />
<SecondRow
chapter={chapter}
isUploadInProgress={isUploadInProgress || uploading}
convertFile={ink}
outerContainer={outerContainer}
roles={roles}
......
......@@ -87,10 +87,12 @@ class ChapterButtons extends React.Component {
}
return (
<a id='bb-rename'
<div className={styles.actionContainer}>
<a id='bb-rename'
onClick={renameButtonFunction}>
{ renameButtonText } &nbsp;&nbsp;
{ renameButtonText }
</a>
</div>
)
}
......@@ -104,7 +106,9 @@ class ChapterButtons extends React.Component {
return (
<LinkContainer id='bb-edit' to={url} >
<a> { text } &nbsp;&nbsp; </a>
<div className={styles.actionContainer}>
<a> { text }</a>
</div>
</LinkContainer>
)
}
......
......@@ -18,64 +18,13 @@ class ChapterTitle extends React.Component {
}
goToEditor () {
const { chapter } = this.props
if (chapter.lock !== null) return
const { chapter, isUploadInProgress } = this.props
if (chapter.lock !== null || isUploadInProgress) return
const url = `/books/${chapter.book}/fragments/${chapter.id}`
browserHistory.push(url)
}
renderHasContent () {
const { chapter, type } = this.props
const source = chapter.source || ''
const hasContent = source.trim().length > 0
if (!hasContent) return null
// TODO -- move styles to classes (after css refactor)
let marginTop
switch (type) {
case 'part':
marginTop = '4px'
break
case 'chapter':
marginTop = '2px'
break
default:
marginTop = '5px'
break
}
const elementStyles = {
color: '#3e644b',
float: 'left',
fontSize: '14px',
marginRight: '7px',
marginTop
}
const hoverTitle = `This ${type} has content`
return (
<i
className='fa fa-check-circle'
style={elementStyles}
title={hoverTitle}
/>
)
}
renderUploadIndicator () {
const { isUploadInProgress } = this.props
// console.log('is uploading', isUploadInProgress)
if (!isUploadInProgress) return null
return (
<i className={`${styles['animate-flicker']} fa fa-upload`} />
)
}
renderTitle () {
const {
chapter,
......@@ -123,18 +72,14 @@ class ChapterTitle extends React.Component {
}
render () {
const hasContent = this.renderHasContent()
const title = this.renderTitle()
const uploadIndicator = this.renderUploadIndicator()
const renameEmptyError = this.renderError()
return (
<div className={styles.chapterTitle}>
{ hasContent }
{ title }
{/* { this.props.chapter.index } */}
{ uploadIndicator }
{ renameEmptyError }
<div className={styles.separator} />
......
......@@ -2,6 +2,7 @@ import React from 'react'
import ChapterButtons from './ChapterButtons'
import ChapterTitle from './ChapterTitle'
import styles from '../styles/bookBuilder.local.scss'
class ChapterFirstRow extends React.Component {
constructor (props) {
......@@ -56,7 +57,7 @@ class ChapterFirstRow extends React.Component {
const { isRenameEmpty, isRenamingTitle } = this.state
return (
<span>
<div className={styles.FirstRow}>
<ChapterTitle
chapter={chapter}
isRenaming={isRenamingTitle}
......@@ -82,7 +83,8 @@ class ChapterFirstRow extends React.Component {
type={type}
update={update}
/>
</span>
</div>
)
}
}
......
......@@ -8,7 +8,7 @@ import styles from '../styles/bookBuilder.local.scss'
class ChapterSecondRow extends React.Component {
render () {
const { chapter, convertFile, outerContainer, roles, toggleUpload, update } = this.props
const { chapter, convertFile, outerContainer, roles, toggleUpload, update, isUploadInProgress } = this.props
// TODO -- surrounding divs should go inside the components
......@@ -20,6 +20,7 @@ class ChapterSecondRow extends React.Component {
accept='.doc,.docx'
chapter={chapter}
convertFile={convertFile}
isUploadInProgress={isUploadInProgress}
modalContainer={outerContainer}
title=' '
toggleUpload={toggleUpload}
......@@ -52,6 +53,7 @@ ChapterSecondRow.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
outerContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
roles: React.PropTypes.array,
toggleUpload: React.PropTypes.func.isRequired,
update: React.PropTypes.func.isRequired
......
import React from 'react'
import TextInput from 'editoria-common/src/TextInput'
import styles from '../styles/bookBuilder.local.scss'
class Title extends React.Component {
save () {
this.refs.chapterInput._save()
}
......@@ -21,9 +21,11 @@ class Title extends React.Component {
)
const plainTitle = (
<h3 onDoubleClick={goToEditor}>
<div className={styles.bodyTitle}>
<h3 onDoubleClick={goToEditor}>
{ title }
</h3>
</div>
)
if (isRenaming) return input
......
......@@ -16,6 +16,13 @@ export class UploadButton extends React.Component {
}
}
renderUploadIndicator () {
const { isUploadInProgress } = this.props
if (isUploadInProgress) return true
return false
}
handleFileUpload (event) {
event.preventDefault()
......@@ -23,8 +30,7 @@ export class UploadButton extends React.Component {
const { chapter, convertFile, toggleUpload, update } = this.props
toggleUpload()
convertFile(file).then(response => {
convertFile(file).then((response) => {
const patch = {
id: chapter.id,
source: response.converted
......@@ -57,17 +63,44 @@ export class UploadButton extends React.Component {
}
renderInput () {
if (this.isLocked()) return null
let noAction = false
let uploadClass = ''
let text = 'upload word'
let disabled = ''
const uploadIndicator = this.renderUploadIndicator()
if (uploadIndicator) {
uploadClass = styles['animate-flicker']
text = 'uploading...'
disabled = styles['no-actions']
}
if (this.isLocked()) noAction = true
const { accept, title, type } = this.props
const { accept, title, type, chapter } = this.props
return (
<input
accept={accept}
onChange={this.handleFileUpload}
title={title}
type={type}
/>
<span>
<label
htmlFor={'single-file-uploader' + chapter.id}
className={styles.uploadIcon + ' ' + uploadClass + ' ' + disabled}
disabled={noAction}
/>
<label
htmlFor={'single-file-uploader' + chapter.id}
className={styles.uploadText + ' ' + disabled}
disabled={noAction}
>
{text}
</label>
<input
id={'single-file-uploader' + chapter.id}
accept={accept}
onChange={this.handleFileUpload}
title={title}
name='single-file-uploader'
type={type}
disabled={noAction}
/>
</span>
)
}
......@@ -107,7 +140,6 @@ export class UploadButton extends React.Component {
onClick={this.onClick}
style={buttonStyle}
>
Upload Word
{ input }
{ modal }
</div>
......@@ -120,6 +152,7 @@ UploadButton.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
modalContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
title: React.PropTypes.string.isRequired,
toggleUpload: React.PropTypes.func.isRequired,
type: React.PropTypes.string.isRequired,
......
......@@ -185,22 +185,6 @@ class FileUploader extends React.Component {
}
render () {
const containerStyles = {
padding: '0'
}
const inputStyles = {
display: 'none'
}
const labelStyles = {
color: '#fff',
cursor: 'pointer',
fontWeight: '500',
margin: 'auto 0',
padding: ' 0 30px'
}
const { uploading } = this.state
const uploadingOnly = pickBy(uploading, (value, key) => {
return (value === true)
......@@ -211,20 +195,27 @@ class FileUploader extends React.Component {
if (currentlyUploading > 0) {
labelText = `converting ${currentlyUploading} files`
} else {
labelText = 'upload files'
labelText = 'upload multiple word files'
}
return (
<span>
<div className={styles.lineUploading + ' col-lg-9 col-md-5 col-sm-6 col-xs-6'} />
<div
className={styles.teamManagerBtn}
style={containerStyles}
className={styles.MultipleUploadContainer + ' col-lg-3 col-md-7 col-sm-6 col-xs-6'}
>
<label
htmlFor='file-uploader'
style={labelStyles}
className={styles.uploadIcon}
/>
<label
htmlFor='file-uploader'
className={styles.uploadMultipleText}
>
{ labelText }
</label>
<input
accept='.doc,.docx'
id='file-uploader'
......@@ -232,10 +223,10 @@ class FileUploader extends React.Component {
name='file-uploader'
onChange={this.onChange}
ref={(c) => { this.input = c }}
style={inputStyles}
type='file'
/>
</div>
</span>
)
}
}
......
......@@ -98,7 +98,7 @@ export class AddMember extends React.Component {
<a className={styles.closeUsernameBtn}
onClick={this._hide}>
X
x
</a>
<span className={styles[this.state.message.classname]}>
......
......@@ -10,7 +10,8 @@ export class GroupHeader extends React.Component {
const button = title !== 'Production Editor'
? (
<div className={styles.groupBtn} onClick={showInput}>
<a>{ 'add ' + title.toLowerCase() }</a>
<div className={styles.addIcon} />
<a>{ 'add ' + title }</a>
</div>
)
: ''
......
......@@ -20,7 +20,9 @@ export class Member extends React.Component {
const { user, color, remove } = this.props
let removeButton = ''
let Noline = { 'background-image': 'none' }
if (remove === true) {
Noline = { 'cursor': 'default' }
removeButton = (
<a onClick={this._remove}>
Remove
......@@ -29,16 +31,31 @@ export class Member extends React.Component {
}
return (
<li className={styles[color]}>
<span>
{user.username}
</span>
{ removeButton }
<li>
<div className={styles.personContainer}
style={Noline}
>
<div><span>{user.username}</span></div>
</div>
<div className={styles.actionsContainer}>
<div className={styles.actionContainer}>
{ removeButton }
</div>
</div>
</li>
)
// return (
// <li className={styles[color]}>
//
// <span>
// {user.username}
// </span>
//
// { removeButton }
//
// </li>
// )
}
}
......
......@@ -28,3 +28,8 @@
-o-animation: flickerAnimation 2s infinite;
animation: flickerAnimation 2s infinite;
}
.no-actions {
opacity: 0.3;
pointer-events: none;
}
This diff is collapsed.
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
</svg>
\ No newline at end of file
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/>
</svg>
\ No newline at end of file
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
</svg>
\ No newline at end of file
$dark-grey: #404040;
$light-grey: #cdcdcd;
$main-grey: #d8d8d8;
$main-grey: #666;
$black: #000;
$blue: #00f;
$green: #008000;
$purple: #800080;
$red: #a52a2a;
$white: #fff;
$yellow: #ff0;
$blue: #0d78f2;
.teamManager {
font-family: 'Fira Sans Condensed';
.separator {
clear: both;
height: .1px;
}
.groupHeader {
border-bottom: 4px solid $dark-grey;
padding-top: 1%;
.groupTitle {
background-color: $main-grey;
float: left;
padding: 0 80px 10px 10px;
letter-spacing: 5px;
padding: 0 30px 10px 10px;
text-transform: uppercase;
h1 {
color: $black !important;
color: $blue !important;
font-size: 22px;
font-style: normal;
font-weight: normal;
font-family: 'Vollkorn'!important;
line-height: 25px;
margin: 0 !important;
position: relative;
......@@ -36,25 +42,28 @@ $yellow: #ff0;
}
.groupBtn {
background-color: $dark-grey;
border: 1px solid $white;
color: $white;
cursor: pointer;
float: right;
font-size: 16px;
margin-top: 7px;
padding: 0 30px;
text-align: center;
transition: border .5s ease-out 0.2s;
&:hover {
border: 1px solid $dark-grey;
transition: .25s ease-in-out 0s;
.addIcon {
-webkit-mask: url('./images/icon_add.svg') no-repeat 100% 100%;
mask: url('./images/icon_add.svg') no-repeat 100% 100%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $main-grey;
width: 24px;
height: 24px;
float: left;
margin-right: 10px;
}
a {
color: $white;
color: $main-grey;
font-family: 'Fira Sans Condensed';
font-style: normal;
text-decoration: none;
text-transform: uppercase;
&:hover {
cursor: pointer;
......@@ -66,13 +75,16 @@ $yellow: #ff0;
.userInputContainer {
height: 30px;
margin-top: 25px;
margin: 25px 30px 10px 30px;
position: relative;
.usernameInput {
border-color: $black;
border-top: none;
border-left: none;
border-right: none;
background-image: linear-gradient(to right, $dark-grey 50%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-repeat: repeat-x;
background-size: 6px 1px;
border: 0;
float: left;
outline: none;
width: 100% !important;
......@@ -80,43 +92,32 @@ $yellow: #ff0;
.closeUsernameBtn {
background-color: $white;
border: 1px solid $dark-grey;
color: $dark-grey;
color: $red;
cursor: pointer;
font-size: 16px;
padding: 0 30px;
position: absolute;
right: 0;
margin-top: 0;
font-family: 'Fira Sans Condensed';
// font-size: 18px;
font-style: italic;
padding: 2px 0;
text-align: center;
text-decoration: none;
&:hover {
background-color: $dark-grey;
border: 1px solid $white;
color: $white;
transition: .25s ease-in-out 0s;
}
position: absolute;
right: 0px;
bottom: 5px;
}
.addUsernameBtn {
background-color: $dark-grey;
border: 1px solid $white;
color: $white;
background-color: $white;
color: $blue;
cursor: pointer;
float: right;
font-size: 16px;
margin-top: 0;
padding: 0 30px;
position: absolute;
right: 80px;
font-family: 'Fira Sans Condensed';
// font-size: 18px;
font-style: italic;
padding: 2px 0;
text-align: center;
text-decoration: none;
transition: border .5s ease-out .2s;
&:hover {
border: 1px solid $dark-grey;
transition: .25s ease-in-out 0s;
}
position: absolute;
right: 25px;
bottom: 5px;
a {
color: $white;
......@@ -138,28 +139,59 @@ $yellow: #ff0;
}
}
.teamMembersContainer {
li {
border-bottom: 1px solid;
height: 50px;