wip: avatar panning and zooming

src/views/logo-view.jsx

@@ -16,7 +16,7 @@ export default class LogoView extends React.PureComponent {
             <img id="logo" alt="logo" src="img/logo.svg" />
             <h2>Tinode Web</h2>
           </a>
-          <p><FormattedMessage id="label_client" defaultMessage="Client:" 
+          <p><FormattedMessage id="label_client" defaultMessage="Client:"
             description="Label for a client version" /> {version}</p>
           <p><FormattedMessage id="label_server" defaultMessage="Server:"
             description="Label for a server version" /> {this.props.serverVersion} ({this.props.serverAddress})</p>

src/views/sidepanel-view.jsx

@@ -5,6 +5,7 @@ import ErrorPanel from '../widgets/error-panel.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import SideNavbar from '../widgets/side-navbar.jsx';
 
+import AvatarCropView from './avatar-crop-view.jsx';
 import ContactsView from './contacts-view.jsx';
 import CreateAccountView from './create-account-view.jsx';
 import EditAccountView from './edit-account-view.jsx';
@@ -70,6 +71,11 @@ const messages = defineMessages({
     description: 'Sidepanel title for ValidationView.',
     defaultMessage: 'Confirm Credentials'
   },
+  crop: {
+    id: 'sidepanel_title_crop',
+    description: 'Sidepanel title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
   reset: {
     id: 'sidepanel_title_reset',
     description: 'Sidepanel title for PasswordResetView.',
@@ -239,6 +245,12 @@ class SidepanelView extends React.Component {
           <PasswordResetView
             onRequest={this.props.onPasswordResetRequest}
             onReset={this.props.onResetPassword} /> :
+
+          view === 'crop' ?
+          <AvatarCropView
+            onSubmit={this.props.onAvatarCropped}
+            onCancel={this.props.onCancel} /> :
+
           null}
       </div>
     );

src/views/tinode-web.jsx

@@ -381,7 +381,7 @@ class TinodeWeb extends React.Component {
     if (hash.path && hash.path.length > 0) {
       // Left-side panel selector.
       if (['register','settings','edit','notif','security','support','general',
-          'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
+          'cred','crop','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
         this.setState({sidePanelSelected: hash.path[0]});
       } else {
         console.log("Unknown sidepanel view", hash.path[0]);
@@ -1156,6 +1156,8 @@ class TinodeWeb extends React.Component {
       path = 'edit';
     } else if ('blocked' == parsed.path[0]) {
       path = 'security';
+    } else if ('crop' == parsed.path[0]) {
+      path = 'general';
     } else if (this.state.myUserId) {
       path = 'contacts';
     }

src/views/validation-view.jsx

@@ -78,12 +78,12 @@ class ValidationView extends React.PureComponent {
         }</FormattedMessage>
         </div>
         <div className="dialog-buttons">
-          <button className="primary" onClick={this.handleSubmit}>
-            <FormattedMessage id="button_confirm" defaultMessage="Confirm" description="Button [Confirm]" />
-          </button>
           <button className="secondary" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_confirm" defaultMessage="Confirm" description="Button [Confirm]" />
+          </button>
         </div>
       </div>
     );