[sprite] changed deploy script

This commit is contained in:
Maxim Kadushkin 2019-11-27 20:12:05 +03:00
parent a27842637e
commit 2efde585a4
10 changed files with 171 additions and 175 deletions

View 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}}

View file

@ -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}}

View 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}}

View file

@ -3,8 +3,8 @@
@media (-webkit-min-device-pixel-ratio: 2), @media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx), (min-resolution: 192dpi) (min-resolution: 2dppx), (min-resolution: 192dpi)
{ {
.toolbar__icon { .x-huge .toolbar__icon {
background-image: url(resources/{{{escaped_image}}}); background-image: url(resources/{{{escaped_image}}});
background-size: {{half width}}px auto; background-size: {{half width}}px auto;
} }
} }

View file

@ -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}}

View file

@ -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}}

View file

@ -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}}

View file

@ -1,99 +1,146 @@
module.exports = function (grunt) { module.exports = function (grunt, rootpathprefix) {
const sprite_name = 'iconssmall'; const sprite_name = 'iconssmall';
const sprite_name_big = 'iconsbig'; 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 = { const helpers = {
parselang: (name, options) => { parselang: (name, options) => {
if (/\((\S+)\)$/.test(name)) { if (/\((\S+)\)$/.test(name)) {
let _match = /(.+)\((\S+)\)$/.exec(name); let _match = /(.+)\((\S+)\)$/.exec(name);
return '[applang=' + _match[2] + '] ' + options.fn({name:_match[1]}); return '[applang=' + _match[2] + '] ' + options.fn({name:_match[1]});
} }
return options.fn({name:name}); 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({
grunt.initConfig({ sprite: {
sprite:{ 'word-1x': configTemplate({
word_small: { editor:'documenteditor',
src: ['../../apps/documenteditor/main/resources/img/toolbar/1x/*.png', '../../apps/common/main/resources/img/toolbar/1x/*.png'], spritename: sprite_name,
dest: '../../apps/documenteditor/main/resources/img/' + sprite_name + '.png', scale: '1x'
destCss: '../../apps/documenteditor/main/resources/less/sprites/'+ sprite_name +'@1x.less', }),
cssTemplate: '../../apps/documenteditor/main/resources/img/toolbar/1x/.css.handlebars', 'word-big-1x': configTemplate({
algorithm: 'top-down', editor:'documenteditor',
cssHandlebarsHelpers: helpers spritename: sprite_name_big,
}, scale: '1x',
word_big: { isbig: true
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', 'word-2x': configTemplate({
destCss: '../../apps/documenteditor/main/resources/less/sprites/' + sprite_name_big + '@1x.less', editor:'documenteditor',
cssTemplate: '../../apps/documenteditor/main/resources/img/toolbar/1x/big/.css.handlebars', spritename: sprite_name,
algorithm: 'top-down', scale: '2x'
cssHandlebarsHelpers: helpers }),
}, 'word-big-2x': configTemplate({
scale2x: { editor:'documenteditor',
src: '../../apps/documenteditor/main/resources/img/toolbar/2x/*.png', spritename: sprite_name_big,
dest: '../../apps/documenteditor/main/resources/img/' + sprite_name + '@2x.png', scale: '2x',
destCss: '../../apps/documenteditor/main/resources/less/sprites/toolbar@2x.less', isbig: true
cssTemplate: '../../apps/documenteditor/main/resources/img/toolbar/2x/.css.handlebars', }),
algorithm: 'top-down', 'word1.5x': configTemplate({
cssHandlebarsHelpers: helpers editor:'documenteditor',
}, spritename: sprite_name,
slide_small: { scale: '1.5x'
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', 'word-big-1.5x': configTemplate({
destCss: '../../apps/presentationeditor/main/resources/less/sprites/'+ sprite_name +'@1x.less', editor:'documenteditor',
cssTemplate: '../../apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars', spritename: sprite_name_big,
algorithm: 'top-down', scale: '1.5x',
cssHandlebarsHelpers: helpers isbig: true
}, }),
slide_big: { 'slide-1x': configTemplate({
src: ['../../apps/presentationeditor/main/resources/img/toolbar/1x/big/*.png', '../../apps/common/main/resources/img/toolbar/1x/big/*.png'], editor:'presentationeditor',
dest: '../../apps/presentationeditor/main/resources/img/' + sprite_name_big + '.png', spritename: sprite_name,
destCss: '../../apps/presentationeditor/main/resources/less/sprites/'+ sprite_name_big +'@1x.less', scale: '1x'
cssTemplate: '../../apps/presentationeditor/main/resources/img/toolbar/1x/big/.css.handlebars', }),
algorithm: 'top-down', 'slide-big-1x': configTemplate({
cssHandlebarsHelpers: helpers editor:'presentationeditor',
}, spritename: sprite_name_big,
cell_small: { scale: '1x',
src: ['../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/*.png', '../../apps/common/main/resources/img/toolbar/1x/*.png'], isbig: true
dest: '../../apps/spreadsheeteditor/main/resources/img/' + sprite_name + '.png', }),
destCss: '../../apps/spreadsheeteditor/main/resources/less/sprites/'+ sprite_name +'@1x.less', 'slide-2x': configTemplate({
cssTemplate: '../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/.css.handlebars', editor:'presentationeditor',
algorithm: 'top-down', spritename: sprite_name,
cssHandlebarsHelpers: helpers scale: '2x'
}, }),
cell_big: { 'slide-big-2x': configTemplate({
src: ['../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/*.png', '../../apps/common/main/resources/img/toolbar/1x/big/*.png'], editor:'presentationeditor',
dest: '../../apps/spreadsheeteditor/main/resources/img/' + sprite_name_big + '.png', spritename: sprite_name_big,
destCss: '../../apps/spreadsheeteditor/main/resources/less/sprites/'+ sprite_name_big +'@1x.less', scale: '2x',
cssTemplate: '../../apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/.css.handlebars', isbig: true
algorithm: 'top-down', }),
cssHandlebarsHelpers: helpers 'slide-1.5x': configTemplate({
} editor:'presentationeditor',
} spritename: sprite_name,
}); scale: '1.5x'
}),
// Load in `grunt-spritesmith` 'slide-big-1.5x': configTemplate({
grunt.loadNpmTasks('grunt-spritesmith'); 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']); // Load in `grunt-spritesmith`
grunt.registerTask('slide-icons', ['sprite:slide_small', 'sprite:slide_big']); grunt.loadNpmTasks('grunt-spritesmith');
grunt.registerTask('cell-icons', ['sprite:cell_small', 'sprite:cell_big']);
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('default', ['word-icons','slide-icons','cell-icons']); 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']);
}; };