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-image: e(%("url(%s)",@image));
background-image: data-uri(%("%s",@image));
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) {
background-image: e(%("url(%s)",@image2x));
background-image: data-uri(%("%s",@image2x));
background-size: @w @h;
}
}
@ -139,13 +139,13 @@
@common-controls-width: 100px;
.img-commonctrl,
.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
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
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;
}
}
@ -153,13 +153,13 @@
@img-toolbarmenu-width: 60px;
.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
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
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;
}
}
@ -167,13 +167,13 @@
@img-colorpicker-width: 205px;
.img-colorpicker,
.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
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
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;
}
}

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

@ -23,6 +23,6 @@
}
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 {
background-image: ~"url(@{common-image-path}/load-mask/loading.gif)";
background-image: ~"url(@{common-image-const-path}/load-mask/loading.gif)";
height: 33px;
width: 33px;
float: left;

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

@ -5,8 +5,10 @@
// Paths
// -------------------------
@app-image-path: "resources/img";
@common-image-path: "../../common/main/resources/img";
@app-image-path: "../../resources/img"; // use for data-uri(...)
@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
// -------------------------

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

@ -245,7 +245,7 @@
#id-toolbar-mnu-item-border-width {
.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;
height: 20px;
margin-top: -3px;

64
build/Gruntfile.js
View file

@ -141,8 +141,10 @@ module.exports = function(grunt) {
production: {
options: {
compress: true,
ieCompat: false,
modifyVars: packageFile['main']['less']['vars'],
plugins: [
// new (require('less-plugin-clean-css'))()
new (require('less-plugin-clean-css'))()
]
},
files: {
@ -158,10 +160,16 @@ module.exports = function(grunt) {
},
replace: {
fixLessUrl: {
src: ['<%= pkg.main.less.files.dest %>'],
writeVersion: {
src: ['<%= pkg.api.copy.script.dest %>' + '/documents/api.js'],
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.initConfig({
pkg: grunt.file.readJSON(defaultConfig),
@ -385,7 +347,7 @@ module.exports = function(grunt) {
grunt.registerTask('deploy-jsrsasign', ['jsrsasign-init', 'clean', 'copy']);
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-embed', ['embed-app-init', 'clean:prebuild', 'uglify', 'less', 'replace:fixLessUrl', 'copy', 'clean:postbuild']);

15
build/documenteditor.json
View file

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

15
build/presentationeditor.json
View file

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

17
build/spreadsheeteditor.json
View file

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