Merge pull request #2022 from cardstack/cs-7778-use-color-palette-for…

…-color-field-in-blog-category Use color palette for color fields in blog category
cardstack · Jan 12, 2025 · fa0e1e4 · fa0e1e4
2 parents 831ee36 + df38e92
commit fa0e1e4
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 35 deletions.
diff --git a/packages/experiments-realm/BlogCategory/crypto.json b/packages/experiments-realm/BlogCategory/crypto.json
@@ -5,8 +5,12 @@
       "longName": "Cryptocurrencies",
       "shortName": "Crypto",
       "slug": "crypto",
-      "backgroundColor": "#37f6d6",
-      "textColor": "black",
+      "backgroundColor": {
+        "hexValue": "#FA2200"
+      },
+      "textColor": {
+        "hexValue": "#ffffff"
+      },
       "description": "News about cryptocurrencies, price predictions, charts and everything about Satoshi Nakamoto",
       "title": "Cryptocurrency",
       "thumbnailURL": null

diff --git a/packages/experiments-realm/BlogCategory/home-decor.json b/packages/experiments-realm/BlogCategory/home-decor.json
@@ -5,8 +5,12 @@
       "longName": "Home decoration & interior design",
       "shortName": "Home Decor",
       "slug": "home",
-      "backgroundColor": "red",
-      "textColor": "white",
+      "backgroundColor": {
+        "hexValue": "#FCF8A6"
+      },
+      "textColor": {
+        "hexValue": "#FA2200"
+      },
       "description": "Articles about the aesthetic side of home building and renovation",
       "title": "Home decoration & interior design",
       "thumbnailURL": null

diff --git a/packages/experiments-realm/BlogCategory/productivity.json b/packages/experiments-realm/BlogCategory/productivity.json
@@ -5,8 +5,12 @@
       "longName": "Productivity",
       "shortName": "Productivity",
       "slug": "productivity",
-      "backgroundColor": "#14539A",
-      "textColor": "white",
+      "backgroundColor": {
+        "color": "#9D00FF"
+      },
+      "textColor": {
+        "color": "#ffffff"
+      },
       "description": "Tips and tricks for better organization and effectiveness at work",
       "title": "Productivity",
       "thumbnailURL": null
