Merge pull request #5 from solid/profile-colors

Profile colors

Author: angelo-v

package-lock.json

@@ -34,7 +34,8 @@
     "lit-html": "^1.3.0",
     "pane-registry": "^2.3.4",
     "rdflib": "^2.1.3",
-    "solid-ui": "^2.3.8"
+    "solid-ui": "^2.3.8",
+    "validate-color": "^2.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

package.json

@@ -11,7 +11,6 @@ import { ProfilePresentation } from "./presenter";
 
 const styles = {
   image: styleMap(fullWidth()),
-  name: styleMap(heading()),
   intro: styleMap({ ...textGray(), ...textCenter() }),
   info: styleMap(padding()),
 };
@@ -21,15 +20,23 @@ export const ProfileCard = ({
   imageSrc,
   introduction,
   location,
-}: ProfilePresentation) => html`
-  ${Image(imageSrc, name)}
-  <div style=${styles.info}>
-    <h3 style=${styles.name}>${name}</h3>
-    <div style=${styles.intro}>
-      ${Line(introduction)} ${Line(location, "🌐")}
+  highlightColor,
+}: ProfilePresentation) => {
+  const nameStyle = styleMap({
+    ...heading(),
+    "text-decoration": "underline",
+    "text-decoration-color": highlightColor,
+  });
+  return html`
+    ${Image(imageSrc, name)}
+    <div style=${styles.info}>
+      <h3 style=${nameStyle}>${name}</h3>
+      <div style=${styles.intro}>
+        ${Line(introduction)} ${Line(location, "🌐")}
+      </div>
     </div>
-  </div>
-`;
+  `;
+};
 
 const Line = (value, prefix = nothing) =>
   value ? html`<p>${prefix} ${value}</p>` : nothing;

src/ProfileCard.ts

@@ -7,17 +7,21 @@ import { DataBrowserContext } from "pane-registry";
 import { FriendList } from "./FriendList";
 import { presentProfile } from "./presenter";
 
-const styles = {
-  grid: styleMap({ ...responsiveGrid(), ...paddingSmall() }),
-  card: styleMap(card()),
-};
-
 export const ProfileView = (
   subject: NamedNode,
   context: DataBrowserContext
 ) => {
   const profile = presentProfile(subject, context.session.store);
 
+  const styles = {
+    grid: styleMap({
+      ...responsiveGrid(),
+      ...paddingSmall(),
+      background: `radial-gradient(circle, ${profile.backgroundColor} 80%, ${profile.highlightColor} 100%)`,
+    }),
+    card: styleMap(card()),
+  };
+
   return html`
     <div style="${styles.grid}">
       <div>

src/ProfileView.ts

@@ -7,6 +7,7 @@ export const responsiveGrid = () => ({
 });
 
 export const card = () => ({
+  backgroundColor: "white",
   borderRadius: "4px",
   boxShadow: "0 1px 5px rgba(0,0,0,0.2)",
   padding: "0",

src/baseStyles.ts

@@ -78,4 +78,29 @@ describe("presenter", () => {
     const result = presentProfile(jane, store);
     expect(result.location).toBe("Hamburg, Germany");
   });
+
+  describe("coloring", () => {
+    it("presents default colors", () => {
+      const result = presentProfile(jane, store);
+      expect(result.backgroundColor).toBe("#eee");
+      expect(result.highlightColor).toBe("#090");
+    });
+    it("uses background color from profile settings", () => {
+      store.add(jane, ns.solid("profileBackgroundColor"), "#123456", doc);
+      const { backgroundColor } = presentProfile(jane, store);
+      expect(backgroundColor).toBe("#123456");
+    });
+    it("uses highlight color from profile settings", () => {
+      store.add(jane, ns.solid("profileHighlightColor"), "#987654", doc);
+      const { highlightColor } = presentProfile(jane, store);
+      expect(highlightColor).toBe("#987654");
+    });
+    it("presents default colors if settings are messed up", () => {
+      store.add(jane, ns.solid("profileBackgroundColor"), "foobar", doc);
+      store.add(jane, ns.solid("profileHighlightColor"), "42", doc);
+      const result = presentProfile(jane, store);
+      expect(result.backgroundColor).toBe("#eee");
+      expect(result.highlightColor).toBe("#090");
+    });
+  });
 });

src/presenter.spec.ts

@@ -2,12 +2,15 @@ import { IndexedFormula, NamedNode } from "rdflib";
 import { ns, utils } from "solid-ui";
 import { findImage } from "solid-ui/lib/widgets/buttons";
 import Node from "rdflib/src/node-internal";
+import { validateHTMLColorHex } from "validate-color";
 
 export interface ProfilePresentation {
   name: string;
   imageSrc?: string;
   introduction?: string;
   location?: string;
+  backgroundColor: string;
+  highlightColor: string;
 }
 
 export const presentProfile = (
@@ -28,11 +31,16 @@ export const presentProfile = (
     address != null
       ? store.anyValue(address as NamedNode, ns.vcard("locality"))
       : null;
+
+  const { backgroundColor, highlightColor } = getColors(subject, store);
+
   return {
     name,
     imageSrc,
     introduction: formatIntroduction(role, orgName),
     location: formatLocation(countryName, locality),
+    backgroundColor,
+    highlightColor,
   };
 };
 
@@ -45,3 +53,27 @@ function formatLocation(countryName: string | void, locality: string | void) {
 function formatIntroduction(role: string | void, orgName: string | void) {
   return role && orgName ? `${role} at ${orgName}` : orgName || role || null;
 }
+
+function getColors(subject: NamedNode, store: IndexedFormula) {
+  const backgroundColor = store.anyValue(
+    subject,
+    ns.solid("profileBackgroundColor"),
+    null,
+    subject.doc()
+  );
+
+  const highlightColor = store.anyValue(
+    subject,
+    ns.solid("profileHighlightColor"),
+    null,
+    subject.doc()
+  );
+  return {
+    backgroundColor: validColorOrDefault(backgroundColor, "#eee"),
+    highlightColor: validColorOrDefault(highlightColor, "#090"),
+  };
+}
+
+function validColorOrDefault(color: string | void, fallback: string) {
+  return color && validateHTMLColorHex(color) ? color : fallback;
+}