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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_history/app.vulcanized.html

Issue 2336503002: Replace paper-checkbox with a paper-icon-button-light (Closed)
Patch Set: fix closure + slightly more descriptive method Created 4 years, 3 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 unified diff | Download patch
« no previous file with comments | « chrome/browser/resources/md_history/app.crisper.js ('k') | chrome/browser/resources/md_history/history_item.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html><head><!-- 1 <html><head><!--
2 @license 2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!-- 9 --><!--
10 @license 10 @license
(...skipping 3502 matching lines...) Expand 10 before | Expand all | Expand 10 after
3513 } 3513 }
3514 3514
3515 </style> 3515 </style>
3516 3516
3517 <content></content> 3517 <content></content>
3518 3518
3519 </template> 3519 </template>
3520 3520
3521 </dom-module> 3521 </dom-module>
3522 3522
3523 <dom-module id="paper-checkbox" assetpath="chrome://resources/polymer/v1_0/paper -checkbox/" css-build="shadow">
3524 <template strip-whitespace="">
3525 <style scope="paper-checkbox">:host {
3526 display: inline-block;
3527 white-space: nowrap;
3528 cursor: pointer;
3529 --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
3530
3531 --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1p x);
3532 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s moothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
3533 line-height: 0;
3534 -webkit-tap-highlight-color: transparent;
3535 }
3536
3537 :host([hidden]) {
3538 display: none !important;
3539 }
3540
3541 :host(:focus) {
3542 outline: none;
3543 }
3544
3545 .hidden {
3546 display: none;
3547 }
3548
3549 #checkboxContainer {
3550 display: inline-block;
3551 position: relative;
3552 width: var(--calculated-paper-checkbox-size);
3553 height: var(--calculated-paper-checkbox-size);
3554 min-width: var(--calculated-paper-checkbox-size);
3555 margin: var(--paper-checkbox-margin, initial);
3556 vertical-align: var(--paper-checkbox-vertical-align, middle);
3557 background-color: var(--paper-checkbox-unchecked-background-color, trans parent);
3558 }
3559
3560 #ink {
3561 position: absolute;
3562
3563
3564 top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calcu lated-paper-checkbox-size)) / 2);
3565 left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calc ulated-paper-checkbox-size)) / 2);
3566 width: var(--calculated-paper-checkbox-ink-size);
3567 height: var(--calculated-paper-checkbox-ink-size);
3568 color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-colo r));
3569 opacity: 0.6;
3570 pointer-events: none;
3571 }
3572
3573 :host-context([dir="rtl"]) #ink {
3574 right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculate d-paper-checkbox-size)) / 2);
3575 left: auto;
3576 }
3577
3578 #ink[checked] {
3579 color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
3580 }
3581
3582 #checkbox {
3583 position: relative;
3584 box-sizing: border-box;
3585 height: 100%;
3586 border: solid 2px;
3587 border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-c olor));
3588 border-radius: 2px;
3589 pointer-events: none;
3590 -webkit-transition: background-color 140ms, border-color 140ms;
3591 transition: background-color 140ms, border-color 140ms;
3592 }
3593
3594 #checkbox.checked #checkmark {
3595 -webkit-animation: checkmark-expand 140ms ease-out forwards;
3596 animation: checkmark-expand 140ms ease-out forwards;
3597 }
3598
3599 @-webkit-keyframes checkmark-expand {
3600 0% {
3601 -webkit-transform: scale(0, 0) rotate(45deg);
3602 }
3603
3604 100% {
3605 -webkit-transform: scale(1, 1) rotate(45deg);
3606 }
3607
3608 }
3609
3610 @keyframes checkmark-expand {
3611 0% {
3612 transform: scale(0, 0) rotate(45deg);
3613 }
3614
3615 100% {
3616 transform: scale(1, 1) rotate(45deg);
3617 }
3618
3619 }
3620
3621 #checkbox.checked {
3622 background-color: var(--paper-checkbox-checked-color, var(--primary-color));
3623 border-color: var(--paper-checkbox-checked-color, var(--primary-color));
3624 }
3625
3626 #checkmark {
3627 position: absolute;
3628 width: 36%;
3629 height: 70%;
3630 border-style: solid;
3631 border-top: none;
3632 border-left: none;
3633 border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
3634 border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
3635 border-color: var(--paper-checkbox-checkmark-color, white);
3636 -webkit-transform-origin: 97% 86%;
3637 transform-origin: 97% 86%;
3638 box-sizing: content-box;
3639 }
3640
3641 :host-context([dir="rtl"]) #checkmark {
3642 -webkit-transform-origin: 50% 14%;
3643 transform-origin: 50% 14%;
3644 }
3645
3646 #checkboxLabel {
3647 position: relative;
3648 display: inline-block;
3649 vertical-align: middle;
3650 padding-left: var(--paper-checkbox-label-spacing, 8px);
3651 white-space: normal;
3652 line-height: normal;
3653 color: var(--paper-checkbox-label-color, var(--primary-text-color));
3654 ;
3655 }
3656
3657 :host([checked]) #checkboxLabel {
3658 color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-co lor, var(--primary-text-color)));
3659 ;
3660 }
3661
3662 :host-context([dir="rtl"]) #checkboxLabel {
3663 padding-right: var(--paper-checkbox-label-spacing, 8px);
3664 padding-left: 0;
3665 }
3666
3667 #checkboxLabel[hidden] {
3668 display: none;
3669 }
3670
3671 :host([disabled]) #checkbox {
3672 opacity: 0.5;
3673 border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-c olor));
3674 }
3675
3676 :host([disabled][checked]) #checkbox {
3677 background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-col or));
3678 opacity: 0.5;
3679 }
3680
3681 :host([disabled]) #checkboxLabel {
3682 opacity: 0.65;
3683 }
3684
3685 #checkbox.invalid:not(.checked) {
3686 border-color: var(--paper-checkbox-error-color, var(--error-color));
3687 }
3688
3689 </style>
3690
3691 <div id="checkboxContainer">
3692 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
3693 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
3694 </div>
3695 </div>
3696
3697 <div id="checkboxLabel"><content></content></div>
3698 </template>
3699
3700 </dom-module>
3701 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow"> 3523 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow">
3702 <template strip-whitespace=""> 3524 <template strip-whitespace="">
3703 <style scope="paper-icon-button-light">:host { 3525 <style scope="paper-icon-button-light">:host {
3704 vertical-align: middle; 3526 vertical-align: middle;
3705 color: inherit; 3527 color: inherit;
3706 outline: none; 3528 outline: none;
3707 width: 24px; 3529 width: 24px;
3708 height: 24px; 3530 height: 24px;
3709 background: none; 3531 background: none;
3710 margin: 0; 3532 margin: 0;
(...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after
3807 3629
3808 button.more-vert-button div { 3630 button.more-vert-button div {
3809 border: 2px solid var(--secondary-text-color); 3631 border: 2px solid var(--secondary-text-color);
3810 border-radius: 2px; 3632 border-radius: 2px;
3811 margin: 1px 10px; 3633 margin: 1px 10px;
3812 pointer-events: none; 3634 pointer-events: none;
3813 transform: scale(0.8); 3635 transform: scale(0.8);
3814 } 3636 }
3815 3637
3816 :host { 3638 :host {
3817 display: block; 3639 --checked-color: rgb(68, 136, 255);
3640 display: block;
3818 } 3641 }
3819 3642
3820 :host(:not([embedded])) #main-container { 3643 :host(:not([embedded])) #main-container {
3821 position: relative; 3644 position: relative;
3822 } 3645 }
3823 3646
3824 :host(:not([embedded])) #sizing-container { 3647 :host(:not([embedded])) #sizing-container {
3825 margin: var(--card-sizing_-_margin); max-width: var(--card-sizing_-_max-width) ; min-width: var(--card-sizing_-_min-width); padding: var(--card-sizing_-_paddin g); width: var(--card-sizing_-_width); 3648 margin: var(--card-sizing_-_margin); max-width: var(--card-sizing_-_max-width) ; min-width: var(--card-sizing_-_min-width); padding: var(--card-sizing_-_paddin g); width: var(--card-sizing_-_width);
3826 } 3649 }
3827 3650
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
3860 } 3683 }
3861 3684
3862 #title-and-domain { 3685 #title-and-domain {
3863 align-items: center; 3686 align-items: center;
3864 display: flex; 3687 display: flex;
3865 flex: 1; 3688 flex: 1;
3866 height: var(--item-height); 3689 height: var(--item-height);
3867 overflow: hidden; 3690 overflow: hidden;
3868 } 3691 }
3869 3692
3870 paper-checkbox { 3693 #checkbox {
3871 --paper-checkbox-checked-color: rgb(68, 136, 255); 3694 -webkit-margin-end: 6px;
3872 --paper-checkbox-size: 16px; 3695 -webkit-margin-start: 10px;
3873 --paper-checkbox-unchecked-color: var(--secondary-text-color); 3696 height: 40px;
3874 height: 16px; 3697 width: 40px;
3875 margin: 0 16px 0 20px; 3698 }
3876 padding: 2px; 3699
3877 width: 16px; 3700 :host([selected]) #checkbox {
3701 color: var(--checked-color);
3702 }
3703
3704 #checkmark {
3705 border: 2px solid var(--secondary-text-color);
3706 border-radius: 2px;
3707 height: 12px;
3708 margin: 12px;
3709 width: 12px;
3710 }
3711
3712 #checkmark::after {
3713 border-color: inherit;
3714 border-style: solid;
3715 border-width: 0 2px 2px 0;
3716 content: '';
3717 display: block;
3718 height: 70%;
3719 transform: scale(0) rotate(45deg);
3720 transform-origin: 97% 86%;
3721 width: 36%;
3722 }
3723
3724 :host-context([dir='rtl']) #checkmark::after {
3725 transform-origin: 50% 14%;
3726 }
3727
3728 :host([selected]) #checkmark {
3729 background: var(--checked-color);
3730 border-color: var(--checked-color);
3731 }
3732
3733 :host([selected]) #checkmark::after {
3734 border-color: white;
3735 transform: scale(1) rotate(45deg);
3736
3737 transition: transform 140ms ease-out;
3878 } 3738 }
3879 3739
3880 #time-accessed { 3740 #time-accessed {
3881 color: #646464; 3741 color: #646464;
3882 min-width: 96px; 3742 min-width: 96px;
3883 } 3743 }
3884 3744
3885 #domain { 3745 #domain {
3886 -webkit-margin-start: 16px; 3746 -webkit-margin-start: 16px;
3887 color: var(--secondary-text-color); 3747 color: var(--secondary-text-color);
3888 flex-shrink: 0; 3748 flex-shrink: 0;
3889 } 3749 }
3890 3750
3891 #menu-button { 3751 #menu-button {
3892 -webkit-margin-end: 12px; 3752 -webkit-margin-end: 12px;
3893 } 3753 }
3894 3754
3895 #star-container { 3755 #star-container {
3896 -webkit-margin-end: 4px; 3756 -webkit-margin-end: 4px;
3897 -webkit-margin-start: 12px; 3757 -webkit-margin-start: 12px;
3898 width: 32px; 3758 width: 32px;
3899 } 3759 }
3900 3760
3901 #bookmark-star { 3761 #bookmark-star {
3902 color: rgb(68, 136, 255); 3762 color: var(--checked-color);
3903 height: 32px; 3763 height: 32px;
3904 width: 32px; 3764 width: 32px;
3905 } 3765 }
3906 3766
3907 #bookmark-star iron-icon { 3767 #bookmark-star iron-icon {
3908 height: 16px; 3768 height: 16px;
3909 width: 16px; 3769 width: 16px;
3910 } 3770 }
3911 3771
3912 #time-gap-separator { 3772 #time-gap-separator {
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after
3964 3824
3965 <div id="sizing-container"> 3825 <div id="sizing-container">
3966 <div id="main-container"> 3826 <div id="main-container">
3967 <div id="background-clip"> 3827 <div id="background-clip">
3968 <div id="background"></div> 3828 <div id="background"></div>
3969 </div> 3829 </div>
3970 <div id="date-accessed" class="card-title"> 3830 <div id="date-accessed" class="card-title">
3971 [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]] 3831 [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]]
3972 </div> 3832 </div>
3973 <div id="item-container"> 3833 <div id="item-container">
3974 <paper-checkbox id="checkbox" on-mousedown="onCheckboxMousedown_" on-c lick="onCheckboxSelected_" checked="{{selected}}" disabled="[[selectionNotAllowe d_()]]" aria-label$="[[getEntrySummary_(item)]]"> 3834 <button is="paper-icon-button-light" id="checkbox" on-mousedown="onChe ckboxMousedown_" on-click="onCheckboxSelected_" disabled="[[selectionNotAllowed_ ()]]" role="checkbox" aria-checked$="[[getAriaChecked_(selected)]]" aria-label$= "[[getEntrySummary_(item)]]">
3975 </paper-checkbox> 3835 <div id="checkmark"></div>
3836 </button>
3976 <span id="time-accessed">[[item.readableTimestamp]]</span> 3837 <span id="time-accessed">[[item.readableTimestamp]]</span>
3977 <div class="website-icon" id="icon"></div> 3838 <div class="website-icon" id="icon"></div>
3978 <div id="title-and-domain"> 3839 <div id="title-and-domain">
3979 <a href="[[item.url]]" id="title" class="website-title" title="[[ite m.title]]" on-click="onLinkClick_" on-contextmenu="onLinkRightClick_"> 3840 <a href="[[item.url]]" id="title" class="website-title" title="[[ite m.title]]" on-click="onLinkClick_" on-contextmenu="onLinkRightClick_">
3980 <history-searched-label title="[[item.title]]" search-term="[[sear chTerm]]"></history-searched-label> 3841 <history-searched-label title="[[item.title]]" search-term="[[sear chTerm]]"></history-searched-label>
3981 </a> 3842 </a>
3982 <span id="domain">[[item.domain]]</span> 3843 <span id="domain">[[item.domain]]</span>
3983 </div> 3844 </div>
3984 <div id="star-container"> 3845 <div id="star-container">
3985 <template is="dom-if" if="[[item.starred]]"> 3846 <template is="dom-if" if="[[item.starred]]">
(...skipping 1252 matching lines...) Expand 10 before | Expand all | Expand 10 after
5238 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer=""> 5099 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer="">
5239 </history-side-bar> 5100 </history-side-bar>
5240 </app-drawer> 5101 </app-drawer>
5241 </template> 5102 </template>
5242 5103
5243 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 5104 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
5244 </iron-media-query> 5105 </iron-media-query>
5245 </template> 5106 </template>
5246 </dom-module> 5107 </dom-module>
5247 <script src="app.crisper.js"></script></body></html> 5108 <script src="app.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/app.crisper.js ('k') | chrome/browser/resources/md_history/history_item.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698