diff --git a/reviewboard/static/rb/css/pages/image-review-ui.less b/reviewboard/static/rb/css/pages/image-review-ui.less
index 7437c0a85e5faed766eef8be09d42a06e834db7f..c5a65b7972a381223209ecf985f9f5981a7d9533 100644
--- a/reviewboard/static/rb/css/pages/image-review-ui.less
+++ b/reviewboard/static/rb/css/pages/image-review-ui.less
@@ -4,6 +4,17 @@
/* TODO: Reuse the colors from diffviewer.less, once they're moved out. */
@orig-image-border-color: #FF7777;
@modified-image-border-color: #63C363;
+@image-review-background-grey: #rb-ns-ui.colors[@grey-40];
+@icon-checkered-background:
+ linear-gradient(45deg, black 25%, transparent 25%,
+ transparent 75%, black 75%, black),
+ linear-gradient(45deg, black 25%, transparent 25%,
+ transparent 75%, black 75%, black);
+@image-background-checkered-background:
+ linear-gradient(45deg, black 25%, transparent 25%),
+ linear-gradient(-45deg, black 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, black 75%),
+ linear-gradient(-45deg, transparent 75%, black 75%);
.image-review-ui-diff-thumbnail {
@@ -24,12 +35,20 @@
border-radius: 0 0 @box-border-radius @box-border-radius;
position: relative;
+ &.-has-checkered-background {
+ background-color: @image-review-background-grey !important;
+ background-image: @image-background-checkered-background;
+ background-size: 20px 20px;
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+ }
.image-content {
overflow-x: auto;
position: relative;
}
.review-ui-header {
+ text-align: center;
+
table {
width: 100%;
}
@@ -53,6 +72,7 @@
.caption {
margin-bottom: 1em;
text-align: center;
+ display: inline-block;
}
.image-diffs {
@@ -222,11 +242,6 @@
min-width: @menu-width;
text-align: left;
- .on-mobile-medium-screen-720({
- float: none;
- margin-left: 0;
- });
-
.menu-header {
display: inline-block;
text-decoration: none;
@@ -253,43 +268,90 @@
}
}
-// Version of the menu when there's a diff
-.image-diff-modes .image-resolution-menu {
- .menu-header {
- margin: 1em 0;
- }
+.rb-c-image-background-color-menu {
+ float: left;
+}
- .menu {
- background: darken(#f0f0f0, 3%);
- border: 1px darken(#f0f0f0, 18%) solid;
+.rb-o-image-background-color-menu-label {
+ float: left;
+ margin-left: 0.5em;
+ padding-top: 1em;
+}
+
+.rb-o-image-background-color-menu-option {
+ background-clip: content-box;
+ border: 1px solid black;
+ border-radius: 0.5em;
+ float: left;
+ margin: 0.5em;
+
+ height: 2em;
+ width: 2em;
+
+ &.-black {
+ background-color: black;
}
- .menu-item:hover {
- background-color: darken(#f0f0f0, 10%);
+ &.-white {
+ background-color: white;
}
}
-// Version of the menu when there's a single revision
-.image-single-revision {
- text-align: center;
+.rb-o-image-background-color-menu-checkered-option {
+ &:extend(.rb-o-image-background-color-menu-option);
+ background-color: @image-review-background-grey;
+ background-image: @icon-checkered-background;
+ background-position: 0 0, 1em 1em;
+ background-size: 2em 2em;
+}
- .caption,
- .image-resolution-menu {
- display: inline-block;
+.rb-o-image-background-color-menu-custom-option {
+ &:extend(.rb-o-image-background-color-menu-option);
+ border: none;
+ border-image-width: 0em;
+ outline: none;
+ -webkit-appearance: none;
+ margin-top: 0.25em;
+ height: 1.95em;
+
+ &::-webkit-color-swatch-wrapper {
+ padding: 0;
}
+ &::-webkit-color-swatch {
+ border: 1px solid black;
+ border-radius: 0.5em;
+ }
+
+ &::-moz-color-swatch {
+ border: 1px solid black;
+ border-radius: 5px;
+ margin-left: -5px;
+
+ height: 21px;
+ width: 21px;
+ }
+}
+
+
+.rb-c-image-toolbar-selector {
+ padding: 0;
+ width: 100%;
+ display: inline-block;
+
.image-resolution-menu {
- padding: 8px 0;
+ padding: 1em 0;
+ display: inline-block;
.menu {
- border: 1px @diff-file-border-color solid;
+ border: 0.1em @diff-file-border-color solid;
background: @review-ui-header-bg;
- margin: 8px 0 0 0;
+ margin: 1em 0 0 0;
}
.menu-header {
color: #444;
- line-height: 16px;
+ line-height: 0.1em;
}
.menu-item:hover {
@@ -297,3 +359,10 @@
}
}
}
+
+// Version of the menu when there's a single revision
+.image-single-revision {
+ .caption {
+ display: inline-block;
+ }
+}
diff --git a/reviewboard/static/rb/js/models/imageReviewableModel.es6.js b/reviewboard/static/rb/js/models/imageReviewableModel.es6.js
index c0d3d21562cdd715fea066c2ae829de9b2dd5c50..71add2588734172e75992ad2a866f56d4059e975 100644
--- a/reviewboard/static/rb/js/models/imageReviewableModel.es6.js
+++ b/reviewboard/static/rb/js/models/imageReviewableModel.es6.js
@@ -13,8 +13,10 @@
*/
RB.ImageReviewable = RB.FileAttachmentReviewable.extend({
defaults: _.defaults({
- imageURL: '',
+ background: '#000000',
+ checkeredBackground: false,
diffAgainstImageURL: '',
+ imageURL: '',
scale: 1,
}, RB.FileAttachmentReviewable.prototype.defaults),
diff --git a/reviewboard/static/rb/js/views/imageReviewableView.es6.js b/reviewboard/static/rb/js/views/imageReviewableView.es6.js
index f62c53003b1ff476402964235136f156b981f4c7..8a5f5e194422be744a001279d6d6b7e8200ad878 100644
--- a/reviewboard/static/rb/js/views/imageReviewableView.es6.js
+++ b/reviewboard/static/rb/js/views/imageReviewableView.es6.js
@@ -807,6 +807,14 @@ RB.ImageReviewableView = RB.FileAttachmentReviewableView.extend({
events: {
'click .image-diff-mode': '_onImageModeClicked',
'click .image-resolution-menu .menu-item': '_onImageZoomLevelClicked',
+ 'click .rb-o-image-background-color-menu-option':
+ '_onBackgroundColorChanged',
+ 'click .rb-o-image-background-color-menu-custom-option':
+ '_onBackgroundCustomColorChanged',
+ 'input .rb-o-image-background-color-menu-custom-option':
+ '_onBackgroundCustomColorChanged',
+ 'click .rb-o-image-background-color-menu-checkered-option':
+ '_onBackgroundColorChangedCheckered',
'mousedown .selection-container': '_onMouseDown',
'mouseup .selection-container': '_onMouseUp',
'mousemove .selection-container': '_onMouseMove'
@@ -883,8 +891,18 @@ RB.ImageReviewableView = RB.FileAttachmentReviewableView.extend({
*/
_.defer(this._adjustPos);
});
- },
+ this.listenTo(this.model, 'change:background', (model, background) => {
+ this.model.set('checkeredBackground', false);
+ this.$el.css('background-color', background);
+ });
+
+ this.listenTo(this.model, 'change:checkeredBackground', (model, isCheckeredBackground) => {
+ this.$el.toggleClass('-has-checkered-background',
+ isCheckeredBackground);
+ });
+
+ },
/**
* Render the view.
*
@@ -1066,11 +1084,30 @@ RB.ImageReviewableView = RB.FileAttachmentReviewableView.extend({
.appendTo($menu);
});
- if (hasDiff) {
- this._$modeBar.append($resolutionMenu);
- } else {
- this.$('.caption').after($resolutionMenu);
- }
+ const backgroundMenuTemplate = _.template(dedent`
+
+ `);
+
+ $('')
+ .append(backgroundMenuTemplate({
+ backgroundLabel: _`Background`,
+ customLabel: _`Custom`,
+ }))
+ .append($resolutionMenu)
+ .appendTo($header);
},
/**
@@ -1395,7 +1432,40 @@ RB.ImageReviewableView = RB.FileAttachmentReviewableView.extend({
if (this._$imageDiffs) {
this._$imageDiffs.height(this._imageView.$el.height());
}
- }
+ },
+
+ /**
+ * Handle the background being changed.
+ *
+ * Args:
+ * e (Event):
+ * The event which triggered the callback.
+ */
+ _onBackgroundColorChanged(e) {
+ this.model.set('background', $(e.target).css('background-color'));
+ },
+
+ /**
+ * Handle the background being changed to a custom colour.
+ *
+ * Args:
+ * e (Event):
+ * The event which triggered the callback.
+ */
+ _onBackgroundCustomColorChanged(e) {
+ this.model.set('background', $(e.target).val());
+ },
+
+ /**
+ * Handle the background changed to a checkered pattern.
+ *
+ * Args:
+ * e (Event):
+ * The event which triggered the callback.
+ */
+ _onBackgroundColorChangedCheckered(e) {
+ this.model.set('checkeredBackground', true);
+ },
});