Skip to content
This repository has been archived by the owner on Oct 21, 2024. It is now read-only.

Commit

Permalink
feat: add font styles to properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@johanlahti
johanlahti committed Nov 17, 2023
1 parent df187e3 commit 9b0fadf
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 156 deletions.
4 changes: 1 addition & 3 deletions packages/sn-filter-pane/src/components/FoldedListbox/FoldedListbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,8 @@ const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['constraints', 'st

const Title = styled(Typography, { shouldForwardProp: (p) => !['styles'].includes(p as string) })<{ styles?: IStyles }>(
({ styles }) => ({
color: styles?.header?.color,
...(styles?.header || {}),
fontSize: '13px', // hard-coded since space is limited in collapsed mode
fontFamily: styles?.header?.fontFamily,
fontWeight: styles?.header?.fontWeight,
}),
);

Expand Down
297 changes: 160 additions & 137 deletions packages/sn-filter-pane/src/ext/property-panel/settings/presentation/styling-panel-def.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ export default function getStyling(env) {
const { translator, flags, anything } = env || {};
const { theme } = anything?.sense || {};

const stylingPart2 = flags?.isEnabled('IM_5452_FILTERPANE_STYLING');

const fontResolver = createFontResolver({
theme,
translator,
Expand Down Expand Up @@ -48,15 +50,24 @@ export default function getStyling(env) {
ref: 'components',
key: 'theme',
items: {
fontFamilyItem: {
component: 'dropdown',
ref: 'header.fontFamily',
options: () => fontResolver.getOptions('header.fontFamily'),
defaultValue: () => fontResolver.getDefaultValue('header.fontFamily'),
},
...(stylingPart2 ? {
fontFamilyItem: {
component: 'dropdown',
ref: 'header.fontFamily',
options: () => fontResolver.getOptions('header.fontFamily'),
defaultValue: () => fontResolver.getDefaultValue('header.fontFamily'),
},
} : {}),
fontWrapperItem: {
component: 'inline-wrapper',
items: {
fontStyle: {
type: 'array',
component: 'font-style-buttons',
width: false,
ref: 'header.fontStyle',
defaultValue: ['bold'],
},
fontSizeItem: {
component: 'dropdown',
ref: 'header.fontSize',
Expand Down Expand Up @@ -88,20 +99,29 @@ export default function getStyling(env) {
ref: 'components',
key: 'theme',
items: {
contentFontWrapper: {
...(stylingPart2 ? {
fontFamilyItem: {
component: 'dropdown',
ref: 'content.fontFamily',
options: () => fontResolver.getOptions('content.fontFamily'),
defaultValue: () => fontResolver.getDefaultValue('content.fontFamily'),
},
} : {}),
fontWrapperItem: {
component: 'inline-wrapper',
items: {
fontFamilyItem: {
component: 'dropdown',
ref: 'content.fontFamily',
options: () => fontResolver.getOptions('content.fontFamily'),
defaultValue: () => fontResolver.getDefaultValue('content.fontFamily'),
fontStyle: {
type: 'array',
component: 'font-style-buttons',
width: false,
ref: 'content.fontStyle',
defaultValue: ['normal'],
},
contentFontSizeItem: {
component: 'dropdown',
ref: 'content.fontSize',
options: getFontSizes({
min: 5, max: 24, theme, defaultFontSize,
min: 5, max: 18, theme, defaultFontSize,
}),
defaultValue: defaultContentFontSize,
},
Expand Down Expand Up @@ -179,143 +199,146 @@ export default function getStyling(env) {
},
},
},
backgroundOptions: {
component: 'panel-section',
translation: 'properties.background.options',
items: {
background: {
items: {
backgroundColor: {
ref: 'components',
key: 'theme',
type: 'items',
items: {
useColorExpression: {
type: 'boolean',
component: 'dropdown',
ref: 'background.useExpression',
translation: 'properties.color',
defaultValue: false,
options: [
{
value: false,
translation: 'properties.colorMode.primary',
},
{
value: true,
translation: 'properties.colorMode.byExpression',
},
],
},
colorExpression: {
type: 'string',
component: 'input-field-expression',
ref: 'background.colorExpression',
translation: 'Common.Expression',
expression: 'optional',
show: (data) => data?.background?.useExpression,
},
colorPicker: {
type: 'object',
component: 'color-picker',
ref: 'background.color',
translation: 'properties.color.used',
disableNone: false,
defaultValue: styleDefaults.COLOR,
dualOutput: true,
show: (data) => !data?.background?.useExpression,
},
},
},
backgroundImage: {
type: 'items',
ref: 'components',
key: 'theme',
items: {
backgroundImageMode: {
component: 'dropdown',
ref: 'background.image.mode',
translation: 'properties.backgroundImage',
defaultValue: styleDefaults.BGIMAGE_MODE,
options: [
{
value: 'none',
translation: 'Background.None',
},
{
value: 'media',
translation: 'MediaLibrary.Header',
},
],
change(data = {}) {
data.background = data.background || {};
data.background.image = data.background.image || {};
data.background.image.qStaticContentUrlDef = data.background.image.qStaticContentUrlDef || {};
data.background.image.url = data.background.image.url || {};

...(stylingPart2 ? {
backgroundOptions: {
component: 'panel-section',
translation: 'properties.background.options',
items: {
background: {
items: {
backgroundColor: {
ref: 'components',
key: 'theme',
type: 'items',
items: {
useColorExpression: {
type: 'boolean',
component: 'dropdown',
ref: 'background.useExpression',
translation: 'properties.color',
defaultValue: false,
options: [
{
value: false,
translation: 'properties.colorMode.primary',
},
{
value: true,
translation: 'properties.colorMode.byExpression',
},
],
},
},
MediaLibrary: {
component: 'media-library-button',
ref: 'background.image.url',
translation: 'MediaLibrary.Header',
show(data) {
return data?.background?.image?.mode === 'media';
colorExpression: {
type: 'string',
component: 'input-field-expression',
ref: 'background.colorExpression',
translation: 'Common.Expression',
expression: 'optional',
show: (data) => data?.background?.useExpression,
},
colorPicker: {
type: 'object',
component: 'color-picker',
ref: 'background.color',
translation: 'properties.color.used',
disableNone: false,
defaultValue: styleDefaults.COLOR,
dualOutput: true,
show: (data) => !data?.background?.useExpression,
},
},
imageSize: {
component: 'dropdown',
ref: 'background.image.size',
defaultValue: styleDefaults.BACKGROUND_SIZE,
options: [
{
value: 'auto',
translation: 'properties.backgroundImage.originalSize',
},
{
value: 'alwaysFit',
translation: 'properties.backgroundImage.sizeAlwaysFit',
},
{
value: 'fitWidth',
translation: 'properties.backgroundImage.sizeFitWidth',
},
{
value: 'fitHeight',
translation: 'properties.backgroundImage.sizeFitHeight',
},
backgroundImage: {
type: 'items',
ref: 'components',
key: 'theme',
items: {
backgroundImageMode: {
component: 'dropdown',
ref: 'background.image.mode',
translation: 'properties.backgroundImage',
defaultValue: styleDefaults.BGIMAGE_MODE,
options: [
{
value: 'none',
translation: 'Background.None',
},
{
value: 'media',
translation: 'MediaLibrary.Header',
},
],
change(data = {}) {
data.background = data.background || {};
data.background.image = data.background.image || {};
data.background.image.qStaticContentUrlDef = data.background.image.qStaticContentUrlDef || {};
data.background.image.url = data.background.image.url || {};
},
{
value: 'stretchFit',
translation: 'properties.backgroundImage.sizeStretch',
},
MediaLibrary: {
component: 'media-library-button',
ref: 'background.image.url',
translation: 'MediaLibrary.Header',
show(data) {
return data?.background?.image?.mode === 'media';
},
{
value: 'alwaysFill',
translation: 'properties.backgroundImage.sizeAlwaysFill',
},
imageSize: {
component: 'dropdown',
ref: 'background.image.size',
defaultValue: styleDefaults.BACKGROUND_SIZE,
options: [
{
value: 'auto',
translation: 'properties.backgroundImage.originalSize',
},
{
value: 'alwaysFit',
translation: 'properties.backgroundImage.sizeAlwaysFit',
},
{
value: 'fitWidth',
translation: 'properties.backgroundImage.sizeFitWidth',
},
{
value: 'fitHeight',
translation: 'properties.backgroundImage.sizeFitHeight',
},
{
value: 'stretchFit',
translation: 'properties.backgroundImage.sizeStretch',
},
{
value: 'alwaysFill',
translation: 'properties.backgroundImage.sizeAlwaysFill',
},
],
change: (data) => {
if (data?.background?.image?.position) {
data.background.image.position = styleDefaults.BGIMAGE_POSITION;
}
},
],
change: (data) => {
if (data?.background?.image?.position) {
data.background.image.position = styleDefaults.BGIMAGE_POSITION;
}
show: (data) => data?.background?.image?.mode === 'media'
&& !!data?.background?.image?.url?.qStaticContentUrlDef?.qUrl,
},
position: {
component: 'position-grid',
ref: 'background.image.position',
translation: 'properties.backgroundImage.position',
defaultValue: styleDefaults.BGIMAGE_POSITION,
currentSizeRef: 'background.size',
show: (data) => data?.background?.image?.mode === 'media'
&& data?.background?.image?.url?.qStaticContentUrlDef?.qUrl
&& data?.background?.image?.size !== 'stretchFit',
},
show: (data) => data?.background?.image?.mode === 'media'
&& !!data?.background?.image?.url?.qStaticContentUrlDef?.qUrl,
},
position: {
component: 'position-grid',
ref: 'background.image.position',
translation: 'properties.backgroundImage.position',
defaultValue: styleDefaults.BGIMAGE_POSITION,
currentSizeRef: 'background.size',
show: (data) => data?.background?.image?.mode === 'media'
&& data?.background?.image?.url?.qStaticContentUrlDef?.qUrl
&& data?.background?.image?.size !== 'stretchFit',
},
},
},
},
},
},
},
} : {}),
},
},
};
Expand Down
Loading

0 comments on commit 9b0fadf

Please sign in to comment.