mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
28 changed files with 600 additions and 156 deletions
@ -0,0 +1,51 @@ |
|||
FROM microsoft/aspnetcore-build:1.1.2 |
|||
|
|||
# Install runtime dependencies |
|||
RUN apt-get update \ |
|||
&& apt-get install -y --no-install-recommends ca-certificates bzip2 libfontconfig \ |
|||
&& apt-get clean \ |
|||
&& rm -rf /var/lib/apt/lists/* |
|||
|
|||
# Install official PhantomJS release |
|||
RUN set -x \ |
|||
&& apt-get update \ |
|||
&& apt-get install -y --no-install-recommends \ |
|||
&& mkdir /srv/var \ |
|||
&& mkdir /tmp/phantomjs \ |
|||
# Download Phantom JS |
|||
&& curl -L https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 | tar -xj --strip-components=1 -C /tmp/phantomjs \ |
|||
# Copy binaries only |
|||
&& mv /tmp/phantomjs/bin/phantomjs /usr/local/bin \ |
|||
# Create symbol link |
|||
# Clean up |
|||
&& apt-get autoremove -y \ |
|||
&& apt-get clean all \ |
|||
&& rm -rf /tmp/* /var/lib/apt/lists/* |
|||
|
|||
RUN phantomjs --version |
|||
|
|||
COPY src/Squidex/package.json /tmp/package.json |
|||
RUN cd /tmp \ |
|||
&& npm install \ |
|||
&& npm rebuild node-sass |
|||
|
|||
COPY . . |
|||
|
|||
WORKDIR / |
|||
|
|||
# Build Frontend |
|||
RUN cp -a /tmp/node_modules /src/Squidex/ \ |
|||
&& cd /src/Squidex \ |
|||
&& npm run test:coverage \ |
|||
&& npm run build:copy \ |
|||
&& npm run build |
|||
|
|||
# Test Backend |
|||
RUN dotnet restore \ |
|||
&& dotnet test tests/Squidex.Infrastructure.Tests/Squidex.Infrastructure.Tests.csproj \ |
|||
&& dotnet test tests/Squidex.Core.Tests/Squidex.Core.Tests.csproj \ |
|||
&& dotnet test tests/Squidex.Read.Tests/Squidex.Read.Tests.csproj \ |
|||
&& dotnet test tests/Squidex.Write.Tests/Squidex.Write.Tests.csproj |
|||
|
|||
# Publish |
|||
RUN dotnet publish src/Squidex/Squidex.csproj --output /out/ --configuration Release |
|||
@ -0,0 +1,11 @@ |
|||
# Build the image |
|||
docker build . -t squidex-build-image -f dockerfile.build |
|||
|
|||
# Open the image |
|||
docker create --name squidex-build-container squidex-build-image |
|||
|
|||
# Copy the output to the host file system |
|||
docker cp squidex-build-container:/out ./publish |
|||
|
|||
# Cleanup |
|||
docker rm squidex-build-container |
|||
@ -1,2 +1,15 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@import '_mixins'; |
|||
|
|||
.autocomplete-user { |
|||
&-picture { |
|||
float: left; |
|||
margin-top: .4rem; |
|||
} |
|||
|
|||
&-name, |
|||
&-email { |
|||
@include truncate; |
|||
margin-left: 3rem; |
|||
} |
|||
} |
|||
@ -1,18 +1,15 @@ |
|||
<span> |
|||
<input type="text" class="form-control" (blur)="blur()" [attr.name]="inputName" (keydown)="onKeyDown($event)" (blur)="markTouched()" [attr.placeholder]="placeholder" |
|||
<input type="text" class="form-control" (blur)="blur()" [attr.name]="inputName" (keydown)="onKeyDown($event)" [attr.placeholder]="placeholder" #input |
|||
[formControl]="queryInput" |
|||
autocomplete="off" |
|||
autocorrect="off" |
|||
autocapitalize="off"> |
|||
|
|||
<div class="items-container" *ngIf="items.length > 0"> |
|||
<div class="items" #container> |
|||
<div *ngFor="let item of items; let i = index;" class="item" [class.active]="i === itemSelection" (mousedown)="chooseItem(item)" (mouseover)="selectIndex(i)" [sqxScrollActive]="i === itemSelection" [container]="container"> |
|||
<img class="item-image" [attr.src]="item.image" /> |
|||
<div *ngIf="items.length > 0" [sqxModalTarget]="input" class="control-dropdown" #container> |
|||
<div *ngFor="let item of items; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" [class.active]="i === selectedIndex" (mousedown)="selectItem(item)" (mouseover)="selectIndex(i)" [sqxScrollActive]="i === itemSelection" [container]="container"> |
|||
<span *ngIf="!itemTemplate">{{item}}</span> |
|||
|
|||
<span class="item-title">{{item.title}}</span> |
|||
<span class="item-description">{{item.description}}</span> |
|||
</div> |
|||
<ng-template *ngIf="itemTemplate" [sqxTemplateWrapper]="itemTemplate" [item]="item" [index]="i"></ng-template> |
|||
</div> |
|||
</div> |
|||
</span> |
|||
@ -1,51 +1,6 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$color-input-border: rgba(0, 0, 0, .15); |
|||
|
|||
.items { |
|||
&-container { |
|||
position: relative; |
|||
} |
|||
|
|||
& { |
|||
@include absolute(2px, auto, auto, 0); |
|||
@include border-radius(.25em); |
|||
@include box-shadow; |
|||
width: 18rem; |
|||
max-height: 12rem; |
|||
border: 1px solid $color-input-border; |
|||
background: $color-dark-foreground; |
|||
padding: .3rem 0; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
& { |
|||
padding: .3rem .8rem; |
|||
background: transparent; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&.active { |
|||
color: $color-dark-foreground; |
|||
background: $color-theme-blue; |
|||
} |
|||
|
|||
&-image { |
|||
@include circle(2.5rem); |
|||
float: left; |
|||
} |
|||
|
|||
&-title, |
|||
&-description { |
|||
@include truncate; |
|||
margin-left: 3rem; |
|||
} |
|||
|
|||
&-description { |
|||
font-size: .8rem; |
|||
font-style: italic; |
|||
} |
|||
.control-dropdown { |
|||
width: 18rem; |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
<span> |
|||
<div class="selection"> |
|||
<input type="text" class="form-control" [disabled]="isDisabled" (click)="open()" readonly (keydown)="onKeyDown($event)" #input |
|||
autocomplete="off" |
|||
autocorrect="off" |
|||
autocapitalize="off"> |
|||
|
|||
<div class="control-dropdown-item" *ngIf="selectedItem"> |
|||
<span *ngIf="!selectionTemplate">{{selectedItem}}</span> |
|||
|
|||
<ng-template *ngIf="selectionTemplate" [sqxTemplateWrapper]="selectionTemplate" [item]="selectedItem"></ng-template> |
|||
</div> |
|||
|
|||
<i class="icon-caret-down"></i> |
|||
</div> |
|||
|
|||
<div class="items-container"> |
|||
<div class="control-dropdown" #container *sqxModalView="dropdown" [sqxModalTarget]="input"> |
|||
<div *ngFor="let item of items; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" [class.active]="i === selectedIndex" (mousedown)="selectIndexAndClose(i)" [sqxScrollActive]="i === selectedIndex" [container]="container"> |
|||
<span *ngIf="!itemTemplate">{{item}}</span> |
|||
|
|||
<ng-template *ngIf="itemTemplate" [sqxTemplateWrapper]="itemTemplate" [item]="item" [index]="i"></ng-template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</span> |
|||
@ -0,0 +1,36 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$color-input-disabled: #eef1f4; |
|||
|
|||
.form-control { |
|||
& { |
|||
width: 100%; |
|||
} |
|||
|
|||
&[readonly] { |
|||
background: $color-input-background; |
|||
} |
|||
|
|||
&:disabled { |
|||
background: $color-input-disabled; |
|||
} |
|||
} |
|||
|
|||
.selection { |
|||
& { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.control-dropdown-item { |
|||
@include absolute(0, 1rem, 0, 0); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.icon-caret-down { |
|||
@include absolute(30%, .4rem, auto, auto); |
|||
font-size: .9rem; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
@ -0,0 +1,136 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterContentInit, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
const KEY_ENTER = 13; |
|||
const KEY_ESCAPE = 27; |
|||
const KEY_UP = 38; |
|||
const KEY_DOWN = 40; |
|||
const NOOP = () => { /* NOOP */ }; |
|||
|
|||
import { ModalView } from './../utils/modal-view'; |
|||
|
|||
export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DropdownComponent), multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-dropdown', |
|||
styleUrls: ['./dropdown.component.scss'], |
|||
templateUrl: './dropdown.component.html', |
|||
providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class DropdownComponent implements AfterContentInit, ControlValueAccessor { |
|||
private changeCallback: (value: any) => void = NOOP; |
|||
private touchedCallback: () => void = NOOP; |
|||
|
|||
@Input() |
|||
public items: any[] = []; |
|||
|
|||
@ContentChildren(TemplateRef) |
|||
public templates: QueryList<any>; |
|||
|
|||
public dropdown = new ModalView(); |
|||
|
|||
public selectedItem: any; |
|||
public selectedIndex = -1; |
|||
public selectionTemplate: TemplateRef<any>; |
|||
|
|||
public itemTemplate: TemplateRef<any>; |
|||
|
|||
public isDisabled = false; |
|||
|
|||
public ngAfterContentInit() { |
|||
if (this.templates.length === 1) { |
|||
this.itemTemplate = this.selectionTemplate = this.templates.first; |
|||
} else { |
|||
this.templates.forEach(template => { |
|||
if (template.name === 'selection') { |
|||
this.selectionTemplate = template; |
|||
} else { |
|||
this.itemTemplate = template; |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
public writeValue(value: any) { |
|||
this.selectIndex(this.items && value ? this.items.indexOf(value) : 0); |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.changeCallback = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.touchedCallback = fn; |
|||
} |
|||
|
|||
public onKeyDown(event: KeyboardEvent) { |
|||
switch (event.keyCode) { |
|||
case KEY_UP: |
|||
this.up(); |
|||
return false; |
|||
case KEY_DOWN: |
|||
this.down(); |
|||
return false; |
|||
case KEY_ESCAPE: |
|||
case KEY_ENTER: |
|||
this.close(); |
|||
return false; |
|||
} |
|||
} |
|||
|
|||
public open() { |
|||
this.dropdown.show(); |
|||
this.touchedCallback(); |
|||
} |
|||
|
|||
public selectIndexAndClose(selectedIndex: number) { |
|||
this.selectIndex(selectedIndex); |
|||
this.close(); |
|||
} |
|||
|
|||
private close() { |
|||
this.dropdown.hide(); |
|||
} |
|||
|
|||
private up() { |
|||
this.selectIndex(this.selectedIndex - 1); |
|||
} |
|||
|
|||
private down() { |
|||
this.selectIndex(this.selectedIndex + 1); |
|||
} |
|||
|
|||
private selectIndex(selectedIndex: number) { |
|||
if (selectedIndex < 0) { |
|||
selectedIndex = 0; |
|||
} |
|||
|
|||
const items = this.items || []; |
|||
|
|||
if (selectedIndex >= items.length) { |
|||
selectedIndex = items.length - 1; |
|||
} |
|||
|
|||
const value = items[selectedIndex]; |
|||
|
|||
if (value !== this.selectedItem) { |
|||
this.selectedIndex = selectedIndex; |
|||
this.selectedItem = value; |
|||
|
|||
this.changeCallback(value); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,106 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, OnInit, Renderer } from '@angular/core'; |
|||
import { Observable, Subscription } from 'rxjs'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxModalTarget]' |
|||
}) |
|||
export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { |
|||
private elementResizeListener: Function; |
|||
private targetResizeListener: Function; |
|||
private timer: Subscription; |
|||
private targetElement: any; |
|||
|
|||
@Input('sqxModalTarget') |
|||
public target: any; |
|||
|
|||
@Input() |
|||
public offset = 2; |
|||
|
|||
@Input() |
|||
public position = 'left'; |
|||
|
|||
constructor( |
|||
private readonly renderer: Renderer, |
|||
private readonly element: ElementRef |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
if (this.target) { |
|||
this.targetElement = this.target; |
|||
|
|||
this.targetResizeListener = |
|||
this.renderer.listen(this.targetElement, 'resize', () => { |
|||
this.updatePosition(); |
|||
}); |
|||
|
|||
this.elementResizeListener = |
|||
this.renderer.listen(this.element.nativeElement, 'resize', () => { |
|||
this.updatePosition(); |
|||
}); |
|||
|
|||
this.timer = |
|||
Observable.timer(100, 100).subscribe(() => { |
|||
this.updatePosition(); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
if (this.targetResizeListener) { |
|||
this.targetResizeListener(); |
|||
} |
|||
|
|||
if (this.elementResizeListener) { |
|||
this.elementResizeListener(); |
|||
} |
|||
|
|||
if (this.timer) { |
|||
this.timer.unsubscribe(); |
|||
} |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
const modalRef = this.element.nativeElement; |
|||
|
|||
this.renderer.setElementStyle(modalRef, 'position', 'fixed'); |
|||
this.renderer.setElementStyle(modalRef, 'z-index', '1000000'); |
|||
|
|||
this.updatePosition(); |
|||
} |
|||
|
|||
private updatePosition() { |
|||
const viewportHeight = document.documentElement.clientHeight; |
|||
|
|||
const modalRef = this.element.nativeElement; |
|||
const modalRect = this.element.nativeElement.getBoundingClientRect(); |
|||
|
|||
const targetRect: ClientRect = this.targetElement.getBoundingClientRect(); |
|||
|
|||
const left = this.position === 'left' ? |
|||
targetRect.left : |
|||
targetRect.right - modalRect.width; |
|||
|
|||
let top = targetRect.bottom + this.offset; |
|||
|
|||
if (top + modalRect.height > viewportHeight) { |
|||
const potentialTop = targetRect.top - modalRect.height - this.offset; |
|||
|
|||
if (potentialTop > 0) { |
|||
top = potentialTop; |
|||
} |
|||
} |
|||
|
|||
this.renderer.setElementStyle(modalRef, 'top', top + 'px'); |
|||
this.renderer.setElementStyle(modalRef, 'left', left + 'px'); |
|||
this.renderer.setElementStyle(modalRef, 'right', 'auto'); |
|||
this.renderer.setElementStyle(modalRef, 'bottom', 'auto'); |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Directive, Input, OnDestroy, OnInit, OnChanges, TemplateRef, ViewContainerRef, EmbeddedViewRef } from '@angular/core'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxTemplateWrapper]' |
|||
}) |
|||
export class TemplateWrapper implements OnInit, OnDestroy, OnChanges { |
|||
@Input() |
|||
public item: any; |
|||
|
|||
@Input() |
|||
public index: number; |
|||
|
|||
@Input('sqxTemplateWrapper') |
|||
public templateRef: TemplateRef<any>; |
|||
|
|||
public view: EmbeddedViewRef<any>; |
|||
|
|||
public constructor( |
|||
private viewContainer: ViewContainerRef |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.view = this.viewContainer.createEmbeddedView(this.templateRef, { |
|||
'\$implicit': this.item, |
|||
'index': this.index |
|||
}); |
|||
} |
|||
|
|||
public ngOnChanges() { |
|||
if (this.view) { |
|||
this.view.context.$implicit = this.item; |
|||
this.view.context.index = this.index; |
|||
} |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
if (this.view) { |
|||
this.view.destroy(); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue