diff --git a/web/images/buttons.png b/web/images/buttons.png index 3357b47d6..b96b9e141 100644 Binary files a/web/images/buttons.png and b/web/images/buttons.png differ diff --git a/web/images/source/Buttons.psd.zip b/web/images/source/Buttons.psd.zip index 528e6ee3c..39745f540 100644 Binary files a/web/images/source/Buttons.psd.zip and b/web/images/source/Buttons.psd.zip differ diff --git a/web/images/source/FileButton.psd.zip b/web/images/source/FileButton.psd.zip deleted file mode 100644 index 1f2b51cee..000000000 Binary files a/web/images/source/FileButton.psd.zip and /dev/null differ diff --git a/web/multi_page_viewer.css b/web/multi_page_viewer.css index 17b2537be..76bf8cd1e 100644 --- a/web/multi_page_viewer.css +++ b/web/multi_page_viewer.css @@ -16,6 +16,7 @@ canvas { span { font-size: 0.8em; + text-shadow: 0px 1px 0px #fff; } .control { @@ -31,12 +32,12 @@ span { height: 20px; padding: 0px; margin: 0px 2px 0px 0px; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); - -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); - -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3); } .control > select { @@ -45,12 +46,12 @@ span { height: 22px; padding: 2px 0px 0px; margin: 0px 0px 1px; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); - -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); - -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3); } .control > span { @@ -96,6 +97,8 @@ span { #controls { background-color: #eee; + background: -moz-linear-gradient(center bottom, #ddd 0%, #fff 100%); + background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #ddd), color-stop(1.0, #fff)); border-bottom: 1px solid #666; padding: 4px 0px 0px 8px; position: fixed; @@ -114,58 +117,121 @@ span { -webkit-user-select: text; } -#previousPageButton { - background: url('images/buttons.png') no-repeat 0px -23px; +button { + background-color: #ddd; + background: -moz-linear-gradient(center bottom, #c3c3c3 0%, #f3f3f3 100%); + background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #c3c3c3), color-stop(1.0, #f3f3f3)); + border: 1px solid #4d4d4d; cursor: default; - display: inline-block; float: left; - margin: 0px; + margin: 0px 0px 1px; + width: 29px; + height: 22px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} + +button:disabled { + background-color: #eee; + background: -moz-linear-gradient(center bottom, #ddd 0%, #fff 100%); + background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #ddd), color-stop(1.0, #fff)); +} + +button:disabled > span { + opacity: 0.3; + -moz-opacity: 0.3; + -webkit-opacity: 0.3; +} + +button.down { + background-color: #777; + background: -moz-linear-gradient(center bottom, #888 0%, #555 100%); + background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #888), color-stop(1.0, #555)); + box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.8); + -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.8); + -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.8); +} + +#previousPageButton { width: 28px; - height: 23px; + border-right: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0px; + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0px; } -#previousPageButton.down { - background: url('images/buttons.png') no-repeat 0px -46px; -} - -#previousPageButton.disabled { +#previousPageButton > span { background: url('images/buttons.png') no-repeat 0px 0px; + display: inline-block; + width: 19px; + height: 19px; } #nextPageButton { - background: url('images/buttons.png') no-repeat -28px -23px; - cursor: default; - display: inline-block; - float: left; - margin: 0px; width: 28px; - height: 23px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + -moz-border-radius-topleft: 0px; + -moz-border-radius-bottomleft: 0px; + -webkit-border-top-left-radius: 0px; + -webkit-border-bottom-left-radius: 0px; } -#nextPageButton.down { - background: url('images/buttons.png') no-repeat -28px -46px; +#nextPageButton > span { + background: url('images/buttons.png') no-repeat -19px 0px; + display: inline-block; + width: 19px; + height: 19px; } -#nextPageButton.disabled { - background: url('images/buttons.png') no-repeat -28px 0px; +#singleLayoutButton { + width: 28px; + border-right: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0px; + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0px; +} + +#singleLayoutButton > span { + background: url('images/buttons.png') no-repeat -57px 0px; + display: inline-block; + width: 19px; + height: 19px; +} + +#splitLayoutButton { + width: 28px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + -moz-border-radius-topleft: 0px; + -moz-border-radius-bottomleft: 0px; + -webkit-border-top-left-radius: 0px; + -webkit-border-bottom-left-radius: 0px; +} + +#splitLayoutButton > span { + background: url('images/buttons.png') no-repeat -76px 0px; + display: inline-block; + width: 19px; + height: 19px; } #openFileButton { - background: url('images/buttons.png') no-repeat -56px -23px; - cursor: default; + margin-left: 3px; +} + +#openFileButton > span { + background: url('images/buttons.png') no-repeat -38px 0px; display: inline-block; - float: left; - margin: 0px 0px 0px 3px; - width: 29px; - height: 23px; -} - -#openFileButton.down { - background: url('images/buttons.png') no-repeat -56px -46px; -} - -#openFileButton.disabled { - background: url('images/buttons.png') no-repeat -56px 0px; + width: 19px; + height: 19px; } #fileInput { diff --git a/web/multi_page_viewer.html b/web/multi_page_viewer.html index 70a7ea6b3..00dac6484 100644 --- a/web/multi_page_viewer.html +++ b/web/multi_page_viewer.html @@ -14,8 +14,8 @@
- - + + Previous/Next @@ -35,8 +35,18 @@ Zoom + + + + - + Open File diff --git a/web/multi_page_viewer.js b/web/multi_page_viewer.js index 04e4d1766..515aaae15 100644 --- a/web/multi_page_viewer.js +++ b/web/multi_page_viewer.js @@ -243,10 +243,8 @@ var PDFViewer = { setTimeout(window.onscroll, 0); document.location.hash = PDFViewer.pageNumber; - PDFViewer.previousPageButton.className = - (PDFViewer.pageNumber === 1) ? 'disabled' : ''; - PDFViewer.nextPageButton.className = - (PDFViewer.pageNumber === PDFViewer.numberOfPages) ? 'disabled' : ''; + PDFViewer.previousPageButton.disabled = (PDFViewer.pageNumber === 1); + PDFViewer.nextPageButton.disabled = (PDFViewer.pageNumber === PDFViewer.numberOfPages); } }, @@ -333,10 +331,8 @@ var PDFViewer = { }).bind(this), 500); } - PDFViewer.previousPageButton.className = - (PDFViewer.pageNumber === 1) ? 'disabled' : ''; - PDFViewer.nextPageButton.className = - (PDFViewer.pageNumber === PDFViewer.numberOfPages) ? 'disabled' : ''; + PDFViewer.previousPageButton.disabled = (PDFViewer.pageNumber === 1); + PDFViewer.nextPageButton.disabled = (PDFViewer.pageNumber === PDFViewer.numberOfPages); } }; @@ -404,42 +400,30 @@ window.onload = function() { PDFViewer.previousPageButton = document.getElementById('previousPageButton'); PDFViewer.previousPageButton.onclick = function(evt) { - if (this.className.indexOf('disabled') === -1) { - PDFViewer.goToPreviousPage(); - } + PDFViewer.goToPreviousPage(); }; PDFViewer.previousPageButton.onmousedown = function(evt) { - if (this.className.indexOf('disabled') === -1) { - this.className = 'down'; - } + this.className = 'down'; }; PDFViewer.previousPageButton.onmouseup = function(evt) { - this.className = - (this.className.indexOf('disabled') !== -1) ? 'disabled' : ''; + this.className = ''; }; PDFViewer.previousPageButton.onmouseout = function(evt) { - this.className = - (this.className.indexOf('disabled') !== -1) ? 'disabled' : ''; + this.className = ''; }; PDFViewer.nextPageButton = document.getElementById('nextPageButton'); PDFViewer.nextPageButton.onclick = function(evt) { - if (this.className.indexOf('disabled') === -1) { - PDFViewer.goToNextPage(); - } + PDFViewer.goToNextPage(); }; PDFViewer.nextPageButton.onmousedown = function(evt) { - if (this.className.indexOf('disabled') === -1) { - this.className = 'down'; - } + this.className = 'down'; }; PDFViewer.nextPageButton.onmouseup = function(evt) { - this.className = - (this.className.indexOf('disabled') !== -1) ? 'disabled' : ''; + this.className = ''; }; PDFViewer.nextPageButton.onmouseout = function(evt) { - this.className = - (this.className.indexOf('disabled') !== -1) ? 'disabled' : ''; + this.className = ''; }; PDFViewer.scaleSelect = document.getElementById('scaleSelect'); @@ -450,22 +434,16 @@ window.onload = function() { if (window.File && window.FileReader && window.FileList && window.Blob) { var openFileButton = document.getElementById('openFileButton'); openFileButton.onclick = function(evt) { - if (this.className.indexOf('disabled') === -1) { - PDFViewer.fileInput.click(); - } + PDFViewer.fileInput.click(); }; openFileButton.onmousedown = function(evt) { - if (this.className.indexOf('disabled') === -1) { - this.className = 'down'; - } + this.className = 'down'; }; openFileButton.onmouseup = function(evt) { - this.className = - (this.className.indexOf('disabled') !== -1) ? 'disabled' : ''; + this.className = ''; }; openFileButton.onmouseout = function(evt) { - this.className = - (this.className.indexOf('disabled') !== -1) ? 'disabled' : ''; + this.className = ''; }; PDFViewer.fileInput = document.getElementById('fileInput'); @@ -540,10 +518,8 @@ window.onload = function() { // Update the page number input with the current page number. if (!PDFViewer.willJumpToPage && visiblePages.length > 0) { PDFViewer.pageNumber = PDFViewer.pageNumberInput.value = visiblePages[0]; - PDFViewer.previousPageButton.className = - (PDFViewer.pageNumber === 1) ? 'disabled' : ''; - PDFViewer.nextPageButton.className = - (PDFViewer.pageNumber === PDFViewer.numberOfPages) ? 'disabled' : ''; + PDFViewer.previousPageButton.disabled = (PDFViewer.pageNumber === 1); + PDFViewer.nextPageButton.disabled = (PDFViewer.pageNumber === PDFViewer.numberOfPages); } else { PDFViewer.willJumpToPage = false; }