Skip to content

Commit

Permalink
Merge pull request #821 from cboard-org/feature/tile-editor-redesign
Browse files Browse the repository at this point in the history 
Tile editor visual improvements
  • Loading branch information
@martinbedouret
martinbedouret authored Jan 18, 2021
2 parents 9df6787 + 607c862 commit 6d932ab
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 112 deletions.
210 changes: 110 additions & 100 deletions src/components/Board/TileEditor/TileEditor.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,111 +327,121 @@ export class TileEditor extends Component {
>
<Paper>
<FullScreenDialogContent className="TileEditor__container">
<div className="TileEditor__column">
<div className="TileEditor__preview">
<Tile
backgroundColor={
this.state.selectedBackgroundColor ||
tileInView.backgroundColor
}
variant={
Boolean(tileInView.loadBoard) ? 'folder' : 'button'
}
>
<Symbol image={tileInView.image} label={currentLabel} />
</Tile>
</div>
<Button
variant="contained"
color="primary"
startIcon={<SearchIcon />}
onClick={this.handleSearchClick}
>
{intl.formatMessage(messages.symbols)}
</Button>
<div className="TileEditor__input-image">
<InputImage onChange={this.handleInputImageChange} />
</div>
</div>
<div className="TileEditor__fields">
<TextField
id="label"
label={
this.currentTileProp('type') === 'board'
? intl.formatMessage(messages.boardName)
: intl.formatMessage(messages.label)
}
value={currentLabel}
onChange={this.handleLabelChange}
fullWidth
required
/>

<TextField
id="vocalization"
disabled={this.currentTileProp('type') === 'board'}
label={intl.formatMessage(messages.vocalization)}
value={this.currentTileProp('vocalization') || ''}
onChange={this.handleVocalizationChange}
fullWidth
/>
<div>
{this.editingTile() &&
tileInView.loadBoard &&
selectBoardElement}
</div>
{!this.editingTile() && (
<div className="TileEditor__radiogroup">
<FormControl fullWidth>
<FormLabel>{intl.formatMessage(messages.type)}</FormLabel>
<RadioGroup
aria-label={intl.formatMessage(messages.type)}
name="type"
value={this.currentTileProp('type')}
onChange={this.handleTypeChange}
<div className="TileEditor__row">
<div className="TileEditor__main-info">
<div className="TileEditor__picto-fields">
<div className="TileEditor__preview">
<Tile
backgroundColor={
this.state.selectedBackgroundColor ||
tileInView.backgroundColor
}
variant={
Boolean(tileInView.loadBoard) ? 'folder' : 'button'
}
>
<FormControlLabel
value="button"
control={<Radio />}
label={intl.formatMessage(messages.button)}
/>
<div>
<FormControlLabel
className="TileEditor__radiogroup__formcontrollabel"
value="folder"
control={<Radio />}
label={intl.formatMessage(messages.folder)}
/>
{this.currentTileProp('type') === 'folder' &&
selectBoardElement}
</div>
<FormControlLabel
className="TileEditor__radiogroup__formcontrollabel"
value="board"
control={<Radio />}
label={intl.formatMessage(messages.board)}
/>
</RadioGroup>
</FormControl>
<Symbol image={tileInView.image} label={currentLabel} />
</Tile>
</div>
<Button
variant="contained"
color="primary"
startIcon={<SearchIcon />}
onClick={this.handleSearchClick}
>
{intl.formatMessage(messages.symbols)}
</Button>
<div className="TileEditor__input-image">
<InputImage onChange={this.handleInputImageChange} />
</div>
</div>
<div className="TileEditor__form-fields">
<TextField
id="label"
label={
this.currentTileProp('type') === 'board'
? intl.formatMessage(messages.boardName)
: intl.formatMessage(messages.label)
}
value={currentLabel}
onChange={this.handleLabelChange}
fullWidth
required
/>

<TextField
multiline
id="vocalization"
disabled={this.currentTileProp('type') === 'board'}
label={intl.formatMessage(messages.vocalization)}
value={this.currentTileProp('vocalization') || ''}
onChange={this.handleVocalizationChange}
fullWidth
/>
<div>
{this.editingTile() &&
tileInView.loadBoard &&
selectBoardElement}
</div>
{!this.editingTile() && (
<div className="TileEditor__radiogroup">
<FormControl fullWidth>
<FormLabel>
{intl.formatMessage(messages.type)}
</FormLabel>
<RadioGroup
row={true}
aria-label={intl.formatMessage(messages.type)}
name="type"
value={this.currentTileProp('type')}
onChange={this.handleTypeChange}
>
<FormControlLabel
value="button"
control={<Radio />}
label={intl.formatMessage(messages.button)}
/>
<FormControlLabel
className="TileEditor__radiogroup__formcontrollabel"
value="folder"
control={<Radio />}
label={intl.formatMessage(messages.folder)}
/>
<FormControlLabel
className="TileEditor__radiogroup__formcontrollabel"
value="board"
control={<Radio />}
label={intl.formatMessage(messages.board)}
/>
</RadioGroup>
</FormControl>
</div>
)}
{this.currentTileProp('type') === 'folder' &&
selectBoardElement}
</div>
)}
<div className="TileEditor__colorselect">
<ColorSelect
selectedColor={this.state.selectedBackgroundColor}
onChange={this.handleColorChange}
/>
</div>
{this.currentTileProp('type') !== 'board' && (
<div className="TileEditor__voicerecorder">
<FormLabel>
{intl.formatMessage(messages.voiceRecorder)}
</FormLabel>
<VoiceRecorder
src={this.currentTileProp('sound')}
onChange={this.handleSoundChange}
</div>
<div className="TileEditor__row">
<div className="TileEditor__form-fields">
<div className="TileEditor__colorselect">
<ColorSelect
selectedColor={this.state.selectedBackgroundColor}
onChange={this.handleColorChange}
/>
</div>
)}
{this.currentTileProp('type') !== 'board' && (
<div className="TileEditor__voicerecorder">
<FormLabel>
{intl.formatMessage(messages.voiceRecorder)}
</FormLabel>
<VoiceRecorder
src={this.currentTileProp('sound')}
onChange={this.handleSoundChange}
/>
</div>
)}
</div>
</div>
</FullScreenDialogContent>

Expand Down
45 changes: 33 additions & 12 deletions src/components/Board/TileEditor/TileEditor.css
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,41 @@
.TileEditor__container {
display: flex;
flex-direction: column;
}

.TileEditor__column {
width: 96px;
.TileEditor__row {
width: 100%;
flex-shrink: 0;
margin-right: 16px;
text-align: center;
text-align: left;
}

@media (min-width: 600px) {
.TileEditor__column {
width: 144px;
}
}

[dir='rtl'] .TileEditor__column {
[dir='rtl'] .TileEditor__row {
margin-right: 0;
margin-left: 16px;
}

.TileEditor__fields {
min-width: 0;
.TileEditor__main-info {
display: flex;
flex-direction: row;
width: 100%;
}

.TileEditor__picto-fields {
display: flex;
flex-direction: column;
width: 35%;
padding: 8px;
}

@media (max-width: 500px) {
.TileEditor__main-info {
flex-direction: column;
align-items: center;
}
.TileEditor__picto-fields {
width: 50%;
}
}

.TileEditor__preview {
Expand All @@ -41,6 +55,13 @@
left: 0;
}

.TileEditor__form-fields {
display: flex;
flex-direction: column;
width: 100%;
padding: 8px 16px;
}

.TileEditor__radiogroup {
margin-top: 15px;
}
Expand Down

0 comments on commit 6d932ab

Please sign in to comment.