diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 111b39c8..0c86ffaa 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -27,6 +27,7 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'indent': 'off',
'semi': 0,
- 'space-before-function-paren': 'off'
+ 'space-before-function-paren': 'off',
+ 'comma-dangle': 'off',
}
-}
+};
diff --git a/client/index.html b/client/index.html
index 835ec4d3..28e5b57e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -9,25 +9,19 @@
-
+ }
+ };
+
diff --git a/client/src/components/content-forms/ImageForm.vue b/client/src/components/content-forms/ImageForm.vue
index fe8f6856..b76359b4 100644
--- a/client/src/components/content-forms/ImageForm.vue
+++ b/client/src/components/content-forms/ImageForm.vue
@@ -2,7 +2,7 @@
@@ -11,36 +11,45 @@
import uploadcare from 'uploadcare-widget';
export default {
+
props: ['url', 'index'],
mounted() {
- console.log('ImageForm mounted');
- console.log(this.$refs);
- const uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
- tabs: ['file'],
- }, {
- publicKey: 'ad89e9f42d4f5532d176',
- imagesOnly: true,
- });
+ let uploadcarePanel = openImagePanel(this.$refs['uploadcare-panel']);
- uploadcarePanel.done((result) => {
- console.log(result);
- result.progress(function(p) {
- console.log('progress');
- console.log(p);
- });
- result.done(fileInfo => {
+ uploadcarePanel.done(panelResult => {
+ console.log(panelResult);
+
+ panelResult.done(fileInfo => {
console.log(fileInfo);
- this.url = fileInfo.cdnUrl;
+ //this.url = fileInfo.cdnUrl;
this.$emit('link-change-url', fileInfo.cdnUrl, this.index)
});
+
+ panelResult.progress(p => {
+ console.log(p);
+ });
+
+ panelResult.fail(uploadResult => {
+ console.log('fail');
+ console.log(uploadResult);
+ });
});
- uploadcarePanel.progress(function(tabName) {
- console.log(tabName);
- // tabName is selected. progress() works when you click a tab name on the list.
- // Technically, it would work on any dialog progress, i.e. when preview appears.
- });
- }
+ function openImagePanel(panelElement) {
+ return uploadcare.openPanel(panelElement, null, {
+ tabs: ['file'],
+ publicKey: 'ad89e9f42d4f5532d176',
+ });
+ }
+ },
+ computed: {
+ previewUrl: function() {
+ if (this.url) {
+ return this.url + '-/preview/200x200/';
+ }
+ return null;
+ }
+ },
}
diff --git a/client/src/styles/_uploadcare_overwrite.scss b/client/src/styles/_uploadcare_overwrite.scss
new file mode 100644
index 00000000..d25d3886
--- /dev/null
+++ b/client/src/styles/_uploadcare_overwrite.scss
@@ -0,0 +1,31 @@
+.uploadcare--panel {
+ background: $color-lightgrey;
+ height: 200px;
+ border: none;
+ border-radius: 0;
+}
+
+.uploadcare--menu {
+ display: none;
+}
+
+.uploadcare--button {
+ background: none !important;
+ color: inherit;
+ border: none;
+ padding: 0 !important;
+ font: inherit;
+ border-bottom: 1px solid #444;
+ cursor: pointer;
+ border-radius: 0;
+}
+
+.uploadcare--button_primary:hover {
+ background: inherit;
+ border-color: inherit;
+ color: inherit;
+}
+
+.uploadcare--text_size_extra-large {
+ font-size: 24px;
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 7610ba7d..3dc726df 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -8,9 +8,5 @@
@import "variables";
@import "buttons";
@import "forms";
+@import "uploadcare_overwrite";
@import "help-text";
-
-
-
-
-