Skip to content

GitLab

T
tangled
Commit c9513b9d authored by hirono@chromium.org's avatar hirono@chromium.org
Browse files
Options

Files.app: Let the PreviewPanel class control the visibility of the preview panel. 

Originally, PreviewPanel is not used from any code.
This CL lets the FileManager class and the FileSelectorHandler class use the PreviewPanel class to control the visibility of preview panel.

BUG=284215
TEST=manually
R=yoshiki@chromium.org

Review URL: https://codereview.chromium.org/23464030

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@221579 0039d316-1c4b-4281-b951-d872f2087c98
parent e85b42fb
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 109 deletions
chrome/browser/resources/file_manager/js/file_manager.js
View file @ c9513b9d
......@@ -81,6 +81,15 @@ DialogType.isModal = function(type) {
type == DialogType.SELECT_OPEN_MULTI_FILE;
};
/**
* @param {string} type Dialog type.
* @return {boolean} Whther the type is open dialog.
*/
DialogType.isOpenDialog = function(type) {
return type == DialogType.SELECT_OPEN_FILE ||
type == DialogType.SELECT_OPEN_MULTI_FILE;
};
/**
* Bottom magrin of the list and tree for transparent preview panel.
* @const
......@@ -833,6 +842,17 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
'pathclick', this.onBreadcrumbClick_.bind(this));
this.searchBreadcrumbs_.setHideLast(false);
this.previewPanel_ = new PreviewPanel(
dom.querySelector('.preview-panel'),
DialogType.isOpenDialog(this.dialogType) ?
PreviewPanel.VisibilityType.ALWAYS_VISIBLE :
PreviewPanel.VisibilityType.AUTO,
this.getCurrentDirectory());
this.previewPanel_.addEventListener(
PreviewPanel.Event.VISIBILITY_CHANGE,
this.onPreviewPanelVisibilityChange_.bind(this));
this.previewPanel_.initialize();
// Check the option to hide the selecting checkboxes.
this.table_.showCheckboxes = this.showCheckboxes_;
......@@ -1057,10 +1077,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
this.folderShortcutsModel_ = new FolderShortcutsDataModel();
this.selectionHandler_ = new FileSelectionHandler(this);
this.selectionHandler_.addEventListener('show-preview-panel',
this.onPreviewPanelVisibilityChanged_.bind(this, true));
this.selectionHandler_.addEventListener('hide-preview-panel',
this.onPreviewPanelVisibilityChanged_.bind(this, false));
var dataModel = this.directoryModel_.getFileList();
......@@ -1499,8 +1515,9 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
* Resize details and thumb views to fit the new window size.
* @private
*/
FileManager.prototype.onPreviewPanelVisibilityChanged_ = function(visible) {
var panelHeight = visible ? this.getPreviewPanelHeight_() : 0;
FileManager.prototype.onPreviewPanelVisibilityChange_ = function() {
var panelHeight = this.previewPanel_.visible ?
this.previewPanel_.height : 0;
this.grid_.setBottomMarginForPanel(panelHeight);
this.table_.setBottomMarginForPanel(panelHeight);
this.directoryTree_.setBottomMarginForPanel(panelHeight);
......@@ -1511,7 +1528,11 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
* @private
*/
FileManager.prototype.onDragStart_ = function() {
this.selectionHandler_.setPreviewPanelMustBeHidden(true);
// On open file dialog, the preview panel is always shown.
if (DialogType.isOpenDialog(this.dialogType))
return;
this.previewPanel_.visibilityType =
PreviewPanel.VisibilityType.ALWAYS_HIDDEN;
};
/**
......@@ -1519,21 +1540,10 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
* @private
*/
FileManager.prototype.onDragEnd_ = function() {
this.selectionHandler_.setPreviewPanelMustBeHidden(false);
};
/**
* Gets height of the preview panel, using cached value if available. This
* returns the value even when the preview panel is hidden.
*
* @return {number} Height of the preview panel. If failure, returns 0.
*/
FileManager.prototype.getPreviewPanelHeight_ = function() {
if (!this.cachedPreviewPanelHeight_) {
var previewPanel = this.dialogDom_.querySelector('.preview-panel');
this.cachedPreviewPanelHeight_ = previewPanel.clientHeight;
}
return this.cachedPreviewPanelHeight_;
// On open file dialog, the preview panel is always shown.
if (DialogType.isOpenDialog(this.dialogType))
return;
this.previewPanel_.visibilityType = PreviewPanel.VisibilityType.AUTO;
};
/**
......@@ -2462,6 +2472,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
this.updateUnformattedDriveStatus_();
this.updateTitle_();
this.updateGearMenu_();
this.previewPanel_.currentPath_ = this.getCurrentDirectory();
};
/**
......
chrome/browser/resources/file_manager/js/file_selection.js
View file @ c9513b9d
......@@ -26,6 +26,7 @@ function FileSelection(fileManager, indexes) {
this.iconType = null;
this.bytesKnown = false;
this.mustBeHidden_ = false;
this.mimeTypes = null;
// Synchronously compute what we can.
for (var i = 0; i < this.indexes.length; i++) {
......@@ -53,6 +54,8 @@ function FileSelection(fileManager, indexes) {
}
this.tasks = new FileTasks(this.fileManager_);
Object.seal(this);
}
/**
......@@ -156,11 +159,13 @@ function FileSelectionHandler(fileManager) {
// TODO(dgozman): create a shared object with most of UI elements.
this.okButton_ = fileManager.okButton_;
this.filenameInput_ = fileManager.filenameInput_;
this.previewPanel_ = fileManager.dialogDom_.querySelector('.preview-panel');
this.previewThumbnails_ = this.previewPanel_.
this.previewPanel_ = fileManager.previewPanel_;
this.previewPanelElement_ =
fileManager.dialogDom_.querySelector('.preview-panel');
this.previewThumbnails_ = this.previewPanelElement_.
querySelector('.preview-thumbnails');
this.previewSummary_ = this.previewPanel_.querySelector('.preview-summary');
this.previewSummary_ =
this.previewPanelElement_.querySelector('.preview-summary');
this.previewText_ = this.previewSummary_.querySelector('.preview-text');
this.calculatingSize_ = this.previewSummary_.
querySelector('.calculating-size');
......@@ -309,82 +314,6 @@ FileSelectionHandler.prototype.isFileSelectionAvailable = function() {
this.selection.allDriveFilesPresent;
};
/**
* Sets the flag to force the preview panel hidden.
* @param {boolean} hidden True to force hidden.
*/
FileSelectionHandler.prototype.setPreviewPanelMustBeHidden = function(hidden) {
this.previewPanelMustBeHidden_ = hidden;
this.updatePreviewPanelVisibility_();
};
/**
* Animates preview panel show/hide transitions.
*
* @private
*/
FileSelectionHandler.prototype.updatePreviewPanelVisibility_ = function() {
var panel = this.previewPanel_;
var state = panel.getAttribute('visibility');
var mustBeVisible =
// If one or more files are selected, show the file info.
(this.selection.totalCount > 0 ||
// If the directory is not root dir, show the directory info.
!PathUtil.isRootPath(this.fileManager_.getCurrentDirectory()) ||
// On Open File dialog, the preview panel is always shown.
this.fileManager_.dialogType == DialogType.SELECT_OPEN_FILE ||
this.fileManager_.dialogType == DialogType.SELECT_OPEN_MULTI_FILE);
var stopHidingAndShow = function() {
clearTimeout(this.hidingTimeout_);
this.hidingTimeout_ = 0;
setVisibility('visible');
}.bind(this);
var startHiding = function() {
setVisibility('hiding');
this.hidingTimeout_ = setTimeout(function() {
this.hidingTimeout_ = 0;
setVisibility('hidden');
cr.dispatchSimpleEvent(this, 'hide-preview-panel');
}.bind(this), 250);
}.bind(this);
var show = function() {
setVisibility('visible');
this.previewThumbnails_.textContent = '';
cr.dispatchSimpleEvent(this, 'show-preview-panel');
}.bind(this);
var setVisibility = function(visibility) {
panel.setAttribute('visibility', visibility);
};
switch (state) {
case 'visible':
if (!mustBeVisible || this.previewPanelMustBeHidden_)
startHiding();
break;
case 'hiding':
if (mustBeVisible && !this.previewPanelMustBeHidden_)
stopHidingAndShow();
break;
case 'hidden':
if (mustBeVisible && !this.previewPanelMustBeHidden_)
show();
}
};
/**
* @return {boolean} True if space reserverd for the preview panel.
* @private
*/
FileSelectionHandler.prototype.isPreviewPanelVisibile_ = function() {
return this.previewPanel_.getAttribute('visibility') == 'visible';
};
/**
* Update the selection summary in preview panel.
*
......@@ -493,7 +422,7 @@ FileSelectionHandler.prototype.updateFileSelectionAsync = function(selection) {
}
// Update preview panels.
var wasVisible = this.isPreviewPanelVisibile_();
var wasVisible = this.previewPanel_.visible;
var thumbnailEntries;
if (selection.totalCount == 0) {
thumbnailEntries = [
......@@ -509,7 +438,7 @@ FileSelectionHandler.prototype.updateFileSelectionAsync = function(selection) {
}.bind(this));
}
}
this.updatePreviewPanelVisibility_();
this.previewPanel_.entries = selection.entries;
this.updatePreviewPanelText_();
this.showPreviewThumbnails_(thumbnailEntries);
......@@ -520,7 +449,7 @@ FileSelectionHandler.prototype.updateFileSelectionAsync = function(selection) {
// Shows the breadcrumb list when a file is selected.
updateTarget = selection.entries[0].fullPath;
} else if (selection.totalCount == 0 &&
this.isPreviewPanelVisibile_()) {
this.previewPanel_.visible) {
// Shows the breadcrumb list when no file is selected and the preview
// panel is visible.
updateTarget = path;
......
chrome/browser/resources/file_manager/js/main_scripts.js
View file @ c9513b9d
......@@ -101,6 +101,7 @@
//<include src="suggest_apps_dialog.js"/>
//<include src="text_measure.js"/>
//<include src="tree.css.js"/>
//<include src="ui/preview_panel.js"/>
//<include src="url_constants.js"/>
//<include src="volume_manager.js"/>
//<include src="media/media_util.js"/>
......
chrome/browser/resources/file_manager/js/ui/preview_panel.js
View file @ c9513b9d
......@@ -92,11 +92,11 @@ PreviewPanel.Event = Object.freeze({
*/
PreviewPanel.VisibilityType = Object.freeze({
// Preview panel always shows.
ALWAYS: 'always',
ALWAYS_VISIBLE: 'alwaysVisible',
// Preview panel shows when the entries property are set.
AUTO: 'auto',
// Preview panel does not show.
HIDDEN: 'hidden'
ALWAYS_HIDDEN: 'alwaysHidden'
});
/**
......@@ -168,14 +168,14 @@ PreviewPanel.prototype.updateVisibility_ = function() {
var visibility = this.element_.getAttribute('visibility');
var newVisible = null;
switch (this.visibilityType_) {
case PreviewPanel.VisibilityType.ALWAYS:
case PreviewPanel.VisibilityType.ALWAYS_VISIBLE:
newVisible = true;
break;
case PreviewPanel.VisibilityType.AUTO:
newVisible = this.entries_.length != 0 ||
!PathUtil.isRootPath(this.currentPath_);
break;
case PreviewPanel.VisibilityType.HIDDEN:
case PreviewPanel.VisibilityType.ALWAYS_HIDDEN:
newVisible = false;
break;
default:
......
chrome/browser/resources/file_manager/main.html
View file @ c9513b9d
......@@ -114,6 +114,7 @@
<script src="js/suggest_apps_dialog.js"></script>
<script src="js/text_measure.js"></script>
<script src="js/tree.css.js"></script>
<script src="js/ui/preview_panel.js"></script>
<script src="js/url_constants.js"></script>
<script src="js/volume_manager.js"></script>
<script src="js/media/media_util.js"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment