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;
- width: 28px;
- height: 23px;
+ margin: 0px 0px 1px;
+ width: 29px;
+ height: 22px;
+ border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
}
-#previousPageButton.down {
- background: url('images/buttons.png') no-repeat 0px -46px;
+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;
+ 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.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;
+ 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;
+}
+
+#nextPageButton > span {
+ background: url('images/buttons.png') no-repeat -19px 0px;
display: inline-block;
- float: left;
- margin: 0px;
+ width: 19px;
+ height: 19px;
+}
+
+#singleLayoutButton {
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;
}
-#nextPageButton.down {
- background: url('images/buttons.png') no-repeat -28px -46px;
+#singleLayoutButton > span {
+ background: url('images/buttons.png') no-repeat -57px 0px;
+ display: inline-block;
+ width: 19px;
+ height: 19px;
}
-#nextPageButton.disabled {
- background: url('images/buttons.png') no-repeat -28px 0px;
+#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;
}
-#openFileButton {
- background: url('images/buttons.png') no-repeat -56px -23px;
- cursor: default;
+#splitLayoutButton > span {
+ background: url('images/buttons.png') no-repeat -76px 0px;
display: inline-block;
- float: left;
- margin: 0px 0px 0px 3px;
- width: 29px;
- height: 23px;
+ width: 19px;
+ height: 19px;
}
-#openFileButton.down {
- background: url('images/buttons.png') no-repeat -56px -46px;
+#openFileButton {
+ margin-left: 3px;
}
-#openFileButton.disabled {
- background: url('images/buttons.png') no-repeat -56px 0px;
+#openFileButton > span {
+ background: url('images/buttons.png') no-repeat -38px 0px;
+ display: inline-block;
+ 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 @@
<body>
<div id="controls">
<span class="control">
- <span id="previousPageButton" class="disabled"></span>
- <span id="nextPageButton" class="disabled"></span>
+ <button id="previousPageButton" disabled="disabled"><span></span></button>
+ <button id="nextPageButton" disabled="disabled"><span></span></button>
<span class="label">Previous/Next</span>
</span>
<span class="control">
@@ -35,8 +35,18 @@
</select>
<span class="label">Zoom</span>
</span>
+
+ <!-- WIP: Leave commented out until implemented -->
+ <!--
+ <span class="control">
+ <button id="singleLayoutButton" class="selected"><span></span></button>
+ <button id="splitLayoutButton"><span></span></button>
+ <span class="label">Page Layout</span>
+ </span>
+ -->
+
<span class="control" id="fileWrapper">
- <span id="openFileButton"></span>
+ <button id="openFileButton"><span></span></button>
<input type="file" id="fileInput"/>
<span class="label">Open File</span>
</span>
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;
}