Merge pull request #1785 from OpenBazaar/orderAddressOnDrag

Makes Addresses in Settings Ordered by Dragging

Author: jjeffryes

css/obBase.css

@@ -4818,6 +4818,24 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   position: relative;
 }
 
+.addressBoxDragging .addressBox{
+  border-width: 2px;
+  border-style: solid;
+}
+
+.addressBoxGhost .addressBox{
+  border-width: 2px;
+  border-style: dashed;
+}
+
+.addressesWrapper .addressBox .defaultLabel {
+  display: none;
+}
+
+.addressesWrapper:first-child .addressBox .defaultLabel {
+  display: block;
+}
+
 .buyAddressWrapper {
   padding: 15px;
     word-wrap: break-word;

js/languages/en-US.json

@@ -127,6 +127,7 @@
   "Files": "Files",
   "NewAddress": "New Address",
   "CurrentAddress": "Current Addresses",
+  "DefaultAddress": "Default Address",
   "ReturnsPolicy": "Returns Policy",
   "Tags": "Tags",
   "Keywords": "Keywords",

js/templates/settings.html

@@ -833,11 +833,10 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Content') %></h3>
               <div class="flexRow">
                 <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('CurrentAddress') %></h3>
               </div>
-              <div class="flexRow pad5 rowTop15">
+              <div class="flexRow pad5 rowTop15 js-sortableAddresses">
                 <% _.each(ob.user.shipping_addresses, function(address, i){ %>
-                <% console.log(address) %>
-                <div class="flexCol-4 pad10 row15">
-                  <div class="addressBox custCol-secondary js-address">
+                <div class="flexCol-4 pad10 row15 addressesWrapper">
+                  <div class="addressBox custCol-secondary custCol-border-background js-address">
                     <div class="textOpacity1 row40">
                       <div><%= address.name %></div>
                       <div><%= address.street %></div>
@@ -860,6 +859,9 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('CurrentAddress') %><
                         <span class="fontSize12 clickable togLabelOn js-settingsAddressUnDelete"><%= polyglot.t('DontDelete') %></span>
                       </label>
                     </div>
+                    <div class="positionBottomRight defaultLabel padding10 note">
+                      <%= polyglot.t('DefaultAddress') %>
+                    </div>
                   </div>
                 </div>
                 <% }); %>

js/views/settingsVw.js

@@ -20,7 +20,8 @@ var __ = require('underscore'),
     SMTPConnection = require('smtp-connection'),
     MediumEditor = require('medium-editor'),
     validateMediumEditor = require('../utils/validateMediumEditor'),
-    getBTPrice = require('../utils/getBitcoinPrice');
+    getBTPrice = require('../utils/getBitcoinPrice'),
+    Sortable = require('sortablejs');
 
 module.exports = pageVw.extend({
 
@@ -233,6 +234,7 @@ module.exports = pageVw.extend({
         placeholder_text_single: window.polyglot.t('chosenJS.placeHolderTextSingle'),
         placeholder_text_multiple: window.polyglot.t('chosenJS.placeHolderTextMultiple')
       });
+
       $('#settings-image-cropper').cropit({
         $preview: self.$('.js-settingsAvatarPreview'),
         $fileInput: self.$('#settingsAvatarInput'),
@@ -255,6 +257,7 @@ module.exports = pageVw.extend({
           console.log(errorMessage);
         }
       });
+
       //cache elements used more than once
       self.$moderatorFeeInput = self.$('#moderatorFeeInput');
       self.$moderatorFeeHolder = self.$('.js-settingsModeratorFee');
@@ -286,6 +289,7 @@ module.exports = pageVw.extend({
           console.log(errorMessage);
         }
       });
+
       if (self.model.get('page').profile.header_hash){
         $('#settings-image-cropperBanner').cropit('imageSrc', self.serverUrl +'get_image?hash='+self.model.get('page').profile.header_hash);
         self.newBanner = false;
@@ -304,6 +308,12 @@ module.exports = pageVw.extend({
         }
       });
       editor.subscribe('blur', self.validateDescription);
+
+      self.sortableAddresses && self.sortableAddresses.destroy();
+      self.sortableAddresses = Sortable.create(self.$('.js-sortableAddresses')[0], {
+        chosenClass: "addressBoxDragging",
+        ghostClass: "addressBoxGhost"
+      });
     });
     return this;
   },