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

Unified Diff: chrome/browser/resources/settings/controls/dialog_drawer.html

Issue 2465433002: Create implementation of the side panel using a dialog. (Closed)
Patch Set: feedback Created 4 years 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
Index: chrome/browser/resources/settings/controls/dialog_drawer.html
diff --git a/chrome/browser/resources/settings/controls/dialog_drawer.html b/chrome/browser/resources/settings/controls/dialog_drawer.html
new file mode 100644
index 0000000000000000000000000000000000000000..6821fb261d3c1d5781258d298a31291adab760ff
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/dialog_drawer.html
@@ -0,0 +1,60 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<dom-module name="dialog-drawer">
+ <template>
+ <style>
+ :host {
+ --drawer-width: 256px;
+ background-color: #FFF;
+ border: none;
+ bottom: 0;
+ left: calc(-1 * var(--drawer-width));
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ top: 0;
+ transition: left 200ms ease;
dpapad 2016/12/09 18:57:53 Nit: perhaps you could also add one more variable,
hcarmona 2016/12/09 19:21:26 Done.
+ width: var(--drawer-width);
+ }
+
+ :host,
+ #container {
+ height: 100%;
+ }
+
+ :host(.opening) {
+ left: 0;
+ }
+
+ :host([align=right]) {
+ left: auto;
+ right: calc(-1 * var(--drawer-width));
+ transition: right 200ms ease;
+ }
+
+ :host(.opening[align=right]) {
+ right: 0;
+ }
+
+ :host::backdrop {
+ background: rgba(0, 0, 0, 0.5);
+ bottom: 0;
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transition: opacity 200ms ease;
+ }
+
+ :host(.opening)::backdrop {
+ opacity: 1;
+ }
+ </style>
+ <div id="container" on-tap="onContainerTap_">
+ <content></content>
+ </div>
+ </template>
+</dom-module>
+<script src="dialog_drawer.js"></script>

Powered by Google App Engine
This is Rietveld 408576698