- {field.label}
- {(field.value && field.value !== 'delete') || this.state.path ? (
-
-
-
-
-
+
+
+
+ {(field.value && field.value !== 'delete') || 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.
-
- )}
+ ) : (
+
{ this.dropzoneRef = node; }}
+ onDrop={this.onDrop.bind(this)}
+ className={cssClasses}
+ multiple={multiple}
+ accept="image/jpeg, image/png"
+ >
+
+
+ {textUpload}
+
+
+ )}
+
);
}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 8d3a268ad..c26195a1e 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -48,7 +48,7 @@ const messages = defineMessages({
},
icon: {
id: 'settings.service.form.icon',
- defaultMessage: '!!!Icon',
+ defaultMessage: '!!!Custom icon',
},
});
@@ -108,7 +108,7 @@ export default class EditServiceScreen extends Component {
},
customIcon: {
label: intl.formatMessage(messages.icon),
- value: service.hasCustomIcon ? service.icon : false,
+ value: service.hasCustomUploadedIcon ? service.icon : false,
default: null,
type: 'file',
},
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index bfb95da04..f3db20aea 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -127,7 +127,9 @@
"settings.service.form.headlineNotifications": "Notifications",
"settings.service.form.headlineBadges": "Unread message badges",
"settings.service.form.headlineGeneral": "General",
- "settings.service.form.icon": "Icon",
+ "settings.service.form.icon": "Custom icon",
+ "settings.service.form.iconDelete": "Delete",
+ "settings.service.form.iconUpload": "Drop your image, or click here",
"settings.service.error.headline": "Error",
"settings.service.error.goBack": "Back to services",
"settings.service.error.message": "Could not load service recipe.",
diff --git a/src/models/Service.js b/src/models/Service.js
index 652d2594c..423510c7d 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -25,6 +25,7 @@ export default class Service {
@observable isBadgeEnabled = true;
@observable isIndirectMessageBadgeEnabled = true;
@observable iconUrl = '';
+ @observable hasCustomUploadedIcon = false;
@observable hasCrashed = false;
constructor(data, recipe) {
@@ -62,6 +63,8 @@ export default class Service {
this.isMuted = data.isMuted !== undefined ? data.isMuted : this.isMuted;
+ this.hasCustomUploadedIcon = data.hasCustomIcon !== undefined ? data.hasCustomIcon : this.hasCustomUploadedIcon;
+
this.recipe = recipe;
autorun(() => {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 4fb5c9767..f2a8683ba 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -177,13 +177,21 @@ export default class ServicesStore extends Store {
await request._promise;
newData.iconUrl = request.result.data.iconUrl;
+ newData.hasCustomUploadedIcon = true;
}
this.allServicesRequest.patch((result) => {
if (!result) return;
+ // patch custom icon deletion
if (data.customIcon === 'delete') {
data.iconUrl = '';
+ data.hasCustomUploadedIcon = false;
+ }
+
+ // patch custom icon url
+ if (data.customIconUrl) {
+ data.iconUrl = data.customIconUrl;
}
Object.assign(result.find(c => c.id === serviceId), newData);
@@ -328,7 +336,7 @@ export default class ServicesStore extends Store {
}
} else if (channel === 'avatar') {
const url = args[0];
- if (service.customIconUrl !== url) {
+ if (service.iconUrl !== url && !service.hasCustomUploadedIcon) {
service.customIconUrl = url;
this.actions.service.updateService({
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
index 764bb3158..06176a7af 100644
--- a/src/styles/image-upload.scss
+++ b/src/styles/image-upload.scss
@@ -1,9 +1,12 @@
.image-upload {
position: absolute;
- width: 100px;
- height: 100px;
- border-radius: $theme-border-radius;
+ width: 140px;
+ height: 140px;
+ border: 1px solid $theme-gray-lighter;
+ border-radius: $theme-border-radius-small;
+ background: $theme-gray-lightest;
overflow: hidden;
+ margin-top: 5px;
&__preview,
&__action {
@@ -19,7 +22,7 @@
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
- margin: 5px;
+ border-radius: 3px;
}
&__action {
@@ -27,6 +30,8 @@
z-index: 10;
opacity: 0;
transition: opacity 0.5s;
+ display: flex;
+ justify-content: center;
&-background {
position: absolute;
@@ -41,6 +46,33 @@
button {
position: relative;
z-index: 100;
+ color: #FFF;
+
+ .mdi {
+ color: #FFF;
+ }
+ }
+ }
+
+ &__dropzone {
+ text-align: center;
+ border-radius: 5px;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+
+ &__dropzone,
+ button {
+ .mdi {
+ margin-bottom: 5px;
+ }
+
+ p {
+ font-size: 10px;
+ line-height: 10px;
}
}
@@ -49,4 +81,11 @@
opacity: 1;
}
}
+}
+
+.image-upload-wrapper {
+ .mdi {
+ font-size: 40px;
+ color: $theme-gray-light;
+ }
}
\ No newline at end of file
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 283913ab7..cb39717ea 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -121,9 +121,15 @@
}
.service-icon {
- width: 30%;
- min-width: 100px;
+ width: 140px;
+ float: right;
+ margin-top: 30px;
margin-left: 40px;
+
+ label {
+ font-weight: bold;
+ letter-spacing: -0.1px;
+ }
}
}
@@ -167,6 +173,7 @@
&__options {
margin-top: 20px;
+ flex: 1;
}
&__settings-group {