Commit 5c427997 authored by alekseys@chromium.org's avatar alekseys@chromium.org

Advanced printing destination settings modal dialog (non-functional yet, just the skeleton).

BUG=394496

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@284317 0039d316-1c4b-4281-b951-d872f2087c98
parent 2e316b27
......@@ -8121,9 +8121,6 @@ Keep your key file in a safe place. You will need it to create new versions of y
Opening PDF in Preview
</message>
</if>
<message name="IDS_PRINT_PREVIEW_CANCEL_BUTTON" desc="Cancel button.">
Cancel
</message>
<message name="IDS_PRINT_PREVIEW_OPTION_ALL_PAGES" desc="Option to print all pages.">
All
</message>
......@@ -8274,9 +8271,6 @@ Keep your key file in a safe place. You will need it to create new versions of y
<message name="IDS_PRINT_PREVIEW_DESTINATION_SEARCH_TITLE" desc="Title of the destination search UI component.">
Select a destination
</message>
<message name="IDS_PRINT_PREVIEW_USER_INFO" desc="Message describing which user's destinations are being shown.">
Showing destinations for <ph name="EMAIL">$1<ex>testing@gmail.com</ex></ph>
</message>
<message name="IDS_PRINT_PREVIEW_ACCOUNT_SELECT_TITLE" desc="Title of the user's account selection control, to choose the account destinations are being shown for.">
Showing destinations for
</message>
......@@ -8360,6 +8354,15 @@ Keep your key file in a safe place. You will need it to create new versions of y
<message name="IDS_PRINT_PREVIEW_REGISTER_PROMO_BUTTON_TEXT">
Register
</message>
<message name="IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_SEARCH_BOX_PLACEHOLDER" desc="Text to put in a advanced settings search box when user has not entered a search query.">
Search settings
</message>
<message name="IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_TITLE" desc="Title of the advanced printer settings selection dialog.">
Advanced settings for <ph name="PRINTING_DESTINATION">$1<ex>Office printer</ex></ph>
</message>
<message name="IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_CONFIRM" desc="In title case: The text for the accept button on the printer advanced settings dialog.">
Apply
</message>
</if>
<!-- Load State -->
......
/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
/* Copyright 2014 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. */
......
<div id="search-box" class="search-box">
<div id="search-box-template" class="search-box" hidden>
<img src="../images/search.png" class="search-box-icon">
<input type="text" class="search-box-input"
i18n-values="placeholder:searchBoxPlaceholder">
<input type="text" class="search-box-input">
</div>
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Copyright 2014 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.
......@@ -7,23 +7,28 @@ cr.define('print_preview', function() {
/**
* Component that renders a search box for searching through destinations.
* @param {string} searchBoxPlaceholderText Search box placeholder text.
* @constructor
* @extends {print_preview.Component}
*/
function SearchBox() {
function SearchBox(searchBoxPlaceholderText) {
print_preview.Component.call(this);
/**
* Search box placeholder text.
* @private {string}
*/
this.searchBoxPlaceholderText_ = searchBoxPlaceholderText;
/**
* Timeout used to control incremental search.
* @type {?number}
* @private
* @private {?number}
*/
this.timeout_ = null;
/**
* Input box where the query is entered.
* @type {HTMLInputElement}
* @private
* @private {HTMLInputElement}
*/
this.input_ = null;
};
......@@ -36,20 +41,10 @@ cr.define('print_preview', function() {
SEARCH: 'print_preview.SearchBox.SEARCH'
};
/**
* CSS classes used by the search box.
* @enum {string}
* @private
*/
SearchBox.Classes_ = {
INPUT: 'search-box-input'
};
/**
* Delay in milliseconds before dispatching a SEARCH event.
* @type {number}
* @private {number}
* @const
* @private
*/
SearchBox.SEARCH_DELAY_ = 150;
......@@ -67,6 +62,14 @@ cr.define('print_preview', function() {
this.input_.focus();
},
/** @override */
createDom: function() {
this.setElementInternal(this.cloneTemplateInternal(
'search-box-template'));
this.input_ = this.getChildElement('.search-box-input');
this.input_.setAttribute('placeholder', this.searchBoxPlaceholderText_);
},
/** @override */
enterDocument: function() {
print_preview.Component.prototype.enterDocument.call(this);
......@@ -79,12 +82,6 @@ cr.define('print_preview', function() {
this.input_ = null;
},
/** @override */
decorateInternal: function() {
this.input_ = this.getElement().getElementsByClassName(
SearchBox.Classes_.INPUT)[0];
},
/**
* @return {string} The current query of the search box.
* @private
......@@ -109,9 +106,8 @@ cr.define('print_preview', function() {
* @private
*/
onInputInput_: function() {
if (this.timeout_) {
if (this.timeout_)
clearTimeout(this.timeout_);
}
this.timeout_ = setTimeout(
this.dispatchSearchEvent_.bind(this), SearchBox.SEARCH_DELAY_);
}
......
......@@ -2,6 +2,6 @@
<span class="summary"></span>
<div class="button-strip">
<button class="print default" i18n-content="printButton" disabled></button>
<button class="cancel" i18n-content="cancelButton"></button>
<button class="cancel" i18n-content="cancel"></button>
</div>
</div>
......@@ -10,11 +10,13 @@
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="chrome://resources/css/throbber.css">
<link rel="stylesheet" href="print_header.css">
<link rel="stylesheet" href="common/search_box.css">
<link rel="stylesheet" href="settings/destination_settings.css">
<link rel="stylesheet" href="settings/copies_settings.css">
<link rel="stylesheet" href="settings/page_settings.css">
<link rel="stylesheet" href="settings/margin_settings.css">
<link rel="stylesheet" href="settings/media_size_settings.css">
<link rel="stylesheet" href="settings/advanced_settings/advanced_settings.css">
<link rel="stylesheet" href="previewarea/preview_area.css">
<link rel="stylesheet" href="previewarea/margin_control_container.css">
<link rel="stylesheet" href="previewarea/margin_control.css">
......@@ -24,7 +26,6 @@
<link rel="stylesheet" href="search/destination_list.css">
<link rel="stylesheet" href="search/destination_list_item.css">
<link rel="stylesheet" href="search/destination_search.css">
<link rel="stylesheet" href="search/search_box.css">
<link rel="stylesheet" href="search/fedex_tos.css">
<script src="chrome://print/strings.js"></script>
......@@ -77,12 +78,14 @@
</div>
</div>
<include src="search/destination_search.html"/>
<include src="settings/advanced_settings/advanced_settings.html"/>
<include src="no_destinations_promo.html"/>
<div id="main-container">
<include src="previewarea/preview_area.html"/>
</div>
<!-- HTML Templates -->
<include src="common/search_box.html"/>
<include src="previewarea/margin_control.html"/>
<include src="search/destination_list.html"/>
<include src="search/destination_list_item.html"/>
......
......@@ -165,6 +165,14 @@ cr.define('print_preview', function() {
this.printTicketStore_.headerFooter);
this.addChild(this.otherOptionsSettings_);
/**
* Component used to search for print destinations.
* @type {!print_preview.AdvancedSettings}
* @private
*/
this.advancedSettings_ = new print_preview.AdvancedSettings(this.metrics_);
this.addChild(this.advancedSettings_);
/**
* Area of the UI that holds the print preview.
* @type {!print_preview.PreviewArea}
......@@ -409,6 +417,7 @@ cr.define('print_preview', function() {
this.colorSettings_.decorate($('color-settings'));
this.marginSettings_.decorate($('margin-settings'));
this.otherOptionsSettings_.decorate($('other-options-settings'));
this.advancedSettings_.decorate($('advanced-settings'));
this.previewArea_.decorate($('preview-area'));
setIsVisible($('open-pdf-in-preview-link'), cr.isMac);
......@@ -1129,6 +1138,8 @@ cr.define('print_preview', function() {
});
// Pull in all other scripts in a single shot.
<include src="common/search_box.js"/>
<include src="data/page_number_set.js"/>
<include src="data/destination.js"/>
<include src="data/local_parsers.js"/>
......@@ -1176,6 +1187,7 @@ cr.define('print_preview', function() {
<include src="settings/margin_settings.js"/>
<include src="settings/destination_settings.js"/>
<include src="settings/other_options_settings.js"/>
<include src="settings/advanced_settings/advanced_settings.js"/>
<include src="previewarea/margin_control.js"/>
<include src="previewarea/margin_control_container.js"/>
......@@ -1188,7 +1200,6 @@ cr.define('print_preview', function() {
<include src="search/recent_destination_list.js"/>
<include src="search/destination_list_item.js"/>
<include src="search/destination_search.js"/>
<include src="search/search_box.js"/>
<include src="search/fedex_tos.js"/>
window.addEventListener('DOMContentLoaded', function() {
......
......@@ -6,7 +6,7 @@
<select class="account-select" id="account-select"></select>
</span>
<div class="close-button"></div>
<include src="search_box.html"/>
<div class="search-box-container"></div>
<div class="lists">
<div class="recent-list"></div>
<div class="local-list"></div>
......
......@@ -55,7 +55,8 @@ cr.define('print_preview', function() {
* @type {!print_preview.SearchBox}
* @private
*/
this.searchBox_ = new print_preview.SearchBox();
this.searchBox_ = new print_preview.SearchBox(
localStrings.getString('searchBoxPlaceholder'));
this.addChild(this.searchBox_);
/**
......@@ -260,7 +261,7 @@ cr.define('print_preview', function() {
/** @override */
decorateInternal: function() {
this.searchBox_.decorate($('search-box'));
this.searchBox_.render(this.getChildElement('.search-box-container'));
this.recentList_.render(this.getChildElement('.recent-list'));
this.localList_.render(this.getChildElement('.local-list'));
this.cloudList_.render(this.getChildElement('.cloud-list'));
......
/* Copyright 2014 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. */
#advanced-settings {
z-index: 3;
}
#advanced-settings.transparent {
opacity: 0;
overflow: hidden;
pointer-events: none;
}
#advanced-settings .page {
width: 640px;
}
#advanced-settings > .page > .close-button {
top: 9px;
}
#advanced-settings .search-box {
-webkit-user-select: none;
margin: 14px;
}
#advanced-settings .lists {
flex: 1;
overflow-y: auto;
}
#advanced-settings .lists > * {
-webkit-user-select: none;
padding: 0 14px 18px;
}
<div id="advanced-settings" class="advanced-settings overlay transparent" hidden>
<div class="page">
<h1 class="advanced-settings-title"></h1>
<div class="close-button"></div>
<div class="search-box-container"></div>
<div class="lists">
</div>
<div class="action-area">
<div class="button-strip">
<button id="cancel-button" i18n-content="cancel"></button>
<button id="done-button" i18n-content="advancedSettingsDialogConfirm"
class="default-button"></button>
</div>
</div>
</div>
</div>
// Copyright 2014 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.
cr.define('print_preview', function() {
'use strict';
/**
* Modal dialog for print destination's advanced settings.
* @param {!print_preview.Metrics} metrics Used to record usage statistics.
* @constructor
* @extends {print_preview.Component}
*/
function AdvancedSettings(metrics) {
print_preview.Component.call(this);
/** @private {!print_preview.Metrics} */
this.metrics_ = metrics;
/** @private {!print_preview.SearchBox} */
this.searchBox_ = new print_preview.SearchBox(
localStrings.getString('advancedSettingsSearchBoxPlaceholder'));
this.addChild(this.searchBox_);
/** @private {print_preview.Destination} */
this.destination_ = null;
};
AdvancedSettings.prototype = {
__proto__: print_preview.Component.prototype,
/**
* @param {!print_preview.Destination} destination Destination to show
* advanced settings for.
*/
showForDestination: function(destination) {
//assert(!this.destination_);
this.destination_ = destination;
this.getChildElement('.advanced-settings-title').textContent =
localStrings.getStringF('advancedSettingsDialogTitle',
this.destination_.displayName);
this.setIsVisible_(true);
},
/** @override */
enterDocument: function() {
print_preview.Component.prototype.enterDocument.call(this);
this.getElement().addEventListener('webkitTransitionEnd', function f(e) {
if (e.target != e.currentTarget || e.propertyName != 'opacity')
return;
if (e.target.classList.contains('transparent'))
setIsVisible(e.target, false);
});
this.tracker.add(
this.getChildElement('.page > .close-button'),
'click',
this.onCloseClick_.bind(this));
this.tracker.add(
this.getChildElement('#cancel-button'),
'click',
this.onCloseClick_.bind(this));
this.tracker.add(
this.searchBox_,
print_preview.SearchBox.EventType.SEARCH,
this.onSearch_.bind(this));
this.tracker.add(
this.getElement(), 'click', this.onOverlayClick_.bind(this));
this.tracker.add(
this.getChildElement('.page'),
'webkitAnimationEnd',
this.onAnimationEnd_.bind(this));
this.renderSettings_();
},
/** @override */
decorateInternal: function() {
this.searchBox_.render(this.getChildElement('.search-box-container'));
},
/**
* @return {boolean} Whether the component is visible.
* @private
*/
getIsVisible_: function() {
return !this.getElement().classList.contains('transparent');
},
/**
* @param {boolean} isVisible Whether the component is visible.
* @private
*/
setIsVisible_: function(isVisible) {
if (this.getIsVisible_() == isVisible)
return;
if (isVisible) {
setIsVisible(this.getElement(), true);
setTimeout(function(element) {
element.classList.remove('transparent');
}.bind(this, this.getElement()), 0);
this.searchBox_.focus();
} else {
this.getElement().classList.add('transparent');
this.searchBox_.setQuery('');
this.filterLists_(null);
this.destination_ = null;
}
},
/**
* @return {number} Height available for settings lists, in pixels.
* @private
*/
getAvailableListsHeight_: function() {
var elStyle = window.getComputedStyle(this.getElement());
return this.getElement().offsetHeight -
parseInt(elStyle.getPropertyValue('padding-top')) -
parseInt(elStyle.getPropertyValue('padding-bottom')) -
this.getChildElement('.lists').offsetTop;
},
/**
* Filters displayed settings with the given query.
* @param {?string} query Query to filter settings by.
* @private
*/
filterLists_: function(query) {
},
/**
* Resets the filter query.
* @private
*/
resetSearch_: function() {
this.searchBox_.setQuery(null);
this.filterLists_(null);
},
/**
* Renders all of the available settings.
* @private
*/
renderSettings_: function() {
},
/**
* Called when settings search query changes. Filters displayed settings
* with the given query.
* @param {Event} evt Contains search query.
* @private
*/
onSearch_: function(evt) {
this.filterLists_(evt.query);
},
/**
* Called when the close button is clicked. Hides the search widget.
* @private
*/
onCloseClick_: function() {
this.setIsVisible_(false);
this.resetSearch_();
},
/**
* Called when the overlay is clicked. Pulses the page.
* @param {Event} event Contains the element that was clicked.
* @private
*/
onOverlayClick_: function(event) {
if (event.target == this.getElement())
this.getChildElement('.page').classList.add('pulse');
},
/**
* Called when an animation ends on the page.
* @private
*/
onAnimationEnd_: function() {
this.getChildElement('.page').classList.remove('pulse');
}
};
// Export
return {
AdvancedSettings: AdvancedSettings
};
});
......@@ -166,7 +166,6 @@ content::WebUIDataSource* CreatePrintPreviewUISource() {
IDS_PRINT_INVALID_PRINTER_SETTINGS);
source->AddLocalizedString("printButton", IDS_PRINT_PREVIEW_PRINT_BUTTON);
source->AddLocalizedString("saveButton", IDS_PRINT_PREVIEW_SAVE_BUTTON);
source->AddLocalizedString("cancelButton", IDS_PRINT_PREVIEW_CANCEL_BUTTON);
source->AddLocalizedString("printing", IDS_PRINT_PREVIEW_PRINTING);
source->AddLocalizedString("printingToPDFInProgress",
IDS_PRINT_PREVIEW_PRINTING_TO_PDF_IN_PROGRESS);
......@@ -276,7 +275,6 @@ content::WebUIDataSource* CreatePrintPreviewUISource() {
IDS_PRINT_PREVIEW_MEDIA_SIZE_LABEL);
source->AddLocalizedString("destinationSearchTitle",
IDS_PRINT_PREVIEW_DESTINATION_SEARCH_TITLE);
source->AddLocalizedString("userInfo", IDS_PRINT_PREVIEW_USER_INFO);
source->AddLocalizedString("accountSelectTitle",
IDS_PRINT_PREVIEW_ACCOUNT_SELECT_TITLE);
source->AddLocalizedString("addAccountTitle",
......@@ -330,6 +328,15 @@ content::WebUIDataSource* CreatePrintPreviewUISource() {
IDS_PRINT_PREVIEW_COULD_NOT_PRINT);
source->AddLocalizedString("registerPromoButtonText",
IDS_PRINT_PREVIEW_REGISTER_PROMO_BUTTON_TEXT);
source->AddLocalizedString(
"advancedSettingsSearchBoxPlaceholder",
IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_SEARCH_BOX_PLACEHOLDER);
source->AddLocalizedString("advancedSettingsDialogTitle",
IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_TITLE);
source->AddLocalizedString(
"advancedSettingsDialogConfirm",
IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_CONFIRM);
source->AddLocalizedString("cancel", IDS_CANCEL);
source->SetJsonPath("strings.js");
source->AddResourcePath("print_preview.js", IDR_PRINT_PREVIEW_JS);
......
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