From 47a31f216e481f9a25f96534e03c27c04f16d762 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 3 Nov 2014 06:20:16 +0300 Subject: [PATCH] ... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/layout.css | 86 --------------------------------------- ui (gen4)/css/layout.less | 1 + ui (gen4)/viewer.js | 2 +- 3 files changed, 2 insertions(+), 87 deletions(-) diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css index 9b933289..44d50ae1 100644 --- a/ui (gen4)/css/layout.css +++ b/ui (gen4)/css/layout.css @@ -129,7 +129,6 @@ button:hover { opacity: 0; z-index: 10000; /* node-webkit */ - -webkit-app-region: drag; } .title-bar:hover { @@ -160,7 +159,6 @@ button:hover { font-size: 18px; vertical-align: middle; /* node-webkit */ - -webkit-app-region: no-drag; } .title-bar .button:hover { @@ -181,7 +179,6 @@ button:hover { height: 100vh; overflow: hidden; /*border: solid blue 1px;*/ - box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; @@ -203,7 +200,6 @@ button:hover { shift the element, when its dimensions change... ...this is because .ribbon-set will both be used for scaling and aligning... */ - -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; @@ -246,10 +242,8 @@ stretching in width... */ display: block; /* XXX BUG: setting this will mess up new ribbon creation.... display: inline-block;*/ - height: auto; /*min-width: 0px;*/ - width: auto; overflow: visible; white-space: nowrap; @@ -287,7 +281,6 @@ stretching in width... */ text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em; /* NOTE: we can't set the bg color here because it will get affected by filters... */ - background: no-repeat 50% transparent; background-size: contain; border: solid 1.5px transparent; @@ -333,13 +326,11 @@ stretching in width... */ -ms-transform: rotate(270deg) scaleY(1) scaleX(1); transform: rotate(270deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - opacity: 0.5; } .single-image-mode.viewer .marker { @@ -369,13 +360,11 @@ stretching in width... */ -ms-transform: rotate(90deg) scaleY(1) scaleX(1); transform: rotate(90deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"] { -webkit-transform: rotate(180deg) scaleY(1) scaleX(1); @@ -384,13 +373,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(1) scaleX(1); transform: rotate(180deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"] { -webkit-transform: rotate(270deg) scaleY(1) scaleX(1); @@ -399,13 +386,11 @@ stretching in width... */ -ms-transform: rotate(270deg) scaleY(1) scaleX(1); transform: rotate(270deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } /* Flipped vertically only... */ /* NOTE: wee need to do all possible combinations here as we can't @@ -418,13 +403,11 @@ stretching in width... */ -ms-transform: rotate(0deg) scaleY(-1) scaleX(1); transform: rotate(0deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="90"][flipped="vertical"] { -webkit-transform: rotate(90deg) scaleY(-1) scaleX(1); @@ -433,13 +416,11 @@ stretching in width... */ -ms-transform: rotate(90deg) scaleY(-1) scaleX(1); transform: rotate(90deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"][flipped="vertical"] { -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1); @@ -448,13 +429,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(-1) scaleX(1); transform: rotate(180deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"][flipped="vertical"] { -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1); @@ -463,13 +442,11 @@ stretching in width... */ -ms-transform: rotate(270deg) scaleY(-1) scaleX(1); transform: rotate(270deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } /* Flipped horizontally only... */ .image[flipped*="horizontal"] { @@ -479,13 +456,11 @@ stretching in width... */ -ms-transform: rotate(0deg) scaleY(1) scaleX(-1); transform: rotate(0deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="90"][flipped="horizontal"] { -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1); @@ -494,13 +469,11 @@ stretching in width... */ -ms-transform: rotate(90deg) scaleY(1) scaleX(-1); transform: rotate(90deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"][flipped="horizontal"] { -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1); @@ -509,13 +482,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(1) scaleX(-1); transform: rotate(180deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"][flipped="horizontal"] { -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1); @@ -524,13 +495,11 @@ stretching in width... */ -ms-transform: rotate(270deg) scaleY(1) scaleX(-1); transform: rotate(270deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } /* Flipped vertically and horizontally... */ .image[flipped*="vertical"][flipped*="horizontal"] { @@ -540,13 +509,11 @@ stretching in width... */ -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); transform: rotate(0deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] { -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1); @@ -555,13 +522,11 @@ stretching in width... */ -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1); transform: rotate(90deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] { -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1); @@ -570,13 +535,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); transform: rotate(180deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] { -webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1); @@ -585,13 +548,11 @@ stretching in width... */ -ms-transform: rotate(270deg) scaleY(-1) scaleX(-1); transform: rotate(270deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } /* default backgrounds */ /* XXX not sure if we need these... @@ -730,7 +691,6 @@ stretching in width... */ /* new gen marks... */ .mark { /* this fully covers the image to simplify positioning of actual marks */ - margin-left: -300px; border: none; } @@ -813,13 +773,11 @@ stretching in width... */ -ms-transform: rotate(-90deg) scaleY(1) scaleX(1); transform: rotate(-90deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"] .inline-image-info { top: 0px; @@ -830,13 +788,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(1) scaleX(1); transform: rotate(180deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"] .inline-image-info { top: auto; @@ -851,13 +807,11 @@ stretching in width... */ -ms-transform: rotate(90deg) scaleY(1) scaleX(1); transform: rotate(90deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } /* compensate for flipping... */ /* XXX START: I hate this code, will think if a better way to do this... */ @@ -868,13 +822,11 @@ stretching in width... */ -ms-transform: rotate(0deg) scaleY(1) scaleX(-1); transform: rotate(0deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="90"][flipped*="horizontal"] .inline-image-info { top: auto; @@ -890,13 +842,11 @@ stretching in width... */ -ms-transform: rotate(90deg) scaleY(1) scaleX(-1); transform: rotate(90deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"][flipped*="horizontal"] .inline-image-info { top: auto; @@ -912,13 +862,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(1) scaleX(-1); transform: rotate(180deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"][flipped*="horizontal"] .inline-image-info { top: auto; @@ -934,13 +882,11 @@ stretching in width... */ -ms-transform: rotate(270deg) scaleY(1) scaleX(-1); transform: rotate(270deg) scaleY(1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[flipped*="vertical"] .inline-image-info { top: 0px; @@ -951,13 +897,11 @@ stretching in width... */ -ms-transform: rotate(0deg) scaleY(-1) scaleX(1); transform: rotate(0deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="90"][flipped*="vertical"] .inline-image-info { top: auto; @@ -973,13 +917,11 @@ stretching in width... */ -ms-transform: rotate(-270deg) scaleY(-1) scaleX(1); transform: rotate(-270deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"][flipped*="vertical"] .inline-image-info { top: auto; @@ -995,13 +937,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(-1) scaleX(1); transform: rotate(180deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"][flipped*="vertical"] .inline-image-info { top: auto; @@ -1017,13 +957,11 @@ stretching in width... */ -ms-transform: rotate(270deg) scaleY(-1) scaleX(1); transform: rotate(270deg) scaleY(-1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info { top: 0px; @@ -1034,13 +972,11 @@ stretching in width... */ -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); transform: rotate(0deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { top: auto; @@ -1056,13 +992,11 @@ stretching in width... */ -ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1); transform: rotate(-90deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { top: auto; @@ -1078,13 +1012,11 @@ stretching in width... */ -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); transform: rotate(180deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { top: auto; @@ -1100,13 +1032,11 @@ stretching in width... */ -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1); transform: rotate(90deg) scaleY(-1) scaleX(-1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } /* XXX END */ .overlay-info { @@ -1183,13 +1113,11 @@ stretching in width... */ -ms-transform: rotate(45deg) scaleY(1) scaleX(1); transform: rotate(45deg) scaleY(1) scaleX(1); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .down-indicator { top: auto; @@ -1346,7 +1274,6 @@ stretching in width... */ .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked, .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked { /*display: none;*/ - display: inline-block; text-decoration: line-through; opacity: 0.3; @@ -1483,18 +1410,15 @@ progress:not(value)::-webkit-progress-bar { .single-image-mode.viewer .image { background-color: transparent; /* NOTE: need to keep a distance from screen borders... */ - border: solid transparent 2px; } .single-image-mode.viewer .image:not(.current) { /* XXX for some reason this breaks the alignment on large magnifications... display: none; */ - /* XXX this makes images pass through the :visible filter... opacity: 0; */ - visibility: hidden; } /********************************************************** Themes ***/ @@ -1575,13 +1499,11 @@ progress:not(value)::-webkit-progress-bar { -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7); transform: rotate(0deg) scaleY(0.7) scaleX(0.7); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } .small.viewer:not(.single-image-mode) .mark:after, .small.viewer:not(.single-image-mode) .marked.image:after { @@ -1591,13 +1513,11 @@ progress:not(value)::-webkit-progress-bar { -ms-transform: rotate(0deg) scaleY(1.5) scaleX(1.5); transform: rotate(0deg) scaleY(1.5) scaleX(1.5); /* This prevents elements from aligning to sub-pixels...*/ - /* -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ - } /********************************************************* Overlay ***/ .overlay-block { @@ -1614,7 +1534,6 @@ progress:not(value)::-webkit-progress-bar { /* XXX this is experimental... */ .viewer.overlay .ribbon-set { /* XXX blur makes things slow with transparency... */ - -webkit-filter: /*blur(2px)*/ grayscale(0.5); filter: /*blur(2px)*/ grayscale(0.5); /* @@ -1626,13 +1545,11 @@ progress:not(value)::-webkit-progress-bar { -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 0s; */ - } .overlay-block .content, .overlay-block .background { /* XXX for some magical reason position and top are overwritten with 'static' and 'auto' values respectively */ - position: absolute !important; top: 0px !important; left: 0px; @@ -1664,13 +1581,10 @@ progress:not(value)::-webkit-progress-bar { min-height: 50px; min-width: 300px; /* XXX for some reason this is not sized correctly... */ - max-height: 90%; max-width: 90%; /* XXX this needs to be lower priority than max-height... */ - /*overflow-y: auto;*/ - color: white; border: solid silver 1px; border-radius: 3px; diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index e3fd7a1a..f8c21868 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -8,6 +8,7 @@ // XXX current used version of node-webkit (0.8) is buggy with this... // -- ribbons are not sized horizpntally correctly... //@image-tile-size: 100vmin; +//@image-tile-size: 100vmax; // these are relative to image tile size... @image-border: @image-tile-size/200; diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index 7d15ac8b..cbb288b7 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -1349,7 +1349,7 @@ module.CurrentImageIndicator = Feature({ that.updateMarker(this, null, w0 > w1 ? 'before' : 'after') } }) - // hide marker on shift left/right... + // hide marker on shift left/right and show it after done shifting... .on([ 'shiftImageLeft.pre', 'shiftImageRight.pre',