Merge pull request #1786 from OpenBazaar/rotateAvatar

Rotate avatar

Author: jjeffryes

css/obBase.css

@@ -138,6 +138,7 @@ textarea {
 
 input[type=range]{
   -webkit-appearance: none;
+  width: 100%;
 }
 
 input[type=range]::-webkit-slider-runnable-track {
@@ -150,7 +151,7 @@ input[type=range]::-webkit-slider-runnable-track {
 
 input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
-  border: #777;
+  border: #777 1px solid;
   height: 16px;
   width: 16px;
   border-radius: 50%;
@@ -162,10 +163,6 @@ input[type=range]:focus {
   outline: none;
 }
 
-input[type=range]:focus::-webkit-slider-runnable-track {
-  background: rgba(255,255,255,0.9);
-}
-
 textarea {
   background: none;
   outline: none;
@@ -4164,7 +4161,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   top: 0;
   height: 38px;
   line-height: 38px;
-  padding: 2px;
   border-radius: 0;
   overflow: hidden;
   border-top-right-radius: 3px;
@@ -4379,6 +4375,18 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   margin-right: 0;
 }
 
+.cropit-preview.cropit-image-loading .spinner {
+  opacity: 1;
+}
+
+.cropit-preview.cropit-image-loaded .cropit-preview-image-container {
+  cursor: move;
+}
+
+.cropit-image-zoom-input[disabled] {
+  opacity: .2;
+}
+
 .cropit-image-preview.cropit-avatar {
   background: url('../imgs/defaultUser.png');
   background-size: cover;
@@ -6133,8 +6141,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   margin-right: auto;
 }
 
-
-
 #ov1 .heightAuto {
   height: auto;
 }

js/languages/en-US.json

@@ -109,9 +109,6 @@
   "Facebook": "Facebook",
   "Instagram": "Instagram",
   "Twitter": "Twitter",
-  "PGPKey": "PGP Key",
-  "Signature": "PGP Signature",
-  "SignaturePlaceholder": "A PGP Signature is required if you enter a PGP Key",
   "Snapchat": "Snapchat",
   "BUYNOW": "Buy Now",
   "Description": "Description",

js/models/userProfileMd.js

@@ -42,7 +42,6 @@ module.exports = Backbone.Model.extend({
       secondary_color: "#317DB8",
       text_color: "#ffffff",
       background_color: "#063753",
-      pgp_key: "",
       nsfw: false,
       avatar_hash: "",
       handle: "",

js/templates/settings.html

@@ -262,16 +262,24 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Basic') %></h3>
                 </div>
               </div>
               <div class="flexCol-9 borderRight0 custCol-border">
-                <div id="settings-image-cropper" class="positionWrapper">
+                <div id="settings-image-cropper" class="positionWrapper flexRow">
                   <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>
-                    <input type="range" class="cropit-image-zoom-input rowTop20 row20  marginLeft12 hide" />
+                  <div class="pull-left marginLeft12 flexCol-3">
+                    <div>
+                      <input type="range" class="cropit-image-zoom-input rowTop20 row20 hide" />
+                    </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>
+                    <div>
+                      <input type="file" id="settingsAvatarInput" class="cropit-image-input hide" />
+                      <label for="settingsAvatarInput" class="btn btn-txt rowTop20 row20 width100 color-secondary custCol-secondary"><%= polyglot.t('NewAvatar') %></label>
+                    </div>
                   </div>
-                  <input type="file" id="settingsAvatarInput" class="cropit-image-input hide" />
-                  <label for="settingsAvatarInput" class="btn btn-txt rowTop20 marginLeft12 row20 color-secondary custCol-secondary"><%= polyglot.t('NewAvatar') %></label>
                 </div>
               </div>
             </div>
@@ -386,41 +394,6 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Social') %></h3>
                        value="<%= ob.page.profile.social_accounts.snapchat.username %>">
               </div>
             </div>
-<!--
-            <div class="flexRow TODO">
-              <div class="flexCol-3 borderRight custCol-border">
-                <div class="fieldItem">
-                  <label for="pgp_key"><%= polyglot.t('PGPKey') %></label>
-                </div>
-              </div>
-
-              <div class="flexCol-9 borderRight0 custCol-border">
-                <input name="pgp_key"
-                       type="text"
-                       id="pgp_key"
-                       placeholder="<%= polyglot.t('PGPKey') %>"
-                       class="fieldItem"
-                       value="<%= ob.page.profile.pgp_key %>">
-              </div>
-            </div>
-
-            <div class="flexRow foldIn js-settingsSignatureRow TODO">
-              <div class="flexCol-3 borderRight custCol-border">
-                <div class="fieldItem">
-                  <label for="signature"><%= polyglot.t('Signature') %></label>
-                </div>
-              </div>
-
-              <div class="flexCol-9 borderRight0 custCol-border">
-                <input name="signature"
-                       type="text"
-                       id="signature"
-                       placeholder="<%= polyglot.t('SignaturePlaceholder') %>"
-                       class="fieldItem">
-              </div>
-            </div>
-
-            -->
 
             <div class="flexRow borderBottom custCol-border marginTop20">
               <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('About') %></h3>

js/templates/userPage.html

@@ -427,7 +427,6 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
                   </div>
                 </a>
               <%}%>
-                <div class="textOpacity75 fontSize14"><%= polyglot.t('PGPKey') %></div>
               </div>
             </div>
           </div>
@@ -588,4 +587,4 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
   </div>
 </div>
 
-<%= ob.backToTopTmpl({ className: 'custCol-secondary' }) %>
+<%= ob.backToTopTmpl({ className: 'custCol-secondary' }) %>