@@ -25,4 +29,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/experiments-realm/blog-category.gts b/packages/experiments-realm/blog-category.gts
@@ -8,6 +8,7 @@ import {
 import StringField from 'https://cardstack.com/base/string';
 import { BlogApp as BlogAppCard } from './blog-app';
 import { htmlSafe } from '@ember/template';
+import { ColorField } from './color';
 
 function htmlSafeColor(color?: string) {
   return htmlSafe(`background-color: ${color || ''}`);
@@ -18,8 +19,8 @@ export const categoryStyle = (category: Partial<BlogCategory>) => {
     return;
   }
   return htmlSafe(`
-    background-color: ${category.backgroundColor || '#FFFFFF'};
-    color: ${category.textColor || '#000000'};
+    background-color: ${category.backgroundColor?.hexValue || '#000000'};
+    color: ${category.textColor?.hexValue || '#ffffff'};
   `);
 };
 
@@ -74,8 +75,8 @@ export class BlogCategory extends CardDef {
   @field longName = contains(StringField);
   @field shortName = contains(StringField);
   @field slug = contains(StringField);
-  @field backgroundColor = contains(StringField);
-  @field textColor = contains(StringField);
+  @field backgroundColor = contains(ColorField);
+  @field textColor = contains(ColorField);
   @field description = contains(StringField);
   @field blog = linksTo(BlogAppCard, { isUsed: true });
 
@@ -98,7 +99,10 @@ export class BlogCategory extends CardDef {
       </style>
       <div class='category-atom'>
         {{! template-lint-disable no-inline-styles }}
-        <div class='circle' style={{htmlSafeColor @model.backgroundColor}} />
+        <div
+          class='circle'
+          style={{htmlSafeColor @model.backgroundColor.hexValue}}
+        />
         <@fields.longName />
       </div>
     </template>

diff --git a/packages/experiments-realm/color.gts b/packages/experiments-realm/color.gts
@@ -0,0 +1,40 @@
+import {
+  Component,
+  FieldDef,
+  StringField,
+  contains,
+  field,
+} from 'https://cardstack.com/base/card-api';
+import { ColorPalette } from '@cardstack/boxel-ui/components';
+import { ColorPicker } from '@cardstack/boxel-ui/components';
+
+class View extends Component<typeof ColorPalette> {
+  <template>
+    <ColorPicker
+      @color={{@model.hexValue}}
+      @disabled={{true}}
+      @showHexString={{true}}
+    />
+  </template>
+}
+
+class EditView extends Component<typeof ColorPalette> {
+  setColor = (color: string) => {
+    this.args.model.hexValue = color;
+  };
+
+  <template>
+    <ColorPalette @color={{@model.hexValue}} @onChange={{this.setColor}} />
+  </template>
+}
+
+export class ColorField extends FieldDef {
+  static displayName = 'Color';
+  @field hexValue = contains(StringField);
+
+  static isolated = View;
+  static embedded = View;
+  static atom = View;
+  static fitted = View;
+  static edit = EditView;
+}
diff --git a/packages/seed-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json b/packages/seed-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json
@@ -5,8 +5,12 @@
       "longName": "Movie Review",
       "shortName": "Movies",
       "slug": "movies",
-      "backgroundColor": "#fff500",
-      "textColor": null,
+      "backgroundColor": {
+        "hexValue": "#FBEB06"
+      },
+      "textColor": {
+        "hexValue": "#000000"
+      },
       "description": null,
       "title": "Movie Review",
       "thumbnailURL": null

diff --git a/packages/seed-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json b/packages/seed-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json
@@ -5,8 +5,12 @@
       "longName": "TV Series",
       "shortName": "TV",
       "slug": "tv-series",
-      "backgroundColor": "#fff500",
-      "textColor": null,
+      "backgroundColor": {
+        "hexValue": "#9D00FF"
+      },
+      "textColor": {
+        "hexValue": "#ffffff"
+      },
       "description": null,
       "title": "TV Series",
       "thumbnailURL": null

diff --git a/packages/seed-realm/BlogCategory/city-design.json b/packages/seed-realm/BlogCategory/city-design.json
@@ -5,8 +5,12 @@
       "longName": "City Design",
       "shortName": "Design",
       "slug": "city-design",
-      "backgroundColor": "#ac00ff",
-      "textColor": "#fff",
+      "backgroundColor": {
+        "hexValue": "#1EDF67"
+      },
+      "textColor": {
+        "hexValue": "#ffffff"
+      },
       "description": "Showcasing architecture and urban planning brilliance.",
       "title": "City Design",
       "thumbnailURL": null
@@ -25,4 +29,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/seed-realm/BlogCategory/cultural-scenes.json b/packages/seed-realm/BlogCategory/cultural-scenes.json
@@ -5,8 +5,12 @@
       "longName": "Cultural Scenes",
       "shortName": "Culture",
       "slug": "cultural-scenes",
-      "backgroundColor": "#c3fc33",
-      "textColor": null,
+      "backgroundColor": {
+        "hexValue": "#FA7F01"
+      },
+      "textColor": {
+        "hexValue": "#ffffff"
+      },
       "description": "Capturing the vibrant art, food, and music of cities.",
       "title": "Cultural Scenes",
       "thumbnailURL": null
@@ -25,4 +29,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/seed-realm/BlogCategory/future-tech.json b/packages/seed-realm/BlogCategory/future-tech.json
@@ -5,8 +5,12 @@
       "longName": "Future Tech",
       "shortName": "Tech",
       "slug": "future-tech",
-      "backgroundColor": "#00ac3d",
-      "textColor": "#fff",
+      "backgroundColor": {
+        "hexValue": "#000000"
+      },
+      "textColor": {
+        "hexValue": "#ffffff"
+      },
       "description": "Highlighting technology shaping tomorrow’s cities.",
       "title": "Future Tech",
       "thumbnailURL": null
@@ -25,4 +29,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/seed-realm/BlogCategory/street-life.json b/packages/seed-realm/BlogCategory/street-life.json
@@ -5,8 +5,12 @@
       "longName": "Street Life",
       "shortName": "Streets",
       "slug": "street-life",
-      "backgroundColor": "#281e78",
-      "textColor": "#fff",
+      "backgroundColor": {
+        "hexValue": "#39B1FF"
+      },
+      "textColor": {
+        "hexValue": "#ffffff"
+      },
       "description": "Discovering the stories of streets and public spaces.",
       "title": "Street Life",
       "thumbnailURL": null
@@ -25,4 +29,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/seed-realm/BlogCategory/urban-work.json b/packages/seed-realm/BlogCategory/urban-work.json
@@ -5,8 +5,12 @@
       "longName": "Urban Work",
       "shortName": "Work",
       "slug": "urban-work",
-      "backgroundColor": "#ff7f00",
-      "textColor": "#fff",
+      "backgroundColor": {
+        "hexValue": "#A6F4CA"
+      },
+      "textColor": {
+        "hexValue": "#000000"
+      },
       "description": "Exploring work trends in the evolving city landscape.",
       "title": "Work",
       "thumbnailURL": null

diff --git a/packages/seed-realm/blog-category.gts b/packages/seed-realm/blog-category.gts
@@ -8,6 +8,7 @@ import {
 import StringField from 'https://cardstack.com/base/string';
 import { BlogApp as BlogAppCard } from './blog-app';
 import { htmlSafe } from '@ember/template';
+import { ColorField } from './fields/color';
 
 function htmlSafeColor(color?: string) {
   return htmlSafe(`background-color: ${color || ''}`);
@@ -18,8 +19,8 @@ export const categoryStyle = (category: Partial<BlogCategory>) => {
     return;
   }
   return htmlSafe(`
-    background-color: ${category.backgroundColor || '#FFFFFF'};
-    color: ${category.textColor || '#000000'};
+    background-color: ${category.backgroundColor?.hexValue || '#000000'};
+    color: ${category.textColor?.hexValue || '#ffffff'};
   `);
 };
 
@@ -74,8 +75,8 @@ export class BlogCategory extends CardDef {
   @field longName = contains(StringField);
   @field shortName = contains(StringField);
   @field slug = contains(StringField);
-  @field backgroundColor = contains(StringField);
-  @field textColor = contains(StringField);
+  @field backgroundColor = contains(ColorField);
+  @field textColor = contains(ColorField);
   @field description = contains(StringField);
   @field blog = linksTo(BlogAppCard, { isUsed: true });
 
@@ -98,7 +99,10 @@ export class BlogCategory extends CardDef {
       </style>
       <div class='category-atom'>
         {{! template-lint-disable no-inline-styles }}
-        <div class='circle' style={{htmlSafeColor @model.backgroundColor}} />
+        <div
+          class='circle'
+          style={{htmlSafeColor @model.backgroundColor.hexValue}}
+        />
         <@fields.longName />
       </div>
     </template>

diff --git a/packages/seed-realm/fields/color.gts b/packages/seed-realm/fields/color.gts
@@ -0,0 +1,39 @@
+import {
+  Component,
+  FieldDef,
+  StringField,
+  contains,
+  field,
+} from 'https://cardstack.com/base/card-api';
+import { ColorPalette, ColorPicker } from '@cardstack/boxel-ui/components';
+
+class View extends Component<typeof ColorPalette> {
+  <template>
+    <ColorPicker
+      @color={{@model.hexValue}}
+      @disabled={{true}}
+      @showHexString={{true}}
+    />
+  </template>
+}
+
+class EditView extends Component<typeof ColorPalette> {
+  setColor = (color: string) => {
+    this.args.model.hexValue = color;
+  };
+
+  <template>
+    <ColorPalette @color={{@model.hexValue}} @onChange={{this.setColor}} />
+  </template>
+}
+
+export class ColorField extends FieldDef {
+  static displayName = 'Color';
+  @field hexValue = contains(StringField);
+
+  static isolated = View;
+  static embedded = View;
+  static atom = View;
+  static fitted = View;
+  static edit = EditView;
+}