提交 6ba2be5e 编写于 作者: B Benjamin Pasero

improved display for binary resources

上级 5bec9e37
......@@ -69,10 +69,10 @@ const mapExtToMediaMimes = {
*/
export class ResourceViewer {
public static show(name: string, resource: URI, container: Builder, scrollbar?: DomScrollableElement): void {
public static show(name: string, resource: URI, container: Builder, scrollbar: DomScrollableElement): void {
// Ensure CSS class
$(container).addClass('monaco-resource-viewer');
$(container).setClass('monaco-resource-viewer');
// Lookup media mime if any
let mime: string;
......@@ -89,13 +89,22 @@ export class ResourceViewer {
if (mime.indexOf('image/') >= 0) {
$(container)
.empty()
.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
.addClass('image')
.img({
src: resource.toString() + '?' + Date.now() // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
}).on(DOM.EventType.LOAD, () => {
if (scrollbar) {
scrollbar.scanDomNode();
src: resource.toString() // disabled due to https://github.com/electron/electron/issues/6275 + '?' + Date.now() // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
}).on(DOM.EventType.LOAD, (e, img) => {
const imgElement = <HTMLImageElement>img.getHTMLElement();
if (imgElement.naturalWidth > imgElement.width || imgElement.naturalHeight > imgElement.height) {
$(container).addClass('oversized');
img.on(DOM.EventType.CLICK, (e, img) => {
$(container).toggleClass('full-size');
scrollbar.scanDomNode();
});
}
scrollbar.scanDomNode();
});
}
......@@ -103,10 +112,9 @@ export class ResourceViewer {
else if (false /* PDF is currently not supported in Electron it seems */ && mime.indexOf('pdf') >= 0) {
$(container)
.empty()
.style({ padding: 0, margin: 0 }) // We really do not want any paddings or margins when displaying PDFs
.element('object')
.attr({
data: resource.toString() + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
data: resource.toString(), // disabled due to https://github.com/electron/electron/issues/6275 + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
width: '100%',
height: '100%',
type: mime
......@@ -114,36 +122,30 @@ export class ResourceViewer {
}
// Embed Audio (if supported in browser)
else if (mime.indexOf('audio/') >= 0) {
else if (false /* disabled due to unknown impact on memory usage */ && mime.indexOf('audio/') >= 0) {
$(container)
.empty()
.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
.element('audio')
.attr({
src: resource.toString() + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
src: resource.toString(), // disabled due to https://github.com/electron/electron/issues/6275 + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
text: nls.localize('missingAudioSupport', "Sorry but playback of audio files is not supported."),
controls: 'controls'
}).on(DOM.EventType.LOAD, () => {
if (scrollbar) {
scrollbar.scanDomNode();
}
scrollbar.scanDomNode();
});
}
// Embed Video (if supported in browser)
else if (mime.indexOf('video/') >= 0) {
else if (false /* disabled due to unknown impact on memory usage */ && mime.indexOf('video/') >= 0) {
$(container)
.empty()
.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
.element('video')
.attr({
src: resource.toString() + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
src: resource.toString(), // disabled due to https://github.com/electron/electron/issues/6275 + '?' + Date.now(), // We really want to avoid the browser from caching this resource, so we add a fake query param that is unique
text: nls.localize('missingVideoSupport', "Sorry but playback of video files is not supported."),
controls: 'controls'
}).on(DOM.EventType.LOAD, () => {
if (scrollbar) {
scrollbar.scanDomNode();
}
scrollbar.scanDomNode();
});
}
......@@ -151,14 +153,11 @@ export class ResourceViewer {
else {
$(container)
.empty()
.style({ paddingLeft: '20px' }) // restore CSS value in case the user saw a PDF before where we remove padding
.span({
text: nls.localize('nativeBinaryError', "The file cannot be displayed in the editor because it is either binary, very large or uses an unsupported text encoding.")
});
if (scrollbar) {
scrollbar.scanDomNode();
}
scrollbar.scanDomNode();
}
}
}
\ No newline at end of file
......@@ -3,10 +3,51 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-resource-viewer:focus {
outline: none !important;
}
.monaco-resource-viewer {
padding: 0 0 0 10px;
box-sizing: border-box;
}
.monaco-resource-viewer.image {
padding: 10px;
background-position: 0 0, 6px 6px;
background-size: 12px 12px;
}
.monaco-resource-viewer.image.full-size {
padding: 0;
}
.vs .monaco-resource-viewer.image {
background-image:
linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)),
linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220));
}
.vs-dark .monaco-resource-viewer.image {
background-image:
linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)),
linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80));
}
.monaco-resource-viewer img {
border: 1px solid;
max-width: 100%;
max-height: 100%;
max-width: 99%;
max-height: 99%;
}
.monaco-resource-viewer.oversized img {
cursor: zoom-in;
}
.monaco-resource-viewer.full-size img {
max-width: initial;
max-height: initial;
cursor: zoom-out;
}
.vs .monaco-resource-viewer img {
......
......@@ -59,7 +59,7 @@ export class BinaryResourceDiffEditor extends BaseEditor implements IVerticalSas
this.leftBinaryContainer.tabindex(0); // enable focus support from the editor part (do not remove)
// Left Custom Scrollbars
this.leftScrollbar = new DomScrollableElement(leftBinaryContainerElement, { canUseTranslate3d: false, horizontal: ScrollbarVisibility.Hidden, vertical: ScrollbarVisibility.Hidden });
this.leftScrollbar = new DomScrollableElement(leftBinaryContainerElement, { canUseTranslate3d: false, horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Auto });
parent.getHTMLElement().appendChild(this.leftScrollbar.getDomNode());
$(this.leftScrollbar.getDomNode()).addClass('binarydiff-left');
......@@ -77,7 +77,7 @@ export class BinaryResourceDiffEditor extends BaseEditor implements IVerticalSas
this.rightBinaryContainer.tabindex(0); // enable focus support from the editor part (do not remove)
// Right Custom Scrollbars
this.rightScrollbar = new DomScrollableElement(rightBinaryContainerElement, { canUseTranslate3d: false, horizontal: ScrollbarVisibility.Hidden, vertical: ScrollbarVisibility.Hidden });
this.rightScrollbar = new DomScrollableElement(rightBinaryContainerElement, { canUseTranslate3d: false, horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Auto });
parent.getHTMLElement().appendChild(this.rightScrollbar.getDomNode());
$(this.rightScrollbar.getDomNode()).addClass('binarydiff-right');
}
......
......@@ -5,7 +5,6 @@
'use strict';
import 'vs/css!./media/binaryeditor';
import nls = require('vs/nls');
import {TPromise} from 'vs/base/common/winjs.base';
import {Dimension, Builder, $} from 'vs/base/browser/builder';
......@@ -15,12 +14,15 @@ import {BaseEditor} from 'vs/workbench/browser/parts/editor/baseEditor';
import {BinaryEditorModel} from 'vs/workbench/common/editor/binaryEditorModel';
import {IWorkbenchEditorService} from 'vs/workbench/services/editor/common/editorService';
import {ITelemetryService} from 'vs/platform/telemetry/common/telemetry';
import {DomScrollableElement} from 'vs/base/browser/ui/scrollbar/scrollableElement';
import {ScrollbarVisibility} from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
/*
* This class is only intended to be subclassed and not instantiated.
*/
export abstract class BaseBinaryResourceEditor extends BaseEditor {
private binaryContainer: Builder;
private scrollbar: DomScrollableElement;
constructor(id: string, telemetryService: ITelemetryService, private _editorService: IWorkbenchEditorService) {
super(id, telemetryService);
......@@ -41,7 +43,10 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
binaryContainerElement.className = 'binary-container';
this.binaryContainer = $(binaryContainerElement);
this.binaryContainer.tabindex(0); // enable focus support from the editor part (do not remove)
parent.getHTMLElement().appendChild(this.binaryContainer.getHTMLElement());
// Custom Scrollbars
this.scrollbar = new DomScrollableElement(binaryContainerElement, { canUseTranslate3d: false, horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Auto });
parent.getHTMLElement().appendChild(this.scrollbar.getDomNode());
}
public setInput(input: EditorInput, options: EditorOptions): TPromise<void> {
......@@ -71,7 +76,7 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
// Render Input
let binaryResourceModel = <BinaryEditorModel>resolvedModel;
ResourceViewer.show(binaryResourceModel.getName(), binaryResourceModel.getResource(), this.binaryContainer);
ResourceViewer.show(binaryResourceModel.getName(), binaryResourceModel.getResource(), this.binaryContainer, this.scrollbar);
return TPromise.as<void>(null);
});
......@@ -89,6 +94,7 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
// Pass on to Binary Container
this.binaryContainer.size(dimension.width, dimension.height);
this.scrollbar.scanDomNode();
}
public focus(): void {
......@@ -99,6 +105,7 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
// Destroy Container
this.binaryContainer.destroy();
this.scrollbar.dispose();
super.dispose();
}
......
......@@ -8,40 +8,13 @@
}
.monaco-workbench .binarydiff-right {
box-shadow: -6px 0 5px -5px #DDD;
border-left: 3px solid #DDD;
}
.vs-dark .monaco-workbench .binarydiff-right {
box-shadow: -6px 0 5px -5px black;
border-left: 3px solid black;
}
.monaco-workbench .binary-container {
padding-left: 20px;
box-sizing: border-box;
}
.monaco-workbench .binary-container img {
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
}
/* CSS checkerbox pattern (learnt from http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/*/
.vs .monaco-workbench .binary-container img {
background-image:
linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)),
linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220));
}
.vs-dark .monaco-workbench .binary-container img {
background-image:
linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)),
linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80));
}
.vs-dark .monaco-workbench .binary-container a {
color: #1C5DAF;
}
.vs-dark .monaco-workbench .binary-container a:hover {
color: #4080D0;
.hc-black .monaco-workbench .binarydiff-right {
border-left: 3px solid #6FC3DF;
}
\ No newline at end of file
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-workbench .binary-container {
padding-left: 20px;
box-sizing: border-box;
}
.monaco-workbench .binary-container img {
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
}
/* CSS checkerbox pattern (learnt from http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/*/
.vs .monaco-workbench .binary-container img {
background-image:
linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220)),
linear-gradient(45deg, rgb(220, 220, 220) 25%, transparent 25%, transparent 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220));
}
.vs-dark .monaco-workbench .binary-container img {
background-image:
linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80)),
linear-gradient(45deg, rgb(80, 80, 80) 25%, transparent 25%, transparent 75%, rgb(80, 80, 80) 75%, rgb(80, 80, 80));
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册