wikimedia/mediawiki-extensions-RevisionSlider
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider synced 2024-11-23 23:13:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show a help dialog.

Browse source 
- slide show dialog using OOJS UI
 - setting a user option to only show it once
 - translatable content
 - images of the slides

Bug: T136830
Change-Id: Ia820aecb20aa6b239f1a64dd328683639baf399e
This commit is contained in:
Jakob Warkotsch 2016-06-10 16:23:24 +02:00
parent f61ce9af4e
commit 5f6b3c8556
11 changed files with 229 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.jshintrc
View file

@ -19,6 +19,7 @@
"$": false,
"mediaWiki": false,
"jQuery": false,
"QUnit": false
"QUnit": false,
"OO": false
}
}

34
extension.json
View file

@ -31,11 +31,13 @@
"ext.RevisionSlider.Slider",
"ext.RevisionSlider.Revision",
"ext.RevisionSlider.RevisionList",
"ext.RevisionSlider.HelpDialog",
"ext.RevisionSlider.fetchRevisions",
"ext.RevisionSlider.arrows.left",
"ext.RevisionSlider.arrows.right",
"ext.RevisionSlider.pointers.lower",
"ext.RevisionSlider.pointers.upper"
"ext.RevisionSlider.pointers.upper",
"mediawiki.api.options"
],
"messages": [
"revisionslider-loading-out-of-range",
@ -163,6 +165,36 @@
"oldid": "resources/ext.RevisionSlider.pointers/pointer-upper-old.svg",
"newid": "resources/ext.RevisionSlider.pointers/pointer-upper-new.svg"
}
},
"ext.RevisionSlider.HelpDialog": {
"scripts": [
"modules/ext.RevisionSlider.HelpDialog.js"
],
"dependencies": [
"oojs-ui",
"ext.RevisionSlider.dialogImages"
],
"messages": [
"revisionslider-help-dialog-slide1",
"revisionslider-help-dialog-slide2",
"revisionslider-help-dialog-slide3",
"revisionslider-help-dialog-slide4",
"revisionslider-tutorial",
"revisionslider-previous-dialog",
"revisionslider-next-dialog",
"revisionslider-close-dialog"
]
},
"ext.RevisionSlider.dialogImages": {
"position": "top",
"class": "ResourceLoaderImageModule",
"selector": ".mw-help-dialog-slide-{name}",
"images": {
"1": "resources/ext.RevisionSlider.helpDialog/slide1.svg",
"2": "resources/ext.RevisionSlider.helpDialog/slide2.svg",
"3": "resources/ext.RevisionSlider.helpDialog/slide3.svg",
"4": "resources/ext.RevisionSlider.helpDialog/slide4.svg"
}
}
},
"ResourceFileModulePaths": {

10
i18n/en.json
View file

@ -17,5 +17,13 @@
"revisionslider-loading-failed": "The revision slider failed to load.",
"revisionslider-loading-out-of-range": "The revision slider failed to load as the requested revisions are not in the top 500 versions of the page.",
"revisionslider-arrow-tooltip-newer": "See newer revisions",
"revisionslider-arrow-tooltip-older": "See older revisions"
"revisionslider-arrow-tooltip-older": "See older revisions",
"revisionslider-help-dialog-slide1": "The RevisionSlider helps you to navigate and compare revisions on the diff page. It is based on a community wish from the German-speaking community technical wishlist.",
"revisionslider-help-dialog-slide2": "Each bar represents an article revision. Bars to the top show growth of the article, bars to the bottom show a reduction of size. In the image, at the revision marked with 1 there has been content added. At the revision marked with 2, content has been removed.",
"revisionslider-help-dialog-slide3": "<p>To compare certain revisions, select the revisions using the yellow and blue pointer.</p><p>The blue pointer controls the newer revision, the yellow pointer maps to the older revision.</p><p>Move the pointers by drag and drop or click on a bar.</p>",
"revisionslider-help-dialog-slide4": "Use the backwards and forwards arrows to move through revision history and show older and newer revisions.",
"revisionslider-tutorial": "Revision Slider Tutorial",
"revisionslider-previous-dialog": "Previous",
"revisionslider-next-dialog": "Next",
"revisionslider-close-dialog": "Close"
}

10
i18n/qqq.json
View file

@ -18,5 +18,13 @@
"revisionslider-loading-failed": "Message shown if the RevisionSlider fails to initially load.",
"revisionslider-loading-out-of-range": "Message shown if the RevisionSlider fails to initially load due to revisions being requested that are not in the most recent 500 revisions.",
"revisionslider-arrow-tooltip-newer": "Text shown after hovering the button scrolling to newer revisions.",
"revisionslider-arrow-tooltip-older": "Text shown after hovering the button scrolling to older revisions."
"revisionslider-arrow-tooltip-older": "Text shown after hovering the button scrolling to older revisions.",
"revisionslider-help-dialog-slide1": "Text shown on the first slide of the help dialog.",
"revisionslider-help-dialog-slide2": "Text shown on the second slide of the help dialog.",
"revisionslider-help-dialog-slide3": "Text shown on the third slide of the help dialog.",
"revisionslider-help-dialog-slide4": "Text shown on the fourth slide of the help dialog.",
"revisionslider-tutorial": "Text shown above the revision slider tutorial.",
"revisionslider-previous-dialog": "Label of the button to go to the previous tutorial slide.",
"revisionslider-next-dialog": "Label of the button to go to the next tutorial slide.",
"revisionslider-close-dialog": "Label of the button to close the RevisionSlider tutorial."
}

142
modules/ext.RevisionSlider.HelpDialog.js Normal file
View file

@ -0,0 +1,142 @@
( function ( mw, $ ) {
// JSHint does not like OOJS' usage of "static" and "super"
/*jshint -W024 */
var HelpDialog = function ( config ) {
HelpDialog.super.call( this, config );
};
OO.inheritClass( HelpDialog, OO.ui.ProcessDialog );
HelpDialog.static.title = mw.msg( 'revisionslider-tutorial' );
HelpDialog.static.actions = [
{
action: 'next',
label: mw.msg( 'revisionslider-next-dialog' ),
flags: [ 'primary', 'progressive' ],
modes: [ 'initial', 'middle' ]
},
{ action: 'previous', flags: 'safe', label: mw.msg( 'revisionslider-previous-dialog' ), modes: [ 'middle', 'last' ] },
{ label: mw.msg( 'revisionslider-close-dialog' ), flags: 'safe', modes: 'initial' },
{ label: mw.msg( 'revisionslider-close-dialog' ), flags: 'primary', modes: 'last' }
];
$.extend( HelpDialog.prototype, {
slides: [],
slidePointer: 0,
initialize: function () {
HelpDialog.super.prototype.initialize.call( this );
this.slides = [ this.getSlide1(), this.getSlide2(), this.getSlide3(), this.getSlide4() ];
this.stackLayout = new OO.ui.StackLayout( {
items: this.slides
} );
this.$body.append( this.stackLayout.$element );
},
getSlide1: function () {
var slide = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } );
slide.$element
.append(
$( '<div>' ).addClass( 'mw-help-dialog-image-landscape mw-help-dialog-slide-1' )
)
.append(
$( '<p>' ).addClass( 'mw-help-dialog-text' )
.text( mw.msg( 'revisionslider-help-dialog-slide1' ) )
);
return slide;
},
getSlide2: function () {
var slide = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } );
slide.$element
.append( $( '<div>' ).addClass( 'mw-help-dialog-image-landscape mw-help-dialog-slide-2' ) )
.append(
$( '<p>' ).addClass( 'mw-help-dialog-text' )
.text( mw.msg( 'revisionslider-help-dialog-slide2' ) )
);
return slide;
},
getSlide3: function () {
var slide = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } );
slide.$element
.append( $( '<div>' ).addClass( 'mw-help-dialog-image-portrait mw-help-dialog-slide-3 mw-image-column' ) )
.append(
$( '<div>' ).addClass( 'mw-text-column mw-help-dialog-text' )
.html( mw.msg( 'revisionslider-help-dialog-slide3' ) )
)
.append( $( '<div>' ).css( 'clear', 'both' ) );
return slide;
},
getSlide4: function () {
var slide = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } );
slide.$element
.append( $( '<div>' ).addClass( 'mw-help-dialog-image-landscape mw-help-dialog-slide-4' ) )
.append(
$( '<p>' ).addClass( 'mw-help-dialog-text' )
.text( mw.msg( 'revisionslider-help-dialog-slide4' ) )
);
return slide;
},
getActionProcess: function ( action ) {
if ( action === 'next' ) {
this.stackLayout.setItem( this.slides[ ++this.slidePointer ] );
} else if ( action === 'previous' ) {
this.stackLayout.setItem( this.slides[ --this.slidePointer ] );
}
if ( this.slidePointer === 0 ) {
this.actions.setMode( 'initial' );
} else if ( this.slidePointer === this.slides.length - 1 ) {
this.actions.setMode( 'last' );
} else {
this.actions.setMode( 'middle' );
}
this.stackLayout.$element.closest( '.oo-ui-window-frame' ).css( 'height', this.getContentHeight() + 'px' );
return HelpDialog.super.prototype.getActionProcess.call( this, action );
},
getSetupProcess: function ( data ) {
return HelpDialog.super.prototype.getSetupProcess.call( this, data )
.next( function () {
this.actions.setMode( 'initial' );
}, this );
},
/**
* Needed to set the initial height of the dialog
*
* @return {int}
*/
getBodyHeight: function () {
return this.slides[ this.slidePointer ].$element.outerHeight( true );
}
} );
HelpDialog.show = function () {
var windowManager = new OO.ui.WindowManager(),
dialogue = new HelpDialog( { size: 'medium' } );
$( 'body' ).append( windowManager.$element );
windowManager.addWindows( [ dialogue ] );
windowManager.openWindow( dialogue );
};
mw.libs.revisionSlider = mw.libs.revisionSlider || {};
mw.libs.revisionSlider.HelpDialog = HelpDialog;
}( mediaWiki, jQuery ) );

