Add avatar crop popup

This commit is contained in:
taehoon 2019-02-07 03:05:59 -05:00
parent 4f95371081
commit 13725f040b
11 changed files with 306 additions and 1118 deletions

View File

@ -10,8 +10,14 @@ module.exports = {
plugins: [ plugins: [
'html' 'html'
], ],
globals: {
'FileReader': false,
'Element': false,
'FormData': false,
'XMLHttpRequest': false
},
// add your custom rules here // add your custom rules here
'rules': { rules: {
// allow paren-less arrow functions // allow paren-less arrow functions
'arrow-parens': 0, 'arrow-parens': 0,
// allow async-await // allow async-await

View File

@ -17,6 +17,7 @@
"babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-lodash": "^3.2.11", "babel-plugin-lodash": "^3.2.11",
"chromatism": "^3.0.0", "chromatism": "^3.0.0",
"cropperjs": "^1.4.3",
"diff": "^3.0.1", "diff": "^3.0.1",
"karma-mocha-reporter": "^2.2.1", "karma-mocha-reporter": "^2.2.1",
"localforage": "^1.5.0", "localforage": "^1.5.0",

View File

@ -0,0 +1,88 @@
import Cropper from 'cropperjs'
import Modal from '../modal/modal.vue'
import 'cropperjs/dist/cropper.css'
const ImageCropper = {
props: {
trigger: {
type: [String, Element],
required: true
},
cropperOptions: {
type: Object,
default () {
return {
aspectRatio: 1,
autoCropArea: 1,
viewMode: 1,
movable: false,
zoomable: false,
guides: false
}
}
},
mimes: {
type: String,
default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
},
title: {
type: String,
default: 'Crop picture'
},
saveButtonLabel: {
type: String,
default: 'Save'
}
},
data () {
return {
cropper: undefined,
dataUrl: undefined,
filename: undefined
}
},
components: {
Modal
},
methods: {
destroy () {
this.cropper.destroy()
this.$refs.input.value = ''
this.dataUrl = undefined
},
submit () {
this.$emit('submit', this.cropper, this.filename)
this.destroy()
},
pickImage () {
this.$refs.input.click()
},
createCropper () {
this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
}
},
mounted () {
// listen for click event on trigger
let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
if (!trigger) {
this.$emit('error', 'No image make trigger found.', 'user')
} else {
trigger.addEventListener('click', this.pickImage)
}
// listen for input file changes
let fileInput = this.$refs.input
fileInput.addEventListener('change', () => {
if (fileInput.files != null && fileInput.files[0] != null) {
let reader = new FileReader()
reader.onload = (e) => {
this.dataUrl = e.target.result
}
reader.readAsDataURL(fileInput.files[0])
this.filename = fileInput.files[0].name || 'unknown'
this.$emit('changed', fileInput.files[0], reader)
}
})
}
}
export default ImageCropper

View File

@ -0,0 +1,39 @@
<template>
<div class="image-cropper">
<modal :show="dataUrl" :title="title" @close="destroy">
<div class="modal-body">
<div class="image-cropper-image-container">
<img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
</div>
</div>
<div class="modal-footer">
<button class="btn image-cropper-btn" type="button" @click="submit" v-text="saveButtonLabel"></button>
</div>
</modal>
<input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
</div>
</template>
<script src="./image_cropper.js"></script>
<style lang="scss">
.image-cropper {
&-img-input {
display: none;
}
&-image-container {
position: relative;
img {
display: block;
max-width: 100%;
}
}
&-btn {
display: block;
width: 100%;
}
}
</style>

View File

@ -0,0 +1,17 @@
const Modal = {
props: ['show', 'title'],
methods: {
close: function () {
this.$emit('close')
}
},
mounted: function () {
document.addEventListener('keydown', (e) => {
if (this.show && e.keyCode === 27) {
this.close()
}
})
}
}
export default Modal

View File

@ -0,0 +1,101 @@
<template>
<transition name="modal">
<div class="modal-mask" @click="close" v-if="show">
<div class="modal-container" @click.stop>
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<slot></slot>
<a class="modal-close" @click="close"><i class="icon-cancel"></i></a>
</div>
</div>
</transition>
</template>
<script src="./modal.js"></script>
<style lang="scss">
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(27,31,35,.5);
transition: opacity .3s ease;
}
.modal-container {
position: relative;
display: flex;
flex-direction: column;
width: 450px;
margin: 10vh auto;
max-height: 80vh;
max-width: 90vw;
background-color: #fff;
border: 1px solid #444d56;
border-radius: 3px;
box-shadow: 0 0 18px rgba(0,0,0,.4);
transition: all .3s ease;
}
.modal-header {
flex: none;
background-color: #f6f8fa;
border-bottom: 1px solid #d1d5da;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding: 16px;
margin: 0;
}
h3.modal-title {
font-size: 14px;
font-weight: 600;
color: #24292e;
margin: 0;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
padding: 16px;
cursor: pointer;
}
.modal-body {
border-bottom: 1px solid #e1e4e8;
padding: 16px;
overflow-y: auto;
}
.modal-footer {
flex: none;
border-top: 1px solid #e1e4e8;
margin-top: -1px;
padding: 16px;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>

View File

@ -311,20 +311,6 @@
color: $fallback--cRed; color: $fallback--cRed;
} }
.old-avatar {
width: 128px;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
}
.new-avatar {
object-fit: cover;
width: 128px;
height: 128px;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
}
.btn { .btn {
min-height: 28px; min-height: 28px;
min-width: 10em; min-width: 10em;

View File

@ -1,6 +1,7 @@
import { unescape } from 'lodash' import { unescape } from 'lodash'
import TabSwitcher from '../tab_switcher/tab_switcher.js' import TabSwitcher from '../tab_switcher/tab_switcher.js'
import ImageCropper from '../image_cropper/image_cropper.vue'
import StyleSwitcher from '../style_switcher/style_switcher.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
@ -24,7 +25,6 @@ const UserSettings = {
bannerUploading: false, bannerUploading: false,
backgroundUploading: false, backgroundUploading: false,
followListUploading: false, followListUploading: false,
avatarPreview: null,
bannerPreview: null, bannerPreview: null,
backgroundPreview: null, backgroundPreview: null,
avatarUploadError: null, avatarUploadError: null,
@ -41,7 +41,8 @@ const UserSettings = {
}, },
components: { components: {
StyleSwitcher, StyleSwitcher,
TabSwitcher TabSwitcher,
ImageCropper
}, },
computed: { computed: {
user () { user () {
@ -117,31 +118,13 @@ const UserSettings = {
} }
reader.readAsDataURL(file) reader.readAsDataURL(file)
}, },
submitAvatar () { submitAvatar (cropper) {
if (!this.avatarPreview) { return } const img = cropper.getCroppedCanvas({ width: 150, height: 150 }).toDataURL('image/jpeg')
let img = this.avatarPreview
// eslint-disable-next-line no-undef
let imginfo = new Image()
let cropX, cropY, cropW, cropH
imginfo.src = img
if (imginfo.height > imginfo.width) {
cropX = 0
cropW = imginfo.width
cropY = Math.floor((imginfo.height - imginfo.width) / 2)
cropH = imginfo.width
} else {
cropY = 0
cropH = imginfo.height
cropX = Math.floor((imginfo.width - imginfo.height) / 2)
cropW = imginfo.height
}
this.avatarUploading = true this.avatarUploading = true
this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => { this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
if (!user.error) { if (!user.error) {
this.$store.commit('addNewUsers', [user]) this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user) this.$store.commit('setCurrentUser', user)
this.avatarPreview = null
} else { } else {
this.avatarUploadError = this.$t('upload.error.base') + user.error this.avatarUploadError = this.$t('upload.error.base') + user.error
} }

View File

@ -47,20 +47,20 @@
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.avatar')}}</h2> <h2>{{$t('settings.avatar')}}</h2>
<p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p> <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
<p>{{$t('settings.current_avatar')}}</p> <div class="avatar-upload-wrapper">
<img :src="user.profile_image_url_original" class="old-avatar"></img> <div class="avatar-upload">
<p>{{$t('settings.set_new_avatar')}}</p> <img :src="user.profile_image_url_original" class="avatar" />
<img class="new-avatar" v-bind:src="avatarPreview" v-if="avatarPreview"> <div class="avatar-upload-loading-wrapper" v-if="avatarUploading">
</img> <i class="icon-spin4 animate-spin"></i>
<div> </div>
<input type="file" @change="uploadFile('avatar', $event)" ></input> </div>
</div> </div>
<i class="icon-spin4 animate-spin" v-if="avatarUploading"></i> <button class="btn" type="button" id="pick-avatar" :disabled="avatarUploading">{{$t('settings.set_new_avatar')}}</button>
<button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button> <div class="alert error" v-if="avatarUploadError">
<div class='alert error' v-if="avatarUploadError">
Error: {{ avatarUploadError }} Error: {{ avatarUploadError }}
<i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i> <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
</div> </div>
<image-cropper trigger="#pick-avatar" :title="$t('settings.crop_your_new_avatar')" :saveButtonLabel="$t('settings.set_new_avatar')" @submit="submitAvatar" />
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.profile_banner')}}</h2> <h2>{{$t('settings.profile_banner')}}</h2>
@ -167,6 +167,8 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss';
.profile-edit { .profile-edit {
.bio { .bio {
margin: 0; margin: 0;
@ -193,5 +195,35 @@
.bg { .bg {
max-width: 100%; max-width: 100%;
} }
.avatar-upload {
display: inline-block;
position: relative;
}
.avatar-upload-loading-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.3);
i {
font-size: 50px;
color: #FFF;
}
}
.avatar {
display: block;
width: 150px;
height: 150px;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
}
} }
</style> </style>

View File

@ -112,7 +112,7 @@
"collapse_subject": "Collapse posts with subjects", "collapse_subject": "Collapse posts with subjects",
"composing": "Composing", "composing": "Composing",
"confirm_new_password": "Confirm new password", "confirm_new_password": "Confirm new password",
"current_avatar": "Your current avatar", "crop_your_new_avatar": "Crop your new avatar",
"current_password": "Current password", "current_password": "Current password",
"current_profile_banner": "Your current profile banner", "current_profile_banner": "Your current profile banner",
"data_import_export_tab": "Data Import / Export", "data_import_export_tab": "Data Import / Export",

1073
yarn.lock

File diff suppressed because it is too large Load Diff