OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior
/iron-resizable-behavior.html"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior
/iron-resizable-behavior.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> |
4 <link rel="import" href="/device_page/drag_behavior.html"> | 4 <link rel="import" href="/device_page/drag_behavior.html"> |
| 5 <link rel="import" href="/device_page/layout_behavior.html"> |
5 <link rel="import" href="/settings_shared_css.html"> | 6 <link rel="import" href="/settings_shared_css.html"> |
6 | 7 |
7 <dom-module id="display-layout"> | 8 <dom-module id="display-layout"> |
8 <template> | 9 <template> |
9 <style include="settings-shared"> | 10 <style include="settings-shared"> |
10 /* Use relative position with no offset so that display divs(children), | 11 /* Use relative position with no offset so that display divs(children), |
11 which have absolute positions, are offset from the displayArea div. */ | 12 which have absolute positions, are offset from the displayArea div. */ |
12 #displayArea { | 13 #displayArea { |
13 border: lightgrey solid 1px; | 14 border: lightgrey solid 1px; |
14 height: 100%; | 15 height: 100%; |
15 position: relative; | 16 position: relative; |
16 width: 100%; | 17 width: 100%; |
17 } | 18 } |
18 .display { | 19 .display { |
19 align-items: center; | 20 align-items: center; |
20 background: var(--paper-grey-200); | 21 background: var(--paper-grey-200); |
21 border: var(--paper-grey-200) solid 1px; | 22 border: var(--paper-grey-200) solid 1px; |
22 box-shadow: 2px 2px var(--paper-grey-400); | 23 box-shadow: 2px 2px var(--paper-grey-400); |
23 cursor: default; | 24 cursor: default; |
24 display: flex; | 25 display: flex; |
25 justify-content: center; | 26 justify-content: center; |
26 position: absolute; | 27 position: absolute; |
27 } | 28 } |
28 .display[selected] { | 29 .display[selected] { |
29 border: var(--google-blue-500) solid 2px; | 30 border: var(--google-blue-500) solid 2px; |
30 box-shadow: none; | 31 box-shadow: none; |
31 } | 32 } |
| 33 .highlight-left { |
| 34 border-left: var(--google-blue-700) solid 1px; |
| 35 } |
| 36 .highlight-right { |
| 37 border-right: var(--google-blue-700) solid 1px; |
| 38 } |
| 39 .highlight-top { |
| 40 border-top: var(--google-blue-700) solid 1px; |
| 41 } |
| 42 .highlight-bottom { |
| 43 border-bottom: var(--google-blue-700) solid 1px; |
| 44 } |
32 </style> | 45 </style> |
33 <div id="displayArea" on-iron-resize="calculateVisualScale_"> | 46 <div id="displayArea" on-iron-resize="calculateVisualScale_"> |
34 <template is="dom-repeat" items="[[displays]]"> | 47 <template is="dom-repeat" items="[[displays]]"> |
35 <div id="_[[item.id]]" class="display" draggable="true" | 48 <div id="_[[item.id]]" class="display" draggable="true" |
36 style$="[[getDivStyle_(item.id, item.bounds, visualScale)]]" | 49 style$="[[getDivStyle_(item.id, item.bounds, visualScale)]]" |
37 selected$="[[isSelected_(item, selectedDisplay)]]" | 50 selected$="[[isSelected_(item, selectedDisplay)]]" |
38 on-tap="onSelectDisplayTap_"> | 51 on-tap="onSelectDisplayTap_"> |
39 [[item.name]] | 52 [[item.name]] |
40 </div> | 53 </div> |
41 </template> | 54 </template> |
42 </div> | 55 </div> |
43 </template> | 56 </template> |
44 <script src="display_layout.js"></script> | 57 <script src="display_layout.js"></script> |
45 </dom-module> | 58 </dom-module> |
OLD | NEW |