Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[all] prepare sprites for 1.25x and 1.75x scaling

Browse source
This commit is contained in:
Maxim Kadushkin 2021-05-21 11:19:26 +03:00
parent 4f2abc2edf
commit 44210f7a5a
12 changed files with 135 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
apps/common/main/resources/img/toolbar/1.25x/.css.handlebars Normal file
View file

@ -0,0 +1,13 @@
{{#spritesheet}}
@media only screen {
@media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.4),
(min-resolution: 1.25dppx) and (max-resolution: 1.4dppx),
(min-resolution: 120dpi) and (max-resolution: 143dpi)
{
.toolbar__icon, .menu__icon {
background-image: url(resources/{{{escaped_image}}});
background-size: {{scaled width 1.25}}px auto;
}
}
}
{{/spritesheet}}

18
apps/common/main/resources/img/toolbar/1.25x/big/.css.handlebars Normal file
View file

@ -0,0 +1,18 @@
{{#spritesheet}}
@media only screen {
@media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.4),
(min-resolution: 1.25dppx) and (max-resolution: 1.4dppx),
(min-resolution: 120dpi) and (max-resolution: 143dpi)
{
.x-huge .toolbar__icon {
background-image: url(resources/{{{escaped_image}}});
background-size: {{scaled width 1.25}}px auto;
}
}
}
.toolbar__icon.toolbar__icon-big {
background-size: 56px auto;
background-size: var(--big-icon-background-image-width) auto;
}
{{/spritesheet}}

6
apps/common/main/resources/img/toolbar/1.25x/huge/.css.handlebars Normal file
View file

@ -0,0 +1,6 @@
{{#spritesheet}}
.options__icon.options__icon-huge {
background-size: 80px auto;
background-size: var(--huge-icon-background-image-width) auto;
}
{{/spritesheet}}

6
apps/common/main/resources/img/toolbar/1.5x/.css.handlebars
View file

@ -1,8 +1,8 @@
{{#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)
@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.7),
(min-resolution: 1.5dppx) and (max-resolution: 1.7dppx),
(min-resolution: 144dpi) and (max-resolution: 167dpi)
{
.toolbar__icon, .menu__icon {
background-image: url(resources/{{{escaped_image}}});

6
apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars
View file

@ -1,8 +1,8 @@
{{#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)
@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.7),
(min-resolution: 1.5dppx) and (max-resolution: 1.7dppx),
(min-resolution: 144dpi) and (max-resolution: 167dpi)
{
.x-huge .toolbar__icon {
background-image: url(resources/{{{escaped_image}}});

13
apps/common/main/resources/img/toolbar/1.75x/.css.handlebars Normal file
View file

@ -0,0 +1,13 @@
{{#spritesheet}}
@media only screen {
@media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9),
(min-resolution: 1.75dppx) and (max-resolution: 1.9dppx),
(min-resolution: 168dpi) and (max-resolution: 191dpi)
{
.toolbar__icon, .menu__icon {
background-image: url(resources/{{{escaped_image}}});
background-size: {{scaled width 1.75}}px auto;
}
}
}
{{/spritesheet}}

18
apps/common/main/resources/img/toolbar/1.75x/big/.css.handlebars Normal file
View file

@ -0,0 +1,18 @@
{{#spritesheet}}
@media only screen {
@media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9),
(min-resolution: 1.75dppx) and (max-resolution: 1.9dppx),
(min-resolution: 168dpi) and (max-resolution: 191dpi)
{
.x-huge .toolbar__icon {
background-image: url(resources/{{{escaped_image}}});
background-size: {{scaled width 1.75}}px auto;
}
}
}
.toolbar__icon.toolbar__icon-big {
background-size: 56px auto;
background-size: var(--big-icon-background-image-width) auto;
}
{{/spritesheet}}

6
apps/common/main/resources/img/toolbar/1.75x/huge/.css.handlebars Normal file
View file

@ -0,0 +1,6 @@
{{#spritesheet}}
.options__icon.options__icon-huge {
background-size: 80px auto;
background-size: var(--huge-icon-background-image-width) auto;
}
{{/spritesheet}}

6
apps/documenteditor/main/resources/less/app.less
View file

@ -141,9 +141,15 @@
@import "sprites/iconshuge@1x";
@import "sprites/iconssmall@2x";
@import "sprites/iconsbig@2x";
@import "sprites/iconssmall@1.25x";
@import "sprites/iconsbig@1.25x";
@import "sprites/iconshuge@1.25x";
@import "sprites/iconssmall@1.5x";
@import "sprites/iconsbig@1.5x";
@import "sprites/iconshuge@1.5x";
@import "sprites/iconssmall@1.75x";
@import "sprites/iconsbig@1.75x";
@import "sprites/iconshuge@1.75x";
:root {
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig.png)";

4
apps/presentationeditor/main/resources/less/app.less
View file

@ -138,6 +138,10 @@
@import "sprites/iconsbig@2x";
@import "sprites/iconssmall@1.5x";
@import "sprites/iconsbig@1.5x";
@import "sprites/iconssmall@1.25x";
@import "sprites/iconsbig@1.25x";
@import "sprites/iconssmall@1.75x";
@import "sprites/iconsbig@1.75x";
.font-size-small {
.fontsize(@font-size-small);

4
apps/spreadsheeteditor/main/resources/less/app.less
View file

@ -141,6 +141,10 @@
@import "sprites/iconsbig@2x";
@import "sprites/iconssmall@1.5x";
@import "sprites/iconsbig@1.5x";
@import "sprites/iconssmall@1.25x";
@import "sprites/iconsbig@1.25x";
@import "sprites/iconssmall@1.75x";
@import "sprites/iconsbig@1.75x";
.font-size-small {
.fontsize(@font-size-small);

42
build/sprites/Gruntfile.js
View file

@ -67,6 +67,25 @@ module.exports = function (grunt, rootpathprefix) {
scale: '2x',
extpath: 'huge'
}),
'word1.25x': configTemplate({
editor:'documenteditor',
spritename: sprite_name,
scale: '1.25x'
}),
'word-big-1.25x': configTemplate({
editor:'documenteditor',
spritename: sprite_name_big,
scale: '1.25x',
extpath: 'big'
}),
'word-huge-1.25x': configTemplate({
editor:'documenteditor',
spritename: sprite_name_huge,
scale: '1.25x',
extpath: 'huge'
}),
'word1.5x': configTemplate({
editor:'documenteditor',
spritename: sprite_name,
@ -84,6 +103,25 @@ module.exports = function (grunt, rootpathprefix) {
scale: '1.5x',
extpath: 'huge'
}),
'word1.75x': configTemplate({
editor:'documenteditor',
spritename: sprite_name,
scale: '1.75x'
}),
'word-big-1.75x': configTemplate({
editor:'documenteditor',
spritename: sprite_name_big,
scale: '1.75x',
extpath: 'big'
}),
'word-huge-1.75x': configTemplate({
editor:'documenteditor',
spritename: sprite_name_huge,
scale: '1.75x',
extpath: 'huge'
}),
'slide-1x': configTemplate({
editor:'presentationeditor',
spritename: sprite_name,
@ -157,7 +195,9 @@ module.exports = function (grunt, rootpathprefix) {
grunt.loadNpmTasks('grunt-spritesmith');
grunt.registerTask('word-icons', ['sprite:word-1x', 'sprite:word-big-1x', 'sprite:word-huge-1x', 'sprite:word-2x', 'sprite:word-big-2x', 'sprite:word-huge-2x',
'sprite:word1.5x', 'sprite:word-big-1.5x', 'sprite:word-huge-1.5x']);
'sprite:word1.25x', 'sprite:word-big-1.25x', 'sprite:word-huge-1.25x',
'sprite:word1.5x', 'sprite:word-big-1.5x', 'sprite:word-huge-1.5x',
'sprite:word1.75x', 'sprite:word-big-1.75x', 'sprite:word-huge-1.75x']);
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']);