kangaroo-and-rabbit/karideo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[DEV] update stle of pop-up and good basic integrations...

Browse Source
This commit is contained in:
Edouard DUPIN 2020-03-04 23:53:24 +01:00
parent 75abeefeaa
commit 40092cd8b7
7 changed files with 272 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
front/src/app/component/popin/popin.html
View File

@ -1,9 +1,38 @@
<div class="fill-popin">
<div class="popin">
<div class="popin-body">
<h1>{{title}}</h1>
<ng-content></ng-content>
</div>
</div>
<div class="popin-background"></div>
<div class="popin">
<div class="element {{popSize}}">
<div class="header">
<label class="unselectable">{{popTitle}}</label>
<div class="close">
<button class="button-close color-shadow-black" (click)="onCloseTop()" type="submit">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="body">
<ng-content></ng-content>
</div>
<div class="footer">
<div class="action" *ngIf="validateTitle != null" >
<button class="button color-shadow-black" (click)="onValidate()" type="submit">
<i class="material-icons">done</i> {{validateTitle}}
</button>
</div>
<div class="action" *ngIf="saveTitle != null" >
<button class="button color-shadow-black" (click)="onSave()" type="submit">
<i class="material-icons">save_alt</i> {{saveTitle}}
</button>
</div>
<div class="action" *ngIf="otherTitle != null" >
<button class="button color-shadow-black" (click)="onOther()" type="submit">
<i class="material-icons">star</i> {{otherTitle}}
</button>
</div>
<div class="action" *ngIf="closeTitle != null" >
<button class="button color-shadow-black" (click)="onClose()" type="submit">
<i class="material-icons">close</i> {{closeTitle}}
</button>
</div>
</div>
</div>
<div class="background"></div>
</div>

122
front/src/app/component/popin/popin.less
View File

