대화방 입력폼, 다른이름으로 저장,스티커,조직도(수정중)

This commit is contained in:
khk 2019-12-17 09:18:48 +09:00
parent 57f05645b8
commit 4e2f19b91e
10 changed files with 105 additions and 63 deletions

35
package-lock.json generated
View File

@ -2436,8 +2436,7 @@
"@types/semver": { "@types/semver": {
"version": "6.0.2", "version": "6.0.2",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.0.2.tgz",
"integrity": "sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ==", "integrity": "sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ=="
"dev": true
}, },
"@types/source-list-map": { "@types/source-list-map": {
"version": "0.1.2", "version": "0.1.2",
@ -2985,7 +2984,6 @@
"version": "1.0.10", "version": "1.0.10",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
"dev": true,
"requires": { "requires": {
"sprintf-js": "~1.0.2" "sprintf-js": "~1.0.2"
} }
@ -5175,7 +5173,6 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": { "requires": {
"ms": "^2.1.1" "ms": "^2.1.1"
} }
@ -5854,8 +5851,7 @@
"electron-log": { "electron-log": {
"version": "3.0.9", "version": "3.0.9",
"resolved": "https://registry.npmjs.org/electron-log/-/electron-log-3.0.9.tgz", "resolved": "https://registry.npmjs.org/electron-log/-/electron-log-3.0.9.tgz",
"integrity": "sha512-kfV4riUqW8uooYLAfrlB3EJW66W29ePipJU4/Fm8UxQekVNcR2qHI/0tiJX3oWM79VdAUiiYqL9V49lhnSIO8g==", "integrity": "sha512-kfV4riUqW8uooYLAfrlB3EJW66W29ePipJU4/Fm8UxQekVNcR2qHI/0tiJX3oWM79VdAUiiYqL9V49lhnSIO8g=="
"dev": true
}, },
"electron-publish": { "electron-publish": {
"version": "21.2.0", "version": "21.2.0",
@ -5928,7 +5924,6 @@
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-4.2.0.tgz", "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-4.2.0.tgz",
"integrity": "sha512-GuS3g7HDh17x/SaFjxjswlWUaKHczksYkV2Xc5CKj/bZH0YCvTSHtOmnBAdAmCk99u/71p3zP8f0jIqDfGcjww==", "integrity": "sha512-GuS3g7HDh17x/SaFjxjswlWUaKHczksYkV2Xc5CKj/bZH0YCvTSHtOmnBAdAmCk99u/71p3zP8f0jIqDfGcjww==",
"dev": true,
"requires": { "requires": {
"@types/semver": "^6.0.2", "@types/semver": "^6.0.2",
"builder-util-runtime": "8.4.0", "builder-util-runtime": "8.4.0",
@ -5944,7 +5939,6 @@
"version": "8.4.0", "version": "8.4.0",
"resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.4.0.tgz", "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.4.0.tgz",
"integrity": "sha512-CJB/eKfPf2vHrkmirF5eicVnbDCkMBbwd5tRYlTlgud16zFeqD7QmrVUAOEXdnsrcNkiLg9dbuUsQKtl/AwsYQ==", "integrity": "sha512-CJB/eKfPf2vHrkmirF5eicVnbDCkMBbwd5tRYlTlgud16zFeqD7QmrVUAOEXdnsrcNkiLg9dbuUsQKtl/AwsYQ==",
"dev": true,
"requires": { "requires": {
"debug": "^4.1.1", "debug": "^4.1.1",
"sax": "^1.2.4" "sax": "^1.2.4"
@ -5953,8 +5947,7 @@
"sax": { "sax": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
"dev": true
} }
} }
}, },
@ -6287,8 +6280,7 @@
"esprima": { "esprima": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
"dev": true
}, },
"esrecurse": { "esrecurse": {
"version": "4.2.1", "version": "4.2.1",
@ -8488,7 +8480,6 @@
"version": "3.13.1", "version": "3.13.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
"dev": true,
"requires": { "requires": {
"argparse": "^1.0.7", "argparse": "^1.0.7",
"esprima": "^4.0.0" "esprima": "^4.0.0"
@ -9454,8 +9445,7 @@
"lazy-val": { "lazy-val": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.4.tgz", "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.4.tgz",
"integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q==", "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
"dev": true
}, },
"lcid": { "lcid": {
"version": "2.0.0", "version": "2.0.0",
@ -9615,8 +9605,7 @@
"lodash.isequal": { "lodash.isequal": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
"dev": true
}, },
"log-symbols": { "log-symbols": {
"version": "2.2.0", "version": "2.2.0",
@ -10158,8 +10147,7 @@
"ms": { "ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
"dev": true
}, },
"multicast-dns": { "multicast-dns": {
"version": "6.2.3", "version": "6.2.3",
@ -11053,8 +11041,7 @@
"pako": { "pako": {
"version": "1.0.10", "version": "1.0.10",
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
"integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==", "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
"dev": true
}, },
"parallel-transform": { "parallel-transform": {
"version": "1.2.0", "version": "1.2.0",
@ -12653,8 +12640,7 @@
"semver": { "semver": {
"version": "6.3.0", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
"dev": true
}, },
"semver-compare": { "semver-compare": {
"version": "1.0.0", "version": "1.0.0",
@ -13467,8 +13453,7 @@
"sprintf-js": { "sprintf-js": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
"dev": true
}, },
"sshpk": { "sshpk": {
"version": "1.16.1", "version": "1.16.1",

View File

@ -3,7 +3,7 @@
display: inline-flex; display: inline-flex;
padding-left: 10px; padding-left: 10px;
align-items: center; align-items: center;
color:#ffffff; color: #ffffff;
} }
.btn-box { .btn-box {
height: 100%; height: 100%;
@ -21,7 +21,7 @@
align-items: center; align-items: center;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
background-color:#f9f9f9; background-color: #f9f9f9;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
.searchbox { .searchbox {
width: 100%; width: 100%;
@ -43,6 +43,7 @@
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
border: none; border: none;
min-height: 20px;
} }
.mat-form-field-suffix { .mat-form-field-suffix {
.mat-icon { .mat-icon {
@ -78,9 +79,9 @@
height: 100%; height: 100%;
} }
::ng-deep .cdk-virtual-scroll-orientation-vertical { ::ng-deep .cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper{ .cdk-virtual-scroll-content-wrapper {
width: 100%; width: 100%;
height:100%; height: 100%;
contain: unset; contain: unset;
} }
} }

View File

@ -195,20 +195,16 @@
class="file-drop-zone" class="file-drop-zone"
></ucap-file-upload-queue> ></ucap-file-upload-queue>
</div> </div>
<div class="sticker-selector-container">
<ucap-sticker-selector
*ngIf="isShowStickerSelector"
#stickerSelector
[stickerHistory]='getStickerHistory()'
(selectedSticker)="onSelectedSticker($event)"
class="sticker-selector-zone"
></ucap-sticker-selector>
<div></div>
</div>
</div> </div>
<!-- / CHAT CONTENT --> <!-- / CHAT CONTENT -->
<!-- sticker-selector -->
<div class="sticker-selector-container">
<ucap-sticker-selector *ngIf="isShowStickerSelector" #stickerSelector [stickerHistory]='getStickerHistory()'
(selectedSticker)="onSelectedSticker($event)" class="sticker-selector-zone"></ucap-sticker-selector>
<div></div>
</div>
<!-- / sticker-selector -->
<!-- CHAT FOOTER --> <!-- CHAT FOOTER -->
<div fxFlex="0 0 auto" fxLayout="column" *ngIf="getEnableSend()"> <div fxFlex="0 0 auto" fxLayout="column" *ngIf="getEnableSend()">
<!-- REPLY FORM --> <!-- REPLY FORM -->

View File

@ -78,6 +78,7 @@
} }
} }
} }
.chat-content { .chat-content {
position: relative; position: relative;
background: transparent; background: transparent;

View File

@ -50,7 +50,6 @@
ngModel ngModel
name="message" name="message"
[matTextareaAutosize]="true" [matTextareaAutosize]="true"
[matAutosizeMinRows]="1"
[matAutosizeMaxRows]="20" [matAutosizeMaxRows]="20"
></textarea> ></textarea>
</mat-form-field> </mat-form-field>
@ -61,9 +60,19 @@
type="submit" type="submit"
aria-label="Send message" aria-label="Send message"
> >
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
<path d="M12 19V6M5 12l7-7 7 7" /></svg> width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="butt"
stroke-linejoin="round"
>
<path d="M12 19V6M5 12l7-7 7 7" />
</svg>
</button> </button>
</form> </form>
</div> </div>

View File

@ -13,32 +13,35 @@
i { i {
font-size: 20px; font-size: 20px;
color: #666; color: #666;
width:30px; width: 30px;
height:30px; height: 30px;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
&:hover { &:hover {
color: #333333; color: #333333;
background-color: #efefef; background-color: #efefef;
border-radius: 50%; border-radius: 50%;
} }
} }
} }
} }
.mat-form-field-underline{ textarea[name='message'] {
background-color:none; min-height: 30px;
}
.mat-form-field-underline {
background-color: none;
} }
.send-message-button { .send-message-button {
margin-left: 20px; margin-left: 20px;
i{ i {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
line-height:40px; line-height: 40px;
font-size: 20px; font-size: 20px;
color: #ffffff; color: #ffffff;
&:hover{ &:hover {
opacity: 0.8; opacity: 0.8;
} }
} }

View File

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 14px; padding: 14px;
min-width: 200px; min-width: 300px;
.file-img { .file-img {
display: inline-flex; display: inline-flex;
width: 50px; width: 50px;

View File

@ -58,25 +58,34 @@
// } // }
.tree-has-child { .tree-has-child {
height: 40px; height: 50px;
min-height: 40px; min-height: 50px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
margin-left: 10px;
margin-right: 10px;
.tree-node-body { .tree-node-body {
width: 100%;
height: 40px;
background-color: #eef9fd;
border: 1px solid #cee1e8;
border-radius: 4px;
padding-bottom: 10px;
.tree-node-expand-btn { .tree-node-expand-btn {
background-color: white; background-color: transparent;
} }
} }
} }
} }
.tree-no-child { .tree-no-child {
height: 40px; height: 50px;
min-height: 40px; min-height: 50px;
font-size: 13px; font-size: 13px;
li { li {
display: flex; display: flex;

View File

@ -1,5 +1,16 @@
<div *ngIf="currentSticker" class="selected-sticker"> <div *ngIf="currentSticker" class="selected-sticker">
<img [src]="getStickerContentsImage(currentSticker)" /> <img [src]="getStickerContentsImage(currentSticker)" />
<span class="btn-close">
<button
mat-button
matSuffix
mat-icon-button
aria-label="Close"
(click)="onClickClose()"
>
<mat-icon>close</mat-icon>
</button>
</span>
</div> </div>
<div class="sticker-selector"> <div class="sticker-selector">
<mat-tab-group <mat-tab-group
@ -25,7 +36,7 @@
" "
/> />
</ng-template> </ng-template>
<div fxFlex fxLayout="row" fxLayoutGap="10px"> <div fxFlex fxLayout="row" fxLayoutGap="20px" class="sticker-item-box">
<div <div
*ngFor="let sticker of getStickerInfos(stickerInfo)" *ngFor="let sticker of getStickerInfos(stickerInfo)"
(click)="onClickSelectSticker(sticker)" (click)="onClickSelectSticker(sticker)"

View File

@ -1,8 +1,35 @@
.sticker-selector { .sticker-selector {
height: 200px; height: 220px;
overflow: auto; border-top: 1px solid #cccccc;
.sticker-item-box {
flex-wrap: wrap;
padding: 20px 20px 0;
overflow: auto;
}
} }
.sticker-item { .sticker-item {
width: 60px;
margin-bottom: 20px;
display: inline-flex;
cursor: pointer; cursor: pointer;
} }
.selected-sticker {
position: relative;
padding: 20px;
text-align: right;
background-color: rgba(0, 0, 0, 0.4);
img {
margin-right: 40px;
}
.btn-close {
position: absolute;
top: 2px;
right: 20px;
width: 40px;
height: 40px;
color: #ffffff;
}
}