Commit 6b365ec7 authored by liujiangnan's avatar liujiangnan

feat: 迁移完成

parent 8a51c964
......@@ -30,7 +30,10 @@
],
"styles": [
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.css"
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/animate.css/animate.min.css",
"src/styles.scss"
],
"scripts": []
},
......@@ -128,5 +131,8 @@
}
}
},
"defaultProject": "ng-template-generator"
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "3b4fde54-68ac-4bd5-98a2-085033a14f60"
}
}
\ No newline at end of file
......@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { BrLineBreakerPipe } from './pipes/br-line-breaker.pipe';
registerLocaleData(zh);
......@@ -36,6 +37,7 @@ registerLocaleData(zh);
AudioRecorderComponent,
UploadImageWithPreviewComponent,
BackgroundImagePipe,
BrLineBreakerPipe,
ResourcePipe,
TimePipe,
UploadVideoComponent,
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<div class="p-content">
<div class="p-conversation-box">
<nz-card class="p-conversation" nzTitle="Conversation" [nzExtra]="extraTemplate"
*ngFor="let item of item.contentObj.list; index as pIndex">
<input nz-input [(ngModel)]="item.text" (blur)="updateItem()" placeholder="Please type text here" />
<div class="p-options row flex-wrap">
<div class="col-3" *ngFor="let option of item.options; index as i;">
<div class="p-option">
<app-upload-image-with-preview class="i-pic" [picUrl]="option.pic_id" [canDelete]="true"
(delete)="onBtnDeleteOption(item, i)" (imageUploaded)="imageUploaded($event, option)">
</app-upload-image-with-preview>
</div>
</div>
<div class="col-3">
<div class="p-option new-option" (click)="onAddOption(item)">
<div>
<i class="anticon anticon-plus"></i>
Add
</div>
</div>
</div>
</div>
<ng-template #extraTemplate>
<button nz-button nzType="danger" nz-popconfirm nzTitle="Are you sure ?"
(nzOnConfirm)="onBtnDeleteConversation(pIndex)">Delete
</button>
</ng-template>
</nz-card>
<button class="mt-4" nz-button nzType="primary" (click)="onBtnNewConversation()">
<i class="anticon anticon-plus"></i>
Add New Conversation
</button>
</div>
</div>
\ No newline at end of file
\ No newline at end of file
@import '../style/common_mixin.scss';
.p-content {
width: 100%;
padding: 2rem;
}
.p-conversation-box {
}
.p-conversation {
border-radius: 0.5rem;
margin-bottom: 1rem;
width: 100%;
.i-title {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 0.4rem;
}
.p-options .col-3 > div {
margin: 1rem 1rem 0 0;
}
.p-option {
width: 100%;
.i-pic {
}
}
.new-option {
position: relative;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
cursor: pointer;
@include k-no-select();
&:before {
content: "";
display: block;
padding-bottom: 56.25%;
}
& > div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
}
:host ::ng-deep .anticon-upload {
font-size: 2rem !important;
}
:host ::ng-deep .p-upload-icon span {
font-size: 0.4rem !important;
}
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import {NzMessageService} from 'ng-zorro-antd';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
export class FormComponent implements OnInit {
// 储存数据用
saveKey = "test_0011";
saveKey = 'daily-conversation';
// 储存对象
item;
test;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef,
private changeDetectorRef: ChangeDetectorRef,
private nzMessageService: NzMessageService) {
}
ngOnInit() {
this.item = {};
this.item = {
contentObj: {
list: []
}
};
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(window as any).courseware.getData((data) => {
if (data) {
console.log(data);
this.item = data;
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
......@@ -40,42 +45,53 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
init(){
ngOnChanges() {
}
ngOnDestroy() {
imageUploadedTest($event) {
this.test = $event.url;
console.log("******"+this.test);
this.save();
}
init() {
imageUploaded($event, option) {
option.pic_id = $event.url;
this.save();
}
onBtnDeleteConversation(i) {
this.item.contentObj.list.splice(i, 1);
this.updateItem();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onBtnDeleteOption(item, i) {
item.options.splice(i, 1);
this.updateItem();
}
this.item[key] = e.url;
this.save();
onAddOption(item) {
item.options = item.options || {};
if (item.options.length < 12) {
item.options.push({});
} else {
this.nzMessageService.error('Reach maximum limitation (Max: 12)');
}
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onBtnNewConversation() {
this.item.contentObj.list = this.item.contentObj.list || [];
if (this.item.contentObj.list.length < 6) {
this.item.contentObj.list.push({text: '', options: []});
} else {
this.nzMessageService.error('Reach maximum limitation (Max: 6)');
}
}
this.item[key] = e.url;
updateItem() {
this.save();
}
/**
* 储存数据
*/
......
import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron');
@Pipe({
name: 'backgroundImage'
})
export class BackgroundImagePipe implements PipeTransform {
transform(value: any, coursewareSid?: string) {
// const ret = value ? `url(${value})` : '';
const ret = value ? `url(${value})` : '';
return ret;
// let ret = value > 0 ? `url(/api/media-resource/${value}/file)` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
// ret = `url(file://${APP_PATH}/courseware_cache/${coursewareSid}/${value})`;
// }
// return ret;
transform(value: any) {
return `url(${value})`;
}
}
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'brLineBreaker'
})
export class BrLineBreakerPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value ? value.replace(/\n/g, '<br />') : '';
}
}
......@@ -2,25 +2,17 @@ import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron');
const isInElectron = localStorage.getItem('electron');
@Pipe({
name: 'resource'
})
export class ResourcePipe implements PipeTransform {
transform(pic_url: any, coursewareSid?: string): string {
// return pic_url;
if (pic_url && typeof pic_url === 'object') {
return pic_url;
}
// console.log('resource', pic_url)
return `${pic_url}?t=${Math.random()}`;
// let ret = value ? `/api/resource/${value}/file` : '';
// let ret = res_id ? `/resource/audio/${res_id}` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, res_id)) {
// ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${res_id}`;
transform(value: any, coursewareSid?: string): string {
return value ? `/api/media-resource/${value}/file` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
// ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${value}`;
// }
// return ret;
}
......
.game-container {
width: 100%;
height: 100%;
background: #ffffff;
background-size: cover;
}
#canvas {
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
<div class="p-content">
<div class="p-conversation-box" nz-row nzGutter="16" nzType="flex">
<div nz-col nzSpan="8" *ngFor="let item of data.contentObj.list; index as i;">
<div class="p-conversation" [style.border-color]="colorArr[i]" (click)="curItem=item; curIndex=i;">
{{item.text}}
</div>
</div>
</div>
<div class="p-popup-box" [@fadePopup] *ngIf="curItem"
[style.border-color]="colorArr[curIndex]">
<div class="i-close" (click)="onClosePopup()">
<i class="anticon anticon-close"></i>
</div>
<div class="i-text">{{curItem.text}}</div>
<div class="position-relative">
<div class="p-options" nz-row nzGutter="16" nzType="flex" *ngIf="!curOption">
<div nz-col [nzSpan]="optionCol" *ngFor="let item of curItem.options; index as i;" (click)="curOption=item;">
<div class="p-option"
[style.background-image]="'url('+ item.pic_id +')'"
></div>
</div>
</div>
<div class="p-cur-option" [@zoomOption] *ngIf="curOption" (click)="curOption=null;"
[style.background-image]="'url('+ curOption.pic_id +')'"
>
</div>
</div>
</div>
</div>
@import "../style/common_mixin.scss";
.p-content {
width: 100%;
height: 100%;
background-image: url("/assets/daily-conversation/bg.jpg");
@include k-img-bg();
}
.p-conversation-box {
padding: 20vh 7vh 5vh 7vh;
justify-content: center;
}
.p-conversation {
border: 0.5rem solid;
border-radius: 1rem;
background-color: #fff;
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
color: brown;
font-size: 1.1rem;
padding: 1rem;
margin-bottom: 2rem;
}
.p-popup-box {
position: absolute;
top: 8vh;
width: 108vh;
min-height: 63vh;
left: 50%;
margin-left: -54vh;
border: 0.5rem solid;
border-radius: 2rem;
background-color: #fff;
.i-close {
position: absolute;
right: -1.5rem;
top: -1.5rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
font-size: 2rem;
color: white;
background-color: #c66820;
border: 2px solid #b65810;
font-weight: bold;
text-align: center;
}
.i-text {
font-size: 5vh;
color: brown;
padding: 1vh;
}
.p-options {
height: 40vh;
padding: 0 4vh;
justify-content: center;
align-items: center;
.p-option {
position: relative;
background-color: #eee;
border-radius: 1rem;
border: 1px solid #ddd;
width: 100%;
margin-bottom: 1.5vh;
@include k-img-bg();
&:before {
content: "";
display: block;
position: relative;
padding-bottom: 56.25%;
width: 100%;
}
}
}
.p-cur-option {
position: absolute;
background-color: #eee;
border-radius: 1rem;
border: 1px solid #ddd;
width: 60%;
left: 20%;
top: 2vh;
@include k-img-bg();
&:before {
content: "";
display: block;
position: relative;
padding-bottom: 56.25%;
width: 100%;
}
}
}
This diff is collapsed.
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
......@@ -3,6 +3,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
if (environment.production) {
enableProdMode();
......
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment