JGirault has uploaded a new change for review.
https://gerrit.wikimedia.org/r/263079
Change subject: Modifies Play button and layover because the previous layover
was hiding the static graph
......................................................................
Modifies Play button and layover because the previous layover was hiding the
static graph
Change-Id: I3ab1deb9b491bf51ed161ec21094c3d3792690f5
---
M includes/Graph.body.php
A includes/ajax-loader.gif
M modules/graph-loader.js
M styles/common.less
4 files changed, 59 insertions(+), 39 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Graph
refs/changes/79/263079/1
diff --git a/includes/Graph.body.php b/includes/Graph.body.php
index 6cf80c6..0c06206 100644
--- a/includes/Graph.body.php
+++ b/includes/Graph.body.php
@@ -204,7 +204,9 @@
$url = sprintf( $wgGraphImgServiceUrl, $server, $title,
$revid, $hash );
$html = Html::rawElement( 'img', array(
'class' => 'mw-graph-img',
- 'src' => $url
+ 'src' => $url,
+ 'alt' => $graphTitle,
+ 'title' => $graphTitle,
) );
if ( $isInteractive ) {
@@ -213,21 +215,19 @@
$attribs = self::buildDivAttributes(
'interactable', $data, $hash );
// Add a "make interactive" button
- $buttonSpan = Html::rawElement( 'span', null,
wfMessage( 'graph-switch-button' )->inContentLanguage()->text() );
$buttonIcon = Html::rawElement( 'i', array(
'class' => 'icon-play' ), '►' );
$button = Html::rawElement( 'div', array(
'class' => 'mw-graph-switch',
- ), $buttonIcon . $buttonSpan );
+ ), $buttonIcon );
- $layoverContent =
- Html::rawElement( 'p', null, wfMessage(
'graph-interactive-title' )->inContentLanguage()->text() ) .
- Html::element( 'p', array( 'class' =>
'mw-graph-title' ), $graphTitle ) .
- Html::rawElement( 'div', null, $button
);
+ $hoverTitle = Html::element( 'div', array(
'class' => 'mw-graph-hover-title' ), $graphTitle );
+
+ $layoverContent = $hoverTitle . $button;
$layover = Html::rawElement( 'div', array(
'class' => 'mw-graph-layover',
- ), Html::rawElement( 'div', null,
$layoverContent ) );
+ ), $layoverContent );
$html .= $layover;
} else {
diff --git a/includes/ajax-loader.gif b/includes/ajax-loader.gif
new file mode 100644
index 0000000..c519155
--- /dev/null
+++ b/includes/ajax-loader.gif
Binary files differ
diff --git a/modules/graph-loader.js b/modules/graph-loader.js
index 49a5506..a9163af 100644
--- a/modules/graph-loader.js
+++ b/modules/graph-loader.js
@@ -12,8 +12,8 @@
// Add a class to decorate loading
$button.hide()
+ .html( '' )
.addClass( 'mw-graph-loading' )
- .text( mw.message( 'graph-loading' ).text() )
.show();
// Replace the image with the graph
@@ -39,15 +39,10 @@
hash: $el.data( 'graphId' )
} ).done( function ( data ) {
mw.drawVegaGraph( $el[ 0 ], data.graph,
function ( error ) {
- var $button = $el.find(
'.mw-graph-switch' ),
- $layover = $el.find(
'.mw-graph-layover' );
+ var $layover = $el.find(
'.mw-graph-layover' );
if ( !error ) {
$el.find( 'img'
).remove();
- $button.text(
mw.message( 'graph-loading-done' ).text() );
- setTimeout( function ()
{
-
$layover.remove();
-
$el.removeClass( 'mw-graph-loading mw-graph-interactable' );
- }, 800 );
+ $layover.remove();
} else {
mw.log.warn( error );
}
diff --git a/styles/common.less b/styles/common.less
index 9f319b7..87ee499 100644
--- a/styles/common.less
+++ b/styles/common.less
@@ -2,6 +2,10 @@
@import "mediawiki.mixins";
@import "mediawiki.mixins.animation";
+@darkColor: #2B333F;
+@darkColorOpac: rgba(43,51,63,0.7);
+@colorWhiteOpac: rgba(255,255,255,0.7);
+
.client-js {
.mw-graph {
@@ -20,8 +24,23 @@
&:hover {
cursor: pointer;
+ .mw-graph-hover-title {
+ display: block;
+ }
+
.mw-graph-layover {
display: block;
+ background: @colorWhiteOpac;
+ }
+
+ .mw-graph-switch {
+ &.mw-graph-loading {
+ background-color: @colorWhite;
+ }
+
+ &:hover {
+ background-color: @colorWhite;
+ }
}
}
@@ -30,34 +49,29 @@
/* white layover */
.mw-graph-layover {
display: block;
- background: rgba(255,255,255, .7);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
- padding: 30px;
z-index: 1;
/* center the container vertically */
&> div {
position: absolute;
- top: ~"calc(50% - 78px)";
- left: 0;
- right: 0;
+ left: 10px;
+ top: 10px;
}
- p, div {
+ .mw-graph-hover-title {
+ display: none;
+ position: absolute;
+ top: ~"calc(50% - 17px)";
+ left: 1em;
+ right: 1em;
text-align: center;
- font-weight: 700;
- }
- p:not(.mw-graph-title) {
- text-transform: uppercase;
- }
- p.mw-graph-title {
font-size: 150%;
- margin-top: 5px;
- margin-bottom: 30px;
+ background-color: @colorWhite;
}
}
@@ -76,16 +90,21 @@
text-align: center;
cursor: pointer;
white-space: nowrap;
- line-height: 30px;
+ line-height: 1em;
padding: .5em;
- width: 100px;
+ width: 60px;
}
/* Play button style */
.mw-graph-switch {
- background-color: @colorProgressive;
- border-color: @colorProgressive;
- color: @colorWhite;
+ border-width: 2px;
+ border-style: solid;
+ border-color: #333;
+ border-radius: .3em;
+
+ color: @darkColor;
+ background-color: @colorWhite;
+ background-color: @colorWhiteOpac;
&:hover {
background: @colorProgressiveHighlight;
@@ -108,10 +127,8 @@
top: 4px;
left: 0;
bottom: 0;
- margin-right: 10px;
- font-size: 170%;
+ font-size: 160%;
font-style: normal;
- line-height: 25px;
}
}
@@ -121,10 +138,18 @@
color: @colorGray5;
background-color: @colorWhite;
+ border-color: @colorProgressiveActive;
&:hover {
- background: @colorGrayLighter;
+ border-color: #333;
}
+ .transition(~"background 0s ease");
+ background-position: 50% 50%;
+ background-size: 20px;
+ background-repeat: no-repeat;
+ /* @embed */
+ background-image: url(../includes/ajax-loader.gif);
+ display: block;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/263079
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3ab1deb9b491bf51ed161ec21094c3d3792690f5
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Graph
Gerrit-Branch: master
Gerrit-Owner: JGirault <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
