Merge remote-tracking branch 'origin/develop' into shigusegubu-themes3

changelog.d/colorfuncs.fix

@@ -0,0 +1 @@
+Fix some of the color manipulation functions

src/components/status/status.vue

@@ -311,44 +311,57 @@
                 v-if="isReply"
                 class="glued-label reply-glued-label"
               >
-                <StatusPopover
+                <i18n-t
-                  v-if="!isPreview"
+                  keypath="status.reply_to_with_arg"
-                  :status-id="status.parent_visible && status.in_reply_to_status_id"
-                  class="reply-to-popover"
-                  style="min-width: 0;"
-                  :class="{ '-strikethrough': !status.parent_visible }"
                 >
-                  <button
+                  <template #replyToWithIcon>
-                    class="button-unstyled reply-to"
+                    <StatusPopover
-                    :aria-label="$t('tool_tip.reply')"
+                      v-if="!isPreview"
-                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                      :status-id="status.parent_visible && status.in_reply_to_status_id"
-                  >
+                      class="reply-to-popover"
-                    <FAIcon
+                      style="min-width: 0"
-                      class="fa-scale-110 fa-old-padding"
+                      :class="{ '-strikethrough': !status.parent_visible }"
-                      icon="reply"
-                      flip="horizontal"
-                    />
-                    {{ ' ' }}
-                    <span
-                      class="reply-to-text"
                     >
-                      {{ $t('status.reply_to') }}
+                      <button
-                    </span>
+                        class="button-unstyled reply-to"
-                  </button>
+                        :aria-label="$t('tool_tip.reply')"
-                </StatusPopover>
+                        @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                      >
+                        <i18n-t keypath="status.reply_to_with_icon">
+                          <template #icon>
+                            <FAIcon
+                              class="fa-scale-110 fa-old-padding"
+                              icon="reply"
+                              flip="horizontal"
+                            />
+                          </template>
+                          <template #replyTo>
+                            <span
+                              class="reply-to-text"
+                            >
+                              {{ $t('status.reply_to') }}
+                            </span>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </StatusPopover>
 
-                <span
+                    <span
-                  v-else
+                      v-else
-                  class="reply-to-no-popover"
+                      class="reply-to-no-popover"
-                >
+                    >
-                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                      <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
-                </span>
+                    </span>
-                <MentionLink
+                  </template>
-                  :content="replyToName"
+                  <template #user>
-                  :url="replyProfileLink"
+                    <MentionLink
-                  :user-id="status.in_reply_to_user_id"
+                      :content="replyToName"
-                  :user-screen-name="status.in_reply_to_screen_name"
+                      :url="replyProfileLink"
-                />
+                      :user-id="status.in_reply_to_user_id"
+                      :user-screen-name="status.in_reply_to_screen_name"
+                    />
+                  </template>
+                </i18n-t>
               </span>
 
               <!-- This little wrapper is made for sole purpose of "gluing" -->

src/i18n/en.json

@@ -1218,6 +1218,8 @@
     "delete_confirm_accept_button": "Delete",
     "delete_confirm_cancel_button": "Keep",
     "reply_to": "Reply to",
+    "reply_to_with_icon": "{icon} {replyTo}",
+    "reply_to_with_arg": "{replyToWithIcon} {user}",
     "mentions": "Mentions",
     "replies_list": "Replies:",
     "replies_list_with_others": "Replies (+{numReplies} other): | Replies (+{numReplies} others):",

src/services/color_convert/color_convert.js

@@ -52,15 +52,6 @@ const c2linear = (bit) => {
   }
 }
 
-/**
- * Converts sRGB into linear RGB
- * @param {Object} srgb - sRGB color
- * @returns {Object} linear rgb color
- */
-const srgbToLinear = (srgb) => {
-  return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
-}
-
 /**
  * Calculates relative luminance for given color
  * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
@@ -70,7 +61,10 @@ const srgbToLinear = (srgb) => {
  * @returns {Number} relative luminance
  */
 export const relativeLuminance = (srgb) => {
-  const { r, g, b } = srgbToLinear(srgb)
+  const r = c2linear(srgb.r)
+  const g = c2linear(srgb.g)
+  const b = c2linear(srgb.b)
+
   return 0.2126 * r + 0.7152 * g + 0.0722 * b
 }
 
@@ -110,13 +104,17 @@ export const getContrastRatioLayers = (text, layers, bedrock) => {
  * @returns {Object} sRGB of resulting color
  */
 export const alphaBlend = (fg, fga, bg) => {
-  if (fga === 1 || typeof fga === 'undefined') return fg
+  if (fga === 1 || typeof fga === 'undefined') {
-  return 'rgb'.split('').reduce((acc, c) => {
+    return fg
-    // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
+  }
-    // for opaque bg and transparent fg
+
-    acc[c] = (fg[c] * fga + bg[c] * (1 - fga))
+  // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
-    return acc
+  // for opaque bg and transparent fg
-  }, {})
+  return {
+    r: (fg.r * fga + bg.r * (1 - fga)),
+    g: (fg.g * fga + bg.g * (1 - fga)),
+    b: (fg.b * fga + bg.b * (1 - fga))
+  }
 }
 
 /**
@@ -130,10 +128,11 @@ export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color,
 }, bedrock)
 
 export const invert = (rgb) => {
-  return 'rgb'.split('').reduce((acc, c) => {
+  return {
-    acc[c] = 255 - rgb[c]
+    r: 255 - rgb.r,
-    return acc
+    g: 255 - rgb.g,
-  }, {})
+    b: 255 - rgb.b
+  }
 }
 
 /**
@@ -144,6 +143,7 @@ export const invert = (rgb) => {
  */
 export 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),
@@ -161,11 +161,13 @@ export const hex2rgb = (hex) => {
  * @returns {Object} result
  */
 export const mixrgb = (a, b) => {
-  return 'rgb'.split('').reduce((acc, k) => {
+  return {
-    acc[k] = (a[k] + b[k]) / 2
+    r: (a.r + b.r) / 2,
-    return acc
+    g: (a.g + b.g) / 2,
-  }, {})
+    b: (a.b + b.b) / 2
+  }
 }
+
 /**
  * Converts rgb object into a CSS rgba() color
  *
@@ -173,7 +175,33 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a ?? 1})`
+  const base = {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1
+  }
+
+  if (rgba !== null) {
+    if (rgba.r !== undefined && !isNaN(rgba.r)) {
+      base.r = rgba.r
+    }
+    if (rgba.g !== undefined && !isNaN(rgba.g)) {
+      base.g = rgba.g
+    }
+    if (rgba.b !== undefined && !isNaN(rgba.b)) {
+      base.b = rgba.b
+    }
+    if (rgba.a !== undefined && !isNaN(rgba.a)) {
+      base.a = rgba.a
+    }
+  } else {
+    base.r = 255
+    base.g = 255
+    base.b = 255
+  }
+
+  return `rgba(${Math.floor(base.r)}, ${Math.floor(base.g)}, ${Math.floor(base.b)}, ${base.a})`
 }
 
 /**

src/services/entity_normalizer/entity_normalizer.service.js

@@ -442,7 +442,9 @@ export const parseNotification = (data) => {
   if (masto) {
     output.type = mastoDict[data.type] || data.type
     output.seen = data.pleroma.is_seen
-    output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
+    // TODO: null check should be a temporary fix, I guess.
+    // Investigate why backend does this.
+    output.status = isStatusNotification(output.type) && data.status !== null ? parseStatus(data.status) : null
     output.target = output.type !== 'move'
       ? null
       : parseUser(data.target)