Index: ui/file_manager/file_manager/foreground/js/import_controller.js |
diff --git a/ui/file_manager/file_manager/foreground/js/import_controller.js b/ui/file_manager/file_manager/foreground/js/import_controller.js |
index f28a901630c26cba34a23934987c5da4471fb27a..cb066f0209e34afb7194785a3c6d75fdf312323f 100644 |
--- a/ui/file_manager/file_manager/foreground/js/import_controller.js |
+++ b/ui/file_manager/file_manager/foreground/js/import_controller.js |
@@ -7,26 +7,15 @@ var importer = importer || {}; |
/** @enum {string} */ |
importer.ResponseId = { |
- EXECUTABLE: 'executable', |
+ READY: 'ready', |
HIDDEN: 'hidden', |
- ACTIVE_IMPORT: 'active_import', |
- INSUFFICIENT_SPACE: 'insufficient_space', |
- NO_MEDIA: 'no_media', |
+ IMPORTING: 'importing', |
+ INSUFFICIENT_SPACE: 'insufficient-space', |
+ NO_MEDIA: 'no-media', |
SCANNING: 'scanning' |
}; |
/** |
- * @typedef {{ |
- * id: !importer.ResponseId, |
- * label: string, |
- * visible: boolean, |
- * executable: boolean, |
- * coreIcon: string |
- * }} |
- */ |
-importer.CommandUpdate; |
- |
-/** |
* Class that orchestrates background activity and UI changes on |
* behalf of Cloud Import. |
* |
@@ -84,6 +73,9 @@ importer.ImportController = |
this.commandWidget_.addImportClickedListener( |
this.execute.bind(this)); |
+ |
+ this.commandWidget_.addDestinationClickedListener( |
+ this.showDestination.bind(this)); |
}; |
/** |
@@ -179,6 +171,14 @@ importer.ImportController.prototype.execute = function() { |
}; |
/** |
+ * Shows the import destination folder. |
+ */ |
+importer.ImportController.prototype.showDestination = function() { |
+ console.log('SET THE CURRENT DIRECTORY TO THE DESTINATION'); |
+ // this.environment_.setCurrentDirectory(); |
+}; |
+ |
+/** |
* Checks the environment and updates UI as needed. |
* @param {importer.ScanResult=} opt_scan If supplied, |
* @private |
@@ -192,7 +192,7 @@ importer.ImportController.prototype.checkState_ = function(opt_scan) { |
} |
if (!!this.activeImportTask_) { |
- this.updateUi_(importer.ResponseId.ACTIVE_IMPORT); |
+ this.updateUi_(importer.ResponseId.IMPORTING); |
return; |
} |
@@ -243,7 +243,7 @@ importer.ImportController.prototype.checkState_ = function(opt_scan) { |
} |
this.updateUi_( |
- importer.ResponseId.EXECUTABLE, |
+ importer.ResponseId.READY, // to import... |
opt_scan); |
}.bind(this)); |
}; |
@@ -251,82 +251,11 @@ importer.ImportController.prototype.checkState_ = function(opt_scan) { |
/** |
* @param {importer.ResponseId} responseId |
* @param {importer.ScanResult=} opt_scan |
- * |
- * @return {!importer.CommandUpdate} |
* @private |
*/ |
importer.ImportController.prototype.updateUi_ = |
function(responseId, opt_scan) { |
- switch(responseId) { |
- case importer.ResponseId.EXECUTABLE: |
- this.commandWidget_.update({ |
- id: responseId, |
- label: strf( |
- 'CLOUD_IMPORT_BUTTON_LABEL', |
- opt_scan.getFileEntries().length), |
- visible: true, |
- executable: true, |
- coreIcon: 'cloud-upload' |
- }); |
- this.commandWidget_.updateDetails(opt_scan); |
- break; |
- case importer.ResponseId.HIDDEN: |
- this.commandWidget_.update({ |
- id: responseId, |
- visible: false, |
- executable: false, |
- label: '** SHOULD NOT BE VISIBLE **', |
- coreIcon: 'cloud-off' |
- }); |
- this.commandWidget_.setDetailsVisible(false); |
- break; |
- case importer.ResponseId.ACTIVE_IMPORT: |
- this.commandWidget_.update({ |
- id: responseId, |
- visible: true, |
- executable: false, |
- label: str('CLOUD_IMPORT_ACTIVE_IMPORT_BUTTON_LABEL'), |
- coreIcon: 'swap-vert' |
- }); |
- this.commandWidget_.setDetailsVisible(false); |
- break; |
- case importer.ResponseId.INSUFFICIENT_SPACE: |
- this.commandWidget_.update({ |
- id: responseId, |
- visible: true, |
- executable: false, |
- label: strf( |
- 'CLOUD_IMPORT_INSUFFICIENT_SPACE_BUTTON_LABEL', |
- util.bytesToString(opt_scan.getTotalBytes())), |
- coreIcon: 'report-problem' |
- }); |
- this.commandWidget_.updateDetails(opt_scan); |
- break; |
- case importer.ResponseId.NO_MEDIA: |
- this.commandWidget_.update({ |
- id: responseId, |
- visible: true, |
- executable: false, |
- label: str('CLOUD_IMPORT_EMPTY_SCAN_BUTTON_LABEL'), |
- coreIcon: 'cloud-done' |
- }); |
- this.commandWidget_.updateDetails( |
- /** @type {!importer.ScanResult} */ (opt_scan)); |
- break; |
- case importer.ResponseId.SCANNING: |
- this.commandWidget_.update({ |
- id: responseId, |
- visible: true, |
- executable: false, |
- label: str('CLOUD_IMPORT_SCANNING_BUTTON_LABEL'), |
- coreIcon: 'autorenew' |
- }); |
- this.commandWidget_.updateDetails( |
- /** @type {!importer.ScanResult} */ (opt_scan)); |
- break; |
- default: |
- assertNotReached('Unrecognized response id: ' + responseId); |
- } |
+ this.commandWidget_.update(responseId, opt_scan); |
}; |
/** |
@@ -566,11 +495,19 @@ importer.CommandWidget = function() {}; |
*/ |
importer.CommandWidget.prototype.addImportClickedListener; |
-/** @param {!importer.CommandUpdate} update */ |
-importer.CommandWidget.prototype.update; |
+/** |
+ * Install a listener that get's called when the user wants to initiate |
+ * import. |
+ * |
+ * @param {function()} listener |
+ */ |
+importer.CommandWidget.prototype.addDestinationClickedListener; |
-/** @param {!importer.ScanResult} scan */ |
-importer.CommandWidget.prototype.updateDetails; |
+/** |
+ * @param {importer.ResponseId} responseId |
+ * @param {importer.ScanResult=} opt_scan |
+ */ |
+importer.CommandWidget.prototype.update; |
/** Resets details to default. */ |
importer.CommandWidget.prototype.resetDetails; |
@@ -594,25 +531,32 @@ importer.RuntimeCommandWidget = function() { |
/** @private {Element} */ |
this.detailsImportButton_ = |
- document.querySelector('#cloud-import-details .import'); |
+ document.querySelector('#cloud-import-details paper-button.import'); |
this.detailsImportButton_.onclick = this.onImportClicked_.bind(this); |
/** @private {Element} */ |
this.detailsPanel_ = document.getElementById('cloud-import-details'); |
/** @private {Element} */ |
- this.photoCount_ = |
- document.querySelector('#cloud-import-details .photo-count'); |
+ this.detailsPanelBody_ = |
+ document.querySelector('#cloud-import-details .main'); |
/** @private {Element} */ |
- this.spaceRequired_ = |
- document.querySelector('#cloud-import-details .space-required'); |
+ this.statusContent_ = |
+ document.querySelector('#cloud-import-details .status .content'); |
+ this.statusContent_.onclick = this.onStatusClicked_.bind(this); |
/** @private {Element} */ |
- this.icon_ = document.querySelector('#cloud-import-button core-icon'); |
+ this.toolbarIcon_ = |
+ document.querySelector('#cloud-import-button core-icon'); |
+ this.statusIcon_ = |
+ document.querySelector('#cloud-import-details .status core-icon'); |
/** @private {function()} */ |
this.importListener_; |
+ |
+ /** @private {function()} */ |
+ this.destinationListener_; |
}; |
/** @override */ |
@@ -622,49 +566,197 @@ importer.RuntimeCommandWidget.prototype.addImportClickedListener = |
this.importListener_ = listener; |
}; |
-/** @private */ |
-importer.RuntimeCommandWidget.prototype.onImportClicked_ = function() { |
+/** @override */ |
+importer.RuntimeCommandWidget.prototype.addDestinationClickedListener = |
+ function(listener) { |
+ console.assert(!this.destinationListener_); |
+ this.destinationListener_ = listener; |
+}; |
+ |
+/** |
+ * @param {Event} event Click event. |
+ * @private |
+ */ |
+importer.RuntimeCommandWidget.prototype.onImportClicked_ = function(event) { |
console.assert(!!this.importListener_); |
this.importListener_(); |
}; |
+/** |
+ * @param {Event} event Click event. |
+ * @private |
+ */ |
+importer.RuntimeCommandWidget.prototype.onStatusClicked_ = function(event) { |
+ console.assert(!!this.destinationListener_); |
+ // TODO(smckay): Only if the element is "destination-link". |
+ this.destinationListener_(); |
+}; |
+ |
/** @private */ |
importer.RuntimeCommandWidget.prototype.toggleDetails_ = function() { |
- this.setDetailsVisible(this.detailsPanel_.className === 'offscreen'); |
+ this.setDetailsVisible(this.detailsPanel_.className === 'hidden'); |
}; |
importer.RuntimeCommandWidget.prototype.setDetailsVisible = function(visible) { |
if (visible) { |
+ this.detailsPanel_.style.display = 'block'; |
mtomasz
2015/02/12 03:22:01
nit: Can we use this.detailsPanel_.hidden = false/
Steve McKay
2015/02/12 23:15:54
Done.
|
this.detailsPanel_.className = ''; |
} else { |
- this.detailsPanel_.className = 'offscreen'; |
+ this.detailsPanel_.className = 'hidden'; |
+ |
+ // When hiding outself, we want to wait for the visually |
mtomasz
2015/02/12 03:22:01
We can listen to webkitTransitionEnd instead.
Steve McKay
2015/02/12 23:15:54
Oh, thank you for saving me from that. I felt so d
|
+ // pleasing transition to finish before fully hiding |
+ // the element. This is necessary because an invisible |
+ // element is still on-screen (grapping mouse clicks) |
+ // even if the user can't see it. And since CSS transitions |
+ // don't cooperate with display: none...our hand was forced. |
+ setTimeout( |
+ /** @this {importer.RuntimeCommandWidget} */ |
+ function() { |
+ this.detailsPanel_.style.display = 'none'; |
+ }.bind(this), |
+ 200); |
} |
}; |
/** @override */ |
-importer.RuntimeCommandWidget.prototype.update = function(update) { |
- this.importButton_.setAttribute('title', update.label); |
- this.importButton_.disabled = !update.executable; |
- this.importButton_.style.display = |
- update.visible ? 'block' : 'none'; |
+importer.RuntimeCommandWidget.prototype.update = |
+ function(responseId, opt_scan) { |
+ switch(responseId) { |
+ case importer.ResponseId.HIDDEN: |
+ this.importButton_.disabled = true; |
+ this.detailsButton_.disabled = true; |
- this.icon_.setAttribute('icon', update.coreIcon); |
+ this.importButton_.style.display = 'none'; |
mtomasz
2015/02/12 03:22:01
nit: hidden = true
here and in other places
Steve McKay
2015/02/12 23:15:54
Done.
|
+ this.detailsButton_.style.display = 'none'; |
- this.detailsButton_.disabled = !update.executable; |
- this.detailsButton_.style.display = |
- update.visible ? 'block' : 'none'; |
-}; |
+ this.importButton_.setAttribute( |
+ 'title', |
+ '** SHOULD NOT BE VISIBLE **'); |
+ this.statusContent_.innerHTML = |
+ '** SHOULD NOT BE VISIBLE **'; |
-/** @override */ |
-importer.RuntimeCommandWidget.prototype.updateDetails = function(scan) { |
- this.photoCount_.textContent = scan.getFileEntries().length.toLocaleString(); |
- this.spaceRequired_.textContent = util.bytesToString(scan.getTotalBytes()); |
+ this.toolbarIcon_.setAttribute('icon', 'cloud-off'); |
+ this.statusIcon_.setAttribute('icon', 'cloud-off'); |
+ |
+ break; |
+ |
+ case importer.ResponseId.IMPORTING: |
+ console.assert(!!opt_scan, 'Scan not defined, but is required.'); |
+ |
+ this.importButton_.setAttribute('title', strf( |
+ 'CLOUD_IMPORT_TOOLTIP_IMPORTING', |
+ opt_scan.getFileEntries().length)); |
+ this.statusContent_.innerHTML = strf( |
+ 'CLOUD_IMPORT_STATUS_IMPORTING', |
+ opt_scan.getFileEntries().length); |
+ |
+ this.importButton_.disabled = true; |
+ this.detailsButton_.disabled = true; |
+ this.detailsImportButton_.disabled = true; |
+ |
+ this.importButton_.style.display = 'block'; |
mtomasz
2015/02/12 03:22:01
nit: ditto here and in other places
Steve McKay
2015/02/12 23:15:54
Done.
|
+ this.detailsButton_.style.display = 'block'; |
+ this.detailsImportButton_.style.display = 'block'; |
+ |
+ this.toolbarIcon_.setAttribute('icon', 'autorenew'); |
+ this.statusIcon_.setAttribute('icon', 'autorenew'); |
+ |
+ this.setDetailsVisible(false); |
+ break; |
+ |
+ case importer.ResponseId.INSUFFICIENT_SPACE: |
+ console.assert(!!opt_scan, 'Scan not defined, but is required.'); |
+ |
+ this.importButton_.setAttribute('title', strf( |
+ 'CLOUD_IMPORT_STATUS_INSUFFICIENT_SPACE')); |
+ this.statusContent_.innerHTML = strf( |
+ 'CLOUD_IMPORT_STATUS_INSUFFICIENT_SPACE', |
+ opt_scan.getFileEntries().length); |
+ |
+ this.importButton_.disabled = true; |
+ this.detailsButton_.disabled = false; |
+ this.detailsImportButton_.disabled = true; |
+ |
+ this.importButton_.style.display = 'block'; |
+ this.detailsButton_.style.display = 'block'; |
+ this.detailsImportButton_.style.display = 'block'; |
+ |
+ this.toolbarIcon_.setAttribute('icon', 'report-problem'); |
+ this.statusIcon_.setAttribute('icon', 'report-problem'); |
+ break; |
+ |
+ case importer.ResponseId.NO_MEDIA: |
+ this.importButton_.setAttribute('title', str( |
+ 'CLOUD_IMPORT_STATUS_NO_MEDIA')); |
+ this.statusContent_.innerHTML = str( |
+ 'CLOUD_IMPORT_STATUS_NO_MEDIA'); |
+ |
+ this.importButton_.disabled = false; |
+ this.detailsButton_.disabled = false; |
+ this.detailsImportButton_.disabled = true; |
+ |
+ this.importButton_.style.display = 'block'; |
+ this.detailsButton_.style.display = 'block'; |
+ // Hidden for now, since this is also the "done" importing case. |
+ this.detailsImportButton_.style.display = 'none'; |
+ |
+ this.toolbarIcon_.setAttribute('icon', 'cloud-done'); |
+ this.statusIcon_.setAttribute('icon', 'cloud-done'); |
+ break; |
+ |
+ case importer.ResponseId.READY: |
+ console.assert(!!opt_scan, 'Scan not defined, but is required.'); |
+ |
+ this.importButton_.setAttribute('title', strf( |
+ 'CLOUD_IMPORT_TOOLTIP_READY', |
+ opt_scan.getFileEntries().length)); |
+ this.statusContent_.innerHTML = strf( |
+ 'CLOUD_IMPORT_STATUS_READY', |
+ opt_scan.getFileEntries().length); |
+ |
+ this.importButton_.disabled = false; |
+ this.detailsButton_.disabled = false; |
+ this.detailsImportButton_.disabled = false; |
+ |
+ this.importButton_.style.display = 'block'; |
+ this.detailsButton_.style.display = 'block'; |
+ this.detailsImportButton_.style.display = 'block'; |
+ |
+ this.toolbarIcon_.setAttribute('icon', 'cloud-upload'); |
+ this.statusIcon_.setAttribute('icon', 'assignment'); |
+ break; |
+ |
+ case importer.ResponseId.SCANNING: |
+ console.assert(!!opt_scan, 'Scan not defined, but is required.'); |
+ |
+ this.importButton_.setAttribute('title', str( |
+ 'CLOUD_IMPORT_TOOLTIP_SCANNING')); |
+ this.statusContent_.innerHTML = strf( |
+ 'CLOUD_IMPORT_STATUS_SCANNING', |
+ opt_scan.getFileEntries().length); |
+ |
+ this.importButton_.disabled = true; |
+ this.detailsButton_.disabled = true; |
+ this.detailsImportButton_.disabled = true; |
+ |
+ this.importButton_.style.display = 'block'; |
+ this.detailsButton_.style.display = 'block'; |
+ this.detailsImportButton_.style.display = 'none'; |
+ |
+ this.toolbarIcon_.setAttribute('icon', 'autorenew'); |
+ this.statusIcon_.setAttribute('icon', 'autorenew'); |
+ break; |
+ |
+ default: |
+ assertNotReached('Unrecognized response id: ' + responseId); |
+ } |
}; |
/** @override */ |
importer.RuntimeCommandWidget.prototype.resetDetails = function() { |
- this.photoCount_.textContent = 0; |
- this.spaceRequired_.textContent = 0; |
+ // this.photoCount_.textContent = 0; |
mtomasz
2015/02/12 03:22:01
nit: Is this commented out on purpose?
Steve McKay
2015/02/12 23:15:54
Not needed anymore. Gone.
|
+ // this.spaceRequired_.textContent = 0; |
}; |
/** |