Index: chrome/browser/resources/settings/device_page/display_layout.html |
diff --git a/chrome/browser/resources/settings/device_page/display_layout.html b/chrome/browser/resources/settings/device_page/display_layout.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ac6b8228e649617dc00f3a73c3520fd6f513e273 |
--- /dev/null |
+++ b/chrome/browser/resources/settings/device_page/display_layout.html |
@@ -0,0 +1,42 @@ |
+<link rel="import" href="chrome://resources/html/polymer.html"> |
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html"> |
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
+<link rel="import" href="/settings_shared_css.html"> |
+ |
+<dom-module id="display-layout"> |
+ <template> |
+ <style include="settings-shared"> |
+ /* Use relative position with no offset so that the diplay divs (children), |
michaelpg
2016/06/23 04:29:34
all indent inside <style> is off by one
michaelpg
2016/06/23 04:29:34
display
stevenjb
2016/06/23 19:11:01
Done.
stevenjb
2016/06/23 19:11:01
Done.
|
+ which have absolute positions, are offset from the displayArea div. */ |
+ #displayArea { |
+ border: lightgrey solid 1px; |
+ height: 100%; |
+ position: relative; |
+ width: 100%; |
+ } |
+ .display { |
+ align-items: center; |
+ background: var(--paper-grey-200); |
+ border: var(--paper-grey-200) solid 1px; |
+ box-shadow: 2px 2px var(--paper-grey-400); |
+ display: flex; |
+ justify-content: center; |
+ position: absolute; |
+ } |
+ .display[selected] { |
+ border: var(--google-blue-500) solid 2px; |
+ box-shadow: none; |
+ } |
+ </style> |
+ <div id="displayArea" on-iron-resize="calculateDisplayArea_"> |
michaelpg
2016/06/23 04:29:34
calculateVisualScale_? (this should show a console
stevenjb
2016/06/23 19:11:01
Doh. Didn't test resize.
|
+ <template is="dom-repeat" items="[[displays]]"> |
+ <div class="display" style$="[[getDivStyle_(item, visualScale)]]" |
+ selected$="[[isSelected_(item, selectedDisplay)]]" |
+ on-tap="onSelectDisplayTap_"> |
+ [[item.name]] |
+ </div> |
+ </template> |
+ </div> |
+ </template> |
+ <script src="display_layout.js"></script> |
+</dom-module> |