Catrope has uploaded a new change for review.
https://gerrit.wikimedia.org/r/257809
Change subject: Revert "reverting until train is sorted out"
......................................................................
Revert "reverting until train is sorted out"
This reverts commit af7b7e3d4146bcd180a8f5e72fbfe01be546ffd0.
Change-Id: Ieeb7be77245553e1ac60604fb9cb422fcac85f8b
---
M Graph.body.php
M i18n/en.json
M i18n/qqq.json
M modules/graph-loader.js
M styles/common.less
5 files changed, 138 insertions(+), 46 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Graph
refs/changes/09/257809/1
diff --git a/Graph.body.php b/Graph.body.php
index 0de41a7..8398de2 100644
--- a/Graph.body.php
+++ b/Graph.body.php
@@ -120,6 +120,7 @@
}
$isInteractive = isset( $args['mode'] ) && $args['mode'] ===
'interactive';
+ $graphTitle = isset( $args['title'] ) ? $args['title'] : '';
$data = $status->getValue();
// Figure out which vega version to use
@@ -182,10 +183,25 @@
$attribs['class'] .= ' mw-graph-interactable';
$attribs['data-graph-id'] = $hash;
$parserOutput->setExtensionData(
'graph_interact', true );
+
// Add a "make interactive" button
- $html .= Html::rawElement( 'div', array(
- 'class' => 'mw-graph-switch',
- ), wfMessage( 'graph-switch-button' )->text() );
+ $buttonSpan = Html::rawElement( 'span', null,
wfMessage( 'graph-switch-button' )->text() );
+ $buttonIcon = Html::rawElement( 'i', array(
'class' => 'icon-play' ), '►' );
+
+ $button = Html::rawElement( 'div', array(
+ 'class' => 'mw-graph-switch',
+ ), $buttonIcon . $buttonSpan );
+
+ $layoverContent =
+ Html::rawElement( 'p', null, wfMessage(
'graph-interactive-title' )->text() ) .
+ Html::element( 'p', array( 'class' =>
'mw-graph-title' ), $graphTitle ) .
+ Html::rawElement( 'div', null, $button
);
+
+ $layover = Html::rawElement( 'div', array(
+ 'class' => 'mw-graph-layover',
+ ), Html::rawElement( 'div', null,
$layoverContent ) );
+
+ $html .= $layover;
}
}
diff --git a/i18n/en.json b/i18n/en.json
index b4a9556..06ca3fd 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -43,7 +43,8 @@
"graph-ve-no-spec": "No graph specification found",
"graph-ve-vega-error": "Vega has encountered an error rendering this
graph",
"graph-ve-vega-error-no-render": "Vega was unable to render this graph",
- "graph-switch-button": "Make interactive",
+ "graph-interactive-title": "Interactive",
+ "graph-switch-button": "Play",
"graph-loading": "Loading...",
"graph-loading-done": "Done!"
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 4f5ad3d..767944a 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -45,6 +45,7 @@
"graph-ve-no-spec": "Label to display on a graph node when no spec is
found",
"graph-ve-vega-error": "Label to display on a graph node when Vega
encounters an unknown error",
"graph-ve-vega-error-no-render": "Label to display on a graph node when
Vega is unable to render",
+ "graph-interactive-title": "Label to display on the layover to indicate
interactive graph",
"graph-switch-button": "Button to turn the static graph image into an
interactive graph",
"graph-loading": "Label to indicate when the interactive graph is
loading\n{{Identical|Loading}}",
"graph-loading-done": "Label to indicate when the interactive graph has
loaded\n{{Identical|Done}}"
diff --git a/modules/graph-loader.js b/modules/graph-loader.js
index 3b9d08f..49a5506 100644
--- a/modules/graph-loader.js
+++ b/modules/graph-loader.js
@@ -3,7 +3,7 @@
mw.hook( 'wikipage.content' ).add( function () {
// Make graph containers clickable
- $( '#mw-content-text' ).on( 'click',
'.mw-graph.mw-graph-interactable', function () {
+ $( '#bodyContent' ).on( 'click',
'.mw-graph.mw-graph-interactable', function () {
var $this = $( this ),
$button = $this.find( '.mw-graph-switch' );
@@ -11,8 +11,10 @@
$this.off( 'click' );
// Add a class to decorate loading
- $button.addClass( 'mw-graph-loading' );
- $button.text( mw.message( 'graph-loading' ).text() );
+ $button.hide()
+ .addClass( 'mw-graph-loading' )
+ .text( mw.message( 'graph-loading' ).text() )
+ .show();
// Replace the image with the graph
loadAndReplaceWithGraph( $this );
@@ -37,15 +39,15 @@
hash: $el.data( 'graphId' )
} ).done( function ( data ) {
mw.drawVegaGraph( $el[ 0 ], data.graph,
function ( error ) {
- var $button = $el.find(
'.mw-graph-switch' );
+ var $button = $el.find(
'.mw-graph-switch' ),
+ $layover = $el.find(
'.mw-graph-layover' );
if ( !error ) {
$el.find( 'img'
).remove();
$button.text(
mw.message( 'graph-loading-done' ).text() );
setTimeout( function ()
{
-
$button.remove();
-
$el.removeClass( 'mw-graph-loading' );
-
$el.removeClass( 'mw-graph-interactable' );
- }, 1500 );
+
$layover.remove();
+
$el.removeClass( 'mw-graph-loading mw-graph-interactable' );
+ }, 800 );
} else {
mw.log.warn( error );
}
diff --git a/styles/common.less b/styles/common.less
index 4e2ebb5..9f319b7 100644
--- a/styles/common.less
+++ b/styles/common.less
@@ -1,8 +1,9 @@
@import "mediawiki.ui/variables";
-
-@c-graph-main: @colorConstructive;
+@import "mediawiki.mixins";
+@import "mediawiki.mixins.animation";
.client-js {
+
.mw-graph {
display: inline-block;
border: 1px solid transparent;
@@ -13,46 +14,117 @@
}
}
- .mw-graph.mw-graph-interactable {
- .mw-graph-switch {
- position: absolute;
- top: 0;
- left: auto;
- right: 0;
- text-align: center;
- background-color: lighten(@c-graph-main, 65%);
- font-size: 12px;
- color: @c-graph-main;
- font-weight: bold;
- display: none;
- border-radius: @borderRadius;
- padding: .4em .8em;
- border: 6px solid @colorWhite;
- }
+ .mw-graph.mw-graph-interactable {
&:hover {
cursor: pointer;
- .mw-graph-switch {
+ .mw-graph-layover {
display: block;
-
- &:hover {
- background-color: @c-graph-main;
- color: @colorWhite;
- text-shadow: 0 1px rgba(0,0,0,.1);
- }
}
- }
- .mw-graph-switch.mw-graph-loading {
- display: block;
- background: @colorGrayLighter;
- color: @colorWhite;
-
- &:hover {
- background: @colorGrayLighter;
- }
}
}
+
+ /* 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;
+ }
+
+ p, div {
+ 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;
+ }
+ }
+
+ /* common button style */
+ .mw-graph-switch {
+ font: inherit;
+ margin: .1em 0;
+ min-height: 1.2em;
+ min-width: 1em;
+ border-radius: 2px;
+ .transition(~"background .1s ease,color .1s ease,border-color .1s
ease,box-shadow .1s ease");
+ font-weight: 700;
+ text-decoration: none;
+ display: inline-block;
+ vertical-align: top;
+ text-align: center;
+ cursor: pointer;
+ white-space: nowrap;
+ line-height: 30px;
+ padding: .5em;
+ width: 100px;
+ }
+
+ /* Play button style */
+ .mw-graph-switch {
+ background-color: @colorProgressive;
+ border-color: @colorProgressive;
+ color: @colorWhite;
+
+ &:hover {
+ background: @colorProgressiveHighlight;
+ border-color: @colorProgressiveHighlight;
+ }
+ &:active {
+ color: @colorWhite;
+ background-color: @colorProgressiveActive;
+ border-color: @colorProgressiveActive;
+ .box-shadow(none);
+ }
+ &:focus {
+ .box-shadow(~"inset 0 0 0 1px @{colorWhite}");
+ border-color: @colorProgressive;
+ }
+
+ .icon-play {
+ display: inline-block;
+ position: relative;
+ top: 4px;
+ left: 0;
+ bottom: 0;
+ margin-right: 10px;
+ font-size: 170%;
+ font-style: normal;
+ line-height: 25px;
+ }
+
+ }
+
+ /* Loading button style */
+ .mw-graph-switch.mw-graph-loading {
+
+ color: @colorGray5;
+ background-color: @colorWhite;
+
+ &:hover {
+ background: @colorGrayLighter;
+ }
+ }
+
}
--
To view, visit https://gerrit.wikimedia.org/r/257809
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ieeb7be77245553e1ac60604fb9cb422fcac85f8b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Graph
Gerrit-Branch: wmf/1.27.0-wmf.8
Gerrit-Owner: Catrope <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
