Yurik has uploaded a new change for review.
https://gerrit.wikimedia.org/r/257784
Change subject: reverting until train is sorted out
......................................................................
reverting until train is sorted out
Change-Id: I8b91d939ce1f5da7d50267b46a4f8437ff4ef2bf
---
M Graph.body.php
M i18n/en.json
M i18n/qqq.json
M modules/graph-loader.js
M styles/common.less
5 files changed, 44 insertions(+), 136 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Graph
refs/changes/84/257784/1
diff --git a/Graph.body.php b/Graph.body.php
index 8398de2..0de41a7 100644
--- a/Graph.body.php
+++ b/Graph.body.php
@@ -120,7 +120,6 @@
}
$isInteractive = isset( $args['mode'] ) && $args['mode'] ===
'interactive';
- $graphTitle = isset( $args['title'] ) ? $args['title'] : '';
$data = $status->getValue();
// Figure out which vega version to use
@@ -183,25 +182,10 @@
$attribs['class'] .= ' mw-graph-interactable';
$attribs['data-graph-id'] = $hash;
$parserOutput->setExtensionData(
'graph_interact', true );
-
// Add a "make interactive" button
- $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;
+ $html .= Html::rawElement( 'div', array(
+ 'class' => 'mw-graph-switch',
+ ), wfMessage( 'graph-switch-button' )->text() );
}
}
diff --git a/i18n/en.json b/i18n/en.json
index 06ca3fd..b4a9556 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -43,8 +43,7 @@
"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-interactive-title": "Interactive",
- "graph-switch-button": "Play",
+ "graph-switch-button": "Make interactive",
"graph-loading": "Loading...",
"graph-loading-done": "Done!"
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 767944a..4f5ad3d 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -45,7 +45,6 @@
"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 49a5506..3b9d08f 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
- $( '#bodyContent' ).on( 'click',
'.mw-graph.mw-graph-interactable', function () {
+ $( '#mw-content-text' ).on( 'click',
'.mw-graph.mw-graph-interactable', function () {
var $this = $( this ),
$button = $this.find( '.mw-graph-switch' );
@@ -11,10 +11,8 @@
$this.off( 'click' );
// Add a class to decorate loading
- $button.hide()
- .addClass( 'mw-graph-loading' )
- .text( mw.message( 'graph-loading' ).text() )
- .show();
+ $button.addClass( 'mw-graph-loading' );
+ $button.text( mw.message( 'graph-loading' ).text() );
// Replace the image with the graph
loadAndReplaceWithGraph( $this );
@@ -39,15 +37,15 @@
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 $button = $el.find(
'.mw-graph-switch' );
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 );
+
$button.remove();
+
$el.removeClass( 'mw-graph-loading' );
+
$el.removeClass( 'mw-graph-interactable' );
+ }, 1500 );
} else {
mw.log.warn( error );
}
diff --git a/styles/common.less b/styles/common.less
index 9f319b7..4e2ebb5 100644
--- a/styles/common.less
+++ b/styles/common.less
@@ -1,9 +1,8 @@
@import "mediawiki.ui/variables";
-@import "mediawiki.mixins";
-@import "mediawiki.mixins.animation";
+
+@c-graph-main: @colorConstructive;
.client-js {
-
.mw-graph {
display: inline-block;
border: 1px solid transparent;
@@ -14,117 +13,46 @@
}
}
-
.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;
+ }
&:hover {
cursor: pointer;
- .mw-graph-layover {
+ .mw-graph-switch {
display: block;
+
+ &:hover {
+ background-color: @c-graph-main;
+ color: @colorWhite;
+ text-shadow: 0 1px rgba(0,0,0,.1);
+ }
}
-
- }
- }
-
- /* 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 {
+ .mw-graph-switch.mw-graph-loading {
+ display: block;
background: @colorGrayLighter;
+ color: @colorWhite;
+
+ &:hover {
+ background: @colorGrayLighter;
+ }
}
}
-
}
--
To view, visit https://gerrit.wikimedia.org/r/257784
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I8b91d939ce1f5da7d50267b46a4f8437ff4ef2bf
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Graph
Gerrit-Branch: wmf/1.27.0-wmf.8
Gerrit-Owner: Yurik <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
