blob: 4b138cb2b174bd0b8786bcca52052d9df967dfb5 [file] [log] [blame]
<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-styles/shadow.html">
<link rel="import" href="drag_behavior.html">
<link rel="import" href="layout_behavior.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 display divs (children),
which have absolute positions, are offset from the displayArea div. */
#displayArea {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
/* Note: the size of the border / box shadow affects the style generated
in getDivStyle_ and getMirrorDivStyle_ */
.display {
align-items: center;
background: var(--paper-grey-100);
color: var(--paper-grey-700);
cursor: default;
display: flex;
font-size: 100%;
font-weight: 500;
justify-content: center;
margin: 4px;
padding: 3px;
position: absolute;
text-align: center;
}
.display[selected] {
border: var(--google-blue-500) solid 1px;
}
.display.mirror {
border: var(--google-blue-500) solid 1px;
}
.highlight-left {
border-left: var(--google-blue-700) solid 1px;
}
.highlight-right {
border-right: var(--google-blue-700) solid 1px;
}
.highlight-top {
border-top: var(--google-blue-700) solid 1px;
}
.highlight-bottom {
border-bottom: var(--google-blue-700) solid 1px;
}
.display.elevate {
@apply --shadow-elevation-2dp;
}
</style>
<div id="displayArea" on-iron-resize="calculateVisualScale_">
<template is="dom-repeat" items="[[mirroringDestinationIds_]]">
<div id="_mirror_[[item]]" class="display mirror"
hidden$="[[!mirroring]]"
style$="[[getMirrorDivStyle_(index, mirroringDestinationIds_.length,
displays, visualScale)]]">
</div>
</template>
<template is="dom-repeat" items="[[displays]]">
<div id="_[[item.id]]" class="display elevate"
draggable="[[dragEnabled]]" on-click="onSelectDisplayTap_"
style$="[[getDivStyle_(item.id, item.bounds, visualScale)]]"
selected$="[[isSelected_(item, selectedDisplay)]]">
[[getDisplayName_(mirroring, item.name,
'$i18nPolymer{displayMirrorDisplayName}')]]
</div>
</template>
</div>
</template>
<script src="display_layout.js"></script>
</dom-module>