Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(6997)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/print_preview/print_preview.html

Issue 2101019: Print Preview component extension (Closed)
Patch Set: Put it under a flag Created 10 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/resources/print_preview/print_preview.css ('k') | chrome/browser/resources/shared/css/button.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/print_preview/print_preview.html
diff --git a/chrome/browser/resources/print_preview/print_preview.html b/chrome/browser/resources/print_preview/print_preview.html
new file mode 100644
index 0000000000000000000000000000000000000000..45207ded29b741f55271be237a06f831cc3f72e9
--- /dev/null
+++ b/chrome/browser/resources/print_preview/print_preview.html
@@ -0,0 +1,228 @@
+
+<html i18n-values="dir:textdirection">
+<head>
+<title>Print Preview</title>
+<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/list.css">
+<link rel="stylesheet" href="chrome://resources/css/tree.css">
+<link rel="stylesheet" href="chrome://resources/css/menu.css">
+<link rel="stylesheet" href="print_preview.css">
+<script src="chrome://resources/css/tree.css.js"></script>
+<script src="chrome://resources/js/cr.js"></script>
+<script src="chrome://resources/js/class_list.js"></script>
+<script src="chrome://resources/js/cr/event_target.js"></script>
+<script src="chrome://resources/js/cr/link_controller.js"></script>
+<script src="chrome://resources/js/cr/promise.js"></script>
+<script src="chrome://resources/js/cr/ui.js"></script>
+<script src="chrome://resources/js/cr/ui/array_data_model.js"></script>
+<script src="chrome://resources/js/cr/ui/list_selection_model.js"></script>
+<script src="chrome://resources/js/cr/ui/list_item.js"></script>
+<script src="chrome://resources/js/cr/ui/list.js"></script>
+<script src="chrome://resources/js/cr/ui/tree.js"></script>
+<script src="chrome://resources/js/cr/ui/splitter.js"></script>
+<script src="chrome://resources/js/cr/ui/command.js"></script>
+<script src="chrome://resources/js/cr/ui/menu_item.js"></script>
+<script src="chrome://resources/js/cr/ui/menu.js"></script>
+<script src="chrome://resources/js/cr/ui/position_util.js"></script>
+<script src="chrome://resources/js/cr/ui/menu_button.js"></script>
+<script src="chrome://resources/js/cr/ui/context_menu_handler.js"></script>
+
+<script src="chrome://resources/js/util.js"></script>
+<script src="chrome://resources/js/local_strings.js"></script>
+<script src="chrome://resources/js/i18n_template.js"></script>
+
+<script src="chrome://resources/js/class_list.js"></script>
+<script src="js/preview_list.js"></script>
+</head>
+<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+
+<div style="display:-webkit-box;height:100%;with:100%;">
+ <div style="-webkit-box-flex:0;" class="bar left">
+ <div class="main-options">
+ <div>Destination</div>
+ <button class="dropdown" menu="#printer-menu" id="printer-chooser">Ironhorse</button>
+ <br />
+ <button id="print-button" class="action">Print</button>
+ <button id="cancel-button">Cancel</button>
+ </div>
+ <div id="more-options">
+ <div class="printer-option">
+ <input type="checkbox">
+ Archive a copy to Docs
+ </div>
+ <div class="printer-option">
+ <input type="checkbox">
+ Two-sided (duplex)
+ </div>
+ <div class="printer-option">
+ <input type="checkbox">
+ Multiple Copies
+ </div>
+ <div id="hidden-options" class="closed">
+
+ </div>
+ <div id="more-options-toggle">
+ More Options
+ </div>
+ </div>
+ </div>
+ <div class="page-layout">
+ <img id="bigpreview" class="placeholder" src="ss.png">
+ </div>
+ <div class="preview-list-container">
+ <list id=preview></list>
+ </div>
+</div>
+
+
+<menu id="printer-menu">
+
+</menu>
+
+<script>
+const ArrayDataModel = cr.ui.ArrayDataModel;
+const PreviewList = pp.PreviewList;
+const List = cr.ui.List;
+const ListItem = cr.ui.ListItem;
+const Menu = cr.ui.Menu;
+const MenuItem = cr.ui.MenuItem;
+const MenuButton = cr.ui.MenuButton;
+const Command = cr.ui.Command;
+
+cr.ui.decorate('menu', Menu);
+cr.ui.decorate('button[menu]', MenuButton);
+cr.ui.decorate('command', Command);
+PreviewList.decorate(preview);
+
+var BigPreview = document.getElementById('bigpreview');
+var PrinterMenuButton = document.getElementById("printer-chooser");
+var PrintButton = document.getElementById('print-button');
+var PrinterMenu = document.getElementById("printer-menu");
+
+var moreOptionsToggle = document.getElementById('more-options-toggle');
+var hiddenOptions = document.getElementById('hidden-options');
+
+function getPreferredHeight(el) {
+ var oldHeight = el.style.height;
+ el.style.height = 'auto';
+ var height = el.offsetHeight;
+ el.style.height = oldHeight;
+ return height;
+}
+moreOptionsToggle.addEventListener('click', function(e) {
+ if (hiddenOptions.offsetHeight == 0) {
+ hiddenOptions.style.height = getPreferredHeight(hiddenOptions);
+ e.target.innerHTML = "Less Options";
+ } else {
+ hiddenOptions.style.height = 0;
+ e.target.innerHTML = "More Options";
+ }
+});
+
+// TODO(feldstein): Why can't this listen to the button instead?
+document.addEventListener('command', setActivePrinter);
+
+function setActivePrinter(e) {
+ var printer = e.command.printer;
+ PrinterMenuButton.innerHTML = printer.name;
+}
+
+function setPages(pages) {
+ var model = new ArrayDataModel(pages);
+ preview.dataModel = model;
+}
+
+function setPrinters(printers) {
+ printers.forEach(function(printer) {
+ var item;
+ if (!printer.name) {
+ item = document.createElement('hr');
+ } else {
+ item = new MenuItem();
+ item.className = printer.status;
+ item.printer = printer;
+ var command = new Command();
+ command.printer = printer;
+ command.disabled = (printer.status != 'online');
+ item.command = command;
+ item.innerHTML = printer.name + ' <span class="subtitle">' +
+ (printer.location || '') + '</span>';
+ }
+ PrinterMenu.appendChild(item);
+ });
+ PrinterMenu.decorate();
+}
+
+function pageClicked(e) {
+ if (preview.selectedItem.thumb) {
+ BigPreview.src = preview.selectedItem.thumb;
+ }
+}
+preview.addEventListener('change', pageClicked);
+
+document.getElementById('cancel-button').addEventListener('click', function(){
+ chrome.windows.getCurrent(function(win) {
+ chrome.tabs.getSelected(win.id, function(obj) {
+ chrome.tabs.remove(obj.id);
+ });
+ });
+});
+
+/*
+ * Mock Data
+ */
+
+var mockPages = [
+ {page: 1, thumb: 'page.png'},
+ {page: 2, thumb: 'page2.png'},
+ {page: 3},
+ {page: 4, thumb: 'page2.png'}
+];
+setPages(mockPages);
+
+var mockPrinters = [
+ {name: 'Ironhorse', location: 'MTV-1950-2', status: 'online'},
+ {name: 'acorn-color', location: 'MTV-1950-1', status: 'offline'},
+ {name: 'HP Office Jet 3600 Series With A Really Long Name Just For Testing Purposes',
+ location: 'Mountain View, CA', status: 'offline'},
+ {},
+ {name: 'Cloud Print', status: 'online'},
+];
+setPrinters(mockPrinters);
+
+</script>
+
+<div style="display:none" id="mock-hidden-options">
+ <hr />
+ <div class="printer-option">
+ <input type="checkbox">
+ Archive a copy to Docs
+ </div>
+ <div class="printer-option">
+ <input type="checkbox">
+ Two-sided (duplex)
+ </div>
+ <div class="printer-option">
+ <input type="checkbox">
+ Multiple Copies
+ </div>
+ <div class="printer-option">
+ <input type="checkbox">
+ Archive a copy to Docs
+ </div>
+ <div class="printer-option">
+ <input type="checkbox">
+ Two-sided (duplex)
+ </div>
+ <div class="printer-option">
+ <input type="checkbox">
+ Multiple Copies
+ </div>
+</div>
+<script>
+ document.getElementById('hidden-options').innerHTML =
+ document.getElementById('mock-hidden-options').innerHTML;
+</script>
+
+</body>
+</html>
« no previous file with comments | « chrome/browser/resources/print_preview/print_preview.css ('k') | chrome/browser/resources/shared/css/button.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698