mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
Merge pull request #874 from Alfresco/dev-eromano-836
fix host pdf css with >>> prefix #836
This commit is contained in:
commit
8b1b5e9926
@ -42,7 +42,7 @@
|
|||||||
|
|
||||||
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
|
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
|
||||||
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
|
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
|
||||||
'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'}
|
'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})(this);
|
})(this);
|
||||||
|
@ -59,33 +59,37 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
|
|||||||
|
|
||||||
component.showToolbar = true;
|
component.showToolbar = true;
|
||||||
component.urlFile = 'base/src/assets/fake-test-file.pdf';
|
component.urlFile = 'base/src/assets/fake-test-file.pdf';
|
||||||
fixture.detectChanges();
|
|
||||||
|
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('View', () => {
|
describe('View', () => {
|
||||||
|
|
||||||
|
it('If urlfile is not present should not be thrown any error ', () => {
|
||||||
|
component.urlFile = undefined;
|
||||||
|
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
expect(() => {
|
||||||
|
component.ngOnChanges();
|
||||||
|
}).toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
it('Canvas should be present', () => {
|
it('Canvas should be present', () => {
|
||||||
expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
|
expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
|
||||||
expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
|
expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Loader should be present', () => {
|
it('Loader should be present', () => {
|
||||||
fixture.detectChanges();
|
|
||||||
|
|
||||||
expect(element.querySelector('#loader-container')).not.toBeNull();
|
expect(element.querySelector('#loader-container')).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Next an Previous Buttons should be present', () => {
|
it('Next an Previous Buttons should be present', () => {
|
||||||
fixture.detectChanges();
|
|
||||||
|
|
||||||
expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
|
expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
|
||||||
expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
|
expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Input Page elements should be present', () => {
|
it('Input Page elements should be present', () => {
|
||||||
fixture.detectChanges();
|
|
||||||
|
|
||||||
expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
|
expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
|
||||||
expect(element.querySelector('#viewer-total-pages')).toBeDefined();
|
expect(element.querySelector('#viewer-total-pages')).toBeDefined();
|
||||||
|
|
||||||
@ -109,10 +113,10 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
|
|||||||
component.inputPage(1);
|
component.inputPage(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
xit('Total number of pages should be loaded', (done) => {
|
it('Total number of pages should be loaded', (done) => {
|
||||||
component.ngOnChanges().then(() => {
|
component.ngOnChanges().then(() => {
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
expect(component.totalPages).toEqual(4);
|
expect(component.totalPages).toEqual(6);
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
}, 5000);
|
}, 5000);
|
||||||
@ -241,7 +245,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('Resize interaction', () => {
|
describe('Resize interaction', () => {
|
||||||
xit('resize event should trigger setScaleUpdatePages', (done) => {
|
it('resize event should trigger setScaleUpdatePages', (done) => {
|
||||||
component.ngOnChanges().then(() => {
|
component.ngOnChanges().then(() => {
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
spyOn(component, 'onResize');
|
spyOn(component, 'onResize');
|
||||||
@ -254,7 +258,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('scroll interaction', () => {
|
describe('scroll interaction', () => {
|
||||||
xit('scroll page should return the current page', (done) => {
|
it('scroll page should return the current page', (done) => {
|
||||||
component.ngOnChanges().then(() => {
|
component.ngOnChanges().then(() => {
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
expect(component.displayPage).toBe(1);
|
expect(component.displayPage).toBe(1);
|
||||||
@ -265,7 +269,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
|
|||||||
documentContainer.scrollTop = 100000;
|
documentContainer.scrollTop = 100000;
|
||||||
component.watchScroll(documentContainer);
|
component.watchScroll(documentContainer);
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
expect(component.displayPage).toBe(4);
|
expect(component.displayPage).toBe(6);
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
:host .textLayer {
|
:host >>> .textLayer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -9,7 +9,7 @@
|
|||||||
line-height: 1.0;
|
line-height: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer > div {
|
:host >>> .textLayer > div {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
@ -21,7 +21,7 @@
|
|||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer .highlight {
|
:host >>> .textLayer .highlight {
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
|
|
||||||
@ -29,26 +29,26 @@
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer .highlight.begin {
|
:host >>> .textLayer .highlight.begin {
|
||||||
border-radius: 4px 0px 0px 4px;
|
border-radius: 4px 0px 0px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer .highlight.end {
|
:host >>> .textLayer .highlight.end {
|
||||||
border-radius: 0px 4px 4px 0px;
|
border-radius: 0px 4px 4px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer .highlight.middle {
|
:host >>> .textLayer .highlight.middle {
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer .highlight.selected {
|
:host >>> .textLayer .highlight.selected {
|
||||||
background-color: rgb(0, 100, 0);
|
background-color: rgb(0, 100, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer ::selection { background: rgb(0,0,255); }
|
:host >>> .textLayer ::selection { background: rgb(0,0,255); }
|
||||||
:host .textLayer ::-moz-selection { background: rgb(0,0,255); }
|
:host >>> .textLayer ::-moz-selection { background: rgb(0,0,255); }
|
||||||
|
|
||||||
:host .textLayer .endOfContent {
|
:host >>> .textLayer .endOfContent {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
@ -62,16 +62,16 @@
|
|||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .textLayer .endOfContent.active {
|
:host >>> .textLayer .endOfContent.active {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
:host .annotationLayer section {
|
:host >>> .annotationLayer section {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .linkAnnotation > a {
|
:host >>> .annotationLayer .linkAnnotation > a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -80,27 +80,27 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .linkAnnotation > a /* -ms-a */ {
|
:host >>> .annotationLayer .linkAnnotation > a /* -ms-a */ {
|
||||||
background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
|
background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .linkAnnotation > a:hover {
|
:host >>> .annotationLayer .linkAnnotation > a:hover {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
background: #ff0;
|
background: #ff0;
|
||||||
box-shadow: 0px 2px 10px #ff0;
|
box-shadow: 0px 2px 10px #ff0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .textAnnotation img {
|
:host >>> .annotationLayer .textAnnotation img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .popupWrapper {
|
:host >>> .annotationLayer .popupWrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 20em;
|
width: 20em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .popup {
|
:host >>> .annotationLayer .popup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
max-width: 20em;
|
max-width: 20em;
|
||||||
@ -113,17 +113,17 @@
|
|||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .popup h1 {
|
:host >>> .annotationLayer .popup h1 {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
border-bottom: 1px solid #000000;
|
border-bottom: 1px solid #000000;
|
||||||
padding-bottom: 0.2em;
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .popup p {
|
:host >>> .annotationLayer .popup p {
|
||||||
padding-top: 0.2em;
|
padding-top: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .annotationLayer .highlightAnnotation,
|
:host >>> .annotationLayer .highlightAnnotation,
|
||||||
.annotationLayer .underlineAnnotation,
|
.annotationLayer .underlineAnnotation,
|
||||||
.annotationLayer .squigglyAnnotation,
|
.annotationLayer .squigglyAnnotation,
|
||||||
.annotationLayer .strikeoutAnnotation,
|
.annotationLayer .strikeoutAnnotation,
|
||||||
@ -131,11 +131,11 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .pdfViewer .canvasWrapper {
|
:host >>> .pdfViewer .canvasWrapper {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .pdfViewer .page {
|
:host >>> .pdfViewer .page {
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
width: 816px;
|
width: 816px;
|
||||||
height: 1056px;
|
height: 1056px;
|
||||||
@ -147,17 +147,17 @@
|
|||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .pdfViewer.removePageBorders .page {
|
:host >>> .pdfViewer.removePageBorders .page {
|
||||||
margin: 0px auto 10px auto;
|
margin: 0px auto 10px auto;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .pdfViewer .page canvas {
|
:host >>> .pdfViewer .page canvas {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .pdfViewer .page .loadingIcon {
|
:host >>> .pdfViewer .page .loadingIcon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -166,7 +166,7 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .loadingIcon {
|
:host >>> .loadingIcon {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
left: 50% !important;
|
left: 50% !important;
|
||||||
@ -187,8 +187,8 @@
|
|||||||
-webkit-animation: load8 1.1s infinite linear;
|
-webkit-animation: load8 1.1s infinite linear;
|
||||||
animation: load8 1.1s infinite linear;
|
animation: load8 1.1s infinite linear;
|
||||||
}
|
}
|
||||||
:host .loadingIcon,
|
:host >>> .loadingIcon,
|
||||||
:host .loadingIcon:after {
|
:host >>> .loadingIcon:after {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
@-webkit-keyframes load8 {
|
@-webkit-keyframes load8 {
|
||||||
@ -212,26 +212,26 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:host * {
|
:host >>> * {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host html {
|
:host >>> html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* Font size is needed to make the activity bar the correct size. */
|
/* Font size is needed to make the activity bar the correct size. */
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host body {
|
:host >>> body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #404040;
|
background-color: #404040;
|
||||||
background-image: url(images/texture.png);
|
background-image: url(images/texture.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host body,
|
:host >>> body,
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
select {
|
select {
|
||||||
@ -239,10 +239,10 @@ select {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .hidden {
|
:host >>> .hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
:host [hidden] {
|
:host >>> [hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user