sharpetronics/QGIS
1
0
Fork 0
mirror of https://github.com/qgis/QGIS.git synced 2025-02-25 00:58:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

[FEATURE] Control over annotation contents margins (refs #10555)

Browse Source 
Allows setting left/top/right/bottom margins for the contents
within an annotation.
This commit is contained in:
Nyall Dawson 2017-01-30 11:31:52 +10:00
parent b2b365fc0b
commit a94ca701ac
16 changed files with 311 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
python/core/annotations/qgsannotation.sip
View File

@ -28,6 +28,9 @@ class QgsAnnotation : QObject
void setFrameSize( QSizeF size );
QSizeF frameSize() const;
void setContentsMargin( const QgsMargins& margins );
QgsMargins contentsMargin() const;
void setFrameBorderWidth( double width );
double frameBorderWidth() const;

9
src/app/qgsannotationwidget.cpp
View File

@ -60,6 +60,11 @@ QgsAnnotationWidget::QgsAnnotationWidget( QgsMapCanvasAnnotationItem* item, QWid
mBackgroundColorButton->setNoColorString( tr( "Transparent" ) );
mBackgroundColorButton->setShowNoColor( true );
whileBlocking( mSpinTopMargin )->setValue( annotation->contentsMargin().top() );
whileBlocking( mSpinLeftMargin )->setValue( annotation->contentsMargin().left() );
whileBlocking( mSpinRightMargin )->setValue( annotation->contentsMargin().right() );
whileBlocking( mSpinBottomMargin )->setValue( annotation->contentsMargin().bottom() );
mLayerComboBox->setLayer( annotation->mapLayer() );
connect( mBackgroundColorButton, &QgsColorButton::colorChanged, this, &QgsAnnotationWidget::backgroundColorChanged );
@ -92,6 +97,10 @@ void QgsAnnotationWidget::apply()
annotation->setFrameBackgroundColor( mBackgroundColorButton->color() );
annotation->setMarkerSymbol( mMarkerSymbol->clone() );
annotation->setMapLayer( mLayerComboBox->currentLayer() );
annotation->setContentsMargin( QgsMargins( mSpinLeftMargin->value(),
mSpinTopMargin->value(),
mSpinRightMargin->value(),
mSpinBottomMargin->value() ) );
}
mItem->update();
}

19
src/core/annotations/qgsannotation.cpp
View File

@ -83,6 +83,12 @@ void QgsAnnotation::setFrameSize( QSizeF size )
emit appearanceChanged();
}
void QgsAnnotation::setContentsMargin( const QgsMargins& margins )
{
mContentsMargins = margins;
emit appearanceChanged();
}
void QgsAnnotation::setFrameBorderWidth( double width )
{
mFrameBorderWidth = width;
@ -117,15 +123,16 @@ void QgsAnnotation::render( QgsRenderContext& context ) const
}
if ( mHasFixedMapPosition )
{
painter->translate( mOffsetFromReferencePoint.x() + mFrameBorderWidth / 2.0,
mOffsetFromReferencePoint.y() + mFrameBorderWidth / 2.0 );
painter->translate( mOffsetFromReferencePoint.x() + context.convertToPainterUnits( mContentsMargins.left(), QgsUnitTypes::RenderMillimeters ),
mOffsetFromReferencePoint.y() + context.convertToPainterUnits( mContentsMargins.top(), QgsUnitTypes::RenderMillimeters ) );
}
else
{
painter->translate( mFrameBorderWidth / 2.0, mFrameBorderWidth / 2.0 );
painter->translate( context.convertToPainterUnits( mContentsMargins.left(), QgsUnitTypes::RenderMillimeters ),
context.convertToPainterUnits( mContentsMargins.top(), QgsUnitTypes::RenderMillimeters ) );
}
QSizeF size( mFrameSize.width() - mFrameBorderWidth,
mFrameSize.height() - mFrameBorderWidth );
QSizeF size( mFrameSize.width() - context.convertToPainterUnits( mContentsMargins.left() + mContentsMargins.right(), QgsUnitTypes::RenderMillimeters ),
mFrameSize.height() - context.convertToPainterUnits( mContentsMargins.top() + mContentsMargins.bottom(), QgsUnitTypes::RenderMillimeters ) );
renderAnnotation( context, size );
painter->restore();
@ -316,6 +323,7 @@ void QgsAnnotation::_writeXml( QDomElement& itemElem, QDomDocument& doc ) const
annotationElem.setAttribute( QStringLiteral( "canvasPosX" ), qgsDoubleToString( mRelativePosition.x() ) );
annotationElem.setAttribute( QStringLiteral( "canvasPosY" ), qgsDoubleToString( mRelativePosition.y() ) );
annotationElem.setAttribute( QStringLiteral( "frameBorderWidth" ), qgsDoubleToString( mFrameBorderWidth ) );
annotationElem.setAttribute( QStringLiteral( "contentsMargin" ), mContentsMargins.toString() );
annotationElem.setAttribute( QStringLiteral( "frameColor" ), mFrameColor.name() );
annotationElem.setAttribute( QStringLiteral( "frameColorAlpha" ), mFrameColor.alpha() );
annotationElem.setAttribute( QStringLiteral( "frameBackgroundColor" ), mFrameBackgroundColor.name() );
@ -358,6 +366,7 @@ void QgsAnnotation::_readXml( const QDomElement& annotationElem, const QDomDocum
}
mFrameBorderWidth = annotationElem.attribute( QStringLiteral( "frameBorderWidth" ), QStringLiteral( "0.5" ) ).toDouble();
mContentsMargins = QgsMargins::fromString( annotationElem.attribute( QStringLiteral( "contentsMargin" ) ) );
mFrameColor.setNamedColor( annotationElem.attribute( QStringLiteral( "frameColor" ), QStringLiteral( "#000000" ) ) );
mFrameColor.setAlpha( annotationElem.attribute( QStringLiteral( "frameColorAlpha" ), QStringLiteral( "255" ) ).toInt() );
mFrameBackgroundColor.setNamedColor( annotationElem.attribute( QStringLiteral( "frameBackgroundColor" ) ) );

