Skip to content

Commit

Permalink
Merge pull request #2009 from tf/edit-transition-button
Browse files Browse the repository at this point in the history
Display and edit section transitions via outline
  • Loading branch information
tf authored Sep 27, 2023
2 parents 66d1aea + e7eec4a commit fea2c6f
Show file tree
Hide file tree
Showing 11 changed files with 143 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,10 @@ de:
duplicate: Duplizieren
insert_section_above: Abschnitt oberhalb einfügen
insert_section_below: Abschnitt unterhalb einfügen
transitions:
beforeAfter: Statische Hintergründe
fade: Überblenden (inkl. Inhalt)
fadeBg: Überblenden
reveal: Freilegen
scroll: Aus-/Einscrollen
scrollOver: Überlagern
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,10 @@ en:
duplicate: Duplicate
insert_section_above: Insert section above
insert_section_below: Insert section below
transitions:
beforeAfter: Static Backgrounds
fade: Cross fade (incl. content)
fadeBg: Cross fade
reveal: Reveal
scroll: Scroll
scrollOver: Scroll over
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,27 @@ describe('PreviewMessageController', () => {
})).resolves.toMatchObject({type: 'SELECT', payload: {id: 1, type: 'sectionSettings'}});
});

it('sends SELECT message to iframe on selectSectionTransition event on model', async () => {
const entry = factories.entry(ScrolledEntry, {}, {
entryTypeSeed: normalizeSeed({
sections: [{id: 1}]
})
});
const iframeWindow = createIframeWindow();
controller = new PreviewMessageController({entry, iframeWindow});

await postReadyMessageAndWaitForAcknowledgement(iframeWindow);

return expect(new Promise(resolve => {
iframeWindow.addEventListener('message', event => {
if (event.data.type === 'SELECT') {
resolve(event.data);
}
});
entry.trigger('selectSectionTransition', entry.sections.first());
})).resolves.toMatchObject({type: 'SELECT', payload: {id: 1, type: 'sectionTransition'}});
});

