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

Merge SliderViewTwo CSS into main CSS

Browse source 
Bug: T165747
Change-Id: I1949591063bb8d2df7ddf3bc0c33247ece1bd522
This commit is contained in:
WMDE-Fisch 2017-06-21 10:02:49 +02:00
parent 9895763673
commit 12e34322bc
8 changed files with 109 additions and 261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
extension.json
View file

@ -71,8 +71,6 @@
"ext.RevisionSlider.HelpDialog",
"ext.RevisionSlider.Api",
"ext.RevisionSlider.icons",
"ext.RevisionSlider.pointers.lower",
"ext.RevisionSlider.pointers.upper",
"mediawiki.api.options",
"mediawiki.user",
"mediawiki.util"
@ -166,14 +164,6 @@
"revisionslider-arrow-tooltip-older"
]
},
"ext.RevisionSlider.SliderViewTwo": {
"styles": [
"modules/ext.RevisionSliderViewTwo.css"
],
"dependencies": [
"ext.RevisionSlider.init"
]
},
"ext.RevisionSlider.DiffPage": {
"scripts": [
"modules/ext.RevisionSlider.DiffPage.js"
@ -228,24 +218,6 @@
"auto-expand": "resources/ext.RevisionSlider.icons/pin.svg"
}
},
"ext.RevisionSlider.pointers.lower": {
"position": "top",
"class": "ResourceLoaderImageModule",
"selector": ".mw-revslider-pointer-lower.mw-revslider-pointer-{name}",
"images": {
"oldid": "resources/ext.RevisionSlider.pointers/pointer-lower-old.svg",
"newid": "resources/ext.RevisionSlider.pointers/pointer-lower-new.svg"
}
},
"ext.RevisionSlider.pointers.upper": {
"position": "top",
"class": "ResourceLoaderImageModule",
"selector": ".mw-revslider-pointer-upper.mw-revslider-pointer-{name}",
"images": {
"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",

164
modules/ext.RevisionSlider.css
View file

@ -25,16 +25,6 @@
z-index: 1;
}
.mw-revslider-revision:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision {
background-color: #ccc;
border-color: #ccc;
transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
-moz-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
}
.mw-revslider-revision-up {
border-bottom-width: 2px;
border-bottom-style: solid;
@ -45,56 +35,37 @@
border-top-style: solid;
}
.mw-revslider-revision-old {
background-color: #fee9a8;
border-color: #fc3;
}
.mw-revslider-revision-old:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision-old {
background-color: #fc3;
border-color: #dda000;
}
.mw-revslider-revision-new {
background-color: #c3e2ff;
border-color: #1e6db8;
}
.mw-revslider-revision-new:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision-new {
background-color: #45a6ff;
border-color: #065cad;
}
.mw-revslider-revision-new,
.mw-revslider-revision-old,
.mw-revslider-revision-intermediate {
background-color: #bcbcbc;
border-color: #989898;
}
.mw-revslider-revision-intermediate:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision-intermediate {
background-color: #a6a6a6;
border-color: #828282;
}
.mw-revslider-revision-wrapper {
display: inline-block;
cursor: pointer;
height: 140px;
}
.mw-revslider-revision-wrapper:hover,
.mw-revslider-revision-wrapper-hovered {
background-color: #f2f2f2;
}
.mw-revslider-revision-border-box {
height: 100%;
width: 100%;
border-left: solid 1px #fff;
}
.mw-revslider-revision-old .mw-revslider-revision-border-box {
border-bottom: 2px solid #fc3;
}
.mw-revslider-revision-new .mw-revslider-revision-border-box {
border-bottom: 2px solid #1e6db8;
}
.mw-revslider-revision-wrapper {
display: inline-block;
height: 140px;
}
.mw-revslider-revision-wrapper:hover,
.mw-revslider-revision-wrapper-hovered {
background-color: #f2f2f2;
}
.mw-revslider-tooltip {
font-size: 0.8em;
word-break: break-all;
@ -205,11 +176,20 @@ of the frameless one (to fit the size of the toggle button */
.mw-revslider-pointer-container {
position: absolute;
clear: both;
top: 57px;
margin: auto;
top: 49px;
z-index: 1;
}
.mw-revslider-pointer-container-newer,
.mw-revslider-pointer-container-older {
cursor: pointer;
height: 12px;
}
.mw-revslider-pointer-container-newer {
margin-top: 4px;
}
.mw-revslider-pointer-upper {
padding-top: 2px;
}
@ -221,13 +201,85 @@ of the frameless one (to fit the size of the toggle button */
.mw-revslider-pointer {
position: absolute !important; /* stylelint-disable-line declaration-no-important */
z-index: 1;
width: 16px;
height: 13px;
background-repeat: no-repeat;
padding: 0;
width: 14px;
height: 14px;
border-radius: 50%;
}
.mw-revslider-pointer:hover,
.mw-revslider-pointer-cursor {
cursor: ew-resize;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.mw-revslider-pointer-grabbing,
.mw-revslider-pointer.mw-revslider-pointer-grabbing:hover {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.mw-revslider-pointer-upper.mw-revslider-pointer-newid {
top: 10px;
border: 1px solid #66b2ff;
background: -webkit-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: -o-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: linear-gradient( to bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
}
.mw-revslider-pointer-upper.mw-revslider-pointer-newid:hover {
background: -webkit-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: -o-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: linear-gradient( to bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
}
.mw-revslider-pointer-lower.mw-revslider-pointer-oldid {
top: 18px;
border: 1px solid #ffc561;
background: -webkit-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: -o-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: linear-gradient( to bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
}
.mw-revslider-pointer-lower.mw-revslider-pointer-oldid:hover {
background: -webkit-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: -o-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: linear-gradient( to bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
}
.mw-revslider-slider-line {
margin: 0 10px;
height: 12px;
}
.mw-revslider-pointer-container-newer .mw-revslider-slider-line {
border-bottom: 4px solid;
border-bottom-color: rgba( 30, 109, 184, 0.5 ); /* #1e6db8 */
}
.mw-revslider-pointer-container-older .mw-revslider-slider-line {
margin-top: 8px;
border-top: 4px solid;
border-top-color: rgba( 255, 204, 51, 0.5 ); /* #fc3 */
}
.mw-revslider-pointer-container-newer:hover .mw-revslider-slider-line {
border-bottom-color: rgba( 30, 109, 184, 0.8 );
}
.mw-revslider-pointer-container-older:hover .mw-revslider-slider-line {
border-top-color: rgba( 255, 204, 51, 0.8 );
}
.mw-revslider-revisions-older {
@ -285,6 +337,8 @@ of the frameless one (to fit the size of the toggle button */
}
.mw-revslider-pointer-line {
/* @noflip */
margin-left: 1px;
position: absolute;
top: 73px;
}

131
modules/ext.RevisionSliderViewTwo.css
View file

@ -1,131 +0,0 @@
.mw-revslider-revision-wrapper {
cursor: auto;
}
.mw-revslider-pointer-container {
top: 49px;
margin: 0;
}
.mw-revslider-pointer-container-newer,
.mw-revslider-pointer-container-older {
cursor: pointer;
height: 12px;
}
.mw-revslider-revision:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision {
background-color: #e3e3e3;
border-color: #e3e3e3;
}
.mw-revslider-revision-old,
.mw-revslider-revision-new,
.mw-revslider-revision-old:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision-old,
.mw-revslider-revision-new:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision-new,
.mw-revslider-revision-intermediate:hover,
.mw-revslider-revision-wrapper-hovered .mw-revslider-revision-intermediate {
background-color: #bcbcbc;
border-color: #989898;
}
.mw-revslider-revision-old .mw-revslider-revision-border-box {
border-bottom: 2px solid #fc3;
}
.mw-revslider-revision-new .mw-revslider-revision-border-box {
border-bottom: 2px solid #1e6db8;
}
.mw-revslider-pointer-container-newer {
margin-top: 4px;
}
.mw-revslider-slider-line {
margin: 0 10px;
height: 12px;
}
.mw-revslider-pointer-container-newer .mw-revslider-slider-line {
border-bottom: 4px solid;
border-bottom-color: rgba( 30, 109, 184, 0.5 ); /* #1e6db8 */
}
.mw-revslider-pointer-container-older .mw-revslider-slider-line {
margin-top: 8px;
border-top: 4px solid;
border-top-color: rgba( 255, 204, 51, 0.5 ); /* #fc3 */
}
.mw-revslider-pointer-container-newer:hover .mw-revslider-slider-line {
border-bottom-color: rgba( 30, 109, 184, 0.8 );
}
.mw-revslider-pointer-container-older:hover .mw-revslider-slider-line {
border-top-color: rgba( 255, 204, 51, 0.8 );
}
.mw-revslider-pointer-upper.mw-revslider-pointer-newid {
top: 10px;
border: 1px solid #66b2ff;
background: -webkit-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: -o-linear-gradient( bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
background: linear-gradient( to bottom, rgba( 47, 147, 247, 1 ), rgba( 3, 81, 159, 1 ) );
}
.mw-revslider-pointer-upper.mw-revslider-pointer-newid:hover {
background: -webkit-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: -o-linear-gradient( bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
background: linear-gradient( to bottom, rgba( 109, 182, 253, 1 ), rgba( 7, 91, 172, 1 ) );
}
.mw-revslider-pointer-lower.mw-revslider-pointer-oldid {
top: 18px;
border: 1px solid #ffc561;
background: -webkit-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: -o-linear-gradient( bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
background: linear-gradient( to bottom, rgba( 253, 224, 114, 1 ), rgba( 230, 173, 29, 1 ) );
}
.mw-revslider-pointer-lower.mw-revslider-pointer-oldid:hover {
background: -webkit-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: -moz-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: -ms-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: -o-linear-gradient( bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
background: linear-gradient( to bottom, rgba( 255, 235, 161, 1 ), rgba( 255, 195, 41, 1 ) );
}
.mw-revslider-pointer {
padding: 0;
width: 14px;
height: 14px;
border-radius: 50%;
}
.mw-revslider-pointer:hover,
.mw-revslider-pointer-cursor {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.mw-revslider-pointer-grabbing,
.mw-revslider-pointer.mw-revslider-pointer-grabbing:hover {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.mw-revslider-pointer-line {
/* @noflip */
margin-left: 1px;
}

11
resources/ext.RevisionSlider.pointers/pointer-lower-new.svg
View file

@ -1,11 +0,0 @@
<?xml version="1.0"?>
<svg width="18" height="13" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feGaussianBlur stdDeviation="0.35"/>
</filter>
</defs>
<polygon points="1,11 15,11 8,1" fill="#000" stroke="#000" stroke-width="1"
opacity="0.1" transform="translate(2 1)" filter="url(#shadow)"/>
<polygon points="1,11 15,11 8,1" fill="#45a6ff" stroke="#065cad" stroke-width="1"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 468 B

11
resources/ext.RevisionSlider.pointers/pointer-lower-old.svg
View file

@ -1,11 +0,0 @@
<?xml version="1.0"?>
<svg width="18" height="13" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feGaussianBlur stdDeviation="0.35"/>
</filter>
</defs>
<polygon points="1,11 15,11 8,1" fill="#000" stroke="#000" stroke-width="1"
opacity="0.1" transform="translate(2 1)" filter="url(#shadow)"/>
<polygon points="1,11 15,11 8,1" fill="#fdc44b" stroke="#dda000" stroke-width="1"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 468 B

11
resources/ext.RevisionSlider.pointers/pointer-upper-new.svg
View file

@ -1,11 +0,0 @@
<?xml version="1.0"?>
<svg width="18" height="13" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feGaussianBlur stdDeviation="0.35"/>
</filter>
</defs>
<polygon points="1,1 15,1 8,11" fill="#000" stroke="#000" stroke-width="1"
opacity="0.1" transform="translate(2 1)" filter="url(#shadow)"/>
<polygon points="1,1 15,1 8,11" fill="#45a6ff" stroke="#065cad" stroke-width="1"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 466 B

11
resources/ext.RevisionSlider.pointers/pointer-upper-old.svg
View file

@ -1,11 +0,0 @@
<?xml version="1.0"?>
<svg width="18" height="13" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feGaussianBlur stdDeviation="0.35"/>
</filter>
</defs>
<polygon points="1,1 15,1 8,11" fill="#000" stroke="#000" stroke-width="1"
opacity="0.1" transform="translate(2 1)" filter="url(#shadow)"/>
<polygon points="1,1 15,1 8,11" fill="#fdc44b" stroke="#dda000" stroke-width="1"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 466 B

3
src/RevisionSliderHooks.php
View file

@ -82,9 +82,6 @@ class RevisionSliderHooks {
if ( $autoExpand ) {
$out->addModules( 'ext.RevisionSlider.init' );
$stats->increment( 'RevisionSlider.event.load' );
if ( $config->get( 'RevisionSliderAlternateSlider' ) ) {
$out->addModules( 'ext.RevisionSlider.SliderViewTwo' );
}
} else {
$out->addModules( 'ext.RevisionSlider.lazyJs' );
$stats->increment( 'RevisionSlider.event.lazyload' );