Sync resolution menu

app/assets/templates/directives/sync-resolution-menu.html.haml

@@ -0,0 +1,48 @@
+.sn-component
+  .sk-panel.sk-panel-right#sync-resolution-menu
+    .sk-panel-header
+      .sk-panel-header-title Out of Sync
+      %a.sk-a.info.close-button{"ng-click" => "close()"} Close
+    .sk-panel-content
+
+      .sk-panel-section
+        .sk-panel-row
+          .sk-p
+            We've detected that the data on the server may not match the data in the current application session.
+            We will attempt to reconcile changes by downloading all data from the server.
+            No existing data will be overwritten. If the local contents of an item differ from what the server has,
+            we'll create a conflicted copy of it.
+
+      .sk-panel-section{"ng-if" => "!status.backupFinished"}
+        .sk-panel-row
+          Please download a backup before we attempt to perform a full account sync resolution.
+        .sk-panel-row
+          .sk-button-group
+            .sk-button.info{"ng-click" => "downloadBackup(true)"}
+              .sk-label Encrypted
+            .sk-button.info{"ng-click" => "downloadBackup(false)"}
+              .sk-label Decrypted
+            .sk-button.danger{"ng-click" => "skipBackup()"}
+              .sk-label Skip
+
+      .sk-panel-section{"ng-if" => "status.backupFinished"}
+        .sk-panel-row{"ng-if" => "!status.resolving && !status.attemptedResolution"}
+          .sk-button.info{"ng-click" => "performSyncResolution()"}
+            .sk-label Perform Sync Resolution
+
+        .sk-panel-row.justify-left{"ng-if" => "status.resolving"}
+          .sk-horizontal-group
+            .sk-spinner.small.info
+            .sk-label Attempting sync resolution...
+
+        .sk-panel-column{"ng-if" => "status.fail"}
+          .sk-panel-row.sk-label.danger Sync Resolution Failed
+          .sk-p.sk-panel-row
+            We attempted to reconcile local content and server content, but were unable to do so.
+            At this point, we recommend signing out of your account and signing back in. You may
+            wish to download a data backup before doing so.
+
+        .sk-panel-column{"ng-if" => "status.success"}
+          .sk-panel-row.sk-label.success Sync Resolution Success
+          .sk-p.sk-panel-row
+            Your local data is now in sync with the server. You may close this window.

app/assets/templates/footer.html.haml

@@ -27,7 +27,6 @@
           %span.neutral.sk-label {{ctrl.arbitraryStatusMessage}}
 
     .right
-
       .sk-app-bar-item{"ng-show" => "ctrl.securityUpdateAvailable", "ng-click" => "ctrl.openSecurityUpdate()"}
         %span.success.sk-label Security update available.
 
@@ -38,8 +37,9 @@
         .sk-label.subtle
           Last refreshed {{ctrl.lastSyncDate | appDateTime}}
 
-      .sk-app-bar-item{"ng-if" => "ctrl.outOfSync && !ctrl.isRefreshing"}
-        .sk-label.warning Potentially Out of Sync
+      .sk-app-bar-item{"ng-if" => "(ctrl.outOfSync && !ctrl.isRefreshing) || ctrl.showSyncResolution", "ng-click" => "ctrl.toggleSyncResolutionMenu()"}
+        .sk-label.warning{"ng-if" => "ctrl.outOfSync"} Potentially Out of Sync
+        %sync-resolution-menu{"ng-if" => "ctrl.showSyncResolution", "ng-click" => "$event.stopPropagation();", "close-function" => "ctrl.toggleSyncResolutionMenu"}
 
       .sk-app-bar-item{"ng-if" => "ctrl.lastSyncDate && ctrl.isRefreshing"}
         .sk-spinner.small