Skip to content

Commit f371962

Browse files
tftf
authored
Merge pull request #2361 from tf/margins
Content element margins
2 parents ef8cf8a + b02d282 commit f371962

36 files changed

Lines changed: 1469 additions & 235 deletions

‎entry_types/scrolled/config/locales/de.yml‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -247,12 +247,8 @@ de:
247247
inline_help: Ändere die Darstellung der Beschriftung unterhalb des Element.
248248
inline_help_disabled: Füge eine Beschriftung unterhalb des Elements hinzu, um zwischen Varianten zu wählen.
249249
blank: "(Standard)"
250-
marginTop:
251-
label: "Abstand oben"
252-
blank: "(Automatisch)"
253-
marginBottom:
254-
label: "Abstand unten"
255-
blank: "(Automatisch)"
250+
styles:
251+
label: "Stile"
256252
fullWidthInPhoneLayout:
257253
label: "Volle Breite im Phone-Layout"
258254
inline_help: |-
@@ -1417,6 +1413,14 @@ de:
14171413
xxxl: XXXL
14181414
contentElementBoxBorderRadius:
14191415
none: Keine
1416+
contentElementMargin:
1417+
xxs: XXS
1418+
xs: XS
1419+
sm: S
1420+
md: M
1421+
lg: L
1422+
xl: XL
1423+
xxl: XXL
14201424
content_element_text_inline_file_rights_attributes:
14211425
showTextInlineFileRightsBackdrop:
14221426
label: "Abblendung hinter Rechteangabe"
@@ -1452,6 +1456,11 @@ de:
14521456
square: Quadratisch (1:1)
14531457
wide: Landscape (16:9)
14541458
original: Original
1459+
content_element_style_list_input:
1460+
add: "Stil hinzufügen..."
1461+
remove: "Stil entfernen"
1462+
marginTop: "Abstand oben"
1463+
marginBottom: "Abstand unten"
14551464
image_modifier_list_input:
14561465
add: "Stil hinzufügen..."
14571466
remove: "Stil entfernen"
@@ -1885,4 +1894,6 @@ de:
18851894
remove_link: "Link entfernen"
18861895
edit_section_padding_top: Oberen Abstand bearbeiten
18871896
edit_section_padding_bottom: Unteren Abstand bearbeiten
1897+
content_element_margin_top: Oberer Außenabstand
1898+
content_element_margin_bottom: Unterer Außenabstand
18881899
expose_motif_area: Motiv freilegen

‎entry_types/scrolled/config/locales/en.yml‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -241,12 +241,8 @@ en:
241241
inline_help: Switch between different looks of the caption below the element.
242242
inline_help_disabled: Add a caption below the element to switch between different looks.
243243
blank: "(Default)"
244-
marginTop:
245-
label: "Margin top"
246-
blank: "(Auto)"
247-
marginBottom:
248-
label: "Margin bottom"
249-
blank: "(Auto)"
244+
styles:
245+
label: "Styles"
250246
fullWidthInPhoneLayout:
251247
label: "Full width in phone layout"
252248
inline_help: |-
@@ -1401,6 +1397,14 @@ en:
14011397
xxxl: XXXL
14021398
contentElementBoxBorderRadius:
14031399
none: None
1400+
contentElementMargin:
1401+
xxs: XXS
1402+
xs: XS
1403+
sm: S
1404+
md: M
1405+
lg: L
1406+
xl: XL
1407+
xxl: XXL
14041408
content_element_text_inline_file_rights_attributes:
14051409
showTextInlineFileRightsBackdrop:
14061410
label: "Backdrop behind inline file rights"
@@ -1436,6 +1440,11 @@ en:
14361440
square: Square (1:1)
14371441
wide: Landscape (16:9)
14381442
original: Original
1443+
content_element_style_list_input:
1444+
add: "Add style..."
1445+
remove: "Remove style"
1446+
marginTop: "Margin top"
1447+
marginBottom: "Margin bottom"
14391448
image_modifier_list_input:
14401449
add: "Add style..."
14411450
remove: "Remove style"
@@ -1715,4 +1724,6 @@ en:
17151724
remove_link: "Remove link"
17161725
edit_section_padding_top: Edit top padding
17171726
edit_section_padding_bottom: Edit bottom padding
1727+
content_element_margin_top: Top margin
1728+
content_element_margin_bottom: Bottom margin
17181729
expose_motif_area: Expose motif

‎entry_types/scrolled/lib/pageflow_scrolled/plugin.rb‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,16 @@ def configure(config)
2020
'xxxl' => 'max(11em, 30svh)'
2121
}
2222

23+
margin_scale = {
24+
'xxs' => '2em',
25+
'xs' => '3em',
26+
'sm' => '4em',
27+
'md' => '6em',
28+
'lg' => '10em',
29+
'xl' => '12em',
30+
'xxl' => '16em'
31+
}
32+
2333
c.themes.register_default_options(
2434
ThemeOptionsDefaultScale.new(
2535
prefix: 'section_padding_top',
@@ -34,11 +44,19 @@ def configure(config)
3444
)
3545
)
3646

