From a359420c3fea8c8ff228c0de7ae540229bc73101 Mon Sep 17 00:00:00 2001 From: ryoh Date: Mon, 7 Mar 2016 19:38:40 -0800 Subject: [PATCH] This patch just introduces details panel(just empty) & details button. It's under development, so please pass --enable-files-details-panel as an extra argument to activate this feature. BUG=274045 Review URL: https://codereview.chromium.org/1762623002 Cr-Commit-Position: refs/heads/master@{#379718} --- chrome/app/chromeos_strings.grdp | 3 + .../file_manager/private_api_strings.cc | 1 + chromeos/chromeos_switches.cc | 3 + chromeos/chromeos_switches.h | 1 + .../foreground/css/file_manager.css | 36 ++++++++++ .../images/files/ui/2x/details_white.png | Bin 0 -> 498 bytes .../images/files/ui/details_white.png | Bin 0 -> 317 bytes .../foreground/js/app_state_controller.js | 8 ++- .../foreground/js/compiled_resources.gyp | 1 + .../foreground/js/main_scripts.js | 1 + .../foreground/js/main_window_component.js | 27 ++++++++ .../foreground/js/ui/details_container.js | 63 ++++++++++++++++++ .../foreground/js/ui/file_manager_ui.js | 50 ++++++++++++++ ui/file_manager/file_manager/main.html | 13 +++- 14 files changed, 204 insertions(+), 3 deletions(-) create mode 100644 ui/file_manager/file_manager/foreground/images/files/ui/2x/details_white.png create mode 100644 ui/file_manager/file_manager/foreground/images/files/ui/details_white.png create mode 100644 ui/file_manager/file_manager/foreground/js/ui/details_container.js diff --git a/chrome/app/chromeos_strings.grdp b/chrome/app/chromeos_strings.grdp index 28bce4e0618e09..53076618e44498 100644 --- a/chrome/app/chromeos_strings.grdp +++ b/chrome/app/chromeos_strings.grdp @@ -998,6 +998,9 @@ Press any key to continue exploring. Sort options + + View details + Settings diff --git a/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc b/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc index 0dbfa19d2ae817..4c7f171d82befd 100644 --- a/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc +++ b/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc @@ -456,6 +456,7 @@ bool FileManagerPrivateGetStringsFunction::RunSync() { SET_STRING("FORMAT_DEVICE_BUTTON_LABEL", IDS_FILE_BROWSER_FORMAT_DEVICE_BUTTON_LABEL); SET_STRING("SORT_BUTTON_TOOLTIP", IDS_FILE_BROWSER_SORT_BUTTON_TOOLTIP); + SET_STRING("DETAIL_BUTTON_TOOLTIP", IDS_FILE_BROWSER_DETAIL_BUTTON_TOOLTIP); SET_STRING("GEAR_BUTTON_TOOLTIP", IDS_FILE_BROWSER_GEAR_BUTTON_TOOLTIP); SET_STRING("HOSTED_OFFLINE_MESSAGE", IDS_FILE_BROWSER_HOSTED_OFFLINE_MESSAGE); SET_STRING("HOSTED_OFFLINE_MESSAGE_PLURAL", diff --git a/chromeos/chromeos_switches.cc b/chromeos/chromeos_switches.cc index 37762723fe68b5..1fbad801422030 100644 --- a/chromeos/chromeos_switches.cc +++ b/chromeos/chromeos_switches.cc @@ -119,6 +119,9 @@ const char kEnableArc[] = "enable-arc"; // locate the device. const char kEnableConsumerManagement[] = "enable-consumer-management"; +// Enables details panel in Files app. +const char kEnableFilesDetailsPanel[] = "enable-files-details-panel"; + // If this switch is set, the device cannot be remotely disabled by its owner. const char kDisableDeviceDisabling[] = "disable-device-disabling"; diff --git a/chromeos/chromeos_switches.h b/chromeos/chromeos_switches.h index 92c24fcf23c615..0124dd4c57cd2c 100644 --- a/chromeos/chromeos_switches.h +++ b/chromeos/chromeos_switches.h @@ -61,6 +61,7 @@ CHROMEOS_EXPORT extern const char kEafePath[]; CHROMEOS_EXPORT extern const char kEnableArc[]; CHROMEOS_EXPORT extern const char kEnableConsumerManagement[]; CHROMEOS_EXPORT extern const char kEnableExtensionAssetsSharing[]; +CHROMEOS_EXPORT extern const char kEnableFilesDetailsPanel[]; CHROMEOS_EXPORT extern const char kEnableFirstRunUITransitions[]; CHROMEOS_EXPORT extern const char kEnableImeMenu[]; CHROMEOS_EXPORT extern const char kEnableKioskMode[]; diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css index 45f806fafe0cb6..f83f14fd06ece2 100644 --- a/ui/file_manager/file_manager/foreground/css/file_manager.css +++ b/ui/file_manager/file_manager/foreground/css/file_manager.css @@ -124,6 +124,24 @@ a:focus { flex-direction: column; } +/* Details pane */ +.details-container { + background-color: rgb(250, 250, 250); + flex: none; + max-width: 30%; + min-width: 100px; + overflow: hidden; + position: relative; +} + +#list-details-splitter:not([activated]) { + display: none; +} + +.details-container:not([activated]) { + display: none; +} + /* Directory tree at the left. */ .dialog-navigation-list { -webkit-border-end: 1px solid rgba(0, 0, 0, 0.15); @@ -449,6 +467,24 @@ body.check-select #sort-button { display: none; } +#details-button { + /** + * TODO(ryoh): This should be removed after we finally implement details + * panel. + */ + display: none; +} + +#details-button > .icon { + background-image: -webkit-image-set( + url(../images/files/ui/details_white.png) 1x, + url(../images/files/ui/2x/details_white.png) 2x); +} + +body.check-select #details-button { + display: none; +} + #gear-button > .icon { background-image: -webkit-image-set( url(../images/files/ui/menu_white.png) 1x, diff --git a/ui/file_manager/file_manager/foreground/images/files/ui/2x/details_white.png b/ui/file_manager/file_manager/foreground/images/files/ui/2x/details_white.png new file mode 100644 index 0000000000000000000000000000000000000000..e5b87280e43835f4d9356dd191ba95e5c7e903c5 GIT binary patch literal 498 zcmV$0e?wE zK~z}7<(Ium13?sp&lSX;O%Y*c*gI z!Gu&1lYo9UD=f(-PW~372Nsr{y>q^qoxOKP`tPzqf`By~?DXFB4?uL4cS5oLXGS;v?Lu+nP=4kgWu zG4aiM9>JLqc#yO)=IncKX2}i!AS$U6Li$Hi)XZv{fSGe zwXcC#p8y3j%a~cl2jZ%Duir3K`2n6o^eqPgltVHn5Wvi;lI}tPxc&YEg4RGT1b|$x zOn4=!HAeHMr0cE#W>%DR>DXBUNPD$D;TUsaW>3GW9Cw4*2Hr+!UI&tsvnBIEYyrg~ o%pZZx$=#NRaWI*jquHO;7r7(%%M3V2NB{r;07*qoM6N<$f<^_?Y5)KL literal 0 HcmV?d00001 diff --git a/ui/file_manager/file_manager/foreground/images/files/ui/details_white.png b/ui/file_manager/file_manager/foreground/images/files/ui/details_white.png new file mode 100644 index 0000000000000000000000000000000000000000..7618185f4fcdf7b2e8f05c9228df0f29f74e3c4a GIT binary patch literal 317 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Y)RhkE)4%caKYZ?lYt_f1s;*b zKpodXn9)gNb_Gz7y~NYkmHh!TGouRki&`^QpwKB#7sn8b(`zUD@-aG!wCor2J|uaB zuaH+;?2*em#|X}2w>WkF@|Yb8U6wP?#p>?k?UQbW#D&J~U)d=C&}q>UvkUB5YIhrs zSWbVo%yX5Omx!BMrsB#;>2@znza13tJbmE9u@}kDW=C&Z)Zb|MWe%IeMWd>T&F6~y z?z5g_70#M?aG_z#ug`3HMkO_&jmO!p>sysn@_978VJ>D{^GDy1H^$oZmqcq-z_cyZ zi#?(}mqtjRo}@O>FJ;oPeU{&hO&j?x7`$XzGq*VXU$6CbHD7l|n`AwpuNXXC{an^L HB{Ts5X(D&w literal 0 HcmV?d00001 diff --git a/ui/file_manager/file_manager/foreground/js/app_state_controller.js b/ui/file_manager/file_manager/foreground/js/app_state_controller.js index bfaa9301b3156c..7df9810eba2d0b 100644 --- a/ui/file_manager/file_manager/foreground/js/app_state_controller.js +++ b/ui/file_manager/file_manager/foreground/js/app_state_controller.js @@ -79,6 +79,7 @@ AppStateController.prototype.initialize = function(ui, directoryModel) { // Restore preferences. this.ui_.setCurrentListType( this.viewOptions_.listType || ListContainer.ListType.DETAIL); + this.ui_.setDetailsVisibility(!!this.viewOptions_.detailsVisibility); this.directoryModel_.getFileList().sort( this.viewOptions_.sortField || 'modificationTime', this.viewOptions_.sortDirection || 'desc'); @@ -97,7 +98,12 @@ AppStateController.prototype.saveViewOptions = function() { sortField: sortStatus.field, sortDirection: sortStatus.direction, columnConfig: {}, - listType: this.ui_.listContainer.currentListType + listType: this.ui_.listContainer.currentListType, + /** + * TODO(ryoh): Simplify this line after we finally implement details panel. + */ + detailsVisibility: this.ui_.detailsContainer && + this.ui_.detailsContainer.visible || false }; var cm = this.ui_.listContainer.table.columnModel; prefs.columnConfig = cm.exportColumnConfig(); diff --git a/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp b/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp index 5031555f765169..9b9a5da9340329 100644 --- a/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp +++ b/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp @@ -124,6 +124,7 @@ './ui/actions_submenu.js', './ui/banners.js', './ui/default_task_dialog.js', + './ui/details_container.js', './ui/dialog_footer.js', './ui/directory_tree.js', './ui/drag_selector.js', diff --git a/ui/file_manager/file_manager/foreground/js/main_scripts.js b/ui/file_manager/file_manager/foreground/js/main_scripts.js index e826ffd9afd558..c7c905aced534b 100644 --- a/ui/file_manager/file_manager/foreground/js/main_scripts.js +++ b/ui/file_manager/file_manager/foreground/js/main_scripts.js @@ -140,6 +140,7 @@ // // // +// // // // diff --git a/ui/file_manager/file_manager/foreground/js/main_window_component.js b/ui/file_manager/file_manager/foreground/js/main_window_component.js index 0a1419eff242d1..12c83cadedc4c7 100644 --- a/ui/file_manager/file_manager/foreground/js/main_window_component.js +++ b/ui/file_manager/file_manager/foreground/js/main_window_component.js @@ -124,6 +124,8 @@ function MainWindowComponent( 'pathclick', this.onBreadcrumbClick_.bind(this)); ui.toggleViewButton.addEventListener( 'click', this.onToggleViewButtonClick_.bind(this)); + ui.detailsButton.addEventListener( + 'click', this.onDetailsButtonClick_.bind(this)); directoryModel.addEventListener( 'directory-changed', this.onDirectoryChanged_.bind(this)); volumeManager.addEventListener( @@ -132,6 +134,8 @@ function MainWindowComponent( this.onDriveConnectionChanged_(); document.addEventListener('keydown', this.onKeyDown_.bind(this)); document.addEventListener('keyup', this.onKeyUp_.bind(this)); + selectionHandler.addEventListener('change', + this.onFileSelectionChanged_.bind(this)); } /** @@ -158,6 +162,17 @@ MainWindowComponent.prototype.onFileListFocus_ = function() { } }; +/** + * Handles file selection event. + * + * @private + */ +MainWindowComponent.prototype.onFileSelectionChanged_ = function(event) { + if (this.ui_.detailsContainer) { + this.ui_.detailsContainer.onFileSelectionChanged(event); + } +}; + /** * Handles mouse click or tap. * @@ -235,6 +250,18 @@ MainWindowComponent.prototype.onToggleViewButtonClick_ = function(event) { this.ui_.listContainer.focus(); }; +/** + * Handles click event on the toggle-view button. + * @param {Event} event Click event. + * @private + */ +MainWindowComponent.prototype.onDetailsButtonClick_ = function(event) { + var visible = this.ui_.detailsContainer.visible; + this.ui_.setDetailsVisibility(!visible); + this.appStateController_.saveViewOptions(); + this.ui_.listContainer.focus(); +}; + /** * KeyDown event handler for the document. * @param {Event} event Key event. diff --git a/ui/file_manager/file_manager/foreground/js/ui/details_container.js b/ui/file_manager/file_manager/foreground/js/ui/details_container.js new file mode 100644 index 00000000000000..1d54bad19c5493 --- /dev/null +++ b/ui/file_manager/file_manager/foreground/js/ui/details_container.js @@ -0,0 +1,63 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @param {!HTMLElement} element + * @param {!Element} splitter + * @param {!Element} button + * @param {!FilesToggleRipple} toggleRipple + * @constructor + * @struct + */ +function DetailsContainer(element, splitter, button, toggleRipple) { + /** + * Container element. + * @private {!HTMLElement} + * @const + */ + this.element_ = element; + /** + * Splitter element between the file list and the details panel. + * @private {!Element} + * @const + */ + this.splitter_ = splitter; + /** + * "View details" button element. + * @private {!Element} + * @const + */ + this.button_ = button; + /** + * Ripple element of "View details" button. + * @private {!Element} + * @const + */ + this.toggleRipple_ = toggleRipple; + /** + * @type {boolean} + */ + this.visible = false; + this.setVisibility(false); +} + +DetailsContainer.prototype.onFileSelectionChanged = function(event) { + var selection = event.target.selection; +}; + +/** + * Sets the details panel visibility + * @param {boolean} visibility True if the details panel is visible. + */ +DetailsContainer.prototype.setVisibility = function(visibility) { + if (visibility) { + this.splitter_.setAttribute('activated', ''); + this.element_.setAttribute('activated', ''); + } else { + this.splitter_.removeAttribute('activated'); + this.element_.removeAttribute('activated'); + } + this.visible = visibility; + this.toggleRipple_.activated = visibility; +}; diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js index 8f4db8affd3038..4c04632b78a0a3 100644 --- a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js +++ b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js @@ -162,6 +162,23 @@ function FileManagerUI(providersModel, element, launchParam) { this.sortButton = util.queryDecoratedElement( '#sort-button', cr.ui.MenuButton); + /** + * The button to open the details panel. + * @type {!Element} + * @const + */ + this.detailsButton = queryRequiredElement( + '#details-button', this.element); + + /** + * Ripple effect of details button. + * @private {!FilesToggleRipple} + * @const + */ + this.detailsButtonToggleRipple_ = + /** @type {!FilesToggleRipple} */ (queryRequiredElement( + 'files-toggle-ripple', this.detailsButton)); + /** * Ripple effect of sort button. * @private {!FilesToggleRipple} @@ -214,6 +231,12 @@ function FileManagerUI(providersModel, element, launchParam) { */ this.listContainer = null; + /** + * Details container. + * @type {DetailsContainer} + */ + this.detailsContainer = null; + /** * @type {!HTMLElement} */ @@ -327,6 +350,22 @@ FileManagerUI.prototype.initAdditionalUI = function( this.decorateSplitter_( queryRequiredElement('#navigation-list-splitter', this.element)); + // Details container. + chrome.commandLinePrivate.hasSwitch('enable-files-details-panel', + function(enabled) { + if (enabled) { + this.detailsButton.style.display = 'block'; + var listDetailsSplitter = + queryRequiredElement('#list-details-splitter', this.element); + this.decorateSplitter_(listDetailsSplitter); + this.detailsContainer = new DetailsContainer( + queryRequiredElement('#details-container', this.element), + listDetailsSplitter, + this.detailsButton, + this.detailsButtonToggleRipple_); + } + }.bind(this)); + // Location line. this.locationLine = locationLine; @@ -446,6 +485,17 @@ FileManagerUI.prototype.setCurrentListType = function(listType) { this.relayout(); }; +/** + * Sets the details panel visibility + * @param {boolean} visibility True if the details panel is visible. + */ +FileManagerUI.prototype.setDetailsVisibility = function(visibility) { + if (this.detailsContainer) { + this.detailsContainer.setVisibility(visibility); + this.relayout(); + } +}; + /** * Overrides default handling for clicks on hyperlinks. * In a packaged apps links with targer='_blank' open in a new tab by diff --git a/ui/file_manager/file_manager/main.html b/ui/file_manager/file_manager/main.html index ca171992e02e39..3639d5a773a83b 100644 --- a/ui/file_manager/file_manager/main.html +++ b/ui/file_manager/file_manager/main.html @@ -309,7 +309,13 @@
- +