Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use a numbered pre-named set of user colors instead of random. Closes #1974

Browse Source
This commit is contained in:
Gabe Kangas 2022-06-28 18:55:21 -07:00
parent c9938cf414
commit aec65af87d
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
9 changed files with 121 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openapi.yaml
View File

@ -276,8 +276,8 @@ components:
example: awesome-pizza
displayColor:
type: integer
description: Hue value for displaying in the UI.
example: 42
description: Color name number for client rendering. theme-user-colors-n
example: 3
createdAt:
type: string
format: date-time

9
utils/utils.go
View File

@ -321,11 +321,12 @@ func StringMapKeys(stringMap map[string]interface{}) []string {
return stringSlice
}
// GenerateRandomDisplayColor will return a random _hue_ to be used when displaying a user.
// The UI should determine the right saturation and lightness in order to make it look right.
// GenerateRandomDisplayColor will return a random number that is used for
// referencing a color value client-side. These colors are seen as
// --theme-user-colors-n.
func GenerateRandomDisplayColor() int {
rangeLower := 0
rangeUpper := 360
rangeLower := 1
rangeUpper := 8
return rangeLower + rand.Intn(rangeUpper-rangeLower+1) //nolint
}

5
web/components/chat/ChatUserMessage/ChatUserMessage.tsx
View File

@ -22,8 +22,9 @@ export default function ChatUserMessage({
}: Props) {
const { body, user, timestamp } = message;
const { displayName, displayColor } = user;
const color = `hsl(${displayColor}, 100%, 65%)`;
const bgColor = `hsl(${displayColor}, 20%, 25%)`;
const color = `var(--theme-user-colors-${displayColor})`;
// TODO: Need to convert the above color to a background color.
const bgColor = `hsl(100, 20%, 25%)`;
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
const [formattedMessage, setFormattedMessage] = useState<string>(body);

15
web/stories/Colors.stories.mdx
View File

@ -22,6 +22,21 @@ Toggle dark mode on and off in the above toolbar to see how these colors look on
<ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} />
## User Colors
<ColorRow
colors={[
'theme-user-colors-1',
'theme-user-colors-2',
'theme-user-colors-3',
'theme-user-colors-4',
'theme-user-colors-5',
'theme-user-colors-6',
'theme-user-colors-7',
'theme-user-colors-8',
]}
/>
## Status
<ColorRow

18
web/style-definitions/config.js
View File

@ -1,5 +1,17 @@
// eslint-disable-next-line import/no-extraneous-dependencies
const yaml = require('yaml');
const StyleDictionary = require('style-dictionary');
StyleDictionary.registerFileHeader({
name: 'myCustomHeader',
fileHeader: defaultMessage => [
...defaultMessage,
``,
`How to edit these values:`,
`Edit the corresponding token file under the style-definitions directory`,
`in the Owncast web project.`,
],
});
module.exports = {
parsers: [
@ -24,6 +36,9 @@ module.exports = {
{
destination: 'variables.css',
format: 'css/variables',
options: {
fileHeader: 'myCustomHeader',
},
},
],
},
@ -34,6 +49,9 @@ module.exports = {
{
destination: 'variables.less',
format: 'less/variables',
options: {
fileHeader: 'myCustomHeader',
},
},
],
},

18
web/style-definitions/tokens/color/default-theme.yaml
View File

@ -36,3 +36,21 @@ theme:
value: '{color.owncast.orange.500.value}'
error-color:
value: '{color.owncast.red.500.value}'
user-colors:
1:
value: '{color.owncast.user.1.value}'
2:
value: '{color.owncast.user.2.value}'
3:
value: '{color.owncast.user.3.value}'
4:
value: '{color.owncast.user.4.value}'
5:
value: '{color.owncast.user.5.value}'
6:
value: '{color.owncast.user.6.value}'
7:
value: '{color.owncast.user.7.value}'
8:
value: '{color.owncast.user.8.value}'

18
web/style-definitions/tokens/color/owncast-colors.yaml
View File

@ -75,6 +75,24 @@ color:
background-secondary:
value: '#282A30'
user:
1:
value: 'rgb(244, 11, 11)'
2:
value: 'rgb(244, 128, 11)'
3:
value: 'rgb(244, 244, 11)'
4:
value: 'rgb(88, 244, 11)'
5:
value: 'rgb(11, 244, 244)'
6:
value: 'rgb(11, 166, 244)'
7:
value: 'rgb(102, 102, 255)'
8:
value: 'rgb(244, 11, 244)'
font:
owncast:
family:

22
web/styles/theme.less
View File

@ -1,6 +1,10 @@
// Do not edit directly
// Generated on Fri, 24 Jun 2022 23:11:54 GMT
// Generated on Wed, 29 Jun 2022 00:29:51 GMT
//
// How to edit these values:
// Edit the corresponding tokens file under the style-definitions directory
// in the Owncast web project.
@text-color: var(--theme-text-color);
@text-color-secondary: var(--theme-text-color-secondary);
@ -30,6 +34,14 @@
@theme-info-color: #d6bbfb;
@theme-warning-color: #f79009;
@theme-error-color: #f04438;
@theme-user-colors-1: #f40b0b;
@theme-user-colors-2: #f4800b;
@theme-user-colors-3: #f4f40b;
@theme-user-colors-4: #58f40b;
@theme-user-colors-5: #0bf4f4;
@theme-user-colors-6: #0ba6f4;
@theme-user-colors-7: #6666ff;
@theme-user-colors-8: #f40bf4;
@color-owncast-purple-100: #f4ebff;
@color-owncast-purple-300: #d6bbfb;
@color-owncast-purple-500: #9e77ed;
@ -60,6 +72,14 @@
@color-owncast-logo-blue: #2086e1;
@color-owncast-background: #202232;
@color-owncast-background-secondary: #282a30;
@color-owncast-user-1: #f40b0b;
@color-owncast-user-2: #f4800b;
@color-owncast-user-3: #f4f40b;
@color-owncast-user-4: #58f40b;
@color-owncast-user-5: #0bf4f4;
@color-owncast-user-6: #0ba6f4;
@color-owncast-user-7: #6666ff;
@color-owncast-user-8: #f40bf4;
@font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@owncast-purple: #7871ff;

22
web/styles/variables.css
View File

@ -1,6 +1,10 @@
/**
* Do not edit directly
* Generated on Fri, 24 Jun 2022 23:11:54 GMT
* Generated on Wed, 29 Jun 2022 00:29:51 GMT
*
* How to edit these values:
* Edit the corresponding tokens file under the style-definitions directory
* in the Owncast web project.
*/
:root {
@ -32,6 +36,14 @@
--theme-info-color: #d6bbfb;
--theme-warning-color: #f79009;
--theme-error-color: #f04438;
--theme-user-colors-1: #f40b0b;
--theme-user-colors-2: #f4800b;
--theme-user-colors-3: #f4f40b;
--theme-user-colors-4: #58f40b;
--theme-user-colors-5: #0bf4f4;
--theme-user-colors-6: #0ba6f4;
--theme-user-colors-7: #6666ff;
--theme-user-colors-8: #f40bf4;
--color-owncast-purple-100: #f4ebff;
--color-owncast-purple-300: #d6bbfb;
--color-owncast-purple-500: #9e77ed;
@ -62,6 +74,14 @@
--color-owncast-logo-blue: #2086e1;
--color-owncast-background: #202232;
--color-owncast-background-secondary: #282a30;
--color-owncast-user-1: #f40b0b;
--color-owncast-user-2: #f4800b;
--color-owncast-user-3: #f4f40b;
--color-owncast-user-4: #58f40b;
--color-owncast-user-5: #0bf4f4;
--color-owncast-user-6: #0ba6f4;
--color-owncast-user-7: #6666ff;
--color-owncast-user-8: #f40bf4;
--font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--owncast-purple: #7871ff;