From cebee4026d8add0ee6fbd054e92861708c4f6bd1 Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Thu, 7 Jun 2012 13:51:29 -0700 Subject: [PATCH] UI update from shorlanders comments. --- l10n/en-US/viewer.properties | 2 - web/images/toolbarButton-openFile.png | Bin 708 -> 417 bytes web/images/toolbarButton-search.png | Bin 744 -> 503 bytes web/viewer.css | 122 +++++++++++++++----------- web/viewer.html | 10 +-- web/viewer.js | 14 +-- 6 files changed, 82 insertions(+), 66 deletions(-) diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties index 66f4a43e8..de6fd95db 100644 --- a/l10n/en-US/viewer.properties +++ b/l10n/en-US/viewer.properties @@ -78,8 +78,6 @@ page_scale_auto=Automatic Zoom page_scale_actual=Actual Size # Loading indicator messages -# LOCALIZATION NOTE (error_line): "{{percent}}" will be replaced with a percentage -loading=Loading… {{percent}}% loading_error_indicator=Error loading_error=An error occurred while loading the PDF. diff --git a/web/images/toolbarButton-openFile.png b/web/images/toolbarButton-openFile.png index 12ce45f876b12eef3e5030b492d58d5fbb47ebbf..fc7023f2aafcdbb3b2412934c017225637c8bb9e 100644 GIT binary patch delta 392 zcmV;30eAky1)&3wBYy#CNklY`u@r0Pg5(gIt zKS4o}g1A}g%jhT};$T7OAPy;H>flra2St?bnbSZL$Y+TEgF85m2n7#*aQD1j5<>Dk z{}-_qVGT5BavG17$sDU1MbRrJ{zyK9Ab6?OYC6B5c=6<(=YM%$j^lg_uIo;H-=9t< zlSkxtp{YKd7+ej*aEu$@{_qYTs@ZHdX1zdk1V->IOVe~{S=O~}+x;xdhH4&0tQQEy z;Yk+9@qki#irfZlnx@%Jl4PLPv0flMI6MgWnD@G_A0u9eGFNZ4S|=$;IdoA&%*aEIC8B#;6{bGAq_B!YUBYID#T6c70jX< zF<={qb5*0!=peVnXqwh3s$soA*73KUA<$LypwIQxJnLb-KvsalAsjJ$e*iY@^Szp< myqA<<2`aEWrwZ>W{Q@<`>KMYv%sl`A002ovPDHLkU;%=F`M78R delta 685 zcmV;e0#f~<1H=W8BYyw{b3#c}2nYxWdT2_|?DW!B>L;_wc?Zu;_6+$X4AyT|~3gSQD&4XUWvwt`1MT#adDA|iAF$O&J zW)IeYO?2C3X?|_U?q;)L$AgU|O^W?sm~S5Md-J`Sk1)n?TBK5`$2`wpsaC7^cXoDy zX&f?5U~_Ym9}EUB7Zw)Mk|afHwOZNpyp3Y9*!r(PGMPL#Gc)r}Rn;4kB=GbGvUdso->AAhF`Boc|silV$#Rdt!?`7vR}7!1Ss={U~ALZR?+h;t);Z^^R!d47I= znGiBzD-1)#VzEo2D85Oj(+`F?9VVhEMmdiAWSXWxDZRe9xOibyz_Ki(UavpmIL`Kc zzcOYalgZqko11&Ky1Kdq0J&TavMi5vaCmrV3xe>RNu$-Rt#MG);r1X%j@x^CmDt2!bGhZQB*7L`x76v;_%@ zmM9iB^r1sVf!&a+LRUjYsGy;SXlXDSqS4Xa%|ApGMeLk-iHe)y13!4)=bZC?+^cI* zoxlhzV3LU5D72Q=TJZiW)sw zOIjPumdoV_nC`7s>n7GF&?y+kY>OH_^lEJ|5AhnNTS<~Our_?t44hGe=Z0Rb4W^8#t2=CeL_CxW$eqsE#3}8W)3Rq Ufyij|od5s;07*qoM6N<$f}oq*$p8QV delta 721 zcmV;?0xtdc1Ly^iBYyw{b3#c}2nYxWdYE`J5-`*D{Nl}cr8 zW@g3@!w|V#4u4x)TfYG81AvBqh=?@Cm9Om&^9U6?&eR*Yo*&bKHJUPEKC$ z?CiV+z~<)Wo>i;WcZ0!T#4|ZL+0Z=C%Z>v$jsqg<5>Y3ePNyEW006dadzxvQ{y0D? zl^XsKLYR#GeT=4QW;M?F*a|r3sr$EOS*dZJWJ)rb)sK&lzqVSfpHURCe!mYP1cVSc zJ3IS+Z@js=Y3%OqzL!!`5CqUPjX39Yd3iZ{%KxL^o{ai{04ZY800000NkvXXu0mjf D(X2-Q diff --git a/web/viewer.css b/web/viewer.css index 329bff2d5..7c7d4f684 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -146,7 +146,7 @@ html[dir='rtl'] #sidebarContent { #toolbarSidebar { width: 200px; - height: 32px; + height: 29px; background-image: url(images/texture.png), -moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95)); background-image: url(images/texture.png), @@ -242,9 +242,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { margin-right:0; } +.splitToolbarButton.toggled .toolbarButton { + margin: 0; +} + .splitToolbarButton:hover > .toolbarButton, .splitToolbarButton:focus > .toolbarButton, -.splitToolbarButton.toggled > .toolbarButton { +.splitToolbarButton.toggled > .toolbarButton, +.toolbarButton.textButton { background-color: hsla(0,0%,0%,.12); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); @@ -263,7 +268,9 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { } .splitToolbarButton > .toolbarButton:hover, .splitToolbarButton > .toolbarButton:focus, -.dropdownToolbarButton:hover { +.dropdownToolbarButton:hover, +.toolbarButton.textButton:hover, +.toolbarButton.textButton:focus { background-color: hsla(0,0%,0%,.2); box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, @@ -544,8 +551,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before { .toolbarField { - min-width: 16px; - width: 32px; padding: 3px 6px; margin: 4px 0 4px 0; border: 1px solid transparent; @@ -560,7 +565,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before { color: hsl(0,0%,95%); font-size: 12px; line-height: 14px; - text-align: right; outline-style: none; -moz-transition-property: background-color, border-color, box-shadow; -moz-transition-duration: 150ms; @@ -568,6 +572,8 @@ html[dir='rtl'] .toolbarButton.pageDown::before { } .toolbarField.pageNumber { + min-width: 16px; + text-align: right; width: 40px; } @@ -682,9 +688,11 @@ a:focus > .thumbnail > .thumbnailSelectionRing, margin-left: 20px; } -.outlineItem > a { +.outlineItem > a, +#searchResults > a { text-decoration: none; - display: block; + display: inline-block; + min-width: 95%; height: 20px; padding: 2px 0 0 10px; margin-bottom: 1px; @@ -697,7 +705,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing, white-space: nowrap; } -.outlineItem > a:hover { +.outlineItem > a:hover, +#searchResults > a:hover { background-color: hsla(0,0%,100%,.02); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-clip: padding-box; @@ -707,6 +716,23 @@ a:focus > .thumbnail > .thumbnailSelectionRing, color: hsla(0,0%,100%,.9); } +.outlineItem.selected { + background-color: hsla(0,0%,100%,.08); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2); + color: hsla(0,0%,100%,1); +} + +.noOutline, +.noResults { + font-size: 12px; + color: hsla(0,0%,100%,.8); + font-style: italic; +} + #searchScrollView { position: absolute; top: 10px; @@ -723,27 +749,26 @@ a:focus > .thumbnail > .thumbnailSelectionRing, } #searchToolbar > input { - margin-left: 8px; - width: 130px; + margin-left: 4px; + width: 124px; +} + +#searchToolbar button { + width: auto; + margin: 0; + padding: 0 6px; + height: 22px; } #searchResults { overflow: auto; - background-color: #fff; position: absolute; top: 30px; bottom: 0px; left: 0px; right: 0; + padding: 4px 4px 0; font-size: smaller; - opacity: 0.7; -} - -#searchResults a { - display: block; - white-space: pre; - text-decoration: none; - color: black; } #sidebarControls { @@ -754,24 +779,6 @@ a:focus > .thumbnail > .thumbnailSelectionRing, bottom: 35px; } -.outlineItem.selected { - background-color: hsla(0,0%,100%,.08); - background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); - background-clip: padding-box; - box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, - 0 0 1px hsla(0,0%,100%,.1) inset, - 0 0 1px hsla(0,0%,0%,.2); - color: hsla(0,0%,100%,1); -} - -.noOutline { - font-size: 12px; - color: hsla(0,0%,100%,.8); - font-style: italic; -} - - - canvas { margin: auto; display: block; @@ -814,23 +821,33 @@ canvas { } #loadingBox { - margin: 100px 0; + position: absolute; + top: 50%; + margin-top: -25px; + left: 0; + right: 0; text-align: center; color: #ddd; font-size: 14px; } #loadingBar { - background-color: #333; display: inline-block; - border: 1px solid black; clear: both; margin: 0px; margin-top: 5px; line-height: 0; - border-radius: 4px; + border-radius: 2px; width: 200px; height: 25px; + + background-color: hsla(0,0%,0%,.3); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + border: 1px solid #000; + box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2) inset, + 0 0 1px 1px rgba(255, 255, 255, 0.1); } #loadingBar .progress { @@ -838,23 +855,22 @@ canvas { float: left; background: #666; - background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999)); - background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: linear-gradient(top, #999 0%,#666 50%,#999 100%); - - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + background: -moz-linear-gradient(top, #b2b2b2 0%, #898989 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989)); + background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: linear-gradient(top, #b2b2b2 0%,#898989 100%); + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; width: 0%; height: 100%; } #loadingBar .progress.full { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } .textLayer { diff --git a/web/viewer.html b/web/viewer.html index f76c3665f..4edf6ce1a 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -45,7 +45,7 @@
-
+
@@ -63,8 +63,8 @@
@@ -150,8 +150,8 @@
-
Loading... 0%
-
+
+