ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

Browse Source
This commit is contained in:
leejinho 2020-02-05 11:48:28 +09:00
commit 74128a071a
5 changed files with 83 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
View File

@ -3,6 +3,12 @@ $tablet-l-width: 1024px;
$tablet-s-width: 768px; $tablet-s-width: 768px;
$mob-l-width: 640px; $mob-l-width: 640px;
@mixin tab {
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
@content;
}
}
.login { .login {
width: 100%; width: 100%;
background-size: cover; background-size: cover;
@ -84,7 +90,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
background-size: auto 133.3333%; background-size: auto 133.3333%;
background-position: center; background-position: center;
background-repeat: none; background-repeat: none;
transform: scale(0.75); transform: scale(0.70);
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out, transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
opacity $time/4 step-end; opacity $time/4 step-end;
opacity: 0; opacity: 0;
@ -264,52 +270,60 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
::ng-deep .login-form-box { ::ng-deep .login-form-box {
position: absolute; position: absolute;
width: 30vw; width: 26vw;
height: 70%; height: 70%;
top: 15%; top: 15%;
right: 15%; right: 15%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
z-index: 100; z-index: 100;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) { @media screen and (max-width: #{$desktop-l-width}) {
width: 28vw;
}
@media screen and (max-width: #{$tablet-l-width}), (max-height: $tablet-s-width) {
width: 34vw; width: 34vw;
} }
.mat-form-field { .mat-form-field {
&:last-child, padding-top: 20px;
&:first-child { .mat-form-field-wrapper {
margin-top: 10px; padding-bottom: 0;
} .mat-form-field-infix {
.mat-form-field-infix { padding-top: 0;
padding-top: 0; border: 0;
border: 0;
input {
line-height: 1em;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 0.9em;
}
} }
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) { top: -1.4em;
font-size: 0.9em;
top: -1em;
}
} }
.mat-form-field-subscript-wrapper { .mat-form-field-underline {
.mat-error { bottom: 0;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) { }
//min-size 반응형 적용
@include tab {
.mat-form-field-infix {
input {
font-size: 0.9em;
}
}
.mat-form-field-label-wrapper {
font-size: 0.9em;
}
.mat-form-field-subscript-wrapper {
.mat-error {
font-size: 0.8em; font-size: 0.8em;
} }
} }
&.mat-focused,
&:not(.mat-form-field-hide-placeholder) {
.mat-form-field-label-wrapper {
font-size: 0;
}
}
} }
} }
&.mat-focused, }
&:not(.mat-form-field-hide-placeholder) { .error-container {
.mat-form-field-label-wrapper { padding-top: 10px;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 0;
}
}
}
} }
} }

1
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -275,6 +275,7 @@ $daesang-grey: (
cursor: pointer; cursor: pointer;
} }
//snackbar
.cdk-global-overlay-wrapper { .cdk-global-overlay-wrapper {
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;

37
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
View File

@ -3,15 +3,22 @@ $tablet-l-width: 1024px;
$tablet-s-width: 768px; $tablet-s-width: 768px;
$mob-l-width: 640px; $mob-l-width: 640px;
$login-max-height: 800px; $login-max-height: 800px;
@mixin desktop-m {
@media screen and (max-width: #{$desktop-l-width}) {
@content;
}
}
// 태블릿 // 태블릿
@mixin tab { @mixin tab {
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$login-max-height}) { @media screen and (max-width: #{$tablet-l-width}) {
@content; @content;
} }
} }
// 모바일 large // 모바일 large
@mixin mob-large { @mixin mob-l {
@media screen and (max-width: #{$mob-l-width}) { @media screen and (max-width: #{$mob-l-width}) {
@content; @content;
} }
@ -31,7 +38,7 @@ $login-max-height: 800px;
font-size: 14px; font-size: 14px;
.mat-title { .mat-title {
margin: 10px 0 40px 0; margin: 10px 0 10px 0;
text-indent: -10000000px; text-indent: -10000000px;
width: 140px; width: 140px;
height: 140px; height: 140px;
@ -39,6 +46,7 @@ $login-max-height: 800px;
display: inline-flex; display: inline-flex;
background-size: 100% auto; background-size: 100% auto;
flex: 1 1 auto; flex: 1 1 auto;
background-position-x: center;
} }
form { form {
@ -47,10 +55,10 @@ $login-max-height: 800px;
mat-form-field { mat-form-field {
width: 100%; width: 100%;
&.login-id { &.login-pw {
margin-bottom: 10px; margin-top: 10px;
@media screen and (max-width: #{$tablet-s-width}) { @media screen and (max-width: #{$tablet-s-width}) {
margin-bottom: 0; margin-top: 0;
} }
} }
} }
@ -130,8 +138,9 @@ $login-max-height: 800px;
opacity: 0.7; opacity: 0.7;
padding: 6px; padding: 6px;
border-radius: 100px; border-radius: 100px;
width: 68%; width: 72%;
color: #2d3a4a; color: #333333;
font-size: 0.86em;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
@ -146,8 +155,13 @@ $login-max-height: 800px;
} }
} }
} }
// 모바일 large
@include mob-large { @include desktop-m {
.login-form {
.mat-title {
background-size: 86% auto;
}
}
} }
@include tab { @include tab {
@ -173,7 +187,8 @@ $login-max-height: 800px;
width: 100%; width: 100%;
margin-left: -12%; margin-left: -12%;
font-size: 0.9em; font-size: 0.9em;
padding: 6px; padding: 0px;
line-height: 3em;
} }
} }
} }

