From ffbf010b91d3452debcf7d9a1eb9f9268a1f8e9c Mon Sep 17 00:00:00 2001
From: pame <pamela.rosales@pucp.pe>
Date: Thu, 22 Apr 2021 01:55:58 -0300
Subject: [PATCH] [#350] - Each slide settings: 1st layers, buttons Lock and
 Preview, title, content, remove button

---
 src/js/src/map-blocks/storymap-editor.js   | 87 +++++++++++-----------
 src/js/src/map-blocks/storymap-editor.scss |  6 +-
 2 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/js/src/map-blocks/storymap-editor.js b/src/js/src/map-blocks/storymap-editor.js
index 32f8ed12..b5dbc365 100755
--- a/src/js/src/map-blocks/storymap-editor.js
+++ b/src/js/src/map-blocks/storymap-editor.js
@@ -384,49 +384,6 @@ const StoryMapEditor = ( {
 															}
 														} }
 													>
-														<span className="input-label">{ __( 'Title', 'jeo' ) }</span>
-														<CKEditor
-															atributo="meuatributo"
-															editor={ ClassicEditor }
-															data={ slide.title }
-															config={ editorConfig }
-															onChange={ ( event, editor ) => {
-																// Set role 'button' to editor element so it isn't affected by drag and drop events
-																editor.ui.getEditableElement().setAttribute('role', 'button')
-
-																setCurrentSlideIndex( index );
-
-																const oldSlides = [ ...attributes.slides ];
-																oldSlides[ index ].title = editor.getData();
-
-																setAttributes( {
-																	...attributes,
-																	slides: oldSlides,
-																} );
-															} }
-														/>
-														<span className="input-label">{ __(
-																'Content', 'jeo'
-														) }</span>
-														<CKEditor
-															editor={ ClassicEditor }
-															data={ slide.content }
-															config={ editorConfig }
-															onChange={ ( event, editor ) => {
-																// Set role 'button' to editor element so it isn't affected by drag and drop events
-																editor.ui.getEditableElement().setAttribute('role', 'button')
-
-																setCurrentSlideIndex( index );
-
-																const oldSlides = [ ...attributes.slides ];
-																oldSlides[ index ].content = editor.getData();
-
-																setAttributes( {
-																	...attributes,
-																	slides: oldSlides,
-																} );
-															} }
-														/>
 														<span className="input-label">{ __("Layers", "jeo") }</span>
 														<DragDropContext onDragEnd={ onDragEndLayers }>
 															<Droppable droppableId="droppable">
@@ -639,6 +596,50 @@ const StoryMapEditor = ( {
 																<span>{ __( 'Preview', 'jeo'  ) }</span>
 															</div>
 														</Button>
+
+														<span className="input-label">{ __( 'Title', 'jeo' ) }</span>
+														<CKEditor
+															atributo="meuatributo"
+															editor={ ClassicEditor }
+															data={ slide.title }
+															config={ editorConfig }
+															onChange={ ( event, editor ) => {
+																// Set role 'button' to editor element so it isn't affected by drag and drop events
+																editor.ui.getEditableElement().setAttribute('role', 'button')
+
+																setCurrentSlideIndex( index );
+
+																const oldSlides = [ ...attributes.slides ];
+																oldSlides[ index ].title = editor.getData();
+
+																setAttributes( {
+																	...attributes,
+																	slides: oldSlides,
+																} );
+															} }
+														/>
+														<span className="input-label">{ __(
+																'Content', 'jeo'
+														) }</span>
+														<CKEditor
+															editor={ ClassicEditor }
+															data={ slide.content }
+															config={ editorConfig }
+															onChange={ ( event, editor ) => {
+																// Set role 'button' to editor element so it isn't affected by drag and drop events
+																editor.ui.getEditableElement().setAttribute('role', 'button')
+
+																setCurrentSlideIndex( index );
+
+																const oldSlides = [ ...attributes.slides ];
+																oldSlides[ index ].content = editor.getData();
+
+																setAttributes( {
+																	...attributes,
+																	slides: oldSlides,
+																} );
+															} }
+														/>
 														<Button
 															className="remove-button"
 															onClick={ () => {
diff --git a/src/js/src/map-blocks/storymap-editor.scss b/src/js/src/map-blocks/storymap-editor.scss
index 581f4b1f..313637b5 100644
--- a/src/js/src/map-blocks/storymap-editor.scss
+++ b/src/js/src/map-blocks/storymap-editor.scss
@@ -89,7 +89,7 @@
 	top: 50px;
 	padding: 10px;
 	left: calc(45% + 15px);
-	
+
 	.title {
 		label {
 			font-weight: bold;
@@ -210,7 +210,7 @@
 		margin-top: 15px;
 		width: 100%;
 		background: rgb(240, 240, 240);
-		margin-top: 40px;
+
 		&:focus {
 			background: rgb(240, 240, 240);
 		}
@@ -228,7 +228,7 @@
 		}
 	}
 	.preview-button {
-		margin-top: 15px;
+		margin: 15px 0;
 		width: 100%;
 		background: rgb(240, 240, 240);
 		&:focus {