Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/266495
Change subject: build: Only build one graphics distribution
(mixed/vector/raster), not all
......................................................................
build: Only build one graphics distribution (mixed/vector/raster), not all
Honestly, there is no reason ever for anyone to use anything other
than the default 'mixed' distribution. But we can pretend for a bit
longer.
We now only build one of the CSS graphics distributions at a time.
* `grunt build` will build the 'mixed' one.
* `grunt build --graphics=vector` will build the 'vector' one.
* `grunt build --graphics=raster` will build the 'raster' one.
There are no more `.vector.css` and `.raster.css` suffixes, as there's
no more need for them.
As we can only build and use one graphics distribution at once, the
demo no longer has an option to choose one. It will just always use
the one that OOjs UI was built with.
Also, `grunt quick-build` is back to building the 'vector' distribution
(reverting 02eb23b4). Previously it would build the 'mixed' one with
no PNG images, because the `.vector.css` suffix was inconvenient. This
hack is no longer needed, as the suffix is gone.
Bug: T92464
Change-Id: Ic6309b4e98a9f855891dcd85b112d5326a50cf7a
---
M Gruntfile.js
M demos/demo.js
M demos/widgets.php
3 files changed, 34 insertions(+), 106 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/95/266495/1
diff --git a/Gruntfile.js b/Gruntfile.js
index d51e4d8..7701198 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -6,15 +6,12 @@
module.exports = function ( grunt ) {
var modules = grunt.file.readJSON( 'build/modules.json' ),
pkg = grunt.file.readJSON( 'package.json' ),
- lessFiles = {
- raster: {},
- vector: {},
- mixed: {}
- },
+ lessFiles = {},
colorizeSvgFiles = {},
requiredFiles = modules[ 'oojs-ui' ].scripts.slice(),
concatCssFiles = {},
rtlFiles = {},
+ lessTarget = grunt.option( 'graphics' ) || 'mixed',
minBanner = '/*! OOjs UI v<%= pkg.version %> |
http://oojs.mit-license.org */';
grunt.loadNpmTasks( 'grunt-jsonlint' );
@@ -39,7 +36,7 @@
grunt.loadTasks( 'build/tasks' );
( function () {
- var distFile, target, module, moduleStyleFiles;
+ var distFile, module, moduleStyleFiles;
function rtlPath( fileName ) {
return fileName.replace( /\.(\w+)$/, '.rtl.$1' );
}
@@ -64,12 +61,12 @@
}
};
- cssFileName = fileName.replace( /\.json$/,
'.css' ).replace( /^src/, 'dist/tmp/' + target );
- lessFiles[ target ][ cssFileName ] = [
lessFileName ];
- lessFiles[ target ][ rtlPath( cssFileName ) ] =
[ rtlPath( lessFileName ) ];
+ cssFileName = fileName.replace( /\.json$/,
'.css' ).replace( /^src/, 'dist/tmp' );
+ lessFiles[ cssFileName ] = [ lessFileName ];
+ lessFiles[ rtlPath( cssFileName ) ] = [
rtlPath( lessFileName ) ];
} else {
- cssFileName = fileName.replace( /\.less$/,
'.css' ).replace( /^src/, 'dist/tmp/' + target );
- lessFiles[ target ][ cssFileName ] = [ fileName
];
+ cssFileName = fileName.replace( /\.less$/,
'.css' ).replace( /^src/, 'dist/tmp' );
+ lessFiles[ cssFileName ] = [ fileName ];
rtlFiles[ rtlPath( cssFileName ) ] =
cssFileName;
}
return cssFileName;
@@ -77,14 +74,12 @@
for ( module in modules ) {
if ( modules[ module ].styles ) {
moduleStyleFiles = modules[ module ].styles;
- for ( target in lessFiles ) {
- requiredFiles.push.apply(
requiredFiles, moduleStyleFiles );
+ requiredFiles.push.apply( requiredFiles,
moduleStyleFiles );
- distFile = 'dist/' + module + ( target
!== 'mixed' ? '.' + target : '' ) + '.css';
+ distFile = 'dist/' + module + '.css';
- concatCssFiles[ distFile ] =
moduleStyleFiles.map( processFile );
- concatCssFiles[ rtlPath( distFile ) ] =
concatCssFiles[ distFile ].map( rtlPath );
- }
+ concatCssFiles[ distFile ] =
moduleStyleFiles.map( processFile );
+ concatCssFiles[ rtlPath( distFile ) ] =
concatCssFiles[ distFile ].map( rtlPath );
}
}
}() );
@@ -160,7 +155,7 @@
// Build – Styling
less: {
- distRaster: {
+ raster: {
options: {
ieCompat: true,
report: 'gzip',
@@ -169,9 +164,9 @@
'oo-ui-default-image-ext': 'png'
}
},
- files: lessFiles.raster
+ files: lessFiles
},
- distVector: {
+ vector: {
options: {
ieCompat: false,
report: 'gzip',
@@ -180,9 +175,9 @@
'oo-ui-default-image-ext': 'svg'
}
},
- files: lessFiles.vector
+ files: lessFiles
},
- distMixed: {
+ mixed: {
options: {
ieCompat: false,
report: 'gzip',
@@ -191,7 +186,7 @@
'oo-ui-default-image-ext': 'png'
}
},
- files: lessFiles.mixed
+ files: lessFiles
}
},
cssjanus: {
@@ -407,10 +402,10 @@
grunt.registerTask( 'build-code', [ 'concat:js' ] );
grunt.registerTask( 'build-styling', [
- 'colorizeSvg', 'less', 'cssjanus',
+ 'colorizeSvg', 'less:' + lessTarget, 'cssjanus',
'concat:css', 'concat:demoCss', 'csscomb',
- 'copy:imagesCommon', 'copy:imagesApex', 'copy:imagesMediaWiki',
'svg2png'
- ] );
+ 'copy:imagesCommon', 'copy:imagesApex', 'copy:imagesMediaWiki'
+ ].concat( lessTarget === 'vector' ? [] : [ 'svg2png' ] ) );
grunt.registerTask( 'build-i18n', [ 'copy:i18n' ] );
grunt.registerTask( 'build-tests', [ 'exec:rubyTestSuiteGenerator',
'exec:phpGenerateJSPHPForKarma' ] );
grunt.registerTask( 'build', [
@@ -424,7 +419,7 @@
grunt.registerTask( 'quick-build', [
'pre-git-build', 'clean:build', 'fileExists', 'tyops',
'concat:js',
- 'colorizeSvg', 'less:distMixed', 'concat:css',
+ 'colorizeSvg', 'less:vector', 'concat:css',
'copy:imagesCommon', 'copy:imagesApex', 'copy:imagesMediaWiki',
'build-i18n', 'copy:demos', 'copy:fastcomposerdemos',
'note-quick-build'
diff --git a/demos/demo.js b/demos/demo.js
index 2e54ebf..098a62b 100644
--- a/demos/demo.js
+++ b/demos/demo.js
@@ -31,11 +31,6 @@
new OO.ui.ButtonOptionWidget( { data: 'mediawiki', label:
'MediaWiki' } ),
new OO.ui.ButtonOptionWidget( { data: 'apex', label: 'Apex' } )
] );
- this.graphicsSelect = new OO.ui.ButtonSelectWidget().addItems( [
- new OO.ui.ButtonOptionWidget( { data: 'mixed', label: 'Mixed' }
),
- new OO.ui.ButtonOptionWidget( { data: 'vector', label: 'Vector'
} ),
- new OO.ui.ButtonOptionWidget( { data: 'raster', label: 'Raster'
} )
- ] );
this.directionSelect = new OO.ui.ButtonSelectWidget().addItems( [
new OO.ui.ButtonOptionWidget( { data: 'ltr', label: 'LTR' } ),
new OO.ui.ButtonOptionWidget( { data: 'rtl', label: 'RTL' } )
@@ -46,7 +41,6 @@
label: 'PHP',
href: 'widgets.php' +
'?theme=' + this.mode.theme +
- '&graphic=' + this.mode.graphics +
'&direction=' + this.mode.direction
} )
] );
@@ -54,20 +48,17 @@
// Events
this.pageMenu.on( 'choose', OO.ui.bind( this.onModeChange, this ) );
this.themeSelect.on( 'choose', OO.ui.bind( this.onModeChange, this ) );
- this.graphicsSelect.on( 'choose', OO.ui.bind( this.onModeChange, this )
);
this.directionSelect.on( 'choose', OO.ui.bind( this.onModeChange, this
) );
// Initialization
this.pageMenu.selectItemByData( this.mode.page );
this.themeSelect.selectItemByData( this.mode.theme );
- this.graphicsSelect.selectItemByData( this.mode.graphics );
this.directionSelect.selectItemByData( this.mode.direction );
this.$menu
.addClass( 'oo-ui-demo-menu' )
.append(
this.pageDropdown.$element,
this.themeSelect.$element,
- this.graphicsSelect.$element,
this.directionSelect.$element,
this.jsPhpSelect.$element
);
@@ -147,21 +138,6 @@
};
/**
- * Available graphics formats.
- *
- * List of graphics format descriptions, each containing a `fileSuffix`
property used for linking
- * to the correct stylesheet file.
- *
- * @static
- * @property {Object.<string,Object>}
- */
-OO.ui.Demo.static.graphics = {
- mixed: { fileSuffix: '' },
- vector: { fileSuffix: '.vector' },
- raster: { fileSuffix: '.raster' }
-};
-
-/**
* Available text directions.
*
* List of text direction descriptions, each containing a `fileSuffix`
property used for linking to
@@ -203,16 +179,6 @@
* @static
* @property {string}
*/
-OO.ui.Demo.static.defaultGraphics = 'mixed';
-
-/**
- * Default page.
- *
- * Set by one of the page scripts in the `pages` directory.
- *
- * @static
- * @property {string}
- */
OO.ui.Demo.static.defaultDirection = 'ltr';
/* Methods */
@@ -242,10 +208,9 @@
OO.ui.Demo.prototype.onModeChange = function () {
var page = this.pageMenu.getSelectedItem().getData(),
theme = this.themeSelect.getSelectedItem().getData(),
- direction = this.directionSelect.getSelectedItem().getData(),
- graphics = this.graphicsSelect.getSelectedItem().getData();
+ direction = this.directionSelect.getSelectedItem().getData();
- location.hash = '#' + [ page, theme, graphics, direction ].join( '-' );
+ location.hash = '#' + [ page, theme, direction ].join( '-' );
};
/**
@@ -254,14 +219,14 @@
* Factors are a mapping between symbolic names used in the URL hash and
internal information used
* to act on those symbolic names.
*
- * Factor lists are in URL order: page, theme, graphics, direction. Page
contains the symbolic
+ * Factor lists are in URL order: page, theme, direction. Page contains the
symbolic
* page name, others contain file suffixes.
*
* @return {Object[]} List of mode factors, keyed by symbolic name
*/
OO.ui.Demo.prototype.getFactors = function () {
var key,
- factors = [ {}, {}, {}, {} ];
+ factors = [ {}, {}, {} ];
for ( key in this.constructor.static.pages ) {
factors[ 0 ][ key ] = key;
@@ -269,11 +234,8 @@
for ( key in this.constructor.static.themes ) {
factors[ 1 ][ key ] = this.constructor.static.themes[ key
].fileSuffix;
}
- for ( key in this.constructor.static.graphics ) {
- factors[ 2 ][ key ] = this.constructor.static.graphics[ key
].fileSuffix;
- }
for ( key in this.constructor.static.directions ) {
- factors[ 3 ][ key ] = this.constructor.static.directions[ key
].fileSuffix;
+ factors[ 2 ][ key ] = this.constructor.static.directions[ key
].fileSuffix;
}
return factors;
@@ -282,7 +244,7 @@
/**
* Get a list of default factors.
*
- * Factor defaults are in URL order: page, theme, graphics, direction. Each
contains a symbolic
+ * Factor defaults are in URL order: page, theme, direction. Each contains a
symbolic
* factor name which should be used as a fallback when the URL hash is missing
or invalid.
*
* @return {Object[]} List of default factors
@@ -291,7 +253,6 @@
return [
this.constructor.static.defaultPage,
this.constructor.static.defaultTheme,
- this.constructor.static.defaultGraphics,
this.constructor.static.defaultDirection
];
};
@@ -299,7 +260,7 @@
/**
* Parse the current URL hash into factor values.
*
- * @return {string[]} Factor values in URL order: page, theme, graphics,
direction
+ * @return {string[]} Factor values in URL order: page, theme, direction
*/
OO.ui.Demo.prototype.getCurrentFactorValues = function () {
return location.hash.slice( 1 ).split( '-' );
@@ -318,8 +279,7 @@
return {
page: factorValues[ 0 ],
theme: factorValues[ 1 ],
- graphics: factorValues[ 2 ],
- direction: factorValues[ 3 ]
+ direction: factorValues[ 2 ]
};
};
@@ -343,11 +303,11 @@
// Theme styles
urls.push( 'dist/oojs-ui' + fragments.slice( 1 ).join( '' ) + '.css' );
for ( i = 0, len = suffixes.length; i < len; i++ ) {
- urls.push( 'dist/oojs-ui' + fragments[ 1 ] + suffixes[ i ] +
fragments.slice( 2 ).join( '' ) + '.css' );
+ urls.push( 'dist/oojs-ui' + fragments[ 1 ] + suffixes[ i ] +
'.css' );
}
// Demo styles
- urls.push( 'styles/demo' + fragments[ 3 ] + '.css' );
+ urls.push( 'styles/demo' + fragments[ 2 ] + '.css' );
// Add link tags
links = urls.map( function ( url ) {
diff --git a/demos/widgets.php b/demos/widgets.php
index 3512cd0..98938fb 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -10,25 +10,15 @@
$themeClass = 'OOUI\\' . ( $theme === 'apex' ? 'Apex' : 'MediaWiki' ) .
'Theme';
OOUI\Theme::setSingleton( new $themeClass() );
- $graphicSuffixMap = array(
- 'mixed' => '',
- 'vector' => '.vector',
- 'raster' => '.raster',
- );
- $graphic = ( isset( $_GET['graphic'] ) && isset( $graphicSuffixMap[
$_GET['graphic'] ] ) )
- ? $_GET['graphic'] : 'mixed';
- $graphicSuffix = $graphicSuffixMap[ $graphic ];
-
$direction = ( isset( $_GET['direction'] ) && $_GET['direction'] ===
'rtl' ) ? 'rtl' : 'ltr';
$directionSuffix = $direction === 'rtl' ? '.rtl' : '';
OOUI\Element::setDefaultDir( $direction );
$query = array(
'theme' => $theme,
- 'graphic' => $graphic,
'direction' => $direction,
);
- $styleFileName = "oojs-ui-$theme$graphicSuffix$directionSuffix.css";
+ $styleFileName = "oojs-ui-$theme$directionSuffix.css";
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
@@ -59,23 +49,6 @@
'infusable' => true,
'items' => array(
new OOUI\ButtonWidget( array(
- 'label' => 'Mixed',
- 'href' => '?' .
http_build_query( array_merge( $query, array( 'graphic' => 'mixed' ) ) ),
- ) ),
- new OOUI\ButtonWidget( array(
- 'label' => 'Vector',
- 'href' => '?' .
http_build_query( array_merge( $query, array( 'graphic' => 'vector' ) ) ),
- ) ),
- new OOUI\ButtonWidget( array(
- 'label' => 'Raster',
- 'href' => '?' .
http_build_query( array_merge( $query, array( 'graphic' => 'raster' ) ) ),
- ) ),
- )
- ) );
- echo new OOUI\ButtonGroupWidget( array(
- 'infusable' => true,
- 'items' => array(
- new OOUI\ButtonWidget( array(
'label' => 'LTR',
'href' => '?' .
http_build_query( array_merge( $query, array( 'direction' => 'ltr' ) ) ),
) ),
@@ -91,7 +64,7 @@
'items' => array(
new OOUI\ButtonWidget( array(
'label' => 'JS',
- 'href' =>
".#widgets-$theme-$graphic-$direction",
+ 'href' =>
".#widgets-$theme-$direction",
) ),
new OOUI\ButtonWidget( array(
'label' => 'PHP',
--
To view, visit https://gerrit.wikimedia.org/r/266495
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic6309b4e98a9f855891dcd85b112d5326a50cf7a
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
