sliver/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

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

Browse source 
Various fixes with usercard (and attachments), clean up

See merge request pleroma/pleroma-fe!170
This commit is contained in:
lambda 2017-11-21 12:56:57 +00:00
commit 118d60b871
8 changed files with 119 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/attachment/attachment.vue
View file

@ -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 {

3
src/components/post_status_form/post_status_form.vue
View file

@ -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;

9
src/components/style_switcher/style_switcher.js
View file

@ -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'])

7
src/components/user_card/user_card.vue
View file

@ -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>

64
src/components/user_card_content/user_card_content.js Normal file
View file

@ -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 })
}
}
}

65
src/components/user_card_content/user_card_content.vue
View file

@ -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;
}

34
src/services/color_convert/color_convert.js Normal file
View file

@ -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
}

22
src/services/style_setter/style_setter.js
View file

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