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',
'indent': 'off',
'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://use.typekit.net/tck7ptw.css" rel="stylesheet">
<script>
UPLOADCARE_LOCALE = "de";
UPLOADCARE_TABS = "file";
UPLOADCARE_PUBLIC_KEY = "ad89e9f42d4f5532d176";
UPLOADCARE_LOCALE_TRANSLATIONS = {
buttons: {
choose: {
files: {
one: 'Choose a file',
other: 'Choose files'
},
images: {
one: 'Choose an image',
other: 'Choose images'
}
<script>
window.UPLOADCARE_LOCALE = 'de';
window.UPLOADCARE_LOCALE_TRANSLATIONS = {
dialog: {
tabs: {
file: {
drag: 'Ziehen Sie ein Bild hier hinein',
button: 'Wählen Sie ein lokales Bild',
}
}
};
</script>
}
};
</script>
</head>
<body>

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

@ -2,7 +2,7 @@
<div class="image-form">
<div ref="uploadcare-panel"></div>
<div v-if="url">
<img :src="url">
<img :src="previewUrl">
</div>
</div>
</template>
@ -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;
}
},
}
</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 "buttons";
@import "forms";
@import "uploadcare_overwrite";
@import "help-text";