From 37c10be5e29815057b4b1adcd268b9f4cb5b415e Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Sun, 16 Apr 2017 13:44:11 +0200 Subject: Add basic avatar changing. --- src/components/settings/settings.vue | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src/components/settings/settings.vue') diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 33d46e7e..7ceac828 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -8,6 +8,13 @@

Theme

+
+

Avatar

+ +
+ +
+

Filtering

All notices containing these words will be muted, one per line

-- cgit v1.2.3-70-g09d2 From 143aa3b990c0e0fac98c4a097d68e9f7518f1940 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 21 Apr 2017 18:52:42 +0300 Subject: Started captcha and better avatar control, improved login form to fit register link better. --- src/components/login_form/login_form.vue | 22 +++++++++++---- src/components/registration/registration.vue | 14 +++++++++- src/components/settings/settings.js | 20 +++++++++++--- src/components/settings/settings.vue | 40 ++++++++++++++++++++++++++-- 4 files changed, 84 insertions(+), 12 deletions(-) (limited to 'src/components/settings/settings.vue') diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index bf3f24e7..585af6f6 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -15,14 +15,14 @@
- +
{{authError}}
-
- Register new account -
@@ -42,8 +42,8 @@ } .btn { - margin-top: 1.0em; min-height: 28px; + width: 10em; } .error { @@ -53,6 +53,18 @@ min-height: 28px; line-height: 28px; } + + .register { + flex: 1 1; + } + + .login-bottom { + margin-top: 1.0em; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 5267f0e1..f010d8ab 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -31,6 +31,13 @@ +
@@ -63,7 +70,7 @@ } .terms-of-service { - flex: 0 1 55%; + flex: 0 1 50%; margin: 0.8em; } @@ -99,6 +106,11 @@ padding: 0.1em 0.2em 0.2em 0.2em; } + .captcha { + max-width: 350px; + margin-bottom: 0.4em; + } + .btn { //align-self: flex-start; //width: 10em; diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 883e5caa..e4ea56f6 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -7,7 +7,8 @@ const settings = { hideAttachmentsLocal: this.$store.state.config.hideAttachments, hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, hideNsfwLocal: this.$store.state.config.hideNsfw, - muteWordsString: this.$store.state.config.muteWords.join('\n') + muteWordsString: this.$store.state.config.muteWords.join('\n'), + previewfile: null } }, components: { @@ -25,15 +26,26 @@ const settings = { const reader = new FileReader() reader.onload = ({target}) => { const img = target.result - - this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => { + this.previewfile = img + /*this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => { if (!user.error) { this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) } - }) + })*/ } reader.readAsDataURL(file) + }, + submitAvatar () { + if (!this.previewfile) + return + const img = this.previewfile + this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => { + if (!user.error) { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + } + }) } }, watch: { diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 7ceac828..bdc0f351 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -8,12 +8,17 @@

Theme

-
+

Avatar

- +

Your current avatar:

+ +

Set new avatar:

+ +
+

Filtering

@@ -51,6 +56,37 @@ width: 100%; height: 100px; } + + .old-avatar { + width: 128px; + border-radius: 5px; + } + + .new-avatar { + max-width: 100%; + border-radius: 5px; + } + + .btn { + margin-top: 1em; + min-height: 28px; + width: 10em; + } + + .cropper { + //position: absolute; + cursor: move; + width: 128px; + height: 128px; + border:1px solid #fff; + background-color: #000000; + .sub { + width: 100%; + height: 100%; + margin: -1px -1px -1px -1px ; + border:1px dashed #000; + } + } } .setting-list { list-style-type: none; -- cgit v1.2.3-70-g09d2 From 95605c32f1a8d08d72eb60d34abead6067b79841 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 19 Jun 2017 12:26:33 +0300 Subject: Automatic square cropping for avatar upload, preview of the new avatar. --- src/components/settings/settings.js | 30 +++++++++++++++++++----------- src/components/settings/settings.vue | 21 ++++----------------- 2 files changed, 23 insertions(+), 28 deletions(-) (limited to 'src/components/settings/settings.vue') diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index b8aa876b..8d6a6713 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -8,10 +8,9 @@ const settings = { hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, hideNsfwLocal: this.$store.state.config.hideNsfw, muteWordsString: this.$store.state.config.muteWords.join('\n'), - previewfile: null, autoLoadLocal: this.$store.state.config.autoLoad, hoverPreviewLocal: this.$store.state.config.hoverPreview, - muteWordsString: this.$store.state.config.muteWords.join('\n') + previewfile: null } }, components: { @@ -30,20 +29,29 @@ const settings = { reader.onload = ({target}) => { const img = target.result this.previewfile = img - /*this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => { - if (!user.error) { - this.$store.commit('addNewUsers', [user]) - this.$store.commit('setCurrentUser', user) - } - })*/ } reader.readAsDataURL(file) }, submitAvatar () { - if (!this.previewfile) - return + if (!this.previewfile) { return } + const img = this.previewfile - this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => { + // eslint-disable-next-line no-undef + let imginfo = new Image() + let cropX, cropY, cropW, cropH + imginfo.src = this.previewfile + 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.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => { if (!user.error) { this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index f2442194..1abb1789 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -13,7 +13,7 @@

Your current avatar:

Set new avatar:

- +
@@ -71,7 +71,9 @@ } .new-avatar { - max-width: 100%; + object-fit: cover; + width: 128px; + height: 128px; border-radius: 5px; } @@ -80,21 +82,6 @@ min-height: 28px; width: 10em; } - - .cropper { - //position: absolute; - cursor: move; - width: 128px; - height: 128px; - border:1px solid #fff; - background-color: #000000; - .sub { - width: 100%; - height: 100%; - margin: -1px -1px -1px -1px ; - border:1px dashed #000; - } - } } .setting-list { list-style-type: none; -- cgit v1.2.3-70-g09d2