From 6eb6f75223d3eebcf31b33897d72f07fe93f02ad Mon Sep 17 00:00:00 2001
From: vantezzen <hello@vantezzen.io>
Date: Thu, 28 Nov 2019 17:07:32 +0100
Subject: Add appearance feature handler

---
 src/features/appearance/index.js | 107 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 src/features/appearance/index.js

(limited to 'src/features/appearance')

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
new file mode 100644
index 000000000..cd4d60c20
--- /dev/null
+++ b/src/features/appearance/index.js
@@ -0,0 +1,107 @@
+import { reaction } from 'mobx';
+import themeInfo from '../../assets/themeInfo.json';
+import { DEFAULT_APP_SETTINGS } from '../../config';
+
+const STYLE_ELEMENT_ID = 'custom-appearance-style';
+
+// Additional styles needed to make accent colors work properly
+// "[ACCENT]" will be replaced with the accent color
+const ACCENT_ADDITIONAL_STYLES = `
+.franz-form__button {
+  background: inherit !important;
+  border: 2px solid [ACCENT] !important;
+}
+`;
+
+function createStyleElement() {
+  const styles = document.createElement('style');
+  styles.id = STYLE_ELEMENT_ID;
+
+  document.querySelector('head').appendChild(styles);
+}
+
+function setAppearance(style) {
+  const styleElement = document.getElementById(STYLE_ELEMENT_ID);
+
+  styleElement.innerHTML = style;
+}
+
+function generateAccentStyle(color) {
+  let style = '';
+
+  Object.keys(themeInfo).forEach((property) => {
+    style += `
+      ${themeInfo[property]} {
+        ${property}: ${color};
+      }
+    `;
+  });
+
+  style += ACCENT_ADDITIONAL_STYLES.replace(/\[ACCENT\]/g, color);
+
+  return style;
+}
+
+function generateServiceRibbonWidthStyle(width) {
+  return `
+    .sidebar {
+      width: ${width}px !important;
+    }
+    .tab-item {
+      width: ${width - 2}px !important;
+      height: ${width - 5}px !important;
+    }
+    .tab-item .tab-item__icon {
+      width: ${width / 2}px !important;
+    }
+  `
+}
+
+function generateStyle(settings) {
+  let style = '';
+
+  const {
+    accentColor,
+    serviceRibbonWidth
+  } = settings;
+
+  if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) {
+    style += generateAccentStyle(accentColor);
+  }
+  if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth) {
+    style += generateServiceRibbonWidthStyle(serviceRibbonWidth);
+  }
+
+  return style;
+}
+function updateStyle(settings) {
+  const style = generateStyle(settings);
+  setAppearance(style);
+}
+
+export default function initAppearance(stores) {
+  const { settings } = stores;
+  createStyleElement();
+
+  // Update accent color
+  reaction(
+    () => (
+      settings.all.app.accentColor
+    ),
+    () => {
+      updateStyle(settings.all.app);
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+  // Update service ribbon width
+  reaction(
+    () => (
+      settings.all.app.serviceRibbonWidth
+    ),
+    () => {
+      updateStyle(settings.all.app);
+    },
+  );
+}
-- 
cgit v1.2.3-54-g00ecf