25
modules/ext.RevisionSlider.css
View file

@ -161,3 +161,28 @@
top: 0;
left: 0;
}
.mw-help-dialog-image-landscape {
height: 160px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
}
.mw-help-dialog-image-portrait {
height: 180px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
}
.mw-image-column {
width: 50%;
float: left;
}
.mw-text-column {
width: 50%;
float: right;
}
.mw-help-dialog-text {
font-size: 15px;
font-size: 1rem;
}

5
modules/ext.RevisionSlider.init.js
View file

@ -24,6 +24,11 @@
slider.getView().render( $container );
$( '#mw-revision-slider-placeholder' ).remove();
if ( !mw.user.options.get( 'userjs-revslider-hidehelp' ) ) {
mw.libs.revisionSlider.HelpDialog.show();
( new mw.Api() ).saveOption( 'userjs-revslider-hidehelp', true );
}
} catch ( err ) {
if ( err === 'RS-rev-out-of-range' ) {
$( '#mw-revision-slider-placeholder' )

1
resources/ext.RevisionSlider.helpDialog/slide1.svg Normal file
View file

@ -0,0 +1 @@
<svg width="256" height="157.05075" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 157.05074"><path d="M49.135 72.686l102.933-.006.424 73.715-13.257 9.78-11.795-9.398-13.433 9.398-12.232-9.507-12.887 9.288-13.979-9.288-13.215 9.616-12.45-9.835z" fill="#e5e5e5" fill-rule="evenodd"/><path d="M151.862 72.686h91.336l.077 83.412-13.5-9.517-13.077 9.363-12.323-9.318-13.295 9.563-12.395-9.563-12.7 9.658-14.012-10.107z" fill="#e5e5e5" fill-rule="evenodd"/><path d="M.592 147.062l12.336 9.188 11.247-9.33 13.325 9.34 12.125-9.524 12.138 9.535 13.394-9.41 13.837 9.4 12.726-9.307 12.438 9.335 13.35-9.374 11.662 9.344 13.033-9.491 13.695 9.553 12.589-9.585 12.621 9.523 13.424-9.514 12.16 9.496 13.101-9.364 13.685 9.393 11.833-8.657L255.41.592.59.59z" fill="none" stroke="#e6e6e6" stroke-width="1.1800000000000002" stroke-linecap="round"/><path d="M37.249 35.083a12.914 12.914 0 0 1-12.797 12.914 12.914 12.914 0 0 1-13.03-12.68 12.914 12.914 0 0 1 12.561-13.144 12.914 12.914 0 0 1 13.258 12.441" fill="#e5e5e5" stroke="#e5e5e5" stroke-width="1.1800000000000002" stroke-linecap="round" stroke-linejoin="round"/><path fill="#e5e5e5" stroke="#e5e5e5" stroke-width="1.1800000000000002" stroke-linecap="round" d="M13.153 52.848h23.003v3.773H13.153zM13.244 70.304h23.003v56.795H13.244z"/><path fill="#d8d8d8" stroke="#d8d8d8" stroke-width="1.1800000000000002" stroke-linecap="round" d="M226.49 5.597h23.93v4.537h-23.93z"/><path d="M1.882 14.518h252.061" fill="#e5e5e5" fill-rule="evenodd" stroke="#e5e5e5" stroke-width="1"/><path fill="#e5e5e5" stroke="#e5e5e5" stroke-width="1.1800000000000002" stroke-linecap="round" d="M9.33 5.508h29.72v4.537H9.33z"/><path fill="#d8d8d8" stroke="#d8d8d8" stroke-width="1.1800000000000002" stroke-linecap="round" d="M178.76 5.772h10.826v4.537H178.76zM209.875 5.49h10.826v4.537h-10.826zM194.529 5.452h10.826v4.537H194.53z"/><path fill="none" stroke="#e5e5e5" stroke-width="1" stroke-linecap="round" d="M47.824 5.413h89.866v4.865H47.824z"/><path fill="#e2e5e5" stroke="#e5e5e5" stroke-width="1.1800000000000002" stroke-linecap="round" d="M50.905 7.439h.76v.788h-.76z"/><path d="M71.494 38.207l.02 19.772-10.478-9.874z" fill="#347bff" fill-rule="evenodd"/><path fill="#347bff" d="M74.03 37.01h12.45v11.03H74.03z"/><path d="M71.397 48.129H222.38" fill="#347bff" fill-rule="evenodd" stroke="#347bff" stroke-width="1"/><path d="M218.936 38.057l-.02 19.772 10.477-9.874z" fill="#347bff" fill-rule="evenodd"/><path fill="#347bff" d="M86.178 48.188h12.45v8.3h-12.45zM99.283 47.97h12.45v14.743h-12.45zM113.481 30.15h12.45v17.692h-12.45zM126.368 34.427h12.45V47.97h-12.45zM139.344 37.85h12.45v10.266h-12.45zM152.009 48.198h12.45v18.348h-12.45zM177.957 48.352h12.45v10.266h-12.45zM164.674 30.333h12.45v17.474h-12.45zM191.24 48.352h12.45v15.072h-12.45zM203.904 37.54h12.45v10.267h-12.45z"/><path fill="#d8d8d8" d="M54.074 88.832h81.473v3.057H54.074zM54.074 77.037h29.27v6.334h-29.27zM53.965 102.831h81.472v3.058H53.965zM53.965 110.831h56.354v3.058H53.965zM53.965 124.83h81.472v3.059H53.965zM54.02 132.83h81.472v3.058H54.02zM53.965 138.83h40.627v3.058H53.965zM156.952 76.655h29.269v6.334h-29.269zM156.843 88.832h81.472v3.057h-81.472zM156.843 110.831h81.472v3.058h-81.472zM156.843 95.831h81.472v3.058h-81.472zM156.843 102.831h28.614v3.058h-28.614zM156.843 124.83h81.472v3.059h-81.472zM156.843 116.83h81.472v3.059h-81.472zM156.898 138.83h81.472v3.058h-81.472zM147.303 72.786v78.197h-3.058V72.786z"/><path d="M144.253 153.29l3.039-2.23-3.038-.22z" fill="#d8d8d8" fill-rule="evenodd"/><path d="M144.253 153.29l3.047-2.225v-.883l-3.054.682z" fill="#d8d8d8" fill-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

1
resources/ext.RevisionSlider.helpDialog/slide2.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="178.362" height="99.315" viewBox="0 0 178.36174 99.315223"><path fill="#e3e3e3" d="M64.868 52.444h16.213V30.982H64.868zM81.082 52.445h16.213V0H81.082z"/><path fill="#bcbcbc" d="M97.295 52.443h16.213V17.037H97.295zM113.508 52.443h16.213v31.149h-16.213z"/><path fill="#e3e3e3" d="M129.722 52.443h16.213V76.06h-16.213zM145.935 52.443h16.213v46.873h-16.213zM162.148 52.443h16.213V17.037h-16.213zM0 52.754h16.213v27.968H0zM16.213 52.754h16.213v38.96H16.213zM32.426 52.753H48.64V76.37H32.426zM48.64 52.754h16.213V17.348H48.64z"/><text style="line-height:125%" x="-57.616" y="-3552.105" font-weight="400" font-size="16.617" font-family="sans-serif" letter-spacing="0" word-spacing="0" transform="translate(158.052 3589.255)"><tspan x="-57.616" y="-3552.105">1</tspan></text><text y="-3518.404" x="-42.057" style="line-height:125%" font-weight="400" font-size="16.617" font-family="sans-serif" letter-spacing="0" word-spacing="0" transform="translate(158.052 3589.255)"><tspan y="-3518.404" x="-42.057">2</tspan></text></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

1
resources/ext.RevisionSlider.helpDialog/slide3.svg Normal file
View file

@ -0,0 +1 @@
<svg width="180" height="373.34967" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338.2583 373.34968"><defs><marker orient="auto" id="a" overflow="visible"><path d="M4.616 0l-6.92 4v-8l6.92 4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" id="b" overflow="visible"><path d="M4.616 0l-6.92 4v-8l6.92 4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker></defs><path fill="#e3e3e3" d="M49.328 41.93h16.213v55.507H49.328zM65.542 41.93h16.213V20.468H65.542z"/><path fill="#fee6a8" d="M81.755 41.93h16.213v46.872H81.755z"/><path fill="#e3e3e3" d="M97.968 41.93h16.213v38.96H97.968zM114.181 41.93h16.213V0h-16.213zM130.395 41.93h16.213V16.11h-16.213zM146.608 41.93h16.213V6.522h-16.213zM162.821 41.928h16.213v23.617h-16.213zM179.035 41.93h16.213v42.086h-16.213zM195.248 41.93h16.213V13.624h-16.213zM211.461 41.928h16.213v23.617h-16.213z"/><path fill="#bcbcbc" d="M97.968 41.93h16.213v38.96H97.968zM114.181 41.93h16.213V0h-16.213zM130.395 41.93h16.213V16.11h-16.213zM146.608 41.93h16.213V6.522h-16.213zM162.821 41.928h16.213v23.617h-16.213z"/><path fill="#c3e2ff" d="M179.035 42.481h16.213v42.087h-16.213z"/><path fill="#e3e3e3" d="M195.248 41.93h16.213V13.624h-16.213zM211.461 41.928h16.213v23.617h-16.213zM227.675 41.924h16.213v46.43h-16.213z"/><path opacity=".937" fill="#bcbcbc" d="M97.966 41.784h170.705v1.212H97.966z"/><g fill="#fdc44b" stroke="#dda000"><path transform="matrix(0 .4934 .59638 0 638.158 651.644)" d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z" opacity=".17"/><path transform="matrix(0 .4934 .59638 0 637.198 651.1)" d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z"/></g><path transform="matrix(0 -.50472 .61006 0 748.904 -580.828)" d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z" opacity=".099" fill-opacity=".958" stroke="#000" stroke-opacity=".553"/><path d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z" transform="matrix(0 -.50472 .61006 0 748.556 -581.874)" fill="#45a6ff" stroke="#065cad"/><path opacity=".937" fill="#dda000" d="M81.753 41.773h16.235v1.212H81.753z"/><path opacity=".937" fill="#065cad" d="M179.044 41.784h16.21v1.212h-16.21z"/><g transform="translate(-839.55 -1406.386)"><path fill="#fee6a8" d="M839.551 1554.836h156.258v224.899H839.551z"/><path fill="#c3e2ff" d="M1021.551 1554.836h156.258v224.899h-156.258z"/><rect width="122.738" height="5.789" x="850.202" y="1604.458" ry="0" opacity=".102"/><rect width="125.567" height="5.789" x="850.378" y="1622.256" ry="0" opacity=".102"/><rect width="129.456" height="5.789" x="850.378" y="1640.055" ry="0" opacity=".102"/><rect width="72.18" height="5.789" x="850.378" y="1657.854" ry="0" opacity=".102"/><rect width="41.068" height="5.789" x="850.378" y="1689.146" ry="0" opacity=".102"/><rect width="122.738" height="5.789" x="850.378" y="1706.513" ry="0" opacity=".102"/><rect width="125.567" height="5.789" x="850.378" y="1723.881" ry="0" opacity=".102"/><rect width="57.685" height="5.789" x="850.378" y="1741.249" ry="0" opacity=".102"/><rect width="134.406" height="5.789" x="1032.105" y="1604.104" ry="0" opacity=".319"/><rect width="125.567" height="5.789" x="1031.398" y="1621.549" ry="0" opacity=".319"/><rect width="117.081" height="5.789" x="1031.398" y="1638.995" ry="0" opacity=".319"/><rect width="31.168" height="5.789" x="1031.398" y="1656.44" ry="0" opacity=".319"/><rect width="41.068" height="5.789" x="1031.398" y="1687.731" ry="0" opacity=".319"/><rect width="125.567" height="5.789" x="1031.398" y="1705.099" ry="0" opacity=".319"/><rect width="107.182" height="5.789" x="1031.398" y="1722.467" ry="0" opacity=".319"/><rect width="57.685" height="5.789" x="1031.398" y="1739.835" ry="0" opacity=".319"/><rect ry="0" y="1586.659" x="850.732" height="5.789" width="122.738" opacity=".102"/><rect width="72.534" height="11.446" x="850.732" y="1565.446" ry="0" opacity=".102"/><rect ry="0" y="1586.659" x="1031.751" height="5.789" width="134.406" opacity=".319"/><rect width="90.565" height="9.678" x="1031.398" y="1565.446" ry="0" opacity=".319"/><path d="M1028.506 1504.349l72.869 42.401" fill="none" stroke="#000" marker-end="url(#a)"/><path d="M928.61 1504.493l-12.235 42.257" fill="none" stroke="#000" marker-end="url(#b)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

1
resources/ext.RevisionSlider.helpDialog/slide4.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="267.121" height="122.485" viewBox="0 0 267.12106 122.48537"><path fill="#e3e3e3" d="M36.501 57.065h16.213v55.508H36.501zM52.715 57.066h16.213V35.604H52.715z"/><path fill="#fee6a8" d="M68.928 57.065h16.213v46.873H68.928z"/><path fill="#e3e3e3" d="M85.141 57.065h16.213v38.96H85.141zM101.354 57.065h16.213v-41.93h-16.213zM117.568 57.065h16.213v-25.82h-16.213zM133.781 57.065h16.213V21.659h-16.213zM149.994 57.064h16.213V80.68h-16.213zM166.208 57.065h16.213v42.087h-16.213zM182.421 57.066h16.213V28.76h-16.213zM198.634 57.064h16.213V80.68h-16.213z"/><path fill="#bcbcbc" d="M85.141 57.065h16.213v38.96H85.141zM101.354 57.065h16.213v-41.93h-16.213zM117.568 57.065h16.213v-25.82h-16.213zM133.781 57.065h16.213V21.659h-16.213zM149.994 57.064h16.213V80.68h-16.213z"/><path fill="#c3e2ff" d="M166.208 57.617h16.213v42.087h-16.213z"/><path fill="#e3e3e3" d="M182.421 57.066h16.213V28.76h-16.213zM198.634 57.064h16.213V80.68h-16.213zM214.848 57.06h16.213v46.43h-16.213z"/><path opacity=".937" fill="#bcbcbc" d="M85.14 56.92h146.204v1.212H85.14z"/><g fill="#fdc44b" stroke="#dda000"><path transform="matrix(0 .4934 .59638 0 625.33 666.78)" d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z" opacity=".17"/><path transform="matrix(0 .4934 .59638 0 624.371 666.236)" d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z"/></g><path transform="matrix(0 -.50472 .61006 0 736.077 -565.693)" d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z" opacity=".099" fill-opacity=".958" stroke="#000" stroke-opacity=".553"/><path d="M-1231.824-918.09l9.38-5.414 9.379-5.416v21.661l-9.38-5.415z" transform="matrix(0 -.50472 .61006 0 735.729 -566.738)" fill="#45a6ff" stroke="#065cad"/><path opacity=".937" fill="#dda000" d="M68.926 56.909h16.235v1.212H68.926z"/><path opacity=".937" fill="#065cad" d="M166.217 56.92h16.21v1.212h-16.21z"/><path fill="#fff" stroke="#dadada" stroke-width="1.621" d="M.81.81h23.158v120.662H.81z"/><path d="M15.33 54.91l-9.15 6.663 9.098 6.698" fill="none" stroke="#171717" stroke-width="2.956" stroke-linecap="round" stroke-linejoin="round"/><path fill="#fff" stroke="#dadada" stroke-width="1.621" d="M266.31.81h-23.158v120.662h23.158z"/><path d="M251.79 52.652l9.15 6.664-9.097 6.698" fill="none" stroke="#171717" stroke-width="2.956" stroke-linecap="round" stroke-linejoin="round"/><path opacity=".572" fill="#fff" d="M29.173 1.486h209.5v121h-209.5z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB