diff --git a/samples/sampler/.storybook/main.js b/samples/sampler/.storybook/main.js
index fc4e5a9732..fdc7360a06 100644
--- a/samples/sampler/.storybook/main.js
+++ b/samples/sampler/.storybook/main.js
@@ -17,7 +17,8 @@ module.exports = {
'@enact/storybook-utils/addons/actions',
'@enact/storybook-utils/addons/controls',
'@enact/storybook-utils/addons/docs',
- '@enact/storybook-utils/addons/toolbars'
+ '@enact/storybook-utils/addons/toolbars',
+ '../colors-toolbar/manager.js'
],
webpackFinal: async (config, {configType}) => {
return webpack(config, configType, __dirname);
diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js
index 8dca7e3ef4..0e6431bff0 100644
--- a/samples/sampler/.storybook/preview.js
+++ b/samples/sampler/.storybook/preview.js
@@ -7,6 +7,28 @@ import {themes} from '@storybook/theming';
import ThemeEnvironment from '../src/ThemeEnvironment';
+// custom decorator imports
+import {addDecorator} from '@storybook/react';
+import {platform} from '@enact/webos/platform';
+
+import {CustomStoryDecorator} from '../colors-toolbar/CustomStoryDecorator';
+
+// if running in webos environment, render a list of color pickers in every story
+export const GlobalDecorator = (Story) => {
+ if (platform.tv) {
+ return (
+
+
+
+
+ )
+ } else {
+ return ;
+ }
+};
+
+addDecorator(GlobalDecorator);
+
// NOTE: Locales taken from strawman. Might need to add more in the future.
const locales = {
'local': '',
@@ -96,7 +118,13 @@ export const globalTypes = {
'debug aria': getBooleanType('debug aria'),
'debug layout': getBooleanType('debug layout'),
'debug spotlight': getBooleanType('debug spotlight'),
- 'debug sprites': getBooleanType('debug sprites')
+ 'debug sprites': getBooleanType('debug sprites'),
+ // custom theme globalTypes
+ 'componentBackgroundColor': 'string',
+ 'focusBackgroundColor': 'string',
+ 'popupBackgroundColor': 'string',
+ 'subtitleTextColor': 'string',
+ 'textColor': 'string'
};
export const decorators = [ThemeEnvironment];
diff --git a/samples/sampler/colors-toolbar/ColorPicker.js b/samples/sampler/colors-toolbar/ColorPicker.js
new file mode 100644
index 0000000000..be51f0bb95
--- /dev/null
+++ b/samples/sampler/colors-toolbar/ColorPicker.js
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, {useCallback} from 'react'; // eslint-disable-line
+import {useGlobals} from '@storybook/api';
+
+import {
+ BACKGROUNDCOLOR_ADDON_ID,
+ BACKGROUNDCOLOR_DEFAULT_VALUE,
+ FOCUSBGCOLOR_ADDON_ID,
+ FOCUSBGCOLOR_DEFAULT_VALUE,
+ POPUPBGCOLOR_ADDON_ID,
+ POPUPBGCOLOR_DEFAULT_VALUE,
+ SUBTEXTCOLOR_DEFAULT_VALUE,
+ TEXT_ADDON_ID,
+ TEXT_DEFAULT_VALUE
+} from './constants';
+
+const ColorPicker = ({colorPickerType}) => {
+ const [globals, updateGlobals] = useGlobals();
+
+ const getDefaultColor = () => {
+ switch (colorPickerType) {
+ case BACKGROUNDCOLOR_ADDON_ID:
+ return BACKGROUNDCOLOR_DEFAULT_VALUE;
+ case FOCUSBGCOLOR_ADDON_ID:
+ return FOCUSBGCOLOR_DEFAULT_VALUE;
+ case POPUPBGCOLOR_ADDON_ID:
+ return POPUPBGCOLOR_DEFAULT_VALUE;
+ case TEXT_ADDON_ID:
+ return TEXT_DEFAULT_VALUE;
+ default:
+ return SUBTEXTCOLOR_DEFAULT_VALUE;
+ }
+ };
+
+ const handleColorChange = useCallback((ev) => {
+ updateGlobals({[colorPickerType]: ev.target.value});
+ }, [colorPickerType, updateGlobals]);
+
+ return (
+
+ );
+};
+
+ColorPicker.propTypes = {
+ colorPickerType: PropTypes.string
+};
+
+export default ColorPicker;
diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js
new file mode 100644
index 0000000000..1caab84baf
--- /dev/null
+++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js
@@ -0,0 +1,137 @@
+// this component has been added as an alternative of built-in HTML color picker which does not work in webos environment
+import Button from '@enact/sandstone/Button';
+import {ColorPicker as SandstoneColorPicker} from '@enact/sandstone/ColorPicker';
+import Scroller from '@enact/sandstone/Scroller';
+import LS2Request from '@enact/webos/LS2Request';
+import {useCallback, useContext} from 'react';
+
+import {AppContext} from './constants';
+import {generateStylesheet} from '../utils/generateStylesheet';
+
+import css from './CustomStoryDecorator.module.less';
+
+const request = new LS2Request();
+
+export const CustomStoryDecorator = () => {
+ const {context, setContext} = useContext(AppContext);
+ const {componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = context;
+
+ const onColorChange = useCallback((color, newColor) => {
+ // a copy of the context object is created
+ const newContext = Object.assign({}, context);
+ // update the color value on the newly created object with what gets received from `event` (handleBackgroundColor, handleFocusBgColor...)
+ newContext[color] = newColor;
+ // generate the new stylesheet based on the updated color
+ newContext.colors = generateStylesheet(
+ newContext.componentBackgroundColor,
+ newContext.focusBackgroundColor,
+ newContext.popupBackgroundColor,
+ newContext.subtitleTextColor,
+ newContext.textColor
+ );
+ setContext(newContext);
+
+ request.send({
+ service: 'luna://com.webos.service.settings/',
+ method: 'setSystemSettings',
+ parameters: {
+ category: 'customUi',
+ settings: {
+ theme: JSON.stringify(newContext)
+ }
+ },
+ onSuccess: () => {
+ console.log('setSystemSettings onSuccess'); // eslint-disable-line no-console
+ }
+ });
+ }, [context, setContext]);
+
+ const handleComponentBgColor = useCallback((ev) => {
+ onColorChange('componentBackgroundColor', ev);
+ }, [onColorChange]);
+ const handleFocusBgColor = useCallback((ev) => {
+ onColorChange('focusBackgroundColor', ev);
+ }, [onColorChange]);
+ const handlePopupBgColor = useCallback((ev) => {
+ onColorChange('popupBackgroundColor', ev);
+ }, [onColorChange]);
+ const handleTextColor = useCallback((ev) => {
+ onColorChange('textColor', ev);
+ }, [onColorChange]);
+ const handleSubTextColor = useCallback((ev) => {
+ onColorChange('subtitleTextColor', ev);
+ }, [onColorChange]);
+
+ const handleResetButton = useCallback(() => {
+ // a copy of the context object is created
+ const newContext = Object.assign({}, context);
+ // generate the new stylesheet with default sandstone colors
+ newContext.colors = generateStylesheet(
+ newContext.componentBackgroundColor,
+ newContext.focusBackgroundColor,
+ newContext.popupBackgroundColor,
+ newContext.subtitleTextColor,
+ newContext.textColor
+ );
+ setContext(newContext);
+
+ request.send({
+ service: 'luna://com.webos.service.settings/',
+ method: 'setSystemSettings',
+ parameters: {
+ category: 'customUi',
+ settings: {
+ theme: JSON.stringify(newContext)
+ }
+ },
+ onSuccess: () => {
+ console.log('setSystemSettings onSuccess'); // eslint-disable-line no-console
+ }
+ });
+ }, []); // eslint-disable-line
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+