diff options
Diffstat (limited to 'chrome/browser/resources/print_preview')
8 files changed, 82 insertions, 78 deletions
diff --git a/chrome/browser/resources/print_preview/print_preview.html b/chrome/browser/resources/print_preview/print_preview.html index 8b42e14..e5b4bc1 100644 --- a/chrome/browser/resources/print_preview/print_preview.html +++ b/chrome/browser/resources/print_preview/print_preview.html @@ -13,10 +13,12 @@ <link rel="stylesheet" href="common/search_box.css"> <link rel="stylesheet" href="common/search_bubble.css"> <link rel="stylesheet" href="settings/destination_settings.css"> + <link rel="stylesheet" href="settings/color_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/layout_settings.css"> <link rel="stylesheet" href="settings/advanced_options_settings.css"> <link rel="stylesheet" href="settings/advanced_settings/advanced_settings.css"> <link rel="stylesheet" href="settings/advanced_settings/advanced_settings_item.css"> diff --git a/chrome/browser/resources/print_preview/print_preview.js b/chrome/browser/resources/print_preview/print_preview.js index 6e3bd0e..3d52bee 100644 --- a/chrome/browser/resources/print_preview/print_preview.js +++ b/chrome/browser/resources/print_preview/print_preview.js @@ -1028,13 +1028,13 @@ cr.define('print_preview', function() { * @private */ setLayoutSettingsForTest_: function(portrait) { - var element = document.querySelector(portrait ? - '.layout-settings-portrait-radio' : - '.layout-settings-landscape-radio'); - if (element.checked) + var combobox = document.querySelector('.layout-settings-select'); + if (combobox.value == 'portrait') { this.nativeLayer_.previewReadyForTest(); - else - element.click(); + } else { + combobox.value = 'landscape'; + this.layoutSettings_.onSelectChange_(); + } }, /** diff --git a/chrome/browser/resources/print_preview/settings/color_settings.css b/chrome/browser/resources/print_preview/settings/color_settings.css new file mode 100644 index 0000000..a4dd16e --- /dev/null +++ b/chrome/browser/resources/print_preview/settings/color_settings.css @@ -0,0 +1,8 @@ +/* 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. */ + +#color-settings .color-settings-select { + height: 28px; + margin: 10px 0; +} diff --git a/chrome/browser/resources/print_preview/settings/color_settings.html b/chrome/browser/resources/print_preview/settings/color_settings.html index 40b1805..c04facd 100644 --- a/chrome/browser/resources/print_preview/settings/color_settings.html +++ b/chrome/browser/resources/print_preview/settings/color_settings.html @@ -4,13 +4,9 @@ hidden> <h1 i18n-content="optionColor"></h1> <div class="right-column"> - <div class="radio"><label> - <input class="color-option" type="radio" name="color"> - <span i18n-content="optionColor"></span> - </label></div> - <div class="radio"><label> - <input class="bw-option" type="radio" name="color" checked> - <span i18n-content="optionBw"></span> - </label></div> + <select class="color-settings-select"> + <option i18n-content="optionBw" value="bw" selected></option> + <option i18n-content="optionColor" value="color"></option> + </select> </div> </div> diff --git a/chrome/browser/resources/print_preview/settings/color_settings.js b/chrome/browser/resources/print_preview/settings/color_settings.js index 79cdf09..e1814f7 100644 --- a/chrome/browser/resources/print_preview/settings/color_settings.js +++ b/chrome/browser/resources/print_preview/settings/color_settings.js @@ -39,21 +39,14 @@ cr.define('print_preview', function() { /** @override */ set isEnabled(isEnabled) { - this.getChildElement('.color-option').disabled = !isEnabled; - this.getChildElement('.bw-option').disabled = !isEnabled; + this.select_.disabled = !isEnabled; }, /** @override */ enterDocument: function() { print_preview.SettingsSection.prototype.enterDocument.call(this); this.tracker.add( - this.getChildElement('.color-option'), - 'click', - this.colorTicketItem_.updateValue.bind(this.colorTicketItem_, true)); - this.tracker.add( - this.getChildElement('.bw-option'), - 'click', - this.colorTicketItem_.updateValue.bind(this.colorTicketItem_, false)); + this.select_, 'change', this.onSelectChange_.bind(this)); this.tracker.add( this.colorTicketItem_, print_preview.ticket_items.TicketItem.EventType.CHANGE, @@ -61,14 +54,38 @@ cr.define('print_preview', function() { }, /** + * Called when the select element is changed. Updates the print ticket + * color selection. + * @private + */ + onSelectChange_: function() { + var select = this.select_; + var isColor = select.options[select.selectedIndex].value == 'color'; + this.colorTicketItem_.updateValue(isColor); + }, + + /** + * @return {HTMLSelectElement} Select element containing the color options. + * @private + */ + get select_() { + return this.getChildElement('.color-settings-select'); + }, + + /** * Updates state of the widget. * @private */ updateState_: function() { if (this.isAvailable()) { - var isColorEnabled = this.colorTicketItem_.getValue(); - this.getChildElement('.color-option').checked = isColorEnabled; - this.getChildElement('.bw-option').checked = !isColorEnabled; + var select = this.select_; + var valueToSelect = this.colorTicketItem_.getValue() ? 'color' : 'bw'; + for (var i = 0; i < select.options.length; i++) { + if (select.options[i].value == valueToSelect) { + select.selectedIndex = i; + break; + } + } } this.updateUiStateInternal(); } diff --git a/chrome/browser/resources/print_preview/settings/layout_settings.css b/chrome/browser/resources/print_preview/settings/layout_settings.css new file mode 100644 index 0000000..1548a83 --- /dev/null +++ b/chrome/browser/resources/print_preview/settings/layout_settings.css @@ -0,0 +1,8 @@ +/* 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. */ + +#layout-settings .layout-settings-select { + height: 28px; + margin: 10px 0; +} diff --git a/chrome/browser/resources/print_preview/settings/layout_settings.html b/chrome/browser/resources/print_preview/settings/layout_settings.html index 9e70385..7ff05f5 100644 --- a/chrome/browser/resources/print_preview/settings/layout_settings.html +++ b/chrome/browser/resources/print_preview/settings/layout_settings.html @@ -1,18 +1,9 @@ <div id="layout-settings" class="two-column layout-settings" hidden> <h1 i18n-content="layoutLabel"></h1> <div class="right-column"> - <div class="radio"><label> - <input class="layout-settings-portrait-radio" - type="radio" - name="layout" - checked> - <span i18n-content="optionPortrait"></span> - </label></div> - <div class="radio"><label> - <input class="layout-settings-landscape-radio" - type="radio" - name="layout"> - <span i18n-content="optionLandscape"></span> - </label></div> + <select class="layout-settings-select"> + <option i18n-content="optionPortrait" value="portrait" selected></option> + <option i18n-content="optionLandscape" value="landscape"></option> + </select> </div> </div> diff --git a/chrome/browser/resources/print_preview/settings/layout_settings.js b/chrome/browser/resources/print_preview/settings/layout_settings.js index 057f48a..af0bbea 100644 --- a/chrome/browser/resources/print_preview/settings/layout_settings.js +++ b/chrome/browser/resources/print_preview/settings/layout_settings.js @@ -24,16 +24,6 @@ cr.define('print_preview', function() { this.landscapeTicketItem_ = landscapeTicketItem; }; - /** - * CSS classes used by the layout settings. - * @enum {string} - * @private - */ - LayoutSettings.Classes_ = { - LANDSCAPE_RADIO: 'layout-settings-landscape-radio', - PORTRAIT_RADIO: 'layout-settings-portrait-radio' - }; - LayoutSettings.prototype = { __proto__: print_preview.SettingsSection.prototype, @@ -49,21 +39,14 @@ cr.define('print_preview', function() { /** @override */ set isEnabled(isEnabled) { - this.landscapeRadioButton_.disabled = !isEnabled; - this.portraitRadioButton_.disabled = !isEnabled; + this.select_.disabled = !isEnabled; }, /** @override */ enterDocument: function() { print_preview.SettingsSection.prototype.enterDocument.call(this); this.tracker.add( - this.portraitRadioButton_, - 'click', - this.onLayoutButtonClick_.bind(this)); - this.tracker.add( - this.landscapeRadioButton_, - 'click', - this.onLayoutButtonClick_.bind(this)); + this.select_, 'change', this.onSelectChange_.bind(this)); this.tracker.add( this.landscapeTicketItem_, print_preview.ticket_items.TicketItem.EventType.CHANGE, @@ -71,30 +54,23 @@ cr.define('print_preview', function() { }, /** - * @return {HTMLInputElement} The portrait orientation radio button. - * @private - */ - get portraitRadioButton_() { - return this.getElement().getElementsByClassName( - LayoutSettings.Classes_.PORTRAIT_RADIO)[0]; - }, - - /** - * @return {HTMLInputElement} The landscape orientation radio button. + * Called when the select element is changed. Updates the print ticket + * layout selection. * @private */ - get landscapeRadioButton_() { - return this.getElement().getElementsByClassName( - LayoutSettings.Classes_.LANDSCAPE_RADIO)[0]; + onSelectChange_: function() { + var select = this.select_; + var isLandscape = + select.options[select.selectedIndex].value == 'landscape'; + this.landscapeTicketItem_.updateValue(isLandscape); }, /** - * Called when one of the radio buttons is clicked. Updates the print ticket - * store. + * @return {HTMLSelectElement} Select element containing the layout options. * @private */ - onLayoutButtonClick_: function() { - this.landscapeTicketItem_.updateValue(this.landscapeRadioButton_.checked); + get select_() { + return this.getChildElement('.layout-settings-select'); }, /** @@ -104,9 +80,15 @@ cr.define('print_preview', function() { */ onLandscapeTicketItemChange_: function() { if (this.isAvailable()) { - var isLandscapeEnabled = this.landscapeTicketItem_.getValue(); - this.portraitRadioButton_.checked = !isLandscapeEnabled; - this.landscapeRadioButton_.checked = isLandscapeEnabled; + var select = this.select_; + var valueToSelect = + this.landscapeTicketItem_.getValue() ? 'landscape' : 'portrait'; + for (var i = 0; i < select.options.length; i++) { + if (select.options[i].value == valueToSelect) { + select.selectedIndex = i; + break; + } + } } this.updateUiStateInternal(); } |