diff --git a/apps/common/main/resources/img/toolbar/1.5x/.css.handlebars b/apps/common/main/resources/img/toolbar/1.5x/.css.handlebars new file mode 100644 index 000000000..525a22291 --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.5x/.css.handlebars @@ -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}} diff --git a/apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars b/apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars new file mode 100644 index 000000000..6b49c6432 --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars @@ -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}} diff --git a/apps/documenteditor/main/resources/img/toolbar/1x/.css.handlebars b/apps/common/main/resources/img/toolbar/1x/.css.handlebars similarity index 100% rename from apps/documenteditor/main/resources/img/toolbar/1x/.css.handlebars rename to apps/common/main/resources/img/toolbar/1x/.css.handlebars diff --git a/apps/documenteditor/main/resources/img/toolbar/1x/big/.css.handlebars b/apps/common/main/resources/img/toolbar/1x/big/.css.handlebars similarity index 100% rename from apps/documenteditor/main/resources/img/toolbar/1x/big/.css.handlebars rename to apps/common/main/resources/img/toolbar/1x/big/.css.handlebars diff --git a/apps/common/main/resources/img/toolbar/2x/.css.handlebars b/apps/common/main/resources/img/toolbar/2x/.css.handlebars new file mode 100644 index 000000000..1e8b11e28 --- /dev/null +++ b/apps/common/main/resources/img/toolbar/2x/.css.handlebars @@ -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}} diff --git a/apps/documenteditor/main/resources/img/toolbar/2x/.css.handlebars b/apps/common/main/resources/img/toolbar/2x/big/.css.handlebars similarity index 89% rename from apps/documenteditor/main/resources/img/toolbar/2x/.css.handlebars rename to apps/common/main/resources/img/toolbar/2x/big/.css.handlebars index c6772c331..382ce91c8 100644 --- a/apps/documenteditor/main/resources/img/toolbar/2x/.css.handlebars +++ b/apps/common/main/resources/img/toolbar/2x/big/.css.handlebars @@ -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; } } diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars b/apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars deleted file mode 100644 index 11a6a8157..000000000 --- a/apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars +++ /dev/null @@ -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}} diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/.css.handlebars b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/.css.handlebars deleted file mode 100644 index 11a6a8157..000000000 --- a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/.css.handlebars +++ /dev/null @@ -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}} diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/.css.handlebars b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/.css.handlebars deleted file mode 100644 index 38942761c..000000000 --- a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/.css.handlebars +++ /dev/null @@ -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}} diff --git a/build/sprites/Gruntfile.js b/build/sprites/Gruntfile.js index 7a412243d..5603a92e4 100644 --- a/build/sprites/Gruntfile.js +++ b/build/sprites/Gruntfile.js @@ -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']); }; \ No newline at end of file