[sprite] changed deploy script
This commit is contained in:
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),
|
@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;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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 = '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']);
|
||||||
};
|
};
|
Loading…
Reference in a new issue