it('supports sending CONTENT_ELEMENT_EDITOR_COMMAND message to iframe', async () => {
const entry = factories.entry(ScrolledEntry, {}, {
entryTypeSeed: normalizeSeed({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,16 @@ export const PreviewMessageController = Object.extend({
})
);

this.listenTo(this.entry, 'selectSectionTransition', section =>
postMessage({
type: 'SELECT',
payload: {
id: section.id,
type: 'sectionTransition'
}
})
);

this.listenTo(this.entry, 'selectContentElement', (contentElement, options) => {
postMessage({
type: 'SELECT',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import styles from './ChapterItemView.module.css';

export const ChapterItemView = Marionette.Layout.extend({
tagName: 'li',
className: styles.root,
className: `${styles.root} ${styles.withTransitions}`,

mixins: [modelLifecycleTrackingView({classNames: styles})],

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@value indicatorIconColor from './colors.module.css';

.root {
composes: chapter from './outline.module.css';
margin-bottom: 10px;
padding: 0 10px 10px 10px;
background-color: var(--ui-surface-color);
Expand Down Expand Up @@ -57,6 +58,14 @@
min-height: 20px;
}

.withTransitions .sections {
margin-top: 20px;
}

.root:first-child .sections {
margin-top: 10px;
}

.creating .creatingIndicator { display: block; }
.destroying .destroyingIndicator { display: block; }
.failed .failedIndicator { display: block; }
Expand Down
49 changes: 33 additions & 16 deletions entry_types/scrolled/package/src/editor/views/SectionItemView.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,55 @@ import {cssModulesUtils} from 'pageflow/ui';

import {SectionThumbnailView} from './SectionThumbnailView'

import arrowsIcon from './images/arrows.svg';

import styles from './SectionItemView.module.css';

export const SectionItemView = Marionette.ItemView.extend({
tagName: 'li',
className: styles.root,
className: `${styles.root} ${styles.withTransition}`,

mixins: [modelLifecycleTrackingView({classNames: styles})],

template: (data) => `
<div class="${styles.thumbnailContainer}">
<div class="${styles.dropDownButton}"></div>
<div class="${styles.thumbnail}"></div>
<div class="${styles.clickMask}">
<div class="${styles.dragHandle}"
title="${I18n.t('pageflow_scrolled.editor.section_item.drag_hint')}"></div>
<button class="${styles.editTransition}">
<img src="${arrowsIcon}" width="11" height="16">
<span class="${styles.transition}">Überblenden</span>
</button>
<div class="${styles.inner}">
<div class="${styles.thumbnailContainer}">
<div class="${styles.dropDownButton}"></div>
<div class="${styles.thumbnail}"></div>
<div class="${styles.clickMask}">
<div class="${styles.dragHandle}"
title="${I18n.t('pageflow_scrolled.editor.section_item.drag_hint')}"></div>
</div>
</div>
<span class="${styles.creatingIndicator}" />
<span class="${styles.destroyingIndicator}" />
<span class="${styles.failedIndicator}"
title="${I18n.t('pageflow_scrolled.editor.section_item.save_error')}" />
</div>
<span class="${styles.creatingIndicator}" />
<span class="${styles.destroyingIndicator}" />
<span class="${styles.failedIndicator}"
title="${I18n.t('pageflow_scrolled.editor.section_item.save_error')}" />
`,

ui: cssModulesUtils.ui(styles, 'thumbnail', 'dropDownButton'),
ui: cssModulesUtils.ui(styles, 'thumbnail', 'dropDownButton', 'editTransition', 'transition'),

events: {
[`click .${styles.clickMask}`]: function() {
events: cssModulesUtils.events(styles, {
'click clickMask': function() {
this.options.entry.trigger('selectSection', this.model);
this.options.entry.trigger('scrollToSection', this.model);
},

[`dblclick .${styles.clickMask}`]: function() {
'dblclick clickMask': function() {
this.options.entry.trigger('selectSectionSettings', this.model);
this.options.entry.trigger('scrollToSection', this.model);
},

'click editTransition': function() {
this.options.entry.trigger('selectSectionTransition', this.model);
this.options.entry.trigger('scrollToSection', this.model);
}
},
}),

initialize() {
this.listenTo(this.options.entry, 'change:currentSectionIndex', () => {
Expand All @@ -62,6 +75,10 @@ export const SectionItemView = Marionette.ItemView.extend({
}

this.$el.toggleClass(styles.invert, !!this.model.configuration.get('invert'));
this.ui.transition.text(
I18n.t(this.model.configuration.get('transition'),
{scope: 'pageflow_scrolled.editor.section_item.transitions'})
);

this.subview(new SectionThumbnailView({
el: this.ui.thumbnail,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,16 @@
position: relative;
border: solid selectionWidth transparent;
border-radius: rounded();
padding: 3px;
padding: 1px;
margin-left: -6px;
margin-right: -6px;
text-align: right;
}

.withTransition {
composes: sectionWithTransition from './outline.module.css';
}

.selectable:hover,
.active {
border: solid selectionWidth selectionColor;
Expand Down Expand Up @@ -42,7 +46,7 @@
text-shadow: 0 0 2px #fff;
}

.root:hover .dragHandle {
.inner:hover .dragHandle {
opacity: 1;
}

Expand All @@ -66,11 +70,45 @@
color: var(--ui-primary-color) !important;
}

.root:hover .dropDownButton button,
.inner:hover .dropDownButton button,
.dropDownButton button:global(.hover) {
opacity: 1;
}

.creating .dropDownButton,
.destroying .dropDownButton,
.failed .dropDownButton {
display: none;
}

.editTransition {
composes: transition from './outline.module.css';
position: absolute;
bottom: 100%;
left: 1px;
width: 100%;
border: 0;
background: transparent;
padding: 5px 5px 5px 2px;
cursor: pointer;
color: var(--ui-on-surface-color-light);
opacity: 0.8;
text-align: left;
display: flex;
gap: 9px;
}

.editTransition:hover,
.editTransition:focus {
opacity: 1;
}

.editTransition img {
vertical-align: top;
}

.transition {}

.creating .creatingIndicator { display: block; }
.destroying .destroyingIndicator { display: block; }
.failed .failedIndicator { display: block; }
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions entry_types/scrolled/package/src/editor/views/outline.module.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
@value indicatorIconColor, errorIconColor from './colors.module.css';

.sectionWithTransition {
margin-top: 20px;
}

.chapter:first-child .sectionWithTransition:first-child {
margin-top: 0;
}

.chapter:first-child .sectionWithTransition:first-child .transition {
display: none;
}

.indicator {
display: none;
position: absolute;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
display: block;
}

.transitionSelected .editToolbar {
.transitionSelected .transitionToolbar-after {
visibility: hidden;
}

Expand Down

0 comments on commit fea2c6f

Please sign in to comment.