Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat 115 boardButton preview #164

Closed
wants to merge 5 commits into from
Closed

feat 115 boardButton preview #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c87fee0
feat:115 buttonPreview
zachi Feb 22, 2018
98914c6
feat:115 buttonPreview
zachi Feb 22, 2018
9cb2b4b
Merge branch 'master' of https://github.com/zachi/cboard
zachi Feb 22, 2018
d106dd6
fix: code review fixes for feat #115
zachi Feb 22, 2018
5dc4c9f
feat#115 button preview
zachi Feb 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions src/components/Board/BoardButtonDetails/BoardButtonDetails.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,38 @@
display: flex;
}

.BoardButtonDetails__image {
.BoardButtonDetails__preview {
margin-right: 16px;
width: 150px;
position: relative;
}

[dir='rtl'] .BoardButtonDetails__image {
[dir='rtl'] .BoardButtonDetails__preview {
margin-left: 16px;
}

.BoardButtonDetails__fields .InputImage {
width: 150px;
height: 50px;
}
.BoardButtonDetails__fields .InputImage__label {
padding: 16px 30px 0 0;
}
.BoardButtonDetails__fields .InputImage svg {
margin: 8px 4px;
}
.BoardButtonDetails__radiogroup {
margin-top: 15px;
}

.BoardButtonDetails__preview .BoardButton {
height: 150px;
width: 150px;
margin-top: 5px;
}
.BoardButtonDetails__preview-title {
width: 100%;
text-align: center;
display: block;
margin-top: 24px;
}
22 changes: 17 additions & 5 deletions src/components/Board/BoardButtonDetails/BoardButtonDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import FullScreenDialog, {
} from '../../FullScreenDialog';
import InputImage from '../../InputImage';
import ColorSelection from '../../ColorSelection';
import BoardButton from '../BoardButton';
import './BoardButtonDetails.css';

export class BoardButtonDetails extends Component {
Expand Down Expand Up @@ -57,7 +58,6 @@ export class BoardButtonDetails extends Component {

constructor(props) {
super(props);

this.defaultBoardButton = {
label: '',
labelKey: '',
Expand Down Expand Up @@ -244,10 +244,18 @@ export class BoardButtonDetails extends Component {
>
<Paper>
<FullScreenDialogContent className="BoardButtonDetails__container">
<div className="BoardButtonDetails__image">
<InputImage
image={this.currentBoardButtonProp('img') || ''}
onChange={this.handleInputImageChange}
<div className="BoardButtonDetails__preview">
<label className="BoardButtonDetails__preview-title">
Button Preview
</label>
<BoardButton
img={this.currentBoardButtonProp('img') || ''}
label={currentLabel}
vocalization={
this.currentBoardButtonProp('vocalization') || ''
}
color={this.state.boardButton.color}
loadBoard={this.state.loadBoard}
/>
</div>
<div className="BoardButtonDetails__fields">
Expand Down Expand Up @@ -299,6 +307,10 @@ export class BoardButtonDetails extends Component {
/>
</div>
)}
<InputImage
image={this.currentBoardButtonProp('img') || ''}
onChange={this.handleInputImageChange}
/>
</div>
</FullScreenDialogContent>

Expand Down
1 change: 1 addition & 0 deletions src/components/InputImage/InputImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ class InputImage extends PureComponent {

handleChange = async event => {
const file = event.target.files[0];
if (!file) return;
const resizedImage = await this.resizeImage(file);
const imageBase64 = this.blobToBase64(resizedImage);
this.props.onChange(imageBase64);
Expand Down
77 changes: 74 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ ansi-align@^2.0.0:
dependencies:
string-width "^2.0.0"

ansi-escapes@^1.0.0, ansi-escapes@^1.4.0:
ansi-escapes@^1.0.0, ansi-escapes@^1.1.0, ansi-escapes@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"

Expand Down Expand Up @@ -860,6 +860,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
babel-runtime "^6.22.0"
babel-types "^6.24.1"

babel-polyfill@6.23.0:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
dependencies:
babel-runtime "^6.22.0"
core-js "^2.4.0"
regenerator-runtime "^0.10.0"

babel-preset-env@1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
Expand Down Expand Up @@ -1407,6 +1415,10 @@ change-emitter@^0.1.2:
version "0.1.6"
resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"

chardet@^0.4.0:
version "0.4.2"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"

cheerio@^1.0.0-rc.2:
version "1.0.0-rc.2"
resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
Expand Down Expand Up @@ -2725,6 +2737,14 @@ extend@~3.0.0, extend@~3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"

external-editor@^2.0.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
dependencies:
chardet "^0.4.0"
iconv-lite "^0.4.17"
tmp "^0.0.33"

external-editor@^2.0.4:
version "2.0.5"
resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.5.tgz#52c249a3981b9ba187c7cacf5beb50bf1d91a6bc"
Expand Down Expand Up @@ -3550,6 +3570,24 @@ ini@^1.3.4, ini@~1.3.0:
version "1.3.4"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"

inquirer@3.0.6:
version "3.0.6"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
dependencies:
ansi-escapes "^1.1.0"
chalk "^1.0.0"
cli-cursor "^2.1.0"
cli-width "^2.0.0"
external-editor "^2.0.1"
figures "^2.0.0"
lodash "^4.3.0"
mute-stream "0.0.7"
run-async "^2.2.0"
rx "^4.1.0"
string-width "^2.0.0"
strip-ansi "^3.0.0"
through "^2.3.6"

inquirer@3.3.0, inquirer@^3.0.6:
version "3.3.0"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
Expand Down Expand Up @@ -4892,7 +4930,7 @@ minimist@0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"

minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
minimist@1.2.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

Expand Down Expand Up @@ -4975,6 +5013,13 @@ nock@^9.1.6:
qs "^6.5.1"
semver "^5.3.0"

node-fetch@1.6.3:
version "1.6.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"

node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
Expand Down Expand Up @@ -5255,6 +5300,24 @@ onetime@^2.0.0:
dependencies:
mimic-fn "^1.0.0"

opencollective@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/opencollective/-/opencollective-1.0.3.tgz#aee6372bc28144583690c3ca8daecfc120dd0ef1"
dependencies:
babel-polyfill "6.23.0"
chalk "1.1.3"
inquirer "3.0.6"
minimist "1.2.0"
node-fetch "1.6.3"
opn "4.0.2"

opn@4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
dependencies:
object-assign "^4.0.1"
pinkie-promise "^2.0.0"

opn@5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/opn/-/opn-5.2.0.tgz#71fdf934d6827d676cecbea1531f95d354641225"
Expand Down Expand Up @@ -5851,7 +5914,7 @@ preserve@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"

prettier@^1.10.2:
prettier@1.10.2:
version "1.10.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.2.tgz#1af8356d1842276a99a5b5529c82dd9e9ad3cc93"

Expand Down Expand Up @@ -6449,6 +6512,10 @@ regenerate@^1.2.1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"

regenerator-runtime@^0.10.0:
version "0.10.5"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"

regenerator-runtime@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
Expand Down Expand Up @@ -6710,6 +6777,10 @@ rx-lite@*, rx-lite@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"

rx@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"

rxjs@^5.4.2:
version "5.5.2"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.2.tgz#28d403f0071121967f18ad665563255d54236ac3"
Expand Down