logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: 118d60b871b790cfcf179b11a17af7d2787c8176
parent: 80203636803c3035a46d0d82c7778e4aff8d2612
Author: lambda <pleromagit@rogerbraun.net>
Date:   Tue, 21 Nov 2017 12:56:57 +0000

Merge branch 'fix/fix-usercard-breaking-with-certain-colors-restructure' into 'develop'

Various fixes with usercard (and attachments), clean up

See merge request pleroma/pleroma-fe!170

Diffstat:

Msrc/components/attachment/attachment.vue11++++++++---
Msrc/components/post_status_form/post_status_form.vue3++-
Msrc/components/style_switcher/style_switcher.js9++-------
Msrc/components/user_card/user_card.vue7++++++-
Asrc/components/user_card_content/user_card_content.js64++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/components/user_card_content/user_card_content.vue65+----------------------------------------------------------------
Asrc/services/color_convert/color_convert.js34++++++++++++++++++++++++++++++++++
Msrc/services/style_setter/style_setter.js22++--------------------
8 files changed, 119 insertions(+), 96 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue @@ -34,6 +34,13 @@ display: flex; flex-wrap: wrap; margin-right: -0.7em; + + .attachment.media-upload-container { + flex: 0 0 auto; + max-height: 300px; + max-width: 100%; + } + .attachment { flex: 1 0 30%; margin: 0.5em 0.7em 0.6em 0.0em; @@ -82,9 +89,7 @@ img.media-upload { margin-bottom: -2px; max-height: 300px; - width: 100%; - height: 100%; - flex: 1; + max-width: 100%; } .oembed { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue @@ -25,7 +25,7 @@ <i class="icon-cancel" @click="clearError"></i> </div> <div class="attachments"> - <div class="attachment base03-border" v-for="file in newStatus.files"> + <div class="media-upload-container attachment base03-border" v-for="file in newStatus.files"> <i class="fa icon-cancel" @click="removeMediaFile(file)"></i> <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img> <video v-if="type(file) === 'video'" :src="file.image" controls></video> @@ -40,6 +40,7 @@ <script src="./post_status_form.js"></script> <style lang="scss"> + .tribute-container { ul { padding: 0px; diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js @@ -1,3 +1,5 @@ +import { rgbstr2hex } from '../../services/color_convert/color_convert.js' + export default { data () { return { @@ -19,13 +21,6 @@ export default { }) }, mounted () { - const rgbstr2hex = (rgb) => { - if (rgb[0] === '#') { - return rgb - } - rgb = rgb.match(/\d+/g) - return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` - } this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00']) this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02']) this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05']) diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue @@ -63,9 +63,14 @@ width: -moz-webkit-fill-available; stretch: fill; margin: 0.2em 0 0.7em 0; - border-radius: 5px; + border-radius: 10px; border-style: solid; border-color: inherit; border-width: 1px; + overflow: hidden; + + p { + margin-bottom: 0; + } } </style> diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js @@ -0,0 +1,64 @@ +import { hex2rgb } from '../../services/color_convert/color_convert.js' + +export default { + props: [ 'user', 'switcher' ], + computed: { + headingStyle () { + const color = this.$store.state.config.colors['base00'] + if (color) { + const rgb = hex2rgb(color) + console.log(rgb) + return { + backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`, + backgroundImage: `url(${this.user.cover_photo})` + } + } + }, + bodyStyle () { + return { + background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)` + } + }, + isOtherUser () { + return this.user.id !== this.$store.state.users.currentUser.id + }, + loggedIn () { + return this.$store.state.users.currentUser + }, + dailyAvg () { + const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) + return Math.round(this.user.statuses_count / days) + } + }, + methods: { + followUser () { + const store = this.$store + store.state.api.backendInteractor.followUser(this.user.id) + .then((followedUser) => store.commit('addNewUsers', [followedUser])) + }, + unfollowUser () { + const store = this.$store + store.state.api.backendInteractor.unfollowUser(this.user.id) + .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) + }, + blockUser () { + const store = this.$store + store.state.api.backendInteractor.blockUser(this.user.id) + .then((blockedUser) => store.commit('addNewUsers', [blockedUser])) + }, + unblockUser () { + const store = this.$store + store.state.api.backendInteractor.unblockUser(this.user.id) + .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser])) + }, + toggleMute () { + const store = this.$store + store.commit('setMuted', {user: this.user, muted: !this.user.muted}) + store.state.api.backendInteractor.setUserMute(this.user) + }, + setProfileView (v) { + const store = this.$store + store.commit('setProfileView', { v }) + } + } +} diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue @@ -84,69 +84,7 @@ </div> </template> -<script> - export default { - props: [ 'user', 'switcher' ], - computed: { - headingStyle () { - let color = this.$store.state.config.colors['base00'] - if (color) { - let rgb = this.$store.state.config.colors['base00'].match(/\d+/g) - return { - backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`, - backgroundImage: `url(${this.user.cover_photo})` - } - } - }, - bodyStyle () { - return { - background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)` - } - }, - isOtherUser () { - return this.user.id !== this.$store.state.users.currentUser.id - }, - loggedIn () { - return this.$store.state.users.currentUser - }, - dailyAvg () { - const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) - return Math.round(this.user.statuses_count / days) - } - }, - methods: { - followUser () { - const store = this.$store - store.state.api.backendInteractor.followUser(this.user.id) - .then((followedUser) => store.commit('addNewUsers', [followedUser])) - }, - unfollowUser () { - const store = this.$store - store.state.api.backendInteractor.unfollowUser(this.user.id) - .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) - }, - blockUser () { - const store = this.$store - store.state.api.backendInteractor.blockUser(this.user.id) - .then((blockedUser) => store.commit('addNewUsers', [blockedUser])) - }, - unblockUser () { - const store = this.$store - store.state.api.backendInteractor.unblockUser(this.user.id) - .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser])) - }, - toggleMute () { - const store = this.$store - store.commit('setMuted', {user: this.user, muted: !this.user.muted}) - store.state.api.backendInteractor.setUserMute(this.user) - }, - setProfileView (v) { - const store = this.$store - store.commit('setProfileView', { v }) - } - } - } -</script> +<script src="./user_card_content.js"></script> <style lang="scss"> @import '../../_variables.scss'; @@ -164,7 +102,6 @@ .profile-panel-body { top: -0em; padding-top: 4em; - word-wrap: break-word; } diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js @@ -0,0 +1,34 @@ +import { map } from 'lodash' + +const rgb2hex = (r, g, b) => { + [r, g, b] = map([r, g, b], (val) => { + val = Math.ceil(val) + val = val < 0 ? 0 : val + val = val > 255 ? 255 : val + return val + }) + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}` +} + +const hex2rgb = (hex) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null +} + +const rgbstr2hex = (rgb) => { + if (rgb[0] === '#') { + return rgb + } + rgb = rgb.match(/\d+/g) + return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` +} + +export { + rgb2hex, + hex2rgb, + rgbstr2hex +} diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js @@ -1,4 +1,5 @@ -import { times, map } from 'lodash' +import { times } from 'lodash' +import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js' // While this is not used anymore right now, I left it in if we want to do custom // styles that aren't just colors, so user can pick from a few different distinct @@ -56,16 +57,6 @@ const setStyle = (href, commit) => { cssEl.addEventListener('load', setDynamic) } -const rgb2hex = (r, g, b) => { - [r, g, b] = map([r, g, b], (val) => { - val = Math.ceil(val) - val = val < 0 ? 0 : val - val = val > 255 ? 255 : val - return val - }) - return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}` -} - const setColors = (col, commit) => { const head = document.head const body = document.body @@ -108,15 +99,6 @@ const setColors = (col, commit) => { commit('setOption', { name: 'customTheme', value: col }) } -const hex2rgb = (hex) => { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null -} - const setPreset = (val, commit) => { window.fetch('/static/styles.json') .then((data) => data.json())