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

Jump to bottom

UI with empty initial properties. Fix:#1543 (partially) #1573

Merged
merged 2 commits into from
Apr 3, 2024
Merged

UI with empty initial properties. Fix:#1543 (partially) #1573

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5b845a
UI with empty initial properties
Apr 3, 2024
4d3a69d
Update css-props.ts
oliviermgx Apr 3, 2024
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
100 changes: 73 additions & 27 deletions src/ts/client/grapesjs/css-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ export default (editor: Editor, opts) => {
property: 'min-width',
type: 'integer',
units: ['px', '%', 'em'],
default: 'auto',
default: '',
fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'],
}, { at: 2 })
editor.StyleManager.addProperty('dimension', {
name: 'Max height',
property: 'max-height',
type: 'integer',
units: ['px', '%', 'em'],
default: 'auto',
default: '',
fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'],
}, { at: 5 })
editor.StyleManager.addProperty('dimension', {
Expand Down Expand Up @@ -81,15 +81,17 @@ export default (editor: Editor, opts) => {
max: 10000,
units: [],
info: 'Stacking order of the element',
default: 'auto',
default: '',
fixedValues: ['auto', 'unset', 'initial', 'inherit', 'revert'],
}, { at: 1 })
editor.StyleManager.addProperty('extra', {
name: 'Pointer events',
property: 'pointer-events',
type: 'select',
defaults: 'auto',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'auto', name: 'auto' },
/* @ts-ignore */
Expand Down Expand Up @@ -117,8 +119,10 @@ export default (editor: Editor, opts) => {
name: 'Cursor',
property: 'cursor',
type: 'select',
defaults: 'auto',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'auto', name: 'auto' },
/* @ts-ignore */
Expand Down Expand Up @@ -200,7 +204,7 @@ export default (editor: Editor, opts) => {
type: 'integer',
units: [],
info: 'The column-count CSS property breaks an element\'s content into the specified number of columns.',
default: 'auto',
default: '',
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
min: 1,
}, { at: 4 })
Expand All @@ -210,7 +214,7 @@ export default (editor: Editor, opts) => {
type: 'integer',
units: ['px', '%', 'em'],
info: 'The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the element automatically.',
default: 'auto',
default: '',
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
}, { at: 5 })
editor.StyleManager.addProperty('extra', {
Expand All @@ -219,7 +223,7 @@ export default (editor: Editor, opts) => {
type: 'integer',
units: ['px', '%', 'em'],
info: 'The column-gap CSS property sets the size of the gap (gutter) between an element\'s columns.',
default: 'normal',
default: '',
fixedValues: ['normal', 'inherit', 'initial', 'revert', 'unset'],
}, { at: 5 })
editor.StyleManager.addProperty('extra', {
Expand All @@ -232,14 +236,16 @@ export default (editor: Editor, opts) => {
type: 'integer',
units: ['px', '%', 'em'],
info: 'The column-rule-width CSS property sets the width of the line drawn between columns in a multi-column layout.',
default: 'medium',
default: '',
fixedValues: ['medium', 'thin', 'thick', 'inherit', 'initial', 'revert', 'unset'],
}, {
name: 'Column rule style',
property: 'column-rule-style',
type: 'select',
defaults: 'none',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'none', name: 'none' },
/* @ts-ignore */
Expand Down Expand Up @@ -268,16 +274,18 @@ export default (editor: Editor, opts) => {
name: 'Column rule color',
property: 'column-rule-color',
type: 'color',
defaults: 'none',
defaults: '',
info: 'The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout.',
}],
}, { at: 6 })
editor.StyleManager.addProperty('extra', {
name: 'Column span',
property: 'column-span',
type: 'select',
defaults: 'none',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'none', name: 'none' },
/* @ts-ignore */
Expand All @@ -296,14 +304,16 @@ export default (editor: Editor, opts) => {
type: 'integer',
units: ['px', '%', 'em'],
info: 'The outline-width CSS property sets the thickness of an element\'s outline. An outline is a line that is drawn around an element, outside the border.',
default: 'medium',
default: '',
fixedValues: ['medium', 'thin', 'thick', 'inherit', 'initial', 'revert', 'unset'],
}, {
name: 'Outline style',
property: 'outline-style',
type: 'select',
defaults: 'none',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'none', name: 'none' },
/* @ts-ignore */
Expand All @@ -330,16 +340,18 @@ export default (editor: Editor, opts) => {
name: 'Outline color',
property: 'outline-color',
type: 'color',
defaults: 'none',
defaults: '',
info: 'The outline-color CSS property sets the color of an element\'s outline.',
}],
}, { at: 8 })
editor.StyleManager.addProperty('typography', {
name: 'Word break',
property: 'word-break',
type: 'select',
defaults: 'normal',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'normal', name: 'normal' },
/* @ts-ignore */
Expand All @@ -355,7 +367,7 @@ export default (editor: Editor, opts) => {
name: 'Word wrap',
property: 'word-wrap',
type: 'radio',
defaults: 'normal',
defaults: '',
options: [
/* @ts-ignore */
{ value: 'normal', name: 'normal' },
Expand All @@ -368,8 +380,10 @@ export default (editor: Editor, opts) => {
name: 'White space',
property: 'white-space',
type: 'select',
defaults: 'normal',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'normal', name: 'normal' },
/* @ts-ignore */
Expand All @@ -393,9 +407,11 @@ export default (editor: Editor, opts) => {
name: 'Text decoration line',
property: 'text-decoration-line',
type: 'select',
defaults: 'none',
defaults: '',
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'none', name: 'none' },
/* @ts-ignore */
Expand All @@ -412,8 +428,10 @@ export default (editor: Editor, opts) => {
name: 'Text decoration style',
property: 'text-decoration-style',
type: 'select',
defaults: 'solid',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'solid', name: 'solid' },
/* @ts-ignore */
Expand All @@ -430,7 +448,7 @@ export default (editor: Editor, opts) => {
name: 'Text decoration color',
property: 'text-decoration-color',
type: 'color',
defaults: 'initial',
defaults: '',
fixedValues: ['inherit', 'initial', 'revert', 'unset'],
info: 'The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.',
}, {
Expand All @@ -439,7 +457,7 @@ export default (editor: Editor, opts) => {
type: 'integer',
units: ['px', '%', 'em'],
info: 'The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.',
default: 'auto',
default: '',
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
}],
}, { at: 10 })
Expand All @@ -448,8 +466,10 @@ export default (editor: Editor, opts) => {

property: 'text-transform',
type: 'select',
defaults: 'none',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'none', name: 'none' },
/* @ts-ignore */
Expand All @@ -465,22 +485,48 @@ export default (editor: Editor, opts) => {
name: 'Text overflow',
property: 'text-overflow',
type: 'select',
defaults: 'clip',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'clip', name: 'clip' },
/* @ts-ignore */
{ value: 'ellipsis', name: 'ellipsis' },
],
info: 'The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (\'…\', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-clip and text-overflow-string.',
}, { at: 12 })

/** remove default module et add custom one */
editor.StyleManager.removeProperty('general', 'display')
editor.StyleManager.addProperty('general', {
name: 'Display',
property: 'display',
type: 'select',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'block', name: 'block' },
/* @ts-ignore */
{ value: 'inline', name: 'inline' },
/* @ts-ignore */
{ value: 'inline-block', name: 'inline-block' },
/* @ts-ignore */
{ value: 'flex', name: 'flex' },
/* @ts-ignore */
{ value: 'none', name: 'none' },
],
info: '',
}, { at: 0 })
editor.StyleManager.addProperty('general', {
name: 'Visibility',
property: 'visibility',
type: 'select',
defaults: 'visible',
defaults: '',
options: [
/* @ts-ignore */
{ value: '', name: '' },
/* @ts-ignore */
{ value: 'visible', name: 'visible' },
/* @ts-ignore */
Expand All @@ -496,7 +542,7 @@ export default (editor: Editor, opts) => {
name: 'Content',
property: 'content',
type: 'text',
defaults: 'none',
defaults: '',
info: 'The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.',
full: true,
visible: false,
Expand Down
Loading