complete setting and editing description

src/components/dialogs/SaveDialog.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { copyToClipboard, getUrlData } from '$utils/history';
-import { toTranslit } from '$utils/format';
+import { toTranslit, parseDesc } from '$utils/format';
 import { TIPS } from '$constants/tips';
 import { MODES } from '$constants/modes';
 import { Icon } from '$components/panels/Icon';
@@ -116,7 +116,7 @@ export class SaveDialog extends React.Component<Props, State> {
                 minRows={2}
                 maxRows={5}
                 placeholder="Описание маршрута"
-                value={description}
+                value={parseDesc(description)}
                 onChange={this.setDescription}
               />
             </div>

src/components/dialogs/TitleDialog.tsx

@@ -5,10 +5,13 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { getStyle } from "$utils/dom";
 import { nearestInt } from "$utils/geom";
+import { IRootState } from "$redux/user/reducer";
+import { parseDesc } from "$utils/format";
 
 interface ITitleDialogProps {
-  editing: boolean,
-  title?: string,
+  editing: IRootState['editing'],
+  title?: IRootState['title'],
+  description?: IRootState['description'],
   minLines?: number,
   maxLines?: number,
 }
@@ -30,10 +33,14 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
   onLeave = () => this.setState({ raised: false });
 
   componentDidMount() {
-    this.getMaxHeight();
+    this.setMaxHeight();
   }
 
-  getMaxHeight = (): number => {
+  componentDidUpdate() {
+    this.setMaxHeight();
+  }
+
+  setMaxHeight = (): number => {
     if (!this.ref_sizer || !this.ref_title || !this.ref_text) return 0;
 
     const { height: sizer_height } = this.ref_sizer.getBoundingClientRect();
@@ -52,7 +59,7 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
 
     const container_height = sizer_height - title_height - title_margin - text_margins;
 
-    const min_height = (this.props.minLines || 3) * text_line;
+    const min_height = (this.props.minLines || 5) * text_line;
     const max_height = (this.props.maxLines || 20) * text_line;
 
     const height = nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) + text_margins;
@@ -62,7 +69,7 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
   };
 
   render() {
-    const { editing, title } = this.props;
+    const { editing, title, description } = this.props;
     const { raised, height, height_raised } = this.state;
 
     return (
@@ -73,31 +80,29 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
             onMouseOver={this.onHover}
             onMouseOut={this.onLeave}
           >
-            {
-              title &&
-                <div
-                  className="title-dialog-pane title-dialog-name"
-                  ref={el => { this.ref_title = el; }}
-                >
-                  <h2>{title}</h2>
-                </div>
-            }
-            {
-              <div
-                className="title-dialog-pane title-dialog-text"
-                style={{
-                  height: (raised ? height_raised : height),
-                  display: height === 0 ? 'none' : 'block'
-                }}
-                ref={el => { this.ref_overflow = el; }}
-              >
-                <div
-                  ref={el => { this.ref_text = el; }}
-                >
+            <div
+              className="title-dialog-pane title-dialog-name"
+              ref={el => { this.ref_title = el; }}
+            >
+              <h2>{title}</h2>
+            </div>
 
-                </div>
+            <div
+              className={classnames("title-dialog-pane title-dialog-text", { has_shade: height_raised > height })}
+              style={{
+                height: (raised ? height_raised : height),
+                marginBottom: height === 0 ? 0 : 15,
+              }}
+              ref={el => { this.ref_overflow = el; }}
+            >
+              <div
+                ref={el => { this.ref_text = el; }}
+              >
+                {
+                  parseDesc(description)
+                }
               </div>
-            }
+            </div>
           </div>
         </div>
       </div>
@@ -110,7 +115,7 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
   ref_overflow;
 }
 
-const mapStateToProps = ({ user: { editing, title } }) => ({ editing, title });
+const mapStateToProps = ({ user: { editing, title, description } }) => ({ editing, title, description });
 const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
 
 export const TitleDialog = connect(mapStateToProps, mapDispatchToProps)(Component);

src/redux/user/actions.ts

@@ -5,10 +5,10 @@ import { IRootState } from "$redux/user/reducer";
 export const setUser = (user: IUser) => ({ type: ACTIONS.SET_USER, user });
 export const userLogout = () => ({ type: ACTIONS.USER_LOGOUT });
 
-export const setEditing = editing => ({ type: ACTIONS.SET_EDITING, editing });
-export const setMode = mode => ({ type: ACTIONS.SET_MODE, mode });
-export const setDistance = distance => ({ type: ACTIONS.SET_DISTANCE, distance });
-export const setChanged = changed => ({ type: ACTIONS.SET_CHANGED, changed });
+export const setEditing = (editing: IRootState['editing']) => ({ type: ACTIONS.SET_EDITING, editing });
+export const setMode = (mode: IRootState['mode']) => ({ type: ACTIONS.SET_MODE, mode });
+export const setDistance = (distance: IRootState['distance']) => ({ type: ACTIONS.SET_DISTANCE, distance });
+export const setChanged = (changed: IRootState['changed']) => ({ type: ACTIONS.SET_CHANGED, changed });
 export const setRouterPoints = routerPoints => ({ type: ACTIONS.SET_ROUTER_POINTS, routerPoints });
 export const setActiveSticker = activeSticker => ({ type: ACTIONS.SET_ACTIVE_STICKER, activeSticker });
 export const setLogo = logo => ({ type: ACTIONS.SET_LOGO, logo });
@@ -44,9 +44,18 @@ export const sendSaveRequest = (payload: {
 
 export const resetSaveDialog = () => ({ type: ACTIONS.RESET_SAVE_DIALOG });
 
-export const setSaveLoading = save_loading => ({ type: ACTIONS.SET_SAVE_LOADING, save_loading });
-export const setSaveSuccess = payload => ({ type: ACTIONS.SET_SAVE_SUCCESS, ...payload });
-export const setSaveError = save_error => ({ type: ACTIONS.SET_SAVE_ERROR, save_error });
+export const setSaveLoading = (save_loading: IRootState['save_loading']) => ({ type: ACTIONS.SET_SAVE_LOADING, save_loading });
+
+export const setSaveSuccess = (payload: {
+  address: IRootState['address'],
+  title: IRootState['address'],
+  is_public: IRootState['is_public'],
+  description: IRootState['description'],
+
+  save_error: string,
+}) => ({ type: ACTIONS.SET_SAVE_SUCCESS, ...payload });
+
+export const setSaveError = (save_error: IRootState['save_error']) => ({ type: ACTIONS.SET_SAVE_ERROR, save_error });
 export const setSaveOverwrite = () => ({ type: ACTIONS.SET_SAVE_OVERWRITE });
 
 export const hideRenderer = () => ({ type: ACTIONS.HIDE_RENDERER });

src/redux/user/reducer.ts

@@ -179,7 +179,11 @@ const setSaveOverwrite: ActionHandler<typeof ActionCreators.setSaveOverwrite> =
 });
 
 const setSaveSuccess: ActionHandler<typeof ActionCreators.setSaveSuccess> = (state, { save_error }) => ({
-  ...state, save_overwriting: false, save_finished: true, save_processing: false, save_error
+  ...state,
+  save_overwriting: false,
+  save_finished: true,
+  save_processing: false,
+  save_error,
 });
 
 const resetSaveDialog: ActionHandler<typeof ActionCreators.resetSaveDialog> = (state) => ({

src/redux/user/sagas.ts

@@ -32,7 +32,7 @@ import {
   setProvider,
   changeProvider,
   setSaveLoading,
-  mapsSetShift, searchChangeDistance, clearAll, setFeature, searchSetTitle, setRouteStarred,
+  mapsSetShift, searchChangeDistance, clearAll, setFeature, searchSetTitle, setRouteStarred, setDescription,
 } from '$redux/user/actions';
 import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath, replacePath } from '$utils/history';
 import { editor } from '$modules/Editor';
@@ -333,17 +333,15 @@ function* sendSaveRequestSaga({
   if (timeout || !result || !result.success || !result.address) return yield put(setSaveError(TIPS.SAVE_TIMED_OUT));
 
   return yield put(setSaveSuccess({
-    address: result.address, save_error: TIPS.SAVE_SUCCESS, title, is_public: result.is_public
+    address: result.address,
+    title: result.title,
+    is_public: result.is_public,
+    description: result.description,
+
+    save_error: TIPS.SAVE_SUCCESS,
   }));
 }
 
-// function* refreshUserData() {
-//   const user = yield select(getUser);
-//   const data = yield call(checkUserToken, user);
-//
-//   return yield put(setUser(data));
-// }
-
 function* getRenderData() {
   yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 }));
 
@@ -570,7 +568,7 @@ function* searchSetTabSaga() {
 }
 
 function* setSaveSuccessSaga({
-  address, title, is_public
+  address, title, is_public, description,
 }: ReturnType<typeof ActionCreators.setSaveSuccess>) {
   const { id } = yield select(getUser);
   const { dialog_active } = yield select(getState);
@@ -580,6 +578,7 @@ function* setSaveSuccessSaga({
   yield put(setTitle(title));
   yield put(setAddress(address));
   yield put(setPublic(is_public));
+  yield put(setDescription(description));
   yield put(setChanged(false));
 
   yield editor.owner = { id };

src/styles/panel.less

@@ -685,24 +685,27 @@
 
     > div {
       margin: 10px;
+      white-space: pre-line;
     }
 
-    ::after {
-      content: ' ';
-      width: 100%;
-      height: 40px;
-      background: linear-gradient(fade(@dialog_background, 0), @dialog_background);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      transition: opacity 250ms;
-      pointer-events: none;
-      touch-action: none;
-    }
-
-    &:hover {
+    &.has_shade {
       ::after {
-        opacity: 0;
+        content: ' ';
+        width: 100%;
+        height: 40px;
+        background: linear-gradient(fade(@dialog_background, 0), @dialog_background);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        transition: opacity 250ms;
+        pointer-events: none;
+        touch-action: none;
+      }
+
+      &:hover {
+        ::after {
+          opacity: 0;
+        }
       }
     }
   }

src/utils/format.ts

@@ -13,3 +13,5 @@ export const toHours = (info: number): string => {
 export const toTranslit = (string: string): string => (
   removeGarbage(ru.reduce((text, el, i) => (text.replace(new RegExp(ru[i], 'g'), en[i])), (String(string) || '')))
 );
+
+export const parseDesc = (text: string): string => text.replace(/(\n{2,})/ig, "\n\n");