Disable rotate and zoom on avatar until the image is loaded.

- the rotate buttons for the avatar in Settings/Page are disabled until an image is uploaded
- the zoom slider is disabled instead of hidden until an image is uploaded
- layout issues were fixed
- Closes #1796

Author: jjeffryes

js/templates/settings.html

@@ -266,14 +266,14 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Basic') %></h3>
                   <div class="statusBar navBar fadeOut positionAbsolute js-avatarLoading">
                     <div class="pad20 rowTop20 width100"><h4 class="txt-center"><%= polyglot.t('LoadingImage') %></h4></div>
                   </div>
-                  <div class="cropit-image-preview cropit-avatar js-settingsAvatarPreview rowTop20 thumbnail thumbnail-huge box-border pull-left row20 marginLeft12"></div>
-                  <div class="pull-left marginLeft12 flexCol-3">
-                    <div>
-                      <input type="range" class="cropit-image-zoom-input rowTop20 row20 hide" />
+                  <div class="cropit-image-preview cropit-avatar js-settingsAvatarPreview rowTop20 thumbnail thumbnail-huge box-border row20 marginLeft12"></div>
+                  <div class="rowTop20 marginLeft12 flexCol-3">
+                    <div class="flexRow row20">
+                      <a class="btn flexExpand marginRight5 color-secondary custCol-secondary ion-reply disabled js-avatarRotateLeft"></a>
+                      <a class="btn flexExpand marginLeft5 color-secondary custCol-secondary ion-forward disabled js-avatarRotateRight"></a>
                     </div>
-                    <div class="flexRow">
-                      <a class="btn flexExpand marginRight5 color-secondary custCol-secondary ion-reply js-avatarRotateLeft"></a>
-                      <a class="btn flexExpand marginLeft5 color-secondary custCol-secondary ion-forward js-avatarRotateRight"></a>
+                    <div>
+                      <input type="range" class="cropit-image-zoom-input row20 disabled js-avatarZoom" />
                     </div>
                     <div>
                       <input type="file" id="settingsAvatarInput" class="cropit-image-input hide" />

js/views/settingsVw.js

@@ -247,11 +247,11 @@ module.exports = pageVw.extend({
           console.log(data);
         },
         onImageLoading: function(){
-          self.$('.cropit-image-zoom-input').removeClass('hide');
           self.newAvatar = true;
           self.$('.js-avatarLoading').removeClass('fadeOut');
         },
         onImageLoaded: function(){
+          self.$('.js-avatarZoom, .js-avatarRotateLeft, .js-avatarRotateRight').removeClass('disabled');
           self.$('.js-avatarLoading').addClass('fadeOut');
         },
         onImageError: function(errorObject, errorCode, errorMessage){