flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

experementing with image rendering, still odd with chrome...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-09-03 05:26:24 +03:00
parent d157c9083f
commit 830e1f9cc5
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui (gen4)/css/layout.less
View File

@ -648,6 +648,13 @@ stretching in width... */
background-size: contain; background-size: contain;
border: solid @image-border transparent; border: solid @image-border transparent;
} }
.crisp-resize .image {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* /*
.current.image { .current.image {
border: solid 5px red; border: solid 5px red;

18
ui (gen4)/features/ui.js
View File

@ -203,6 +203,16 @@ module.ViewerActions = actions.Actions({
'ribbon-align-mode': null, 'ribbon-align-mode': null,
'ribbon-align-delay': 50, 'ribbon-align-delay': 50,
// Change image rendering modes...
//
// See:
// .toggleImageRendering(..)
// css/layout.css
//
// XXX EXPERIMENTAL: this does not seem to have an effect on chrome...
'image-rendering': 'crisp-resize',
}, },
// Viewer dom... // Viewer dom...
@ -669,6 +679,12 @@ module.ViewerActions = actions.Actions({
function(target){ }], function(target){ }],
ribbonRotation: ['- Interface|Ribbon/', ribbonRotation: ['- Interface|Ribbon/',
function(angle){ }], function(angle){ }],
toggleImageRendering: ['Interface/Image rendering',
toggler.CSSClassToggler(
function(){ return this.dom },
['crisp-resize', 'default-resize'],
function(state){ this.config['image-rendering'] = state }) ],
}) })
var Viewer = var Viewer =
@ -706,6 +722,8 @@ module.Viewer = core.ImageGridFeatures.Feature({
&& this.toggleRibbonTheme(this.config['ribbon-theme']) && this.toggleRibbonTheme(this.config['ribbon-theme'])
this.config['ribbon-image-separators'] this.config['ribbon-image-separators']
&& this.toggleRibbonImageSepators(this.config['ribbon-image-separators']) && this.toggleRibbonImageSepators(this.config['ribbon-image-separators'])
this.config['ribbon-theme']
&& this.toggleImageRendering(this.config['image-rendering'])
// center viewer on resize events... // center viewer on resize events...
if(!this.__viewer_resize){ if(!this.__viewer_resize){