Fixes based on feedback by Abi

components/Deck/ContentPanel/SlideModes/SlideEditPanel/SlideContentEditor.js

@@ -1662,8 +1662,42 @@ class SlideContentEditor extends React.Component {
         if (nextProps.SlideEditStore.title !== '' && nextProps.SlideEditStore.title !== this.props.SlideEditStore.title)
         {
             this.hasChanges = true;
-            //no need for this -> title is updated on slide save.
-            //this.handleSaveButton();
+            const messagesSaveAfterSlideNameChangeModal = defineMessages({
+                swal_title:{
+                    id: 'SlideContentEditor.SaveAfterSlideNameChangeModalTitle',
+                    defaultMessage: 'Save now or continue editing?',
+                },
+                swal_text:{
+                    id: 'SlideContentEditor.SaveAfterSlideNameChangeModalText',
+                    defaultMessage: 'The slide name will be updated after saving the slide and exiting slide edit mode. Click "yes" to save the slide and exit edit mode. Click "no" to continue editing your slide.'
+                },
+                swal_confirm:{
+                    id: 'SlideContentEditor.SaveAfterSlideNameChangeModalConfirm',
+                    defaultMessage: 'Yes, save and exit slide edit mode',
+                },
+                swal_cancel:{
+                    id: 'SlideContentEditor.SaveAfterSlideNameChangeModalCancel',
+                    defaultMessage: 'No, continue editing',
+                },
+            });
+            swal({
+                title: this.context.intl.formatMessage(messagesSaveAfterSlideNameChangeModal.swal_title),
+                text: this.context.intl.formatMessage(messagesSaveAfterSlideNameChangeModal.swal_text),
+                type: 'question',
+                showCloseButton: true,
+                showCancelButton: true,
+                confirmButtonText: this.context.intl.formatMessage(messagesSaveAfterSlideNameChangeModal.swal_confirm),
+                confirmButtonClass: 'ui olive button',
+                cancelButtonText: this.context.intl.formatMessage(messagesSaveAfterSlideNameChangeModal.swal_cancel),
+                cancelButtonClass: 'ui red button',
+                buttonsStyling: false,
+                allowEnterKey: true
+            }).then((accepted) => {
+                this.handleSaveButton();
+            }, (reason) => {
+                //done(reason);
+            });
+
         }
         if (nextProps.SlideEditStore.slideSize !== '' && nextProps.SlideEditStore.slideSize !== this.props.SlideEditStore.slideSize)
         {

components/Deck/SlideEditLeftPanel/SlideEditLeftPanel.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {connectToStores} from 'fluxible-addons-react';
-import {Button, Icon, Input} from 'semantic-ui-react';
+import {Button, Icon, Input, TextArea} from 'semantic-ui-react';
 import classNames from 'classnames';
 import NavigationPanel from './../NavigationPanel/NavigationPanel';
 import addInputBox from '../../../actions/slide/addInputBox';
@@ -291,6 +291,9 @@ class SlideEditLeftPanel extends React.Component {
                 case 'handleTitleClick':
                     this.handleTitleClick();
                     break;
+                case 'handleSlideNameChangeKeyInInput': //this is a special case
+                    this.handleTitleChangeClick();
+                    break;
                 case 'handleTitleChangeClick':
                     this.handleTitleChangeClick();
                     break;
@@ -480,6 +483,8 @@ class SlideEditLeftPanel extends React.Component {
                 //crop
                 //map outline
                 //working: //external
+                //<FormattedMessage id='editpanel.slideTitleChangeUpdateNote1' defaultMessage='The entire slide is save together with the slide name.' />
+                //placeholder="Slide name" //needs to be translated
 
         let titleChangeContent  = (
                 <div className="ui form">
@@ -488,18 +493,23 @@ class SlideEditLeftPanel extends React.Component {
                   </a>
                   <i className="error">
                       {this.state.titleMissingError === false ? '' : <FormattedMessage id='editpanel.titleMissingError' defaultMessage='Error: Slide name can not be empty' />}
-                      <br />                      
+                      <br />
                   </i>
                   <label htmlFor="slideTitle">
                     <FormattedMessage id='editpanel.slideTitle' defaultMessage='Change slide name:' />
                   </label>
-                  <div className="ui action input">
-                    <input type="text" placeholder="Slide name" onChange={this.handleChange.bind(this)} defaultValue={this.props.SlideEditStore.title} id="slideTitle" ref="slideTitle" name="slideTitle" aria-label="Slide name" aria-required="true" required autoFocus/>
-                    <button className="ui icon button blue" aria-describedby="handleTitleChangeClickDescription" id="handleTitleChangeClick" role="button" onClick={this.handleTitleChangeClick.bind(this)} onKeyPress={(evt) => this.handleKeyPress(evt, 'handleTitleChangeClick')}>
+                  <div className="ui fluid action input">
+                    <TextArea type="text" onChange={this.handleChange.bind(this)} defaultValue={this.props.SlideEditStore.title} onKeyPress={(evt) => this.handleKeyPress(evt, 'handleSlideNameChangeKeyInInput')} id="slideTitle" ref="slideTitle" name="slideTitle" aria-label="Slide name" aria-required="true" required autoFocus tabIndex='0'/>
+                    <button className="ui icon button blue" aria-describedby="ariaLabelSlideNameSaveButton" id="handleTitleChangeClick" role="button" onClick={this.handleTitleChangeClick.bind(this)} onKeyPress={(evt) => this.handleKeyPress(evt, 'handleTitleChangeClick')}>
                         <i tabIndex="0" className="check icon white big"></i>
                     </button>
                   </div>
-                  <label htmlFor="handleTitleChangeClick" id="handleTitleChangeClickDescription" ><FormattedMessage id='editpanel.slideTitleChangeUpdateNote1' defaultMessage='(The slide name is updated when saving the slide by clicking the separate save button).' /></label>
+                  <TextArea className="sr-only" id="ariaLabelSlideNameSaveButton" value="submit slide name" tabIndex ='-1'/>
+                  <div>
+                    <label>
+                    <FormattedMessage id='editpanel.slideTitleChangeUpdateNote1' defaultMessage='Your slide name will be updated once you have saved and exited the slide edit mode..' />
+                    </label>
+                  </div>
                 </div>);
 
         let sizeContent = (

intl/default.json

@@ -335,6 +335,10 @@
   "SlideContentEditor.imageUploadErrorTitle": "Error",
   "SlideContentEditor.imageUploadErrorText": "Uploading the image file failed. Please try it again and make sure that you select an image and that the file size is not too big. Also please make sure you did not upload an image twice.",
   "SlideContentEditor.imageUploadErrorConfirm": "Close",
+  "SlideContentEditor.SaveAfterSlideNameChangeModalTitle": "Save now or continue editing?",
+  "SlideContentEditor.SaveAfterSlideNameChangeModalText": "The slide name will be updated after saving the slide and exiting slide edit mode. Click \"yes\" to save the slide and exit edit mode. Click \"no\" to continue editing your slide.",
+  "SlideContentEditor.SaveAfterSlideNameChangeModalConfirm": "Yes, save and exit slide edit mode",
+  "SlideContentEditor.SaveAfterSlideNameChangeModalCancel": "No, continue editing",
   "SlideContentEditor.deleteModalTitle": "Remove element",
   "SlideContentEditor.deleteModalText": "Are you sure you want to delete this element?",
   "SlideContentEditor.deleteModalConfirm": "Yes",
@@ -373,7 +377,7 @@
   "editpanel.slideSize": "Slide size (dimension and resolution)",
   "editpanel.titleMissingError": "Error: Slide name can not be empty",
   "editpanel.slideTitle": "Change slide name:",
-  "editpanel.slideTitleChangeUpdateNote1": "(The slide name is updated when saving the slide by clicking the separate save button).",
+  "editpanel.slideTitleChangeUpdateNote1": "Your slide name will be updated once you have saved and exited the slide edit mode..",
   "editpanel.slideSizeStandard": "Standard (4:3) low",
   "editpanel.slideSizeStandardPixels": "pixels",
   "editpanel.slideSizeNameLegacy": "(legacy/old) Powerpoint default",
@@ -935,12 +939,12 @@
   "ChangePictureModal.cancel": "Cancel",
   "ChangePictureModal.save": "Save",
   "ChangePictureModal.modalHeader": "Crop your image",
-  "DeactivateAccount.infoMessage1": "In case you deactivate your account, all of your data will remain. This includes your user data, your authorship of decks and slides, your linked social providers and also your authorship of any comments and discussions.",
-  "DeactivateAccount.infoMessage2": "This is reversible, but needs an administrator to re-activate your account!",
-  "DeactivateAccount.button1": "Deactivate my account",
   "DeactivateAccount.modalHeading": "Deactivate SlideWiki Account",
   "DeactivateAccount.modalHeader": "Are you sure you want to deactivate your SlideWiki Account?",
   "DeactivateAccount.modalContent": "Deactivating your account will remove your profile and account from SlideWiki. The content you have added to SlideWiki will remain. Do you wish to continue?",
+  "DeactivateAccount.infoMessage1": "In case you deactivate your account, all of your data will remain. This includes your user data, your authorship of decks and slides, your linked social providers and also your authorship of any comments and discussions.",
+  "DeactivateAccount.infoMessage2": "This is reversible, but needs an administrator to re-activate your account!",
+  "DeactivateAccount.button1": "Deactivate my account",
   "DeactivateAccount.modalCancel": "Cancel",
   "DeactivateAccount.modalSubmit": "Deactivate account",
   "Integration.swalTitle3": "Error",
@@ -1043,4 +1047,4 @@
   "UserRegistrationSocial.signup": "Sign Up",
   "UserRegistrationSocial.account": "I can not access my account",
   "UserRegistrationSocial.cancel": "Cancel"
-}
+}