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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2627383002: MD History: Replace app-drawer with cr-drawer (Closed)
Patch Set: Use correct close function Created 3 years, 11 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/lazy_load.crisper.js ('k') | chrome/browser/resources/md_history/side_bar.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) 2016 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2016 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 851 matching lines...) Expand 10 before | Expand all | Expand 10 after
862 </dom-module> 862 </dom-module>
863 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow"> 863 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow">
864 <template> 864 <template>
865 <style scope="cr-dialog">:host { 865 <style scope="cr-dialog">:host {
866 border: 0; 866 border: 0;
867 border-radius: 2px; 867 border-radius: 2px;
868 bottom: 0; 868 bottom: 0;
869 color: inherit; 869 color: inherit;
870 padding: 0; 870 padding: 0;
871 top: 0; 871 top: 0;
872 width: 512px;
872 } 873 }
873 874
874 :host::backdrop { 875 :host::backdrop {
875 background-color: rgba(0, 0, 0, 0.6); 876 background-color: rgba(0, 0, 0, 0.6);
876 bottom: 0; 877 bottom: 0;
877 left: 0; 878 left: 0;
878 position: fixed; 879 position: fixed;
879 right: 0; 880 right: 0;
880 top: 0; 881 top: 0;
881 } 882 }
(...skipping 15 matching lines...) Expand all
897 -webkit-margin-end: 6px; 898 -webkit-margin-end: 6px;
898 899
899 padding: 10px; 900 padding: 10px;
900 } 901 }
901 902
902 .body-container { 903 .body-container {
903 display: flex; 904 display: flex;
904 flex-direction: column; 905 flex-direction: column;
905 906
906 overflow: auto; 907 overflow: auto;
907 width: 512px;
908 } 908 }
909 909
910 :host ::content .body { 910 :host ::content .body {
911 padding-bottom: 12px; 911 padding-bottom: 12px;
912 padding-top: 12px; 912 padding-top: 12px;
913 } 913 }
914 914
915 :host ::content .body, :host ::content .title { 915 :host ::content .body, :host ::content .title {
916 -webkit-padding-end: 24px; 916 -webkit-padding-end: 24px;
917 -webkit-padding-start: 24px; 917 -webkit-padding-start: 24px;
(...skipping 28 matching lines...) Expand all
946 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close" aria-label$= "[[closeText]]"> 946 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close" aria-label$= "[[closeText]]">
947 </paper-icon-button> 947 </paper-icon-button>
948 </div> 948 </div>
949 <div class="body-container"> 949 <div class="body-container">
950 <content select=".body"></content> 950 <content select=".body"></content>
951 </div> 951 </div>
952 <content select=".button-container"></content> 952 <content select=".button-container"></content>
953 <content select=".footer"></content> 953 <content select=".footer"></content>
954 </template> 954 </template>
955 </dom-module> 955 </dom-module>
956 <dom-module name="cr-drawer">
957 <template>
958 <style>
959 :host {
960 --drawer-width: 256px;
961 --transition-timing: 200ms ease;
962 background-color: #fff;
963 border: none;
964 bottom: 0;
965 left: calc(-1 * var(--drawer-width));
966 margin: 0;
967 overflow: hidden;
968 padding: 0;
969 position: absolute;
970 top: 0;
971 transition: left var(--transition-timing);
972 width: var(--drawer-width);
973 }
956 974
975 :host,
976 #container {
977 height: 100%;
978 }
957 979
958 <dom-module id="app-drawer" assetpath="chrome://resources/polymer/v1_0/app-layou t/app-drawer/" css-build="shadow"> 980 :host(.opening) {
959 <template> 981 left: 0;
960 <style scope="app-drawer">:host { 982 }
961 position: fixed; 983
962 top: -120px; 984 :host([align=right]) {
985 left: auto;
986 right: calc(-1 * var(--drawer-width));
987 transition: right var(--transition-timing);
988 }
989
990 :host(.opening[align=right]) {
963 right: 0; 991 right: 0;
964 bottom: -120px; 992 }
965 left: 0;
966 993
967 visibility: hidden; 994 :host::backdrop {
968 995 background: rgba(0, 0, 0, 0.5);
969 transition: visibility 0.2s ease;
970 }
971
972 :host([opened]) {
973 visibility: visible;
974 }
975
976 :host([persistent]) {
977 width: var(--app-drawer-width, 256px);
978 }
979
980 :host([persistent][position=left]) {
981 right: auto;
982 }
983
984 :host([persistent][position=right]) {
985 left: auto;
986 }
987
988 #contentContainer {
989 position: absolute;
990 top: 0;
991 bottom: 0; 996 bottom: 0;
992 left: 0; 997 left: 0;
998 opacity: 0;
999 position: absolute;
1000 right: 0;
1001 top: 0;
1002 transition: opacity var(--transition-timing);
1003 }
993 1004
994 width: var(--app-drawer-width, 256px); 1005 :host(.opening)::backdrop {
995 padding: 120px 0; 1006 opacity: 1;
1007 }
996 1008
997 transition: 0.2s ease; 1009 :host ::content .drawer-header {
998 transition-property: -webkit-transform; 1010 -webkit-padding-start: 24px;
999 transition-property: transform; 1011 align-items: center;
1000 -webkit-transform: translate3d(-100%, 0, 0); 1012 border-bottom: var(--cr-separator-line);
1001 transform: translate3d(-100%, 0, 0); 1013 display: flex;
1014 font-size: 123.08%; /* go to 16px from 13px */
1015 min-height: 56px;
1016 }
1002 1017
1003 background-color: #FFF; 1018 :host ::content .drawer-content {
1004 1019 height: calc(100% - 56px);
1005 ; 1020 overflow: auto;
1006 } 1021 }
1007 1022 </style>
1008 :host([position=right]) > #contentContainer { 1023 <div id="container" on-tap="onContainerTap_">
1009 right: 0;
1010 left: auto;
1011
1012 -webkit-transform: translate3d(100%, 0, 0);
1013 transform: translate3d(100%, 0, 0);
1014 }
1015
1016 :host([swipe-open]) > #contentContainer::after {
1017 position: fixed;
1018 top: 0;
1019 bottom: 0;
1020 left: 100%;
1021
1022 visibility: visible;
1023
1024 width: 20px;
1025
1026 content: '';
1027 }
1028
1029 :host([swipe-open][position=right]) > #contentContainer::after {
1030 right: 100%;
1031 left: auto;
1032 }
1033
1034 :host([opened]) > #contentContainer {
1035 -webkit-transform: translate3d(0, 0, 0);
1036 transform: translate3d(0, 0, 0);
1037 }
1038
1039 #scrim {
1040 position: absolute;
1041 top: 0;
1042 right: 0;
1043 bottom: 0;
1044 left: 0;
1045
1046 transition: opacity 0.2s ease;
1047 -webkit-transform: translateZ(0);
1048 transform: translateZ(0);
1049
1050 opacity: 0;
1051 background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
1052 }
1053
1054 :host([opened]) > #scrim {
1055 opacity: 1;
1056 }
1057
1058 :host([opened][persistent]) > #scrim {
1059 visibility: hidden;
1060
1061
1062 opacity: 0;
1063 }
1064
1065 </style>
1066
1067 <div id="scrim" on-tap="close"></div>
1068
1069 <div id="contentContainer">
1070 <content></content> 1024 <content></content>
1071 </div> 1025 </div>
1072 </template> 1026 </template>
1073 1027 </dom-module>
1074 </dom-module>
1075 <dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_ 0/iron-overlay-behavior/" css-build="shadow"> 1028 <dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_ 0/iron-overlay-behavior/" css-build="shadow">
1076 1029
1077 <template> 1030 <template>
1078 <style scope="iron-overlay-backdrop">:host { 1031 <style scope="iron-overlay-backdrop">:host {
1079 position: fixed; 1032 position: fixed;
1080 top: 0; 1033 top: 0;
1081 left: 0; 1034 left: 0;
1082 width: 100%; 1035 width: 100%;
1083 height: 100%; 1036 height: 100%;
1084 background-color: var(--iron-overlay-backdrop-background-color, #000); 1037 background-color: var(--iron-overlay-backdrop-background-color, #000);
(...skipping 237 matching lines...) Expand 10 before | Expand all | Expand 10 after
1322 <content select="*"></content> 1275 <content select="*"></content>
1323 </div> 1276 </div>
1324 </div> 1277 </div>
1325 1278
1326 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> 1279 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
1327 1280
1328 </template> 1281 </template>
1329 1282
1330 </dom-module> 1283 </dom-module>
1331 </div><script src="lazy_load.crisper.js"></script></body></html> 1284 </div><script src="lazy_load.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/lazy_load.crisper.js ('k') | chrome/browser/resources/md_history/side_bar.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698