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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/options2/chromeos/display_options.js

Issue 10836046: Allow offset for secondary display position in chrome://settings/display. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 8 years, 4 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/chromeos/preferences.cc ('k') | chrome/browser/ui/webui/options2/chromeos/display_options_handler.h » ('j') | chrome/browser/ui/webui/options2/chromeos/display_options_handler.h » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/options2/chromeos/display_options.js
diff --git a/chrome/browser/resources/options2/chromeos/display_options.js b/chrome/browser/resources/options2/chromeos/display_options.js
index b4e43acc28502f8e53a55617db08cd6f3293d8b0..953baaccf5b9e34cbd7009d6c4b0fa16399db4b5 100644
--- a/chrome/browser/resources/options2/chromeos/display_options.js
+++ b/chrome/browser/resources/options2/chromeos/display_options.js
@@ -7,6 +7,8 @@ cr.define('options', function() {
// The scale ratio of the display rectangle to its original size.
/** @const */ var VISUAL_SCALE = 1 / 10;
+ // The number of pixels to share the edges between displays.
James Hawkins 2012/08/11 17:37:42 nit: Blank line above this.
Jun Mukai 2012/08/13 05:33:25 Done.
+ /** @const */ var MIN_OFFSET_OVERLAP = 5;
/**
* Enumeration of secondary display layout. The value has to be same as the
@@ -49,13 +51,29 @@ cr.define('options', function() {
chrome.send('setMirroring', [this.mirroring_]);
}).bind(this);
- $('display-options-apply').onclick = (function() {
- chrome.send('setDisplayLayout', [this.layout_]);
- }).bind(this);
+ $('display-options-apply').onclick = this.applyResult_.bind(this);
chrome.send('getDisplayInfo');
},
/**
+ * Collects the current data and sends it to Chrome.
+ * @private
+ */
+ applyResult_: function() {
+ // Offset is calculated from top or left edge.
+ var primary = this.displays_[0];
+ var secondary = this.displays_[1];
+ var offset = null;
James Hawkins 2012/08/11 17:37:42 nit: No need to set offset to null here.
Jun Mukai 2012/08/13 05:33:25 Done.
+ if (this.layout_ == SecondaryDisplayLayout.LEFT ||
+ this.layout_ == SecondaryDisplayLayout.RIGHT) {
+ offset = secondary.div.offsetTop - primary.div.offsetTop;
+ } else {
+ offset = secondary.div.offsetLeft - primary.div.offsetLeft;
+ }
+ chrome.send('setDisplayLayout', [this.layout_, offset / VISUAL_SCALE]);
+ },
+
+ /**
* Mouse move handler for dragging display rectangle.
* @private
* @param {Event} e The mouse move event.
@@ -203,8 +221,30 @@ cr.define('options', function() {
* @param {Event} e The mouse up event.
*/
onMouseUp_: function(e) {
- if (this.dragging_)
+ if (this.dragging_) {
+ // Make sure the dragging location is connected.
+ var primaryDiv = this.displays_[0].div;
+ var draggingDiv = this.dragging_.display.div;
+ if (this.layout_ == SecondaryDisplayLayout.LEFT ||
+ this.layout_ == SecondaryDisplayLayout.RIGHT) {
+ var top = Math.max(draggingDiv.offsetTop,
James Hawkins 2012/08/11 17:37:42 nit: Start of parameter rows must align on the sam
Jun Mukai 2012/08/13 05:33:25 Done.
+ primaryDiv.offsetTop - draggingDiv.offsetHeight +
+ MIN_OFFSET_OVERLAP);
+ top = Math.min(top,
+ primaryDiv.offsetTop + primaryDiv.offsetHeight -
+ MIN_OFFSET_OVERLAP);
+ draggingDiv.style.top = top + 'px';
+ } else {
+ var left = Math.max(draggingDiv.offsetLeft,
+ primaryDiv.offsetLeft - draggingDiv.offsetWidth +
+ MIN_OFFSET_OVERLAP);
+ left = Math.min(left,
+ primaryDiv.offsetLeft + primaryDiv.offsetWidth -
+ MIN_OFFSET_OVERLAP);
+ draggingDiv.style.left = left + 'px';
+ }
this.dragging_ = null;
+ }
this.updateSelectedDisplayDescription_();
return false;
},
@@ -308,15 +348,28 @@ cr.define('options', function() {
*/
layoutDisplays_: function() {
var totalHeight = 0;
+ var boundingBox = {left: 0, right: 0, top: 0, bottom: 0};
for (var i = 0; i < this.displays_.length; i++) {
- totalHeight += this.displays_[i].height * VISUAL_SCALE;
+ var display = this.displays_[i];
+ totalHeight += display.height * VISUAL_SCALE;
+ boundingBox.left = Math.min(boundingBox.left, display.x * VISUAL_SCALE);
+ boundingBox.right = Math.max(
+ boundingBox.right, (display.x + display.width) * VISUAL_SCALE);
+ boundingBox.top = Math.min(boundingBox.top, display.y * VISUAL_SCALE);
+ boundingBox.bottom = Math.max(
+ boundingBox.bottom, (display.y + display.height) * VISUAL_SCALE);
}
// Prepare enough area for thisplays_view by adding the maximum height.
this.displaysView_.style.height = totalHeight + 'px';
- var basePoint = {x: 0, y: 0};
- var boundingSize = {width: 0, height: 0};
+ // Centering the bounding box of the display rectangles.
+ var offset = {x: $('display-options-displays-view').offsetWidth / 2 -
+ (boundingBox.left + boundingBox.right) / 2,
James Hawkins 2012/08/11 17:37:42 nit: Indentation is off here.
Jun Mukai 2012/08/13 05:33:25 Done.
+ y: totalHeight / 2 -
+ (boundingBox.top + boundingBox.bottom) / 2};
+
+
for (var i = 0; i < this.displays_.length; i++) {
var display = this.displays_[i];
var div = document.createElement('div');
@@ -336,59 +389,13 @@ cr.define('options', function() {
launcher.style.width = display.div.style.width;
div.appendChild(launcher);
}
- switch (this.layout_) {
- case SecondaryDisplayLayout.RIGHT:
- display.div.style.top = '0';
- display.div.style.left = basePoint.x + 'px';
- basePoint.x += display.width * VISUAL_SCALE;
- boundingSize.width += display.width * VISUAL_SCALE;
- boundingSize.height = Math.max(boundingSize.height,
- display.height * VISUAL_SCALE);
- break;
- case SecondaryDisplayLayout.LEFT:
- display.div.style.top = '0';
- basePoint.x -= display.width * VISUAL_SCALE;
- display.div.style.left = basePoint.x + 'px';
- boundingSize.width += display.width * VISUAL_SCALE;
- boundingSize.height = Math.max(boundingSize.height,
- display.height * VISUAL_SCALE);
- break;
- case SecondaryDisplayLayout.TOP:
- display.div.style.left = '0';
- basePoint.y -= display.height * VISUAL_SCALE;
- display.div.style.top = basePoint.y + 'px';
- boundingSize.width = Math.max(boundingSize.width,
- display.width * VISUAL_SCALE);
- boundingSize.height += display.height * VISUAL_SCALE;
- break;
- case SecondaryDisplayLayout.BOTTOM:
- display.div.style.left = '0';
- display.div.style.top = basePoint.y + 'px';
- basePoint.y += display.height * VISUAL_SCALE;
- boundingSize.width = Math.max(boundingSize.width,
- display.width * VISUAL_SCALE);
- boundingSize.height += display.height * VISUAL_SCALE;
- break;
- }
+ div.style.left = display.x * VISUAL_SCALE + offset.x + 'px';
+ div.style.top = display.y * VISUAL_SCALE + offset.y + 'px';
div.appendChild(document.createTextNode(display.name));
this.displaysView_.appendChild(div);
}
-
- // Centering the display rectangles.
- var offset = {x: $('display-options-displays-view').offsetWidth / 2 -
- boundingSize.width / 2,
- y: totalHeight / 2 - boundingSize.height / 2};
- if (basePoint.x < 0)
- offset.x -= basePoint.x;
- if (basePoint.y < 0)
- offset.y -= basePoint.y;
- for (var i = 0; i < this.displays_.length; i++) {
- var div = this.displays_[i].div;
- div.style.left = div.offsetLeft + offset.x + 'px';
- div.style.top = div.offsetTop + offset.y + 'px';
- }
},
/**
@@ -397,10 +404,12 @@ cr.define('options', function() {
* @param {boolean} mirroring Whether current mode is mirroring or not.
* @param {Array} displays The list of the display information.
* @param {SecondaryDisplayLayout} layout The layout strategy.
+ * @param {number} offset The offset of the secondary display.
*/
- onDisplayChanged_: function(mirroring, displays, layout) {
+ onDisplayChanged_: function(mirroring, displays, layout, offset) {
this.mirroring_ = mirroring;
this.layout_ = layout;
+ this.offset_ = offset;
$('display-options-toggle-mirroring').textContent =
loadTimeData.getString(
@@ -424,8 +433,10 @@ cr.define('options', function() {
},
};
- DisplayOptions.setDisplayInfo = function(mirroring, displays, layout) {
- DisplayOptions.getInstance().onDisplayChanged_(mirroring, displays, layout);
+ DisplayOptions.setDisplayInfo = function(
+ mirroring, displays, layout, offset) {
+ DisplayOptions.getInstance().onDisplayChanged_(
+ mirroring, displays, layout, offset);
};
// Export
« no previous file with comments | « chrome/browser/chromeos/preferences.cc ('k') | chrome/browser/ui/webui/options2/chromeos/display_options_handler.h » ('j') | chrome/browser/ui/webui/options2/chromeos/display_options_handler.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698