Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactoring for css-embedded images

Browse source
This commit is contained in:
Maxim Kadushkin 2016-11-10 14:57:07 +03:00
parent e63a24cecf
commit be54167b60
9 changed files with 47 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/common/main/resources/less/asc-mixins.less
View file

@ -125,13 +125,13 @@
/**/ /**/
.background-ximage(@image, @image2x, @w: auto, @h: auto) { .background-ximage(@image, @image2x, @w: auto, @h: auto) {
background-image: e(%("url(%s)",@image)); background-image: data-uri(%("%s",@image));
@media @media
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx), only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) { only screen and (min-resolution: 192dpi) {
background-image: e(%("url(%s)",@image2x)); background-image: data-uri(%("%s",@image2x));
background-size: @w @h; background-size: @w @h;
} }
} }
@ -139,13 +139,13 @@
@common-controls-width: 100px; @common-controls-width: 100px;
.img-commonctrl, .img-commonctrl,
.theme-colorpalette .color-transparent, .palette-color-ext .color-transparent, .dropdown-menu li .checked:before, .input-error:before { .theme-colorpalette .color-transparent, .palette-color-ext .color-transparent, .dropdown-menu li .checked:before, .input-error:before {
background: e(%("url(%s)",'@{common-image-path}/@{common-controls}')) no-repeat; background: data-uri(%("%s",'@{common-image-path}/@{common-controls}')) no-repeat;
@media @media
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx), only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) { only screen and (min-resolution: 192dpi) {
background-image: e(%("url(%s)",'@{common-image-path}/@{common-controls2x}')); background-image: data-uri(%("%s",'@{common-image-path}/@{common-controls2x}'));
background-size: @common-controls-width auto; background-size: @common-controls-width auto;
} }
} }
@ -153,13 +153,13 @@
@img-toolbarmenu-width: 60px; @img-toolbarmenu-width: 60px;
.img-toolbarmenu .img-toolbarmenu
{ {
background: e(%("url(%s)",'@{app-image-path}/toolbar-menu.png')) no-repeat; background: data-uri(%("%s",'@{app-image-path}/toolbar-menu.png')) no-repeat;
@media @media
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx), only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) { only screen and (min-resolution: 192dpi) {
background-image: e(%("url(%s)",'@{app-image-path}/toolbar-menu@2x.png')); background-image: data-uri(%("%s",'@{app-image-path}/toolbar-menu@2x.png'));
background-size: @img-toolbarmenu-width auto; background-size: @img-toolbarmenu-width auto;
} }
} }
@ -167,13 +167,13 @@
@img-colorpicker-width: 205px; @img-colorpicker-width: 205px;
.img-colorpicker, .img-colorpicker,
.color-transparent, .hsb-colorpicker .empty-color:before { .color-transparent, .hsb-colorpicker .empty-color:before {
background: e(%("url(%s)",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')) no-repeat; background: data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')) no-repeat;
@media @media
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx), only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) { only screen and (min-resolution: 192dpi) {
background-image: e(%("url(%s)",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png')); background-image: data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png'));
background-size: @img-colorpicker-width auto; background-size: @img-colorpicker-width auto;
} }
} }

2
apps/common/main/resources/less/combo-border-size.less
View file

@ -23,6 +23,6 @@
} }
img, .image { img, .image {
background: ~"url(@{common-image-path}/combo-border-size/BorderSize.png) no-repeat 0 0 #fff"; background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 #fff";
} }
} }

2
apps/common/main/resources/less/loadmask.less
View file

