[sprite] changed deploy script
This commit is contained in:
Maxim Kadushkin
parent
a27842637e
commit
2efde585a4
13
apps/common/main/resources/img/toolbar/1.5x/.css.handlebars
Normal file
13
apps/common/main/resources/img/toolbar/1.5x/.css.handlebars
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{{#spritesheet}}
|
||||
@media only screen {
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
|
||||
(min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
|
||||
(min-resolution: 144dpi) and (max-resolution: 191dpi)
|
||||
{
|
||||
.toolbar__icon, .menu__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
background-size: {{scaled width 1.5}}px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
{{/spritesheet}}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{{#spritesheet}}
|
||||
@media only screen {
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5),
|
||||
(min-resolution: 1.5dppx), (min-resolution: 144dpi)
|
||||
{
|
||||
.x-huge .toolbar__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
background-size: {{scaled width 1.5}}px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
{{/spritesheet}}
|
||||
12
apps/common/main/resources/img/toolbar/2x/.css.handlebars
Normal file
12
apps/common/main/resources/img/toolbar/2x/.css.handlebars
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{#spritesheet}}
|
||||
@media only screen {
|
||||
@media (-webkit-min-device-pixel-ratio: 2),
|
||||
(min-resolution: 2dppx), (min-resolution: 192dpi)
|
||||
{
|
||||
.toolbar__icon, .menu__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
background-size: {{half width}}px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
{{/spritesheet}}
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
@media (-webkit-min-device-pixel-ratio: 2),
|
||||
(min-resolution: 2dppx), (min-resolution: 192dpi)
|
||||
{
|
||||
.toolbar__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
.x-huge .toolbar__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
background-size: {{half width}}px auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
{{#spritesheet}}
|
||||
.btn {
|
||||
&.active, &:active {
|
||||
&:not(:disabled):not(.disabled) {
|
||||
.toolbar__icon {
|
||||
@btn-active-icon-offset: -20px;
|
||||
background-position-x: @btn-active-icon-offset;
|
||||
--bgX: @btn-active-icon-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu__icon {
|
||||
.no-checkmark.checked & {
|
||||
@btn-active-icon-offset: -20px;
|
||||
background-position-x: @btn-active-icon-offset;
|
||||
--bgX: @btn-active-icon-offset;
|
||||
}
|
||||
}
|
||||
.toolbar__icon, .menu__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
}
|
||||
{{/spritesheet}}
|
||||
{{#sprites}}
|
||||
{{#parselang name}}.{{name}}{{/parselang}} {
|
||||
background-position: {{px.offset_x}} {{px.offset_y}};
|
||||
|
||||
--bgX: {{px.offset_x}};
|
||||
background-position: var(--bgX) {{px.offset_y}};
|
||||
}
|
||||
{{/sprites}}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
{{#spritesheet}}
|
||||
.btn {
|
||||
&.active, &:active {
|
||||
&:not(:disabled):not(.disabled) {
|
||||
.toolbar__icon {
|
||||
@btn-active-icon-offset: -20px;
|
||||
background-position-x: @btn-active-icon-offset;
|
||||
--bgX: @btn-active-icon-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu__icon {
|
||||
.no-checkmark.checked & {
|
||||
@btn-active-icon-offset: -20px;
|
||||
background-position-x: @btn-active-icon-offset;
|
||||
--bgX: @btn-active-icon-offset;
|
||||
}
|
||||
}
|
||||
.toolbar__icon, .menu__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
}
|
||||
{{/spritesheet}}
|
||||
{{#sprites}}
|
||||
{{#parselang name}}.{{name}}{{/parselang}} {
|
||||
background-position: {{px.offset_x}} {{px.offset_y}};
|
||||
|
||||
--bgX: {{px.offset_x}};
|
||||
background-position: var(--bgX) {{px.offset_y}};
|
||||
}
|
||||
{{/sprites}}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
{{#spritesheet}}
|
||||
.btn {
|
||||
&.x-huge {
|
||||
&.active, &:active {
|
||||
&:not(:disabled):not(.disabled) {
|
||||
.toolbar__icon {
|
||||
@btn-active-icon-offset: -28px;
|
||||
background-position-x: @btn-active-icon-offset;
|
||||
--bgX: @btn-active-icon-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.x-huge .toolbar__icon {
|
||||
background-image: url(resources/{{{escaped_image}}});
|
||||
}
|
||||
{{/spritesheet}}
|
||||
{{#sprites}}
|
||||
{{#parselang name}}.x-huge .{{name}}{{/parselang}} {
|
||||
background-position: {{px.offset_x}} {{px.offset_y}};
|
||||
|
||||
--bgX: {{px.offset_x}};
|
||||
background-position: var(--bgX) {{px.offset_y}};
|
||||
}
|
||||
{{/sprites}}
|
||||
|
|
@ -1,99 +1,146 @@
|
|||
module.exports = function (grunt) {
|
||||
module.exports = function (grunt, rootpathprefix) {
|
||||
const sprite_name = 'iconssmall';
|
||||
const sprite_name_big = 'iconsbig';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = '../../apps/documenteditor/main/resources/img/' + sprite_name + '.png';
|
||||
const path2x = '../../apps/documenteditor/main/resources/img/' + sprite_name + '@2x.png';
|
||||
|
||||
try {
|
||||
// fs.unlinkSync(path);
|
||||
// fs.unlinkSync(path2x);
|
||||
//file removed
|
||||
} catch(err) {
|
||||
console.error(err)
|
||||
}
|
||||
|
||||
|
||||
const helpers = {
|
||||
parselang: (name, options) => {
|
||||
if (/\((\S+)\)$/.test(name)) {
|
||||
let _match = /(.+)\((\S+)\)$/.exec(name);
|
||||
let _match = /(.+)\((\S+)\)$/.exec(name);
|
||||
return '[applang=' + _match[2] + '] ' + options.fn({name:_match[1]});
|
||||
}
|
||||
|
||||
return options.fn({name:name});
|
||||
},
|
||||
half: num => {num/2;}
|
||||
half: num => {return num/2;},
|
||||
scaled: (num, factor) => {return num / factor;}
|
||||
};
|
||||
|
||||
const _prefix = rootpathprefix || '../../';
|
||||
const configTemplate = opts => {
|
||||
let _editor_res_root = `${_prefix}apps/${opts.editor}/main/resources`,
|
||||
_common_res_root = `${_prefix}apps/common/main/resources`,
|
||||
_scaled_path = `${opts.scale}/${opts.isbig ? 'big' : '.'}`;
|
||||
return {
|
||||
src: [`${_editor_res_root}/img/toolbar/${_scaled_path}/*.png`, `${_common_res_root}/img/toolbar/${_scaled_path}/*.png`],
|
||||
dest: `${_editor_res_root}/img/${opts.scale != '1x' ? opts.spritename + '@' + opts.scale : opts.spritename}.png`,
|
||||
destCss: `${_editor_res_root}/less/sprites/${opts.spritename}@${opts.scale}.less`,
|
||||
cssTemplate: `${_common_res_root}/img/toolbar/${_scaled_path}/.css.handlebars`,
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
};
|
||||
};
|
||||
|
||||
// Configure grunt
|
||||
grunt.initConfig({
|
||||
sprite:{
|
||||
word_small: {
|
||||
src: ['../../apps/documenteditor/main/resources/img/toolbar/1x/*.png', '../../apps/common/main/resources/img/toolbar/1x/*.png'],
|
||||
dest: '../../apps/documenteditor/main/resources/img/' + sprite_name + '.png',
|
||||
destCss: '../../apps/documenteditor/main/resources/less/sprites/'+ sprite_name +'@1x.less',
|
||||
cssTemplate: '../../apps/documenteditor/main/resources/img/toolbar/1x/.css.handlebars',
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
},
|
||||
word_big: {
|
||||
src: ['../../apps/documenteditor/main/resources/img/toolbar/1x/big/*.png', '../../apps/common/main/resources/img/toolbar/1x/big/*.png'],
|
||||
dest: '../../apps/documenteditor/main/resources/img/' + sprite_name_big + '.png',
|
||||
destCss: '../../apps/documenteditor/main/resources/less/sprites/' + sprite_name_big + '@1x.less',
|
||||
cssTemplate: '../../apps/documenteditor/main/resources/img/toolbar/1x/big/.css.handlebars',
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
},
|
||||
scale2x: {
|
||||
src: '../../apps/documenteditor/main/resources/img/toolbar/2x/*.png',
|
||||
dest: '../../apps/documenteditor/main/resources/img/' + sprite_name + '@2x.png',
|
||||
destCss: '../../apps/documenteditor/main/resources/less/sprites/toolbar@2x.less',
|
||||
cssTemplate: '../../apps/documenteditor/main/resources/img/toolbar/2x/.css.handlebars',
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
},
|
||||
slide_small: {
|
||||
src: ['../../apps/presentationeditor/main/resources/img/toolbar/1x/*.png', '../../apps/common/main/resources/img/toolbar/1x/*.png'],
|
||||
dest: '../../apps/presentationeditor/main/resources/img/' + sprite_name + '.png',
|
||||
destCss: '../../apps/presentationeditor/main/resources/less/sprites/'+ sprite_name +'@1x.less',
|
||||
cssTemplate: '../../apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars',
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
},
|
||||
slide_big: {
|
||||
src: ['../../apps/presentationeditor/main/resources/img/toolbar/1x/big/*.png', '../../apps/common/main/resources/img/toolbar/1x/big/*.png'],
|
||||
dest: '../../apps/presentationeditor/main/resources/img/' + sprite_name_big + '.png',
|
||||
destCss: '../../apps/presentationeditor/main/resources/less/sprites/'+ sprite_name_big +'@1x.less',
|
||||
cssTemplate: '../../apps/presentationeditor/main/resources/img/toolbar/1x/big/.css.handlebars',
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
},
|
||||
cell_small: {
|
||||
src: ['../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/*.png', '../../apps/common/main/resources/img/toolbar/1x/*.png'],
|
||||
dest: '../../apps/spreadsheeteditor/main/resources/img/' + sprite_name + '.png',
|
||||
destCss: '../../apps/spreadsheeteditor/main/resources/less/sprites/'+ sprite_name +'@1x.less',
|
||||
cssTemplate: '../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/.css.handlebars',
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
},
|
||||
cell_big: {
|
||||
src: ['../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/*.png', '../../apps/common/main/resources/img/toolbar/1x/big/*.png'],
|
||||
dest: '../../apps/spreadsheeteditor/main/resources/img/' + sprite_name_big + '.png',
|
||||
destCss: '../../apps/spreadsheeteditor/main/resources/less/sprites/'+ sprite_name_big +'@1x.less',
|
||||
cssTemplate: '../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/.css.handlebars',
|
||||
algorithm: 'top-down',
|
||||
cssHandlebarsHelpers: helpers
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Load in `grunt-spritesmith`
|
||||
grunt.loadNpmTasks('grunt-spritesmith');
|
||||
grunt.initConfig({
|
||||
sprite: {
|
||||
'word-1x': configTemplate({
|
||||
editor:'documenteditor',
|
||||
spritename: sprite_name,
|
||||
scale: '1x'
|
||||
}),
|
||||
'word-big-1x': configTemplate({
|
||||
editor:'documenteditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '1x',
|
||||
isbig: true
|
||||
}),
|
||||
'word-2x': configTemplate({
|
||||
editor:'documenteditor',
|
||||
spritename: sprite_name,
|
||||
scale: '2x'
|
||||
}),
|
||||
'word-big-2x': configTemplate({
|
||||
editor:'documenteditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '2x',
|
||||
isbig: true
|
||||
}),
|
||||
'word1.5x': configTemplate({
|
||||
editor:'documenteditor',
|
||||
spritename: sprite_name,
|
||||
scale: '1.5x'
|
||||
}),
|
||||
'word-big-1.5x': configTemplate({
|
||||
editor:'documenteditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '1.5x',
|
||||
isbig: true
|
||||
}),
|
||||
'slide-1x': configTemplate({
|
||||
editor:'presentationeditor',
|
||||
spritename: sprite_name,
|
||||
scale: '1x'
|
||||
}),
|
||||
'slide-big-1x': configTemplate({
|
||||
editor:'presentationeditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '1x',
|
||||
isbig: true
|
||||
}),
|
||||
'slide-2x': configTemplate({
|
||||
editor:'presentationeditor',
|
||||
spritename: sprite_name,
|
||||
scale: '2x'
|
||||
}),
|
||||
'slide-big-2x': configTemplate({
|
||||
editor:'presentationeditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '2x',
|
||||
isbig: true
|
||||
}),
|
||||
'slide-1.5x': configTemplate({
|
||||
editor:'presentationeditor',
|
||||
spritename: sprite_name,
|
||||
scale: '1.5x'
|
||||
}),
|
||||
'slide-big-1.5x': configTemplate({
|
||||
editor:'presentationeditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '1.5x',
|
||||
isbig: true
|
||||
}),
|
||||
'cell-1x': configTemplate({
|
||||
editor:'spreadsheeteditor',
|
||||
spritename: sprite_name,
|
||||
scale: '1x'
|
||||
}),
|
||||
'cell-big-1x': configTemplate({
|
||||
editor:'spreadsheeteditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '1x',
|
||||
isbig: true
|
||||
}),
|
||||
'cell-2x': configTemplate({
|
||||
editor:'spreadsheeteditor',
|
||||
spritename: sprite_name,
|
||||
scale: '2x'
|
||||
}),
|
||||
'cell-big-2x': configTemplate({
|
||||
editor:'spreadsheeteditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '2x',
|
||||
isbig: true
|
||||
}),
|
||||
'cell-1.5x': configTemplate({
|
||||
editor:'spreadsheeteditor',
|
||||
spritename: sprite_name,
|
||||
scale: '1.5x'
|
||||
}),
|
||||
'cell-big-1.5x': configTemplate({
|
||||
editor:'spreadsheeteditor',
|
||||
spritename: sprite_name_big,
|
||||
scale: '1.5x',
|
||||
isbig: true
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
grunt.registerTask('word-icons', ['sprite:word_small', 'sprite:word_big', 'sprite:scale2x']);
|
||||
grunt.registerTask('slide-icons', ['sprite:slide_small', 'sprite:slide_big']);
|
||||
grunt.registerTask('cell-icons', ['sprite:cell_small', 'sprite:cell_big']);
|
||||
|
||||
grunt.registerTask('default', ['word-icons','slide-icons','cell-icons']);
|
||||
// Load in `grunt-spritesmith`
|
||||
grunt.loadNpmTasks('grunt-spritesmith');
|
||||
|
||||
grunt.registerTask('word-icons', ['sprite:word-1x', 'sprite:word-big-1x', 'sprite:word-2x', 'sprite:word-big-2x', 'sprite:word1.5x', 'sprite:word-big-1.5x']);
|
||||
grunt.registerTask('slide-icons', ['sprite:slide-1x', 'sprite:slide-big-1x','sprite:slide-2x', 'sprite:slide-big-2x','sprite:slide-1.5x', 'sprite:slide-big-1.5x']);
|
||||
grunt.registerTask('cell-icons', ['sprite:cell-1x', 'sprite:cell-big-1x','sprite:cell-2x', 'sprite:cell-big-2x','sprite:cell-1.5x', 'sprite:cell-big-1.5x']);
|
||||
|
||||
grunt.registerTask('all-icons-sprite', ['word-icons','slide-icons','cell-icons']);
|
||||
grunt.registerTask('default', ['all-icons-sprite']);
|
||||
};
|
||||
Loading…
Reference in a new issue