ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

uploadcare styling and handling

This commit is contained in:
Daniel Egger 2018-09-19 16:07:17 +02:00
parent 5ff2f97606
commit a16a4753b0
5 changed files with 78 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/.eslintrc.js
View File

@ -27,6 +27,7 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'indent': 'off', 'indent': 'off',
'semi': 0, 'semi': 0,
'space-before-function-paren': 'off' 'space-before-function-paren': 'off',
'comma-dangle': 'off',
} }
} };

28
client/index.html
View File

@ -9,25 +9,19 @@
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,800" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,800" rel="stylesheet">
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet"> <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
<script> <script>
UPLOADCARE_LOCALE = "de"; window.UPLOADCARE_LOCALE = 'de';
UPLOADCARE_TABS = "file"; window.UPLOADCARE_LOCALE_TRANSLATIONS = {
UPLOADCARE_PUBLIC_KEY = "ad89e9f42d4f5532d176"; dialog: {
UPLOADCARE_LOCALE_TRANSLATIONS = { tabs: {
buttons: { file: {
choose: { drag: 'Ziehen Sie ein Bild hier hinein',
files: { button: 'Wählen Sie ein lokales Bild',
one: 'Choose a file',
other: 'Choose files'
},
images: {
one: 'Choose an image',
other: 'Choose images'
}
} }
} }
}; }
</script> };
</script>
</head> </head>
<body> <body>

55
client/src/components/content-forms/ImageForm.vue
View File

@ -2,7 +2,7 @@
<div class="image-form"> <div class="image-form">
<div ref="uploadcare-panel"></div> <div ref="uploadcare-panel"></div>
<div v-if="url"> <div v-if="url">
<img :src="url"> <img :src="previewUrl">
</div> </div>
</div> </div>
</template> </template>
@ -11,36 +11,45 @@
import uploadcare from 'uploadcare-widget'; import uploadcare from 'uploadcare-widget';
export default { export default {
props: ['url', 'index'], props: ['url', 'index'],
mounted() { mounted() {
console.log('ImageForm mounted'); let uploadcarePanel = openImagePanel(this.$refs['uploadcare-panel']);
console.log(this.$refs);
const uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
tabs: ['file'],
}, {
publicKey: 'ad89e9f42d4f5532d176',
imagesOnly: true,
});
uploadcarePanel.done((result) => { uploadcarePanel.done(panelResult => {
console.log(result); console.log(panelResult);
result.progress(function(p) {
console.log('progress'); panelResult.done(fileInfo => {
console.log(p);
});
result.done(fileInfo => {
console.log(fileInfo); console.log(fileInfo);
this.url = fileInfo.cdnUrl; //this.url = fileInfo.cdnUrl;
this.$emit('link-change-url', fileInfo.cdnUrl, this.index) 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) { function openImagePanel(panelElement) {
console.log(tabName); return uploadcare.openPanel(panelElement, null, {
// tabName is selected. progress() works when you click a tab name on the list. tabs: ['file'],
// Technically, it would work on any dialog progress, i.e. when preview appears. publicKey: 'ad89e9f42d4f5532d176',
}); });
} }
},
computed: {
previewUrl: function() {
if (this.url) {
return this.url + '-/preview/200x200/';
}
return null;
}
},
} }
</script> </script>

31
client/src/styles/_uploadcare_overwrite.scss Normal file
View File

@ -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;
}

6
client/src/styles/main.scss
View File

@ -8,9 +8,5 @@
@import "variables"; @import "variables";
@import "buttons"; @import "buttons";
@import "forms"; @import "forms";
@import "uploadcare_overwrite";
@import "help-text"; @import "help-text";