Merge branch 'feature/accountHighlight' into 'develop'

Account highlight

See merge request pleroma/pleroma-fe!285

1 files changed, 48 insertions, 0 deletions

diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
new file mode 100644
index 00000000..ebb25eca
--- /dev/null
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -0,0 +1,48 @@
+import { hex2rgb } from '../color_convert/color_convert.js'
+const highlightStyle = (prefs) => {
+  if (prefs === undefined) return
+  const {color, type} = prefs
+  if (typeof color !== 'string') return
+  const rgb = hex2rgb(color)
+  if (rgb == null) return
+  const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
+  const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
+  const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
+  if (type === 'striped') {
+    return {
+      backgroundImage: [
+        'repeating-linear-gradient(-45deg,',
+        `${tintColor} ,`,
+        `${tintColor} 20px,`,
+        `${tintColor2} 20px,`,
+        `${tintColor2} 40px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
+  } else if (type === 'solid') {
+    return {
+      backgroundColor: tintColor2
+    }
+  } else if (type === 'side') {
+    return {
+      backgroundImage: [
+        'linear-gradient(to right,',
+        `${solidColor} ,`,
+        `${solidColor} 2px,`,
+        `transparent 6px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
+  }
+}
+
+const highlightClass = (user) => {
+  return 'USER____' + user.screen_name
+    .replace(/\./g, '_')
+    .replace(/@/g, '_AT_')
+}
+
+export {
+  highlightClass,
+  highlightStyle
+}