panels: fixed them

2025-04-28 12:36:41 +07:00 · 2018-12-07 14:32:35 +07:00 · 2018-12-07 14:32:35 +07:00 · b8ba50517b
commit b8ba50517b
parent d248b679ed
13 changed files with 171 additions and 182 deletions
--- a/src/components/dialogs/CancelDialog.jsx
+++ b/src/components/dialogs/CancelDialog.jsx
@ -1,13 +1,12 @@
 import React from 'react';

 import { MODES } from '$constants/modes';
-import { editor } from '$modules/Editor';
 import { Icon } from '$components/panels/Icon';

 type Props = {
  stopEditing: Function,
  setMode: Function,
-  setEditing: Function,
+  width: Number,
 };

 export class CancelDialog extends React.Component<Props, void> {
@ -23,19 +22,23 @@ export class CancelDialog extends React.Component<Props, void> {
  };

  render() {
-    return (
-      <div className="helper cancel-helper">
-        <div className="helper__text danger">
-          <Icon icon="icon-cancel-1" />
-          <div className="big upper">Закрыть редактор?</div>
-        </div>
-        <div className="helper__buttons">
-          <div className="button router-helper__button" onClick={this.cancel}>
-            Удалить измения
-          </div>
+    const { width } = this.props;

-          <div className="button primary router-helper__button" onClick={this.proceed}>
-            Вернуться
+    return (
+      <div className="control-dialog" style={{ width }}>
+        <div className="helper cancel-helper">
+          <div className="helper__text danger">
+            <Icon icon="icon-cancel-1" />
+            <div className="big upper">Закрыть редактор?</div>
+          </div>
+          <div className="helper__buttons">
+            <div className="button router-helper__button" onClick={this.cancel}>
+              Удалить измения
+            </div>
+
+            <div className="button primary router-helper__button" onClick={this.proceed}>
+              Вернуться
+            </div>
          </div>
        </div>
      </div>
--- a/src/components/dialogs/LogoDialog.jsx
+++ b/src/components/dialogs/LogoDialog.jsx
@ -9,20 +9,22 @@ type Props = {
 }

 export const LogoDialog = ({ logo, setLogo }: Props) => (
-  <div className="helper logo-helper">
-    <div className="helper-back">
-      <Icon icon="icon-logo" size={200} />
+  <div className="control-dialog top">
+    <div className="helper logo-helper">
+      <div className="helper-back">
+        <Icon icon="icon-logo" size={200} />
+      </div>
+      {
+        Object.keys(LOGOS).map(item => (
+          <div
+            className={classnames('helper-menu-item', { active: (item === logo) })}
+            onClick={() => setLogo(item)}
+            key={item}
+          >
+            {LOGOS[item][0]}
+          </div>
+        ))
+      }
    </div>
-    {
-      Object.keys(LOGOS).map(item => (
-        <div
-          className={classnames('helper-menu-item', { active: (item === logo) })}
-          onClick={() => setLogo(item)}
-          key={item}
-        >
-          {LOGOS[item][0]}
-        </div>
-      ))
-    }
  </div>
 );
--- a/src/components/dialogs/ProviderDialog.jsx
+++ b/src/components/dialogs/ProviderDialog.jsx
@ -17,7 +17,7 @@ export class ProviderDialog extends React.Component<Props, void> {
    const { provider, setProvider } = this.props;

    return (
-      <React.Fragment>
+      <div className="control-dialog top right control-dialog-provider">
        <div className="helper provider-helper">
          {
            Object.keys(PROVIDERS).map(item => (
@ -39,16 +39,7 @@ export class ProviderDialog extends React.Component<Props, void> {
            ))
          }
        </div>
-        <div className="helper">
-          <div className="helper__text">
-            <Icon icon="icon-map-1" />
-            <div className="big upper">ВЫБЕРИТЕ СТИЛЬ КАРТЫ</div>
-          </div>
-          <div className="helper__buttons button-group" onClick={this.closeDialog}>
-            <Icon icon="icon-cancel-1" />
-          </div>
-        </div>
-      </React.Fragment>
+      </div>
    );
  }
 }
--- a/src/components/dialogs/RouterDialog.jsx
+++ b/src/components/dialogs/RouterDialog.jsx
@ -5,6 +5,7 @@ type Props = {
  routerCancel: Function,
  routerSubmit: Function,
  routerPoints: Number,
+  width: Number,
 }

 const noPoints = ({ routerCancel }: Props) => (
@ -54,8 +55,8 @@ const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
  </div>
 );

-export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit }: Props) => (
-  <div>
+export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit, width }: Props) => (
+  <div className="control-dialog" style={{ width }}>
    {!routerPoints && noPoints({ routerCancel })}
    {routerPoints === 1 && firstPoint({ routerCancel })}
    {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
--- a/src/components/dialogs/SaveDialog.jsx
+++ b/src/components/dialogs/SaveDialog.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { getUrlData, pushPath } from '$utils/history';
+import { getUrlData } from '$utils/history';
 import { toTranslit } from '$utils/format';
 import { TIPS } from '$constants/tips';
 import { MODES } from '$constants/modes';
@ -11,7 +11,8 @@ type Props = {
  save_error: String,
  save_finished: Boolean,
  save_overwriting: Boolean,
-  save_processing: Boolean,
+
+  width: Number,

  setMode: Function,
  sendSaveRequest: Function,
@ -59,50 +60,50 @@ export class SaveDialog extends React.Component<Props, State> {

  render() {
    const { title } = this.state;
-    const { save_error, save_finished, save_overwriting } = this.props;
+    const { save_error, save_finished, save_overwriting, width } = this.props;
    const { host } = getUrlData();

    return (
-      <div className="helper save-helper">
-        <div className="save-title">
-          <div className="save-title-input">
-            <div className="save-title-label">Название</div>
-            <input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} />
-          </div>
-        </div>
-
-        <div className="save-description">
-          <div className="save-address-input">
-            <label className="save-address-label">http://{host}/</label>
-            <input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} readOnly={save_finished} />
+      <div className="control-dialog" style={{ width }}>
+        <div className="helper save-helper">
+          <div className="save-title">
+            <div className="save-title-input">
+              <div className="save-title-label">Название</div>
+              <input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} />
+            </div>
          </div>

-          <div className="save-text">
-            { save_error || TIPS.SAVE_INFO }
-          </div>
+          <div className="save-description">
+            <div className="save-address-input">
+              <label className="save-address-label">http://{host}/</label>
+              <input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} readOnly={save_finished} />
+            </div>

-          <div className="save-buttons">
-            <div className="save-buttons-text" />
-            <div>
-              { !save_finished &&
-                <div className="button" onClick={this.cancelSaving}>Отмена</div>
-              }
-              {
-                !save_finished && !save_overwriting &&
-                <div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
-              }
-              {
-                save_overwriting &&
-                <div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
-              }
-              { save_finished &&
-                <div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
-              }
+            <div className="save-text">
+              { save_error || TIPS.SAVE_INFO }
+            </div>
+
+            <div className="save-buttons">
+              <div className="save-buttons-text" />
+              <div>
+                { !save_finished &&
+                  <div className="button" onClick={this.cancelSaving}>Отмена</div>
+                }
+                {
+                  !save_finished && !save_overwriting &&
+                  <div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
+                }
+                {
+                  save_overwriting &&
+                  <div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
+                }
+                { save_finished &&
+                  <div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
+                }
+              </div>
            </div>
          </div>
        </div>
-
-
      </div>
    );
  }
--- a/src/components/dialogs/StickersDialog.jsx
+++ b/src/components/dialogs/StickersDialog.jsx
@ -4,32 +4,35 @@ import React from 'react';
 import { STICKERS } from '$constants/stickers';

 type Props = {
-  setActiveSticker: Function
+  setActiveSticker: Function,
+  width: Number,
 };

-export const StickersDialog = ({ setActiveSticker }: Props) => (
-  <div className="helper stickers-helper">
-    {
-      Object.keys(STICKERS).map(set => (
-        <div key={set}>
-          <div className="stickers-set-title">{STICKERS[set].title || null}</div>
-          <div className="stickers-grid">
-            {
-              Object.keys(STICKERS[set].layers).map(sticker => (
-                <div
-                  style={{
-                    backgroundImage: `url(${STICKERS[set].url})`,
-                    backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
-                  }}
-                  className="sticker-preview"
-                  key={`${set}-${sticker}`}
-                  onClick={() => setActiveSticker({ set, sticker })}
-                />
-              ))
-            }
+export const StickersDialog = ({ setActiveSticker, width }: Props) => (
+  <div className="control-dialog" style={{ width }}>
+    <div className="helper stickers-helper">
+      {
+        Object.keys(STICKERS).map(set => (
+          <div key={set}>
+            <div className="stickers-set-title">{STICKERS[set].title || null}</div>
+            <div className="stickers-grid">
+              {
+                Object.keys(STICKERS[set].layers).map(sticker => (
+                  <div
+                    style={{
+                      backgroundImage: `url(${STICKERS[set].url})`,
+                      backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
+                    }}
+                    className="sticker-preview"
+                    key={`${set}-${sticker}`}
+                    onClick={() => setActiveSticker({ set, sticker })}
+                  />
+                ))
+              }
+            </div>
          </div>
-        </div>
-      ))
-    }
+        ))
+      }
+    </div>
  </div>
 );
--- a/src/components/dialogs/TrashDialog.jsx
+++ b/src/components/dialogs/TrashDialog.jsx
@ -6,30 +6,34 @@ type Props = {
  clearStickers: Function,
  clearAll: Function,
  clearCancel: Function,
+
+  width: Number,
 }

 export const TrashDialog = ({
-  clearPoly, clearStickers, clearAll, clearCancel
+  clearPoly, clearStickers, clearAll, clearCancel, width,
 }: Props) => (
-  <div className="helper trash-helper">
-    <div className="helper__text danger">
-      <Icon icon="icon-trash-4" />
-      <div className="big upper">Удалить:</div>
-    </div>
-    <div className="helper__buttons">
-      <div className="button-group">
-        <div className="button router-helper__button" onClick={clearPoly}>
-          Маршрут
-        </div>
-        <div className="button router-helper__button" onClick={clearStickers}>
-          Стикеры
-        </div>
-        <div className="button router-helper__button" onClick={clearAll}>
-          Удалить все
-        </div>
+  <div className="control-dialog" style={{ width }}>
+    <div className="helper trash-helper">
+      <div className="helper__text danger">
+        <Icon icon="icon-trash-4" />
+        <div className="big upper">Удалить:</div>
      </div>
-      <div className="button primary router-helper__button" onClick={clearCancel}>
-        Отмена
+      <div className="helper__buttons">
+        <div className="button-group">
+          <div className="button router-helper__button" onClick={clearPoly}>
+            Маршрут
+          </div>
+          <div className="button router-helper__button" onClick={clearStickers}>
+            Стикеры
+          </div>
+          <div className="button router-helper__button" onClick={clearAll}>
+            Удалить все
+          </div>
+        </div>
+        <div className="button primary router-helper__button" onClick={clearCancel}>
+          Отмена
+        </div>
      </div>
    </div>
  </div>