Option for centering content

[KashishMistry]

Related Item(s)

#403 in story-ramp repo

Changes

• This issue is logged in the story-ramp repo, however the changes needed to be implemented in storylines-editor to allow users to manipulate the customStyles property for each panel
• centerPanel allows the user to center content in each panel
• centerSlide allows the user to center content in the overall slide (if the slide has two panels then the left panel is right-aligned and the right panel is left-aligned)

Notes

Without centering:

When centerPanel is selected:

When centerSlide is selected:

When there is only one panel and centerSlide or centerPanel is selected:

Testing

Steps:

1. Create a new slide
2. Select Center panel content and preview to check the alignment of the content on the panel (should be centered relative to the panel).
3. Select Center slide content and preview to check the alignment of the content on the slide (left slide should be right-aligned and right slide should be left-aligned).
4. Experiment with dynamic panels in particular to ensure the panels in children are being aligned correctly.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/centered/#/en/editor

[yileifeng]

Reviewable status: 0 of 9 files reviewed, 2 unresolved discussions (waiting on @KashishMistry)

---

src/components/editor/slide-editor.vue line 40 at r1 (raw file):

                        />
                        <span class="mx-2 font-bold">{{ $t('editor.slides.centerSlide') }}</span>
                        <input

The toggle checkboxes are not aligned with the text

---

src/lang/lang.csv line 115 at r1 (raw file):

editor.slides.makeFull,Make the right panel the full slide,1,Mettre la diapositive complète dans le panneau de droite,1
editor.slides.centerPanel,Align panel content towards the middle,1,Aligner le contenu du panneau vers le milieu,0
editor.slides.centerSlide,Align slide content towards the middle,1,Aligner le contenu de la diapositive vers le milieu,0

Suggestion: how about rewording this to "Center panel content" and "Center slide content"? Would preserve some valuable space as well and could be more intuitive wording.

[KashishMistry]

Reviewable status: 0 of 9 files reviewed, 2 unresolved discussions (waiting on @yileifeng)

---

src/components/editor/slide-editor.vue line 40 at r1 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

The toggle checkboxes are not aligned with the text

Donethanks.

---

src/lang/lang.csv line 115 at r1 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

Suggestion: how about rewording this to "Center panel content" and "Center slide content"? Would preserve some valuable space as well and could be more intuitive wording.

Donethanks.

[yileifeng]

Reviewed 7 of 9 files at r1, 2 of 2 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)

[dnlnashed]

Reviewed 7 of 9 files at r1, 2 of 2 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)

[RyanCoulsonCA]

Reviewed 7 of 9 files at r1, 2 of 2 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)