@ -28,7 +28,7 @@
} }
.asc-loadmask-image { .asc-loadmask-image {
background-image: ~"url(@{common-image-path}/load-mask/loading.gif)"; background-image: ~"url(@{common-image-const-path}/load-mask/loading.gif)";
height: 33px; height: 33px;
width: 33px; width: 33px;
float: left; float: left;

6
apps/common/main/resources/less/variables.less
View file

@ -5,8 +5,10 @@
// Paths // Paths
// ------------------------- // -------------------------
@app-image-path: "resources/img"; @app-image-path: "../../resources/img"; // use for data-uri(...)
@common-image-path: "../../common/main/resources/img"; @common-image-path: "../../../../common/main/resources/img"; // use for data-uri(...)
@app-image-const-path: "../../resources/img"; // use for url(...)
@common-image-const-path: "../../../../common/main/resources/img"; // use for url(...)
// Grays // Grays
// ------------------------- // -------------------------

2
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -245,7 +245,7 @@
#id-toolbar-mnu-item-border-width { #id-toolbar-mnu-item-border-width {
.border-size-item { .border-size-item {
background: ~"url(@{app-image-path}/toolbar/BorderSize.png) repeat-x scroll 0 0"; background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) repeat-x scroll 0 0";
width: 80px; width: 80px;
height: 20px; height: 20px;
margin-top: -3px; margin-top: -3px;

64
build/Gruntfile.js
View file

@ -141,8 +141,10 @@ module.exports = function(grunt) {
production: { production: {
options: { options: {
compress: true, compress: true,
ieCompat: false,
modifyVars: packageFile['main']['less']['vars'],
plugins: [ plugins: [
// new (require('less-plugin-clean-css'))() new (require('less-plugin-clean-css'))()
] ]
}, },
files: { files: {
@ -158,10 +160,16 @@ module.exports = function(grunt) {
}, },
replace: { replace: {
fixLessUrl: { writeVersion: {
src: ['<%= pkg.main.less.files.dest %>'], src: ['<%= pkg.api.copy.script.dest %>' + '/documents/api.js'],
overwrite: true, overwrite: true,
replacements: packageFile['main']['less']['replacements'] replacements: [{
from: /(\#{2}BN\#)/,
to: function(matchedWord, index, fullText, regexMatches) {
// return content.replace(/(\#{2}BN\#)/, "." + (process.env['BUILD_NUMBER'] || packageFile.build));
return "." + (process.env['BUILD_NUMBER'] || packageFile.build);
}
}]
} }
}, },
@ -207,52 +215,6 @@ module.exports = function(grunt) {
}); });
}); });
grunt.registerTask('lessPostFix', function(){
if (packageFile.main.less.embedImages) {
grunt.config('replace.urlToUri', {
src: ['<%= pkg.main.less.files.dest %>'],
overwrite: true,
replacements: [{
from: /url\(\'?(?!data\:image)([^\)\'\"]+)\'?/g,
to: function(matchedWord, index, fullText, regexMatches) {
return 'data-uri(\'' + regexMatches + '\'';
}
},{
from: /filter\:\s?alpha\(opacity\s?=\s?[0-9]{1,3}\)\;/g,
to: ''
}]
});
grunt.config('less.uriPostfix', {
options: {
compress: true,
ieCompat: false
},
files: {
"<%= pkg.main.less.files.dest %>": "<%= pkg.main.less.files.dest %>"
}
});
grunt.config('clean.files', '<%= pkg.main.clean %>/resources/img');
grunt.task.run('replace:urlToUri', 'less:uriPostfix', 'clean');
}
grunt.config('replace.writeVersion', {
src: ['<%= pkg.api.copy.script.dest %>' + '/documents/api.js'],
overwrite: true,
replacements: [{
from: /(\#{2}BN\#)/,
to: function(matchedWord, index, fullText, regexMatches) {
// return content.replace(/(\#{2}BN\#)/, "." + (process.env['BUILD_NUMBER'] || packageFile.build));
return "." + (process.env['BUILD_NUMBER'] || packageFile.build);
}
}]
});
grunt.task.run('replace:writeVersion');
});
grunt.registerTask('mobile-app-init', function() { grunt.registerTask('mobile-app-init', function() {
grunt.initConfig({ grunt.initConfig({
pkg: grunt.file.readJSON(defaultConfig), pkg: grunt.file.readJSON(defaultConfig),
@ -385,7 +347,7 @@ module.exports = function(grunt) {
grunt.registerTask('deploy-jsrsasign', ['jsrsasign-init', 'clean', 'copy']); grunt.registerTask('deploy-jsrsasign', ['jsrsasign-init', 'clean', 'copy']);
grunt.registerTask('deploy-requirejs', ['requirejs-init', 'clean', 'uglify']); grunt.registerTask('deploy-requirejs', ['requirejs-init', 'clean', 'uglify']);
grunt.registerTask('deploy-app-main', ['main-app-init', 'clean', 'less', 'replace:fixLessUrl', 'requirejs', 'concat', 'imagemin', 'copy', 'lessPostFix']); grunt.registerTask('deploy-app-main', ['main-app-init', 'clean', 'imagemin', 'less', 'requirejs', 'concat', 'copy', 'replace:writeVersion']);
grunt.registerTask('deploy-app-mobile', ['mobile-app-init', 'clean', 'uglify', 'cssmin:styles', 'copy']); grunt.registerTask('deploy-app-mobile', ['mobile-app-init', 'clean', 'uglify', 'cssmin:styles', 'copy']);
grunt.registerTask('deploy-app-embed', ['embed-app-init', 'clean:prebuild', 'uglify', 'less', 'replace:fixLessUrl', 'copy', 'clean:postbuild']); grunt.registerTask('deploy-app-embed', ['embed-app-init', 'clean:prebuild', 'uglify', 'less', 'replace:fixLessUrl', 'copy', 'clean:postbuild']);

15
build/documenteditor.json
View file

@ -147,21 +147,16 @@
} }
}, },
"less": { "less": {
"embedImages": true,
"files": { "files": {
"src": "../apps/documenteditor/main/resources/less/app.less", "src": "../apps/documenteditor/main/resources/less/app.less",
"dest": "../deploy/web-apps/apps/documenteditor/main/resources/css/app.css" "dest": "../deploy/web-apps/apps/documenteditor/main/resources/css/app.css"
}, },
"replacements": [ "vars": {
{ "app-image-const-path": "'../img'",
"from": "../../common/main/resources/img/", "common-image-const-path": "'../img'",
"to": "../img/" "app-image-path": "'../../../../../deploy/web-apps/apps/documenteditor/main/resources/img'",
}, "common-image-path": "'../../../../../deploy/web-apps/apps/documenteditor/main/resources/img'"
{
"from": "resources/img/",
"to": "../img/"
} }
]
}, },
"imagemin": { "imagemin": {
"images-app": [ "images-app": [

15
build/presentationeditor.json
View file

@ -151,21 +151,16 @@
} }
}, },
"less": { "less": {
"embedImages": true,
"files": { "files": {
"src": "../apps/presentationeditor/main/resources/less/app.less", "src": "../apps/presentationeditor/main/resources/less/app.less",
"dest": "../deploy/web-apps/apps/presentationeditor/main/resources/css/app.css" "dest": "../deploy/web-apps/apps/presentationeditor/main/resources/css/app.css"
}, },
"replacements": [ "vars": {
{ "app-image-const-path": "'../img'",
"from": "../../common/main/resources/img/", "common-image-const-path": "'../img'",
"to": "../img/" "app-image-path": "'../../../../../deploy/web-apps/apps/presentationeditor/main/resources/img'",
}, "common-image-path": "'../../../../../deploy/web-apps/apps/presentationeditor/main/resources/img'"
{
"from": "resources/img/",
"to": "../img/"
} }
]
}, },
"imagemin": { "imagemin": {
"images-app": [ "images-app": [

17
build/spreadsheeteditor.json
View file

@ -1,7 +1,7 @@
{ {
"name": "spreadsheeteditor", "name": "spreadsheeteditor",
"version": "4.7.0", "version": "4.7.0",
"build": 877, "build": 878,
"homepage": "http://www.onlyoffice.com", "homepage": "http://www.onlyoffice.com",
"private": true, "private": true,
"sdk": { "sdk": {
@ -158,21 +158,16 @@
} }
}, },
"less": { "less": {
"embedImages": true,
"files": { "files": {
"src": "../apps/spreadsheeteditor/main/resources/less/app.less", "src": "../apps/spreadsheeteditor/main/resources/less/app.less",
"dest": "../deploy/web-apps/apps/spreadsheeteditor/main/resources/css/app.css" "dest": "../deploy/web-apps/apps/spreadsheeteditor/main/resources/css/app.css"
}, },
"replacements": [ "vars": {
{ "app-image-const-path": "'../img'",
"from": "../../common/main/resources/img/", "common-image-const-path": "'../img'",
"to": "../img/" "app-image-path": "'../../../../../deploy/web-apps/apps/spreadsheeteditor/main/resources/img'",
}, "common-image-path": "'../../../../../deploy/web-apps/apps/spreadsheeteditor/main/resources/img'"
{
"from": "resources/img/",
"to": "../img/"
} }
]
}, },
"imagemin": { "imagemin": {
"images-app": [ "images-app": [