Skip to content

GitLab

T
tangled
Commit 0ad7d2d0 authored by Esmael El-Moslimany's avatar Esmael El-Moslimany Committed by Commit Bot
Browse files
Options

PDF WebUI: replace paper-button with cr-button 

Bug: 967793
Change-Id: I67cef5afc4cabc111be9163e895623e09c0c05f9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1645149Reviewed-by: default avatarRebekah Potter <rbpotter@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#667343}
parent 454a31ad
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 57 deletions
chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html
View file @ 0ad7d2d0
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<dom-module id="viewer-error-screen">
<template>
<style include="paper-button-style cr-hidden-style"></style>
<style include="cr-hidden-style"></style>
<cr-dialog id="dialog" no-cancel>
<div slot="title">[[strings.errorDialogTitle]]</div>
<div slot="body">[[strings.pageLoadFailed]]</div>
<div slot="button-container" hidden$="[[!reloadFn]]">
<paper-button class="action-button" on-click="reload">
<cr-button class="action-button" on-click="reload">
[[strings.pageReload]]
</paper-button>
</cr-button>
</div>
</cr-dialog>
</template>
......
chrome/browser/resources/pdf/elements/viewer-form-warning/viewer-form-warning.html
View file @ 0ad7d2d0
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<dom-module id="viewer-form-warning">
<template>
<style include="paper-button-style cr-hidden-style"></style>
<style include="cr-hidden-style"></style>
<cr-dialog id="dialog" no-cancel>
<div slot="title">[[strings.annotationFormWarningTitle]]</div>
<div slot="body">[[strings.annotationFormWarningDetail]]</div>
<div slot="button-container">
<paper-button class="cancel-button" on-click="onCancel">
<cr-button class="cancel-button" on-click="onCancel">
[[strings.annotationFormWarningKeepEditing]]
</paper-button>
<paper-button class="action-button" on-click="onAction">
</cr-button>
<cr-button class="action-button" on-click="onAction">
[[strings.annotationFormWarningDiscard]]
</paper-button>
</cr-button>
</div>
</cr-dialog>
</template>
......
chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html
View file @ 0ad7d2d0
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<dom-module id="viewer-password-screen">
<template>
<style include="cr-shared-style paper-button-style">
<style include="cr-shared-style">
#password {
margin-top: var(--cr-form-field-bottom-spacing);
}
......@@ -26,9 +25,9 @@
</cr-input>
</div>
<div slot="button-container">
<paper-button id="submit" class="action-button" on-click="submit">
<cr-button id="submit" class="action-button" on-click="submit">
[[strings.passwordSubmit]]
</paper-button>
</cr-button>
</div>
</cr-dialog>
</template>
......
chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html
View file @ 0ad7d2d0
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
......@@ -49,23 +49,11 @@
}
#button {
border-radius: 4px;
cursor: pointer;
display: inline-block;
height: 32px;
--cr-icon-button-color: currentColor;
--cr-icon-button-height: 32px;
--cr-icon-button-icon-start-offset: 4px;
--cr-icon-button-width: 48px;
margin: 0;
min-width: 48px;
opacity: 0.38;
padding-bottom: 6px;
padding-inline-end: 2px;
padding-inline-start: 6px;
padding-top: 6px;
width: 48px;
}
#button:focus {
background-color: rgba(255, 255, 255, 0.24);
opacity: 1;
}
#button:hover {
......@@ -89,11 +77,9 @@
padding: 14px 28px;
}
</style>
<paper-button on-click="toggleDropdown" id="button"
aria-label$="{{header}}" title$="{{header}}">
<iron-icon icon="[[dropdownIcon]]"></iron-icon>
<iron-icon icon="cr:arrow-drop-down"></iron-icon>
</paper-button>
<cr-icon-button on-click="toggleDropdown" id="button"
iron-icon="[[dropdownIcon]],cr:arrow-drop-down" title$="[[header]]">
</cr-icon-button>
<div id="container">
<div id="dropdown" style="display: none">
......
chrome/test/data/webui/cr_elements/cr_icon_button_tests.js
View file @ 0ad7d2d0
......@@ -77,4 +77,22 @@ suite('cr-icon-button', function() {
button = document.body.querySelector('cr-icon-button');
assertEquals('-1', button.getAttribute('tabindex'));
});
test('ripple is a circle with background icon or single iron-icon', () => {
const ripple = button.getRipple();
assertEquals(undefined, button.ironIcon);
assertTrue(ripple.classList.contains('circle'));
button.ironIcon = 'icon';
assertTrue(ripple.classList.contains('circle'));
button.ironIcon = 'icon,icon';
assertFalse(ripple.classList.contains('circle'));
});
test('multiple iron icons', () => {
button.ironIcon = 'icon1,icon2';
const elements = button.shadowRoot.querySelectorAll('iron-icon');
assertEquals(2, elements.length);
assertEquals('icon1', elements[0].icon);
assertEquals('icon2', elements[1].icon);
});
});
ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html
View file @ 0ad7d2d0
......@@ -9,26 +9,28 @@
<style>
:host {
--cr-icon-button-color: var(--google-grey-refresh-700);
--cr-icon-button-icon-padding: calc((var(--cr-icon-button-size) -
var(--cr-icon-button-icon-size)) / 2);
--cr-icon-button-icon-start-offset: 0;
--cr-icon-button-icon-size: 20px;
--cr-icon-button-size: 36px;
--cr-icon-button-height: var(--cr-icon-button-size);
--cr-icon-button-width: var(--cr-icon-button-size);
/* Copied from paper-fab.html. Prevents square touch highlight. */
-webkit-tap-highlight-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: var(--cr-icon-button-icon-size);
border-radius: 4px;
color: var(--cr-icon-button-color);
cursor: pointer;
display: inline-flex;
height: var(--cr-icon-button-size);
height: var(--cr-icon-button-height);
margin-inline-end: var(--cr-icon-button-margin-end,
var(--cr-icon-ripple-margin));
margin-inline-start: var(--cr-icon-button-margin-start);
outline: none;
user-select: none;
vertical-align: middle;
width: var(--cr-icon-button-size);
width: var(--cr-icon-button-width);
}
:host([disabled]) {
......@@ -59,17 +61,20 @@
}
#icon {
align-items: center;
border-radius: 4px;
display: flex;
height: var(--cr-icon-button-size);
height: 100%;
justify-content: center;
padding-inline-start: var(--cr-icon-button-icon-start-offset);
/* The |_rippleContainer| must be position relative. */
position: relative;
width: var(--cr-icon-button-size);
width: 100%;
}
iron-icon {
--iron-icon-height: var(--cr-icon-button-icon-size);
--iron-icon-width: var(--cr-icon-button-icon-size);
padding: var(--cr-icon-button-icon-padding);
}
</style>
<div id="icon"></div>
......
ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js
View file @ 0ad7d2d0
......@@ -102,18 +102,20 @@ Polymer({
/** @private */
onIronIconChanged_: function() {
let ironIconElement = this.$$('iron-icon');
if (this.ironIcon) {
if (!ironIconElement) {
ironIconElement = document.createElement('iron-icon');
this.$.icon.appendChild(ironIconElement);
}
ironIconElement.icon = this.ironIcon;
this.shadowRoot.querySelectorAll('iron-icon').forEach(el => el.remove());
if (!this.ironIcon) {
return;
}
if (ironIconElement) {
ironIconElement.remove();
const icons = (this.ironIcon || '').split(',');
icons.forEach(icon => {
const element = document.createElement('iron-icon');
element.icon = icon;
this.$.icon.appendChild(element);
});
if (icons.length > 1) {
this.getRipple().classList.remove('circle');
} else {
this.getRipple().classList.add('circle');
}
},
......@@ -158,7 +160,9 @@ Polymer({
const ripple = Polymer.PaperRippleBehavior._createRipple();
ripple.id = 'ink';
ripple.setAttribute('recenters', '');
ripple.classList.add('circle');
if (!(this.ironIcon || '').includes(',')) {
ripple.classList.add('circle');
}
return ripple;
},
});
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