7
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
View File

@ -11,8 +11,8 @@ $tablet-l-width: 1024px;
display: inline-flex; display: inline-flex;
margin-right: 20px; margin-right: 20px;
justify-items: center; justify-items: center;
width: 80px;
justify-content: space-between; justify-content: space-between;
flex: 0 0 auto;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) { @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
margin-right: 10px; margin-right: 10px;
} }
@ -20,8 +20,11 @@ $tablet-l-width: 1024px;
width: 24px; width: 24px;
height: 24px; height: 24px;
line-height: normal; line-height: normal;
margin-right: 6px; margin-right: 12px;
color: rgb(0, 0, 0, 0.7); color: rgb(0, 0, 0, 0.7);
@media screen and (max-width: #{$tablet-l-width}) {
margin-right: 6px;
}
.mat-icon { .mat-icon {
font-size: 20px; font-size: 20px;
color: rgb(0, 0, 0, 0.87); color: rgb(0, 0, 0, 0.87);

12
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
View File

@ -5,7 +5,8 @@ import {
Output, Output,
EventEmitter, EventEmitter,
ViewChildren, ViewChildren,
ChangeDetectorRef ChangeDetectorRef,
ChangeDetectionStrategy
} from '@angular/core'; } from '@angular/core';
import { import {
RoomInfo, RoomInfo,
@ -18,7 +19,7 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe'; import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
import { import {
TranslateService as uiTranslateService, TranslateService as UcapUiTranslateService,
StringUtil StringUtil
} from '@ucap-webmessenger/ui'; } from '@ucap-webmessenger/ui';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -27,7 +28,8 @@ import { EventType } from '@ucap-webmessenger/protocol-event';
@Component({ @Component({
selector: 'ucap-room-list-item', selector: 'ucap-room-list-item',
templateUrl: './list-item.component.html', templateUrl: './list-item.component.html',
styleUrls: ['./list-item.component.scss'] styleUrls: ['./list-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class ListItemComponent implements OnInit { export class ListItemComponent implements OnInit {
@Input() @Input()
@ -58,7 +60,7 @@ export class ListItemComponent implements OnInit {
constructor( constructor(
private logger: NGXLogger, private logger: NGXLogger,
private uiTranslateService: uiTranslateService, private ucapUiTranslateService: UcapUiTranslateService,
private translateService: TranslateService, private translateService: TranslateService,
private changeDetectorRef: ChangeDetectorRef private changeDetectorRef: ChangeDetectorRef
) {} ) {}
@ -125,7 +127,7 @@ export class ListItemComponent implements OnInit {
getRoomNameByRoomUser(roomUserInfos: (RoomUserInfo | UserInfoShort)[]) { getRoomNameByRoomUser(roomUserInfos: (RoomUserInfo | UserInfoShort)[]) {
let roomName = new TranslatePipe( let roomName = new TranslatePipe(
this.uiTranslateService, this.ucapUiTranslateService,
this.changeDetectorRef this.changeDetectorRef
).transform(roomUserInfos, 'name', ','); ).transform(roomUserInfos, 'name', ',');