Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use color palette for color fields in blog category #2022

Merged
merged 10 commits into from
Jan 12, 2025
Merged

Use color palette for color fields in blog category #2022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1682bc5
Add ColorField, include it in BlogCategory
jurgenwerk Jan 9, 2025
b85e751
Merge branch 'main' into cs-7778-use-color-palette-for-color-field-in…
jurgenwerk Jan 9, 2025
a697140
Assign colors to blog categories in seed realm
jurgenwerk Jan 9, 2025
9a5b49e
Fix whitespace
jurgenwerk Jan 9, 2025
0e51718
Whitespace fixes
jurgenwerk Jan 9, 2025
f5b7d43
Whitespace fix
jurgenwerk Jan 9, 2025
0c6e799
Another whitespace
jurgenwerk Jan 9, 2025
ab8a599
Move color fields to /fields folder
jurgenwerk Jan 10, 2025
2920ea3
Merge branch 'main' into cs-7778-use-color-palette-for-color-field-in…
jurgenwerk Jan 10, 2025
df38e92
Cleanup
jurgenwerk Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/experiments-realm/BlogCategory/crypto.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions packages/experiments-realm/BlogCategory/home-decor.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 7 additions & 3 deletions packages/experiments-realm/BlogCategory/productivity.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,4 +29,4 @@
}
}
}
}
}
14 changes: 9 additions & 5 deletions packages/experiments-realm/blog-category.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || ''}`);
Expand All @@ -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'};
Comment on lines +22 to +23
Copy link
Contributor

@tintinthong tintinthong Jan 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is the default for blog category. If I want a random default similar to how avatar computes the background color. What is the best way to do that? Wud that be an extend of this color field and handle that default internally?

I know I need this in particular use-case. But, I was just wondering if we would handle this in this PR. I think maybe NOT

Copy link
Contributor Author

@jurgenwerk jurgenwerk Jan 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could make a function that converts the arbitrary string (category name) to some hex color value, in a deterministic way. And a function that returns a good contrast color to that color, similarly to how the avatar works. Then we could have a computed fields that either returns the computed colors, or user-set colors, in case they set them

`);
};

Expand Down Expand Up @@ -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 });

Expand All @@ -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>
Expand Down
40 changes: 40 additions & 0 deletions packages/experiments-realm/color.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
8 changes: 6 additions & 2 deletions packages/seed-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions packages/seed-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 7 additions & 3 deletions packages/seed-realm/BlogCategory/city-design.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,4 +29,4 @@
}
}
}
}
}
10 changes: 7 additions & 3 deletions packages/seed-realm/BlogCategory/cultural-scenes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,4 +29,4 @@
}
}
}
}
}
10 changes: 7 additions & 3 deletions packages/seed-realm/BlogCategory/future-tech.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,4 +29,4 @@
}
}
}
}
}
10 changes: 7 additions & 3 deletions packages/seed-realm/BlogCategory/street-life.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,4 +29,4 @@
}
}
}
}
}
8 changes: 6 additions & 2 deletions packages/seed-realm/BlogCategory/urban-work.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 9 additions & 5 deletions packages/seed-realm/blog-category.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || ''}`);
Expand All @@ -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'};
`);
};

Expand Down Expand Up @@ -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 });

Expand All @@ -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>
Expand Down
39 changes: 39 additions & 0 deletions packages/seed-realm/fields/color.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading