From a1bdd02fca413cdc314137dc65e835131c358e72 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Sun, 12 Nov 2017 19:12:29 +0100 Subject: [wip] add icon upload --- package.json | 1 + .../settings/services/EditServiceForm.js | 11 +- src/components/ui/ImageUpload.js | 113 +++++++++++++++++++++ src/containers/settings/EditServiceScreen.js | 15 +++ src/styles/image-upload.scss | 52 ++++++++++ src/styles/main.scss | 1 + src/styles/settings.scss | 20 ++-- yarn.lock | 11 ++ 8 files changed, 217 insertions(+), 7 deletions(-) create mode 100644 src/components/ui/ImageUpload.js create mode 100644 src/styles/image-upload.scss diff --git a/package.json b/package.json index f9f6ca91c..0cf18bfb1 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "react": "^15.4.1", "react-addons-css-transition-group": "^15.4.2", "react-dom": "^15.4.1", + "react-dropzone": "^4.2.1", "react-electron-web-view": "^2.0.1", "react-intl": "^2.3.0", "react-loader": "^2.4.0", diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 753781507..bcbda7773 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js @@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs'; import Input from '../../ui/Input'; import Toggle from '../../ui/Toggle'; import Button from '../../ui/Button'; +import ImageUpload from '../../ui/ImageUpload'; const messages = defineMessages({ saveService: { @@ -195,7 +196,15 @@ export default class EditServiceForm extends Component {
this.submit(e)} id="form"> - +
+
+ +
+
+ {/* */} + +
+
{(recipe.hasTeamId || recipe.hasCustomUrl) && ( {}, + // type: 'button', + // buttonType: '', + // loaded: true, + // htmlForm: '', + }; + + dropzoneRef = null; + + state = { + path: null, + } + + onDrop(acceptedFiles) { + // const req = request.post('/upload'); + acceptedFiles.forEach((file) => { + console.log(file); + this.setState({ + path: file.path, + }); + // req.attach(file.name, file); + }); + // req.end(callback); + } + + render() { + const { + field, + className, + multiple, + // disabled, + // onClick, + // type, + // buttonType, + // loaded, + // htmlForm, + } = this.props; + + const cssClasses = classnames({ + 'franz-form__button': true, + // [`franz-form__button--${buttonType}`]: buttonType, + [`${className}`]: className, + }); + + return ( +
+ {field.label} + {this.state.path ? ( +
+
+
+ +
+
+
+ ) : ( + { this.dropzoneRef = node; }} + onDrop={this.onDrop.bind(this)} + className={cssClasses} + multiple={multiple} + accept="image/jpeg, image/png" + > +

Try dropping some files here, or click to select files to upload.

+ + )} +
+ ); + } +} diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 191ef447b..52a9fa6db 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js @@ -42,6 +42,10 @@ const messages = defineMessages({ id: 'settings.service.form.indirectMessages', defaultMessage: '!!!Show message badge for all new messages', }, + icon: { + id: 'settings.service.form.icon', + defaultMessage: '!!!Icon', + }, }); @inject('stores', 'actions') @observer @@ -93,6 +97,11 @@ export default class EditServiceScreen extends Component { value: !service.isMuted, default: true, }, + icon: { + label: intl.formatMessage(messages.icon), + value: service.icon, + default: true, + }, }, }; @@ -179,6 +188,12 @@ export default class EditServiceScreen extends Component { return (
Loading...
); } + if (!recipe) { + return ( +
something went wrong
+ ); + } + const form = this.prepareForm(recipe, service); return ( diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss new file mode 100644 index 000000000..764bb3158 --- /dev/null +++ b/src/styles/image-upload.scss @@ -0,0 +1,52 @@ +.image-upload { + position: absolute; + width: 100px; + height: 100px; + border-radius: $theme-border-radius; + overflow: hidden; + + &__preview, + &__action { + position: absolute; + top: 0; + left: 0; + right: 0; + } + + &__preview { + z-index: 1; + background-size: cover; + background-size: 100%; + background-repeat: no-repeat; + background-position: center center; + margin: 5px; + } + + &__action { + position: relative; + z-index: 10; + opacity: 0; + transition: opacity 0.5s; + + &-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba($theme-gray, 0.7); + z-index: 10; + } + + button { + position: relative; + z-index: 100; + } + } + + &:hover { + .image-upload__action { + opacity: 1; + } + } +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 0a082729c..261396f6f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -35,3 +35,4 @@ $mdi-font-path: '../node_modules/mdi/fonts'; @import './button.scss'; @import './searchInput.scss'; @import './select.scss'; +@import './image-upload.scss'; diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 48d12a807..556803c46 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -111,6 +111,20 @@ &::-webkit-scrollbar-thumb:window-inactive { background: none; } + + .service-flex-grid { + display: flex; + } + + .service-name { + flex: 1px; + } + + .service-icon { + width: 30%; + min-width: 100px; + margin-left: 40px; + } } .settings__close { @@ -308,12 +322,6 @@ } } - // @include element(add-service-teaser) { - // height: auto; - // margin-top: 20px; - // display: block; - // text-align: center; - // } .emoji { display: block; font-size: 40px; diff --git a/yarn.lock b/yarn.lock index 6c3f807a4..b077a250e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -337,6 +337,10 @@ asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" +attr-accept@^1.0.3: + version "1.1.0" + resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.0.tgz#b5cd35227f163935a8f1de10ed3eba16941f6be6" + "auto-launch@https://github.com/meetfranz/node-auto-launch.git": version "5.0.1" resolved "https://github.com/meetfranz/node-auto-launch.git#b90a0470467eb84435e6554ae9db1e2c6db79e61" @@ -4940,6 +4944,13 @@ react-dom@^15.4.1: object-assign "^4.1.0" prop-types "^15.5.10" +react-dropzone@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9" + dependencies: + attr-accept "^1.0.3" + prop-types "^15.5.7" + react-electron-web-view@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/react-electron-web-view/-/react-electron-web-view-2.0.1.tgz#984b7bbbeb77e35bcca921dc50120fc8f2b0f27d" -- cgit v1.2.3-70-g09d2