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

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 {

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;

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

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>

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

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

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

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