17
src/core/annotations/qgsannotation.h
View File

@ -23,6 +23,7 @@
#include "qgscoordinatereferencesystem.h"
#include "qgsrendercontext.h"
#include "qgssymbol.h"
#include "qgsmargins.h"
#include "qgsmaplayer.h"
/** \ingroup core
@ -156,6 +157,20 @@ class CORE_EXPORT QgsAnnotation : public QObject
*/
QSizeF frameSize() const { return mFrameSize; }
/**
* Sets the margins (in millimeters) between the outside of the frame and the annotation
* content.
* @see contentsMargin()
*/
void setContentsMargin( const QgsMargins& margins );
/**
* Returns the margins (in millimeters) between the outside of the frame and the annotation
* content.
* @see setContentsMargin()
*/
QgsMargins contentsMargin() const { return mContentsMargins; }
/**
* Sets the annotation's frame's border width (in pixels).
* @see frameBorderWidth()
@ -337,6 +352,8 @@ class CORE_EXPORT QgsAnnotation : public QObject
//! Point symbol that is to be drawn at the map reference location
QScopedPointer<QgsMarkerSymbol> mMarkerSymbol;
QgsMargins mContentsMargins;
//! Width of the frame
double mFrameBorderWidth = 1.0;

3
src/core/annotations/qgshtmlannotation.cpp
View File

@ -86,7 +86,8 @@ QSizeF QgsHtmlAnnotation::minimumFrameSize() const
if ( mWebPage )
{
QSizeF widgetMinSize = QSizeF( 0, 0 ); // mWebPage->minimumSize();
return QSizeF( 2 * frameBorderWidth() + widgetMinSize.width(), 2 * frameBorderWidth() + widgetMinSize.height() );
return QSizeF( contentsMargin().left() + contentsMargin().right() + widgetMinSize.width(),
contentsMargin().top() + contentsMargin().bottom() + widgetMinSize.height() );
}
else
{

3
src/gui/qgsformannotation.cpp
View File

@ -109,7 +109,8 @@ QSizeF QgsFormAnnotation::minimumFrameSize() const
if ( mDesignerWidget )
{
QSizeF widgetMinSize = mMinimumSize;
return QSizeF( 2 * frameBorderWidth() + widgetMinSize.width(), 2 * frameBorderWidth() + widgetMinSize.height() );
return QSizeF( contentsMargin().left() + contentsMargin().right() + widgetMinSize.width(),
contentsMargin().top() + contentsMargin().bottom() + widgetMinSize.height() );
}
else
{

291
src/ui/qgsannotationwidgetbase.ui
View File

@ -7,65 +7,14 @@
<x>0</x>
<y>0</y>
<width>319</width>
<height>203</height>
<height>402</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<layout class="QGridLayout" name="gridLayout">
<item row="2" column="0">
<widget class="QLabel" name="mMapMarkerLabel">
<property name="text">
<string>Map marker</string>
</property>
<property name="buddy">
<cstring>mMapMarkerButton</cstring>
</property>
</widget>
</item>
<item row="4" column="0">
<widget class="QLabel" name="mBackgroundColorLabel">
<property name="text">
<string>Background color</string>
</property>
</widget>
</item>
<item row="3" column="1">
<widget class="QDoubleSpinBox" name="mFrameWidthSpinBox"/>
</item>
<item row="5" column="0">
<widget class="QLabel" name="mFrameColorLabel">
<property name="text">
<string>Frame color</string>
</property>
</widget>
</item>
<item row="2" column="1">
<widget class="QPushButton" name="mMapMarkerButton">
<property name="text">
<string/>
</property>
</widget>
</item>
<item row="1" column="0">
<widget class="QLabel" name="mMapMarkerLabel_2">
<property name="text">
<string>Linked layer</string>
</property>
<property name="buddy">
<cstring>mMapMarkerButton</cstring>
</property>
</widget>
</item>
<item row="1" column="1">
<widget class="QgsMapLayerComboBox" name="mLayerComboBox">
<property name="toolTip">
<string>Allows the annotation to be associated with a map layer. If set, the annotation will only be visible when the layer is visible.</string>
</property>
</widget>
</item>
<item row="4" column="1">
<item row="5" column="1">
<layout class="QHBoxLayout" name="horizontalLayout_2">
<item>
<widget class="QgsColorButton" name="mBackgroundColorButton">
@ -101,14 +50,201 @@
</item>
</layout>
</item>
<item row="0" column="0" colspan="2">
<widget class="QCheckBox" name="mMapPositionFixedCheckBox">
<item row="6" column="0">
<widget class="QLabel" name="mFrameColorLabel">
<property name="text">
<string>Fixed map position</string>
<string>Frame color</string>
</property>
</widget>
</item>
<item row="5" column="1">
<item row="2" column="1">
<widget class="QPushButton" name="mMapMarkerButton">
<property name="text">
<string/>
</property>
</widget>
</item>
<item row="7" column="0" colspan="2">
<widget class="QgsCollapsibleGroupBox" name="mMarginsGroupBox">
<property name="title">
<string>Contents margins</string>
</property>
<layout class="QGridLayout" name="gridLayout_2">
<item row="0" column="0">
<widget class="QLabel" name="label">
<property name="text">
<string>Top</string>
</property>
</widget>
</item>
<item row="0" column="1">
<widget class="QgsDoubleSpinBox" name="mSpinTopMargin">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Fixed">
<horstretch>1</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="suffix">
<string> mm</string>
</property>
<property name="decimals">
<number>2</number>
</property>
<property name="maximum">
<double>10000000.000000000000000</double>
</property>
<property name="singleStep">
<double>0.200000000000000</double>
</property>
<property name="value">
<double>1.000000000000000</double>
</property>
</widget>
</item>
<item row="3" column="0">
<widget class="QLabel" name="label_4">
<property name="text">
<string>Bottom</string>
</property>
</widget>
</item>
<item row="1" column="0">
<widget class="QLabel" name="label_2">
<property name="text">
<string>Left</string>
</property>
</widget>
</item>
<item row="2" column="0">
<widget class="QLabel" name="label_3">
<property name="text">
<string>Right</string>
</property>
</widget>
</item>
<item row="1" column="1">
<widget class="QgsDoubleSpinBox" name="mSpinLeftMargin">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Fixed">
<horstretch>1</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="suffix">
<string> mm</string>
</property>
<property name="decimals">
<number>2</number>
</property>
<property name="maximum">
<double>10000000.000000000000000</double>
</property>
<property name="singleStep">
<double>0.200000000000000</double>
</property>
<property name="value">
<double>1.000000000000000</double>
</property>
</widget>
</item>
<item row="2" column="1">
<widget class="QgsDoubleSpinBox" name="mSpinRightMargin">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Fixed">
<horstretch>1</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="suffix">
<string> mm</string>
</property>
<property name="decimals">
<number>2</number>
</property>
<property name="maximum">
<double>10000000.000000000000000</double>
</property>
<property name="singleStep">
<double>0.200000000000000</double>
</property>
<property name="value">
<double>1.000000000000000</double>
</property>
</widget>
</item>
<item row="3" column="1">
<widget class="QgsDoubleSpinBox" name="mSpinBottomMargin">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Fixed">
<horstretch>1</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="suffix">
<string> mm</string>
</property>
<property name="decimals">
<number>2</number>
</property>
<property name="maximum">
<double>10000000.000000000000000</double>
</property>
<property name="singleStep">
<double>0.200000000000000</double>
</property>
<property name="value">
<double>1.000000000000000</double>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item row="5" column="0">
<widget class="QLabel" name="mBackgroundColorLabel">
<property name="text">
<string>Background color</string>
</property>
</widget>
</item>
<item row="3" column="1">
<widget class="QgsDoubleSpinBox" name="mFrameWidthSpinBox"/>
</item>
<item row="2" column="0">
<widget class="QLabel" name="mMapMarkerLabel">
<property name="text">
<string>Map marker</string>
</property>
<property name="buddy">
<cstring>mMapMarkerButton</cstring>
</property>
</widget>
</item>
<item row="3" column="0">
<widget class="QLabel" name="mFrameWidthLabel">
<property name="text">
<string>Frame width</string>
</property>
<property name="buddy">
<cstring>mFrameWidthSpinBox</cstring>
</property>
</widget>
</item>
<item row="8" column="1">
<spacer name="verticalSpacer">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
<item row="6" column="1">
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QgsColorButton" name="mFrameColorButton">
@ -144,28 +280,29 @@
</item>
</layout>
</item>
<item row="3" column="0">
<widget class="QLabel" name="mFrameWidthLabel">
<item row="1" column="0">
<widget class="QLabel" name="mMapMarkerLabel_2">
<property name="text">
<string>Frame width</string>
<string>Linked layer</string>
</property>
<property name="buddy">
<cstring>mFrameWidthSpinBox</cstring>
<cstring>mMapMarkerButton</cstring>
</property>
</widget>
</item>
<item row="6" column="1">
<spacer name="verticalSpacer">
<property name="orientation">
<enum>Qt::Vertical</enum>
<item row="0" column="0" colspan="2">
<widget class="QCheckBox" name="mMapPositionFixedCheckBox">
<property name="text">
<string>Fixed map position</string>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</widget>
</item>
<item row="1" column="1">
<widget class="QgsMapLayerComboBox" name="mLayerComboBox">
<property name="toolTip">
<string>Allows the annotation to be associated with a map layer. If set, the annotation will only be visible when the layer is visible.</string>
</property>
</spacer>
</widget>
</item>
</layout>
</widget>
@ -174,12 +311,24 @@
<class>QgsColorButton</class>
<extends>QToolButton</extends>
<header>qgscolorbutton.h</header>
<container>1</container>
</customwidget>
<customwidget>
<class>QgsMapLayerComboBox</class>
<extends>QComboBox</extends>
<header location="global">qgsmaplayercombobox.h</header>
</customwidget>
<customwidget>
<class>QgsDoubleSpinBox</class>
<extends>QDoubleSpinBox</extends>
<header>qgsdoublespinbox.h</header>
</customwidget>
<customwidget>
<class>QgsCollapsibleGroupBox</class>
<extends>QGroupBox</extends>
<header>qgscollapsiblegroupbox.h</header>
<container>1</container>
</customwidget>
</customwidgets>
<tabstops>
<tabstop>mMapPositionFixedCheckBox</tabstop>

62
src/ui/qgsoptionsbase.ui
View File

@ -308,7 +308,7 @@
<item>
<widget class="QStackedWidget" name="mOptionsStackedWidget">
<property name="currentIndex">
<number>1</number>
<number>2</number>
</property>
<widget class="QWidget" name="mOptionsPageGeneral">
<layout class="QVBoxLayout" name="verticalLayout_3">
@ -337,8 +337,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>651</width>
<height>590</height>
<width>691</width>
<height>702</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_28">
@ -1024,7 +1024,7 @@
<x>0</x>
<y>0</y>
<width>843</width>
<height>1065</height>
<height>1110</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_22">
@ -1553,8 +1553,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>495</width>
<height>659</height>
<width>843</width>
<height>755</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_27">
@ -1911,8 +1911,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>674</width>
<height>936</height>
<width>713</width>
<height>1110</height>
</rect>
</property>
<layout class="QGridLayout" name="gridLayout_22">
@ -2662,7 +2662,7 @@
<rect>
<x>0</x>
<y>0</y>
<width>142</width>
<width>151</width>
<height>239</height>
</rect>
</property>
@ -2813,8 +2813,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>501</width>
<height>316</height>
<width>523</width>
<height>370</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_25">
@ -3156,8 +3156,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>604</width>
<height>589</height>
<width>640</width>
<height>660</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_30">
@ -3587,8 +3587,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>480</width>
<height>571</height>
<width>509</width>
<height>623</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_39">
@ -3856,8 +3856,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>543</width>
<height>667</height>
<width>572</width>
<height>793</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_31">
@ -4411,8 +4411,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>412</width>
<height>368</height>
<width>435</width>
<height>402</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_6">
@ -4550,8 +4550,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>512</width>
<height>638</height>
<width>543</width>
<height>710</height>
</rect>
</property>
<layout class="QGridLayout" name="gridLayout_15">
@ -4796,8 +4796,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>273</width>
<height>236</height>
<width>292</width>
<height>258</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_32">
@ -4905,8 +4905,8 @@
<rect>
<x>0</x>
<y>0</y>
<width>484</width>
<height>689</height>
<width>534</width>
<height>790</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_33">
@ -5419,18 +5419,18 @@
</widget>
<layoutdefault spacing="6" margin="11"/>
<customwidgets>
<customwidget>
<class>QgsCollapsibleGroupBox</class>
<extends>QGroupBox</extends>
<header>qgscollapsiblegroupbox.h</header>
<container>1</container>
</customwidget>
<customwidget>
<class>QgsColorButton</class>
<extends>QToolButton</extends>
<header>qgscolorbutton.h</header>
<container>1</container>
</customwidget>
<customwidget>
<class>QgsCollapsibleGroupBox</class>
<extends>QGroupBox</extends>
<header>qgscollapsiblegroupbox.h</header>
<container>1</container>
</customwidget>
<customwidget>
<class>QgsColorSchemeList</class>
<extends>QWidget</extends>

14
tests/src/python/test_qgsannotation.py
View File

@ -24,7 +24,8 @@ from qgis.core import (QgsTextAnnotation,
QgsRenderChecker,
QgsPoint,
QgsVectorLayer,
QgsFeature)
QgsFeature,
QgsMargins)
from qgis.PyQt.QtCore import (QDir,
QPointF,
QSizeF)
@ -111,6 +112,17 @@ class TestQgsAnnotation(unittest.TestCase):
im = self.renderAnnotation(a, QPointF(20, 30))
self.assertTrue(self.imageCheck('relative_style', 'relative_style', im))
def testMargins(self):
""" test rendering an annotation with margins"""
a = QgsHtmlAnnotation()
a.setFrameSize(QSizeF(400, 250))
a.setHasFixedMapPosition(False)
a.setContentsMargin(QgsMargins(15, 10, 30, 20))
html = TEST_DATA_DIR + "/test_html.html"
a.setSourceFile(html)
im = self.renderAnnotation(a, QPointF(20, 30))
self.assertTrue(self.imageCheck('annotation_margins', 'annotation_margins', im))
def renderAnnotation(self, annotation, offset):
image = QImage(600, 400, QImage.Format_RGB32)
image.fill(QColor(0, 0, 0, 0))

BIN
tests/testdata/control_images/annotations/expected_annotation_margins/expected_annotation_margins.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
tests/testdata/control_images/annotations/expected_html_annotation/expected_html_annotation.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
tests/testdata/control_images/annotations/expected_html_feature/expected_html_feature.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
tests/testdata/control_images/annotations/expected_html_nofeature/expected_html_nofeature.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
tests/testdata/control_images/annotations/expected_relative_style/expected_relative_style.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
tests/testdata/control_images/annotations/expected_svg_annotation/expected_svg_annotation.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
tests/testdata/control_images/annotations/expected_text_annotation/expected_text_annotation.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB