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:
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())