aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/style_switcher/style_switcher.js9
-rw-r--r--src/components/user_card_content/user_card_content.js64
-rw-r--r--src/components/user_card_content/user_card_content.vue64
-rw-r--r--src/services/color_convert/color_convert.js34
-rw-r--r--src/services/style_setter/style_setter.js22
5 files changed, 103 insertions, 90 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index b1359d13..a762f914 100644
--- 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_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
new file mode 100644
index 00000000..6e67a321
--- /dev/null
+++ 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
index 5635a177..d49a7d6c 100644
--- 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';
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
new file mode 100644
index 00000000..13dd8979
--- /dev/null
+++ 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
index 62296e79..8e0258e8 100644
--- 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())
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 12:45:41 +0000