@ -2,58 +2,86 @@
-------------------------------*/
/* popins are hidden by default */
//display: none;
.fill-popin {
.popin {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 800;
}
.popin {
/* popin container fixed across whole screen */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
/* z-index must be higher than .popin-background */
z-index: 1000;
/* enables scrolling for tall popins */
overflow: auto;
.popin-body {
padding: 20px;
background: #fff;
/* margin exposes part of the popin background */
margin: 40px;
.small {
top: 15%;
right: 35%;
bottom: 15%;
left: 35%;
}
.medium {
top: 15%;
right: 25%;
bottom: 15%;
left: 25%;
}
.big {
top: 15%;
right: 15%;
bottom: 15%;
left: 15%;
}
.element {
/* popin container fixed across whole screen */
position: fixed;
display: block;
/* z-index must be higher than .popin-background */
z-index: 1000;
/* enables scrolling for tall popins */
overflow: auto;
.header {
padding: 10px;
//display: block;
background: #88f;
//margin: 40px;
//margin: auto;
height: 40px;
line-height: 36px;
.close {
display: block;
float: right;
}
}
.body {
//display: block;
padding: 20px;
background: #fff;
/* margin exposes part of the popin background */
//margin: 40px;
//margin: auto;
}
.footer {
padding: 10px;
//display: block;
background: #888;
//margin: 40px;
//margin: auto;
height: 40px;
line-height: 36px;
.action {
padding: 0 10px;
display: block;
float: right;
}
}
}
// Pop in mush have a background over all the windows ...
.background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.85;
z-index: 900;
}
}
.popin-background {
/* popin background fixed across whole screen */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* semi-transparent black */
background-color: #000;
opacity: 0.75;
/* z-index must be below .popin and above everything else */
z-index: 900;
}
body.popin-open {
/* body overflow is hidden to hide main scrollbar when popin window is open */
overflow: hidden;
}

56
front/src/app/component/popin/popin.ts
View File

@ -1,4 +1,10 @@
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
/** @file
* @author Edouard DUPIN
* @copyright 2020, Edouard DUPIN, all right reserved
* @license MPL-2 (see license file)
*/
import { Component, ElementRef, Input, Output, OnInit, OnDestroy, EventEmitter} from '@angular/core';
import * as $ from 'jquery';
import { PopInService } from '../../service/popin';
@ -12,15 +18,22 @@ import { PopInService } from '../../service/popin';
export class PopInComponent implements OnInit, OnDestroy {
@Input() id: string;
@Input() title: string = 'No title';
@Input() closeOnOutClick: any = "false";
@Input() popTitle: string = 'No title';
@Input() closeTopRight: any = "false";
@Input() popSize: string = "medium";
@Output() callback: EventEmitter<any> = new EventEmitter();
@Input() closeTitle: any = null;
@Input() validateTitle: any = null;
@Input() saveTitle: any = null;
@Input() otherTitle: any = null;
private element: any;
constructor(private popInService: PopInService,
private el: ElementRef) {
this.element = $(el.nativeElement);
}
ngOnInit(): void {
let self = this;
// ensure id attribute exists
if (!this.id) {
console.error('popin must have an id');
@ -28,17 +41,8 @@ export class PopInComponent implements OnInit, OnDestroy {
}
// move element to bottom of page (just before </body>) so it can be displayed above everything else
this.element.appendTo('body');
if (this.closeOnOutClick == "true") {
// close popin on background click
this.element.on('click', function (e: any) {
let target = $(e.target);
if (!target.closest('.modal-body').length) {
self.close();
}
});
}
// add self (this popin instance) to the popin service so it's accessible from controllers
this.popInService.add(this);
this.element.hide();
}
// remove self from popIn service when directive is destroyed
ngOnDestroy(): void {
@ -47,14 +51,30 @@ export class PopInComponent implements OnInit, OnDestroy {
}
// open popIn
open(): void {
//console.log("request element show ...");
this.element.show();
//$('body').addClass('popin-open');
//console.log(" ==> done");
}
// close popin
close(): void {
this.element.hide();
//$('body').removeClass('popin-open');
}
onCloseTop(): void {
this.callback.emit(["close-top"]);
}
onValidate(): void {
this.callback.emit(["validate"]);
}
onClose(): void {
this.callback.emit(["close"]);
}
onOther(): void {
this.callback.emit(["other"]);
}
onSave(): void {
this.callback.emit(["save"]);
}
}

59
front/src/app/scene/video-edit/video-edit.html
View File

@ -168,15 +168,64 @@
</div>
</div>
<popin id="custom-modal-1" title="A Custom Modal test 1" >
<!--
<popin id="popin-new-saison"
popTitle="Create a new saison"
closeTopRight="true"
closeTitle="close title"
validateTitle="Validate"
saveTitle="Save"
otherTitle="Other"
(callback)="eventPopUp($event[0])">
<p>
Home page text: <input type="text" [(ngModel)]="bodyText" />
</p>
<button (click)="closeModal('custom-modal-1');">Close</button>
</popin>
<popin id="custom-modal-2" title="My second test" closeOnOutClick="true">
<button (click)="closeModal('custom-modal-2');">Close</button>
-->
<popin id="popin-new-saison"
popTitle="Create a new saison"
closeTopRight="true"
closeTitle="Cancel"
validateTitle="Create"
(callback)="eventPopUpSaison($event[0])">
<p>
Name: <input type="text" [(ngModel)]="bodyText" />
</p>
</popin>
<popin id="popin-new-serie"
popSize="small"
popTitle="Create a new serie"
closeTopRight="true"
closeTitle="Cancel"
validateTitle="Create"
(callback)="eventPopUpSerie($event[0])">
<p>
Name: <input type="text" [(ngModel)]="bodyText" />
</p>
</popin>
<popin id="popin-new-type"
popSize="medium"
popTitle="Create a new type"
closeTopRight="true"
closeTitle="Cancel"
validateTitle="Create"
(callback)="eventPopUpType($event[0])">
<p>
Name: <input type="text" [(ngModel)]="bodyText" />
</p>
</popin>
<popin id="popin-new-univers"
popSize="big"
popTitle="Create a new univers"
closeTopRight="true"
closeTitle="Cancel"
validateTitle="Create"
(callback)="eventPopUpUnivers($event[0])">
<p>
Name: <input type="text" [(ngModel)]="bodyText" />
</p>
</popin>

33
front/src/app/scene/video-edit/video-edit.ts
View File

@ -381,22 +381,39 @@ export class VideoEditComponent implements OnInit {
removeMedia() {
console.log("Request remove Media...");
}
newSaison() {
eventPopUpSaison(_event: string): void {
console.log("GET event: " + _event);
this.popInService.close("popin-new-saison");
}
eventPopUpSerie(_event: string): void {
console.log("GET event: " + _event);
this.popInService.close("popin-new-serie");
}
eventPopUpType(_event: string): void {
console.log("GET event: " + _event);
this.popInService.close("popin-new-type");
}
eventPopUpUnivers(_event: string): void {
console.log("GET event: " + _event);
this.popInService.close("popin-new-univers");
}
newSaison(): void {
console.log("Request new Saison...");
this.popInService.open("custom-modal-1");
this.popInService.open("popin-new-saison");
}
newSerie() {
newSerie(): void {
console.log("Request new Serie...");
this.popInService.open("custom-modal-2");
this.popInService.open("popin-new-serie");
}
closeModal(_id) {
this.popInService.close(_id);
}
newType() {
newType(): void {
console.log("Request new Type...");
this.popInService.open("popin-new-type");
}
newUnivers() {
console.log("Request new Univers...");
this.popInService.open("popin-new-univers");
}
}

15
front/src/app/service/popin.ts
View File

@ -15,21 +15,25 @@ export class PopInService {
remove(_id: string) {
// remove popin from array of active popins
//let popinToRemove = _.findWhere(this.popins, { id: id });
//this.popins = _.without(this.popins, popinToRemove);
for( let iii = 0; iii < this.popins.length; iii++) {
if (this.popins[iii].id === _id) {
this.popins.splice(iii, 1);
return;
}
}
}
open(_id: string) {
console.log("Try to open pop-in: '" + _id + "'");
//console.log("Try to open pop-in: '" + _id + "'");
// open popin specified by id
for (let iii=0; iii<this.popins.length; iii++) {
if (this.popins[iii].id == _id) {
console.log(" ==>find it ...");
//console.log(" ==>find it ...");
this.popins[iii].open();
return;
}
}
console.log(" ==> NOT found !!!!!");
//console.log(" ==> NOT found !!!!!");
}
close(_id: string) {
@ -41,4 +45,5 @@ export class PopInService {
}
}
}
}

33
front/src/styles.less
View File

@ -244,6 +244,39 @@ html {
}
}
.button-close {
// background: #b3d4fc;
text-shadow: none;
border: none;
border-radius: 2px;
position: relative;
height: 36px;
margin: 0;
min-width: 36px;
padding: 0;
display: inline-block;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle;
&:disabled {
cursor: not-allowed;
}
.material-icons {
vertical-align: middle;
}
background: rgba(0, 0, 0, 0)
}
/*
Disable label text selection
*/