jenkins-bot has submitted this change and it was merged. Change subject: [BREAKING CHANGE] Make default distribution provide SVG with PNG fallback ......................................................................
[BREAKING CHANGE] Make default distribution provide SVG with PNG fallback Serves SVG images to modern browsers and PNG images as a fallback for older ones, using the same technique we use for this in MediaWiki (http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique). This mixed SVG+PNG distribution is now the default one (without a suffix in the name). The previously-default raster PNG-only distribution is now available as with a '.raster' suffix, and the SVG-only distribution is renamed to have a '.vector' suffix to match. Bug: T87501 Change-Id: I5c56459fe6cf8690cc26eaac7969edd430251cab --- M Gruntfile.js M demos/demo.js M demos/widgets.php M src/styles/common.less M src/themes/apex/tools.less M src/themes/mediawiki/tools.less M src/themes/mediawiki/widgets.less 7 files changed, 66 insertions(+), 23 deletions(-) Approvals: Bartosz Dziewoński: Looks good to me, but someone else must approve Jforrester: Looks good to me, but someone else must approve Trevor Parscal: Looks good to me, approved jenkins-bot: Verified diff --git a/Gruntfile.js b/Gruntfile.js index fc9d699..edc713d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -27,8 +27,9 @@ 'oojs-ui-mediawiki': modules[ 'oojs-ui-mediawiki' ].styles }, lessFiles = { - default: {}, - svg: {} + raster: {}, + vector: {}, + mixed: {} }, originalLessFiles = {}, concatCssFiles = {}, @@ -45,9 +46,7 @@ } for ( module in styleTargets ) { for ( target in lessFiles ) { - distFile = target === 'default' ? - 'dist/' + module + '.css' : - 'dist/' + module + '.' + target + '.css'; + distFile = 'dist/' + module + ( target !== 'mixed' ? '.' + target : '' ) + '.css'; originalLessFiles[ distFile ] = styleTargets[ module ]; lessFiles[ target ][ distFile ] = styleTargets[ module ].map( fixLessDirectory ); @@ -138,25 +137,38 @@ // Build – Styling less: { - distDefault: { + distRaster: { options: { ieCompat: true, report: 'gzip', modifyVars: { + 'oo-ui-distribution': 'raster', 'oo-ui-default-image-ext': 'png' } }, - files: lessFiles.default + files: lessFiles.raster }, - distSvg: { + distVector: { options: { ieCompat: false, report: 'gzip', modifyVars: { + 'oo-ui-distribution': 'vector', 'oo-ui-default-image-ext': 'svg' } }, - files: lessFiles.svg + files: lessFiles.vector + }, + distMixed: { + options: { + ieCompat: false, + report: 'gzip', + modifyVars: { + 'oo-ui-distribution': 'mixed', + 'oo-ui-default-image-ext': 'png' + } + }, + files: lessFiles.mixed } }, cssjanus: { @@ -349,7 +361,7 @@ grunt.registerTask( 'quick-build', [ 'pre-git-build', 'clean:build', 'fileExists', 'typos', 'concat:js', - 'copy:lessTemp', 'colorizeSvg', 'less:distSvg', 'copy:svg', + 'copy:lessTemp', 'colorizeSvg', 'less:distVector', 'copy:svg', 'copy:imagesApex', 'copy:imagesMediaWiki', 'build-i18n' ] ); diff --git a/demos/demo.js b/demos/demo.js index fe0fa3f..8bc9b0e 100644 --- a/demos/demo.js +++ b/demos/demo.js @@ -32,6 +32,7 @@ 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' } ) ] ); @@ -115,8 +116,9 @@ * @property {Object.<string,Object>} */ OO.ui.Demo.static.graphics = { - vector: { fileSuffix: '.svg' }, - raster: { fileSuffix: '' } + mixed: { fileSuffix: '' }, + vector: { fileSuffix: '.vector' }, + raster: { fileSuffix: '.raster' } }; /** diff --git a/demos/widgets.php b/demos/widgets.php index 38ca94b..1d8476a 100644 --- a/demos/widgets.php +++ b/demos/widgets.php @@ -10,8 +10,14 @@ $themeClass = 'OOUI\\' . ( $theme === 'apex' ? 'Apex' : 'MediaWiki' ) . 'Theme'; OOUI\Theme::setSingleton( new $themeClass() ); - $graphic = ( isset( $_GET['graphic'] ) && $_GET['graphic'] === 'raster' ) ? 'raster' : 'vector'; - $graphicSuffix = $graphic === 'vector' ? '.svg' : ''; + $graphicSuffixMap = array( + 'mixed' => '', + 'vector' => '.svg', + 'raster' => '.png', + ); + $graphic = ( isset( $_GET['graphic'] ) && isset( $graphicSuffixMap[ $_GET['graphic'] ] ) ) + ? $_GET['graphic'] : 'vector'; + $graphicSuffix = $graphicSuffixMap[ $graphic ]; $direction = ( isset( $_GET['direction'] ) && $_GET['direction'] === 'rtl' ) ? 'rtl' : 'ltr'; $directionSuffix = $direction === 'rtl' ? '.rtl' : ''; @@ -51,6 +57,10 @@ echo new OOUI\ButtonGroupWidget( array( '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' ) ) ), ) ), diff --git a/src/styles/common.less b/src/styles/common.less index 436c4e0..ed1d7be 100644 --- a/src/styles/common.less +++ b/src/styles/common.less @@ -3,6 +3,7 @@ // Variables // @oo-ui-default-image-ext set during build +// @oo-ui-distribution set during build @oo-ui-default-image-path: 'images'; // Mixins @@ -11,20 +12,38 @@ background-image: e('/* @embed */') url(~'@{url}'); } +.oo-ui-background-image-svg( @url-without-extension, @fallback-ext: @oo-ui-default-image-ext ) + when ( @oo-ui-distribution = mixed ) { + @svg: '@{url-without-extension}.svg'; + @fallback: '@{url-without-extension}.@{fallback-ext}'; + background-image: url(@fallback); + background-image: -webkit-linear-gradient(transparent, transparent), e('/* @embed */') url(@svg); + background-image: linear-gradient(transparent, transparent), e('/* @embed */') url(@svg); + background-image: -o-linear-gradient(transparent, transparent), url(@fallback); +} +.oo-ui-background-image-svg( @url-without-extension, @fallback-ext: @oo-ui-default-image-ext ) + when ( @oo-ui-distribution = vector ) { + .oo-ui-background-image('@{url-without-extension}.svg'); +} +.oo-ui-background-image-svg( @url-without-extension, @fallback-ext: @oo-ui-default-image-ext ) + when ( @oo-ui-distribution = raster ) { + .oo-ui-background-image('@{url-without-extension}.@{fallback-ext}'); +} + .oo-ui-force-webkit-gpu() { -webkit-transform: translate3d(0, 0, 0); } .oo-ui-image( @type, @name, @file, @ext, @path ) { .oo-ui-@{type}-@{name} { - .oo-ui-background-image('@{path}/@{type}s/@{file}.@{ext}'); + .oo-ui-background-image-svg('@{path}/@{type}s/@{file}', @ext); } } .oo-ui-image-variant( @type, @name, @file, @variant, @ext, @path ) { .oo-ui-image-@{variant} .oo-ui-@{type}-@{name}, .oo-ui-image-@{variant}.oo-ui-@{type}-@{name} { - .oo-ui-background-image('@{path}/@{type}s/@{file}-@{variant}.@{ext}'); + .oo-ui-background-image-svg('@{path}/@{type}s/@{file}-@{variant}', @ext); } } diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less index 6aef30e..095e064 100644 --- a/src/themes/apex/tools.less +++ b/src/themes/apex/tools.less @@ -12,7 +12,7 @@ } &-shadow { - .oo-ui-background-image('themes/apex/images/toolbar-shadow.png'); + .oo-ui-background-image('@{oo-ui-default-image-path}/toolbar-shadow.png'); bottom: -9px; height: 9px; opacity: 0.125; @@ -304,7 +304,7 @@ } &-active .oo-ui-tool-link .oo-ui-iconElement-icon { - .oo-ui-background-image('@{oo-ui-default-image-path}/icons/check.@{oo-ui-default-image-ext}'); + .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check'); } &.oo-ui-widget-enabled { diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less index 3b3a472..294815c 100644 --- a/src/themes/mediawiki/tools.less +++ b/src/themes/mediawiki/tools.less @@ -250,7 +250,7 @@ } &-active .oo-ui-tool-link .oo-ui-iconElement-icon { - .oo-ui-background-image('@{oo-ui-default-image-path}/icons/check.@{oo-ui-default-image-ext}'); + .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check'); } &.oo-ui-widget-enabled { diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index cbdaebe..3bebf93 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -210,7 +210,7 @@ height: @input-size; background-color: white; border: 1px solid @input-border-color; - .oo-ui-background-image('@{oo-ui-default-image-path}/icons/check-constructive.@{oo-ui-default-image-ext}'); + .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check-constructive'); background-repeat: no-repeat; background-position: center center; background-origin: border-box; @@ -242,7 +242,7 @@ } &:disabled:checked + span::before { - .oo-ui-background-image('@{oo-ui-default-image-path}/icons/check-invert.@{oo-ui-default-image-ext}'); + .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check-invert'); } } } @@ -323,7 +323,7 @@ height: @input-size; background: white; border: 1px solid @input-border-color; - .oo-ui-background-image('@{oo-ui-default-image-path}/icons/circle-constructive.@{oo-ui-default-image-ext}'); + .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/circle-constructive'); background-repeat: no-repeat; background-position: center center; background-origin: border-box; @@ -355,7 +355,7 @@ } &:disabled:checked + span::before { - .oo-ui-background-image('@{oo-ui-default-image-path}/icons/circle-invert.@{oo-ui-default-image-ext}'); + .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/circle-invert'); } } } -- To view, visit https://gerrit.wikimedia.org/r/190839 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I5c56459fe6cf8690cc26eaac7969edd430251cab Gerrit-PatchSet: 4 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