47+
c.themes.register_default_options(
48+
ThemeOptionsDefaultScale.new(
49+
prefix: 'content_element_margin',
50+
values: margin_scale
51+
)
52+
)
53+
3754
c.themes.register_default_options(
3855
properties: {
3956
root: {
4057
'section_default_padding_top' => '1.375em',
41-
'section_default_padding_bottom' => '4.375em'
58+
'section_default_padding_bottom' => '4.375em',
59+
'content_element_margin_style_default' => '2em'
4260
},
4361
cards_appearance_section: {
4462
'section_default_padding_top' => '3em',

‎entry_types/scrolled/package/spec/editor/models/Style-spec.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {Style} from 'editor/models/Style';
22

3+
import {editor} from 'pageflow-scrolled/editor';
34
import {ScrolledEntry} from 'editor/models/ScrolledEntry';
45
import {factories, useFakeTranslations} from 'pageflow/testHelpers';
56
import {normalizeSeed} from 'support';
@@ -77,6 +78,161 @@ describe('Style', () => {
7778
expect(style.inputType()).toEqual('color');
7879
});
7980

81+
describe('.getTypesForContentElement', () => {
82+
it('returns empty object when no margin scale is defined', () => {
83+
editor.contentElementTypes.register('textBlock', {});
84+
85+
const entry = factories.entry(
86+
ScrolledEntry,
87+
{},
88+
{
89+
entryTypeSeed: normalizeSeed({
90+
contentElements: [
91+
{id: 1, typeName: 'textBlock'}
92+
]
93+
})
94+
}
95+
);
96+
97+
const contentElement = entry.contentElements.get(1);
98+
const result = Style.getTypesForContentElement({entry, contentElement});
99+
100+
expect(result).toEqual({});
101+
});
102+
103+
it('returns margin types based on content element margin scale', () => {
104+
editor.contentElementTypes.register('textBlock', {});
105+
106+
const entry = factories.entry(
107+
ScrolledEntry,
108+
{},
109+
{
110+
entryTypeSeed: normalizeSeed({
111+
contentElements: [
112+
{id: 1, typeName: 'textBlock'}
113+
],
114+
themeOptions: {
115+
properties: {
116+
root: {
117+
'contentElementMargin-sm': '0.5rem',
118+
'contentElementMargin-md': '1rem',
119+
'contentElementMargin-lg': '1.5rem'
120+
}
121+
}
122+
},
123+
themeTranslations: {
124+
scales: {
125+
contentElementMargin: {
126+
sm: 'Small',
127+
md: 'Medium',
128+
lg: 'Large'
129+
}
130+
}
131+
}
132+
})
133+
}
134+
);
135+
136+
const contentElement = entry.contentElements.get(1);
137+
const result = Style.getTypesForContentElement({entry, contentElement});
138+
139+
expect(result).toMatchObject({
140+
marginTop: {
141+
inputType: 'slider',
142+
values: ['sm', 'md', 'lg'],
143+
texts: ['Small', 'Medium', 'Large']
144+
},
145+
marginBottom: {
146+
inputType: 'slider',
147+
values: ['sm', 'md', 'lg'],
148+
texts: ['Small', 'Medium', 'Large']
149+
}
150+
});
151+
});
152+
it('sets resetValue from content element defaultConfig', () => {
153+
editor.contentElementTypes.register('heading', {
154+
defaultConfig: {marginTop: 'none'}
155+
});
156+
157+
const entry = factories.entry(
158+
ScrolledEntry,
159+
{},
160+
{
161+
entryTypeSeed: normalizeSeed({
162+
contentElements: [
163+
{id: 1, typeName: 'heading'}
164+
],
165+
themeOptions: {
166+
properties: {
167+
root: {
168+
'contentElementMargin-sm': '0.5rem',
169+
'contentElementMargin-md': '1rem',
170+
'contentElementMargin-lg': '1.5rem'
171+
}
172+
}
173+
},
174+
themeTranslations: {
175+
scales: {
176+
contentElementMargin: {
177+
sm: 'Small',
178+
md: 'Medium',
179+
lg: 'Large'
180+
}
181+
}
182+
}
183+
})
184+
}
185+
);
186+
187+
const contentElement = entry.contentElements.get(1);
188+
const result = Style.getTypesForContentElement({entry, contentElement});
189+
190+
expect(result.marginTop.resetValue).toEqual('none');
191+
expect(result.marginBottom).not.toHaveProperty('resetValue');
192+
});
193+
194+
it('includes default value from margin scale', () => {
195+
editor.contentElementTypes.register('textBlock', {});
196+
197+
const entry = factories.entry(
198+
ScrolledEntry,
199+
{},
200+
{
201+
entryTypeSeed: normalizeSeed({
202+
contentElements: [
203+
{id: 1, typeName: 'textBlock'}
204+
],
205+
themeOptions: {
206+
properties: {
207+
root: {
208+
'contentElementMargin-sm': '0.5rem',
209+
'contentElementMargin-md': '1rem',
210+
'contentElementMargin-lg': '1.5rem',
211+
'contentElementMarginStyleDefault': '0.5rem'
212+
}
213+
}
214+
},
215+
themeTranslations: {
216+
scales: {
217+
contentElementMargin: {
218+
sm: 'Small',
219+
md: 'Medium',
220+
lg: 'Large'
221+
}
222+
}
223+
}
224+
})
225+
}
226+
);
227+
228+
const contentElement = entry.contentElements.get(1);
229+
const result = Style.getTypesForContentElement({entry, contentElement});
230+
231+
expect(result.marginTop.defaultValue).toEqual('sm');
232+
expect(result.marginBottom.defaultValue).toEqual('sm');
233+
});
234+
});
235+
80236
describe('.getImageModifierTypes', () => {
81237
const commonPrefix = 'pageflow_scrolled.editor.aspect_ratios';
82238
const themePrefix = `pageflow_scrolled.editor.themes.custom.aspect_ratios`;

0 commit comments

Comments
 (0)