reader: add styling and initial UI
Added styling to main PDF reading page and the PDF list page. Also some
additional buttons in the PDF reading page, including an "Open" link to
get back to the list of PDFs (a stub for usability probably to be
replaced later) and the "Link" button that will add or remove the reader
as a member of the linked set for reading. For now, the link button
connects to a channel that toggles the internal state, but does nothing
more.
Change-Id: I6295128cf19eb0355d0c46ab75a3a8f3fb2de1a1
diff --git a/browser/components/base/index.css b/browser/components/base/index.css
index ec14ef2..9669cf3 100644
--- a/browser/components/base/index.css
+++ b/browser/components/base/index.css
@@ -22,3 +22,9 @@
.reader-app main {
flex: 1;
}
+
+a {
+ color: var(--cyan-700);
+ font-weight: 500;
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/browser/components/files/file.js b/browser/components/files/file.js
index 6285971..00b1f1d 100644
--- a/browser/components/files/file.js
+++ b/browser/components/files/file.js
@@ -28,10 +28,12 @@
}
function render(file) {
- return anchor({
- href: format('/%s', file.uuid)
- }, [
- h('h2', file.title),
- h('p', format('%s - %s', file.blob.type, file.uuid))
+ return h('.file', [
+ anchor({
+ href: format('/%s', file.uuid)
+ }, [
+ h('h2.type-title', file.title),
+ h('p.type-caption', format('%s - %s', file.blob.type, file.uuid))
+ ])
]);
}
diff --git a/browser/components/files/index.css b/browser/components/files/index.css
index d81a678..aac36d8 100644
--- a/browser/components/files/index.css
+++ b/browser/components/files/index.css
@@ -8,3 +8,11 @@
margin: var(--gutter);
padding: var(--gutter);
}
+
+.file {
+ margin: 0px var(--gutter);
+ padding: var(--gutter);
+ background-color: var(--white);
+ border-bottom: 1px dashed var(--grey-100);
+ box-shadow: var(--drop-shadow);
+}
diff --git a/browser/components/pdf/index.css b/browser/components/pdf/index.css
new file mode 100644
index 0000000..4d24594
--- /dev/null
+++ b/browser/components/pdf/index.css
@@ -0,0 +1,67 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "../base/variables.css";
+@import "../base/typography.css";
+
+.controls {
+ right: 0;
+ text-align: center;
+ padding: var(--gutter-half);
+ display: flex;
+ align-items: center;
+ background-color: var(--cyan-800);
+ box-shadow: var(--drop-shadow);
+ position: relative;
+ z-index: 9999;
+}
+
+.center-controls {
+ display: inline-block;
+ margin: 0px auto 0px auto;
+}
+
+.left-controls {
+ display: inline-block;
+ float: left;
+}
+
+.right-controls {
+ display: inline-block;
+ float: right;
+}
+
+.clear-controls {
+ clear: both;
+}
+
+.pdf {
+ position: absolute;
+ z-index: 1;
+ top: var(--gutter);
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: auto;
+}
+
+.pdf-canvas {
+ display: block;
+ margin: 0px auto 0px auto;
+ box-shadow: var(--drop-shadow);
+}
+
+span.pagecount {
+ padding-left: 1em;
+ padding-right: 1em;
+ color: var(--white);
+}
+
+button.link {
+ margin-left: 1em;
+}
+
+span.controls-open {
+ color: var(--white);
+}
\ No newline at end of file
diff --git a/browser/components/pdf/render.js b/browser/components/pdf/render.js
index aa7c316..19e1eda 100644
--- a/browser/components/pdf/render.js
+++ b/browser/components/pdf/render.js
@@ -6,30 +6,50 @@
var h = require('mercury').h;
var PDFWidget = require('../../widgets/pdf-widget');
var format = require('format');
+var insert = require('insert-css');
+var anchor = require('../../router/anchor');
+var css = require('./index.css');
module.exports = render;
function render(state, channels) {
- return h('.pdf', [
+ insert(css);
+
+ return h('.pdfviewer', [
hg.partial(controls, state, channels),
- new PDFWidget(state)
+ h('.pdf', new PDFWidget(state))
]);
}
function controls(state, channels) {
var current = state.pages.current;
var total = state.pages.total;
+ var linked = state.pages.linked;
var message = format('Page %s of %s', current, total);
return h('.controls', [
- h('button.prev', {
- disabled: (current === 1),
- 'ev-click': hg.send(channels.previous)
- }, 'Prev'),
- h('span.pagecount', message),
- h('button.next', {
- disabled: (current === total),
- 'ev-click': hg.send(channels.next)
- }, 'Next')
+ h('.left-controls', [
+ anchor({
+ href: '/'
+ }, [
+ h('span.controls-open', 'Open')
+ ])
+ ]),
+ h('.center-controls', [
+ h('button.prev', {
+ disabled: (current === 1),
+ 'ev-click': hg.send(channels.previous)
+ }, 'Prev'),
+ h('span.pagecount', message),
+ h('button.next', {
+ disabled: (current === total),
+ 'ev-click': hg.send(channels.next)
+ }, 'Next'),
+ h('button.link', {
+ 'ev-click': hg.send(channels.link)
+ }, linked ? 'Unlink' : 'Link')
+ ]),
+ h('.right-controls', []),
+ h('.clear-controls', [])
]);
}
diff --git a/browser/components/pdf/state.js b/browser/components/pdf/state.js
index 9bc758d..7193c42 100644
--- a/browser/components/pdf/state.js
+++ b/browser/components/pdf/state.js
@@ -19,10 +19,12 @@
}),
progress: hg.value(0),
scale: hg.value(1.5),
+ linked: hg.value(false),
file: hg.struct(options.file || {}),
channels: {
previous: previous,
- next: next
+ next: next,
+ link: link
}
});
@@ -56,7 +58,6 @@
}
function previous(state, data) {
- console.log('argeuments', arguments);
// Only advance if it's not the first page.
var current = state.pages.get('current');
if (current > 1) {
@@ -64,6 +65,10 @@
}
}
+function link(state, data) {
+ state.pages.put('linked', !state.pages.get('linked'));
+}
+
function load(state, file) {
if (!file) {
return;
diff --git a/browser/widgets/pdf-widget.js b/browser/widgets/pdf-widget.js
index 2ce52af..75e805a 100644
--- a/browser/widgets/pdf-widget.js
+++ b/browser/widgets/pdf-widget.js
@@ -18,6 +18,7 @@
PDFWidget.prototype.init = function init() {
var widget = this;
var element = document.createElement('canvas');
+ element.setAttribute('class','pdf-canvas');
widget.update(null, element);
return element;
