diff options
| -rw-r--r-- | src/client/views/Templates.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentContentsView.tsx | 14 |
2 files changed, 16 insertions, 6 deletions
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index de94a1578..6f706bdc5 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -52,11 +52,15 @@ export namespace Templates { export const TitleOverlay = new Template("TitleOverlay", TemplatePosition.InnerTop, `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div> - <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>` + <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; "> + <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span> + </div></div>` ); export const Title = new Template("Title", TemplatePosition.InnerTop, `<div><div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div> - <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>` + <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; "> + <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span> + </div></div>` ); export const Bullet = new Template("Bullet", TemplatePosition.InnerTop, diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 1dc6343e8..294e17720 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -64,13 +64,19 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & { let base = baseLayout; let layout = baseLayout; - // bcz: templates are intended for the main document layout. However, - // a DocumentContentsView is also used to render the annotation overlay for a document. - // So we detect that here by checking the layoutKey. This should probably be moved into + // bcz: templates are intended only for a document's primary layout (not background). However, + // a DocumentContentsView is used to render annotation overlays, so we detect that here + // by checking the layoutKey. This should probably be moved into // a prop so that the overlay can explicitly turn off templates. if (this.props.layoutKey !== "backgroundLayout") { this.templates.forEach(template => { - layout = template.replace("{layout}", base); + let self = this; + function convertConstantsToNative(match: string, offset: number, x: string) { + let px = Number(match.replace("px", "")); + return `${px * self.props.ScreenToLocalTransform().Scale}px`; + } + let nativizedTemplate = template.replace(/([0-9]+)px/g, convertConstantsToNative); + layout = nativizedTemplate.replace("{layout}", base); base = layout; }); } |