From 0505043e18c8fc451e83aea49bc93f3f3dd6e900 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Fri, 13 Apr 2018 11:49:03 -0400 Subject: [PATCH] sync component --- src/popup/app-routing.animations.ts | 3 ++ src/popup/app-routing.module.ts | 7 ++++ src/popup/app.module.ts | 2 + src/popup/scss/base.scss | 9 +++-- src/popup/scss/misc.scss | 2 +- src/popup/scss/pages.scss | 9 +++++ src/popup/scss/popup.scss | 3 +- src/popup/settings/sync.component.html | 22 +++++++++++ src/popup/settings/sync.component.ts | 54 ++++++++++++++++++++++++++ 9 files changed, 106 insertions(+), 5 deletions(-) create mode 100644 src/popup/scss/pages.scss create mode 100644 src/popup/settings/sync.component.html create mode 100644 src/popup/settings/sync.component.ts diff --git a/src/popup/app-routing.animations.ts b/src/popup/app-routing.animations.ts index 3b95c88f56..855eccba9b 100644 --- a/src/popup/app-routing.animations.ts +++ b/src/popup/app-routing.animations.ts @@ -136,4 +136,7 @@ export const routerTransition = trigger('routerTransition', [ transition('edit-folder => folders, add-folder => folders', outSlideDown), transition('tabs => lock', inSlideDown), + + transition('tabs => sync', inSlideLeft), + transition('sync => tabs', outSlideRight), ]); diff --git a/src/popup/app-routing.module.ts b/src/popup/app-routing.module.ts index 8660a7a59f..ffaf3c607b 100644 --- a/src/popup/app-routing.module.ts +++ b/src/popup/app-routing.module.ts @@ -22,6 +22,7 @@ import { ExportComponent } from './settings/export.component'; import { FolderAddEditComponent } from './settings/folder-add-edit.component'; import { FoldersComponent } from './settings/folders.component'; import { SettingsComponent } from './settings/settings.component'; +import { SyncComponent } from './settings/sync.component'; import { TabsComponent } from './tabs.component'; import { AddEditComponent } from './vault/add-edit.component'; import { AttachmentsComponent } from './vault/attachments.component'; @@ -154,6 +155,12 @@ const routes: Routes = [ canActivate: [AuthGuardService], data: { state: 'edit-folder' }, }, + { + path: 'sync', + component: SyncComponent, + canActivate: [AuthGuardService], + data: { state: 'sync' }, + }, { path: 'tabs', component: TabsComponent, diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts index e465e41aeb..3bbd4a8653 100644 --- a/src/popup/app.module.ts +++ b/src/popup/app.module.ts @@ -30,6 +30,7 @@ import { ExportComponent } from './settings/export.component'; import { FolderAddEditComponent } from './settings/folder-add-edit.component'; import { FoldersComponent } from './settings/folders.component'; import { SettingsComponent } from './settings/settings.component'; +import { SyncComponent } from './settings/sync.component'; import { TabsComponent } from './tabs.component'; import { AddEditComponent } from './vault/add-edit.component'; import { AttachmentsComponent } from './vault/attachments.component'; @@ -102,6 +103,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component'; SettingsComponent, StopClickDirective, StopPropDirective, + SyncComponent, TabsComponent, TwoFactorOptionsComponent, TwoFactorComponent, diff --git a/src/popup/scss/base.scss b/src/popup/scss/base.scss index 785494bfb4..3749eba8a7 100644 --- a/src/popup/scss/base.scss +++ b/src/popup/scss/base.scss @@ -294,12 +294,15 @@ content { } } -.no-items { +.center-content, .no-items { display: flex; - height: 100%; - flex-direction: column; justify-content: center; align-items: center; + height: 100%; + flex-direction: column; +} + +.no-items { text-align: center; .fa { diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss index e2300bfeb1..b2f1c19578 100644 --- a/src/popup/scss/misc.scss +++ b/src/popup/scss/misc.scss @@ -1,6 +1,6 @@ @import "variables.scss"; -small { +small, .small { font-size: $font-size-small; } diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss new file mode 100644 index 0000000000..164360f9d8 --- /dev/null +++ b/src/popup/scss/pages.scss @@ -0,0 +1,9 @@ +@import "variables.scss"; + +app-sync { + content { + .btn { + margin-bottom: 10px; + } + } +} diff --git a/src/popup/scss/popup.scss b/src/popup/scss/popup.scss index cafa4d1c0f..fe77d09b0e 100644 --- a/src/popup/scss/popup.scss +++ b/src/popup/scss/popup.scss @@ -1,4 +1,4 @@ -@import "../css/webfonts.css"; +@import "../css/webfonts.css"; @import "variables.scss"; @import "base.scss"; @import "box.scss"; @@ -6,3 +6,4 @@ @import "misc.scss"; @import "plugins.scss"; @import "environment.scss"; +@import "pages.scss"; diff --git a/src/popup/settings/sync.component.html b/src/popup/settings/sync.component.html new file mode 100644 index 0000000000..e016a8a9c5 --- /dev/null +++ b/src/popup/settings/sync.component.html @@ -0,0 +1,22 @@ +
+
+ +
+
+ {{'sync' | i18n}} +
+
+
+ +
+ +

{{'lastSync' | i18n}} {{lastSync}}

+
+ diff --git a/src/popup/settings/sync.component.ts b/src/popup/settings/sync.component.ts new file mode 100644 index 0000000000..a9bc4cafa5 --- /dev/null +++ b/src/popup/settings/sync.component.ts @@ -0,0 +1,54 @@ +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { + Component, + OnInit, +} from '@angular/core'; +import { Router } from '@angular/router'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { SyncService } from 'jslib/abstractions/sync.service'; + +@Component({ + selector: 'app-sync', + templateUrl: 'sync.component.html', +}) +export class SyncComponent implements OnInit { + lastSync = '--'; + syncPromise: Promise; + + constructor(private syncService: SyncService, private router: Router, + private toasterService: ToasterService, private analytics: Angulartics2, + private i18nService: I18nService) { + } + + async ngOnInit() { + await this.setLastSync(); + } + + async sync() { + this.syncPromise = this.syncService.fullSync(true); + const success = await this.syncPromise; + if (success) { + await this.setLastSync(); + this.analytics.eventTrack.next({ action: 'Synced Full' }); + this.toasterService.popAsync('success', null, this.i18nService.t('syncingComplete')); + } else { + this.toasterService.popAsync('error', null, this.i18nService.t('syncingFailed')); + } + } + + async setLastSync() { + const last = await this.syncService.getLastSync(); + if (last != null) { + this.lastSync = last.toLocaleDateString() + ' ' + last.toLocaleTimeString(); + } else { + this.lastSync = this.i18nService.t('never'); + } + } + + close() { + this.router.navigate(['/tabs/settings']); + } +}