From 9d2e92b31a962eafecee471807c1b63457cbca1a Mon Sep 17 00:00:00 2001 From: khk Date: Tue, 29 Oct 2019 19:06:25 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20scss?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/app.theme.scss | 13 +- .../components/left-side.component.html | 1 + .../components/left-side.component.scss | 5 +- .../left-sidenav/chat.component.html | 35 ++++- .../left-sidenav/chat.component.scss | 52 +++++++- .../left-sidenav/group.component.ts | 9 +- .../left-sidenav/organization.component.html | 9 +- .../left-sidenav/organization.component.scss | 123 +++++++++++++----- .../chat/create-chat.dialog.component.html | 15 ++- .../chat/create-chat.dialog.component.scss | 72 ++++++++++ .../group/edit-group.dialog.component.html | 2 +- .../group/edit-group.dialog.component.scss | 27 ++++ .../group/select-group.dialog.component.html | 30 +++-- .../group/select-group.dialog.component.scss | 66 ++++++++++ .../group/select-group.dialog.component.ts | 2 +- .../native/components/top-bar.component.scss | 8 +- .../src/assets/scss/global/_default.scss | 61 +++++++++ .../src/lib/components/login.component.html | 3 +- .../src/lib/components/login.component.scss | 3 +- .../src/lib/components/form.component.html | 4 +- .../message-box/information.component.html | 4 +- .../lib/components/messages.component.html | 1 + .../lib/components/messages.component.scss | 10 +- .../components/expansion-panel.component.scss | 7 +- .../components/tenant-search.component.scss | 2 +- .../lib/components/list-item.component.scss | 10 ++ .../src/assets/scss/_ucap-ui.scss | 1 + .../src/assets/scss/partials/_dialogs.scss | 24 ++++ .../src/assets/scss/partials/_list-item.scss | 4 + .../lib/dialogs/alert.dialog.component.html | 2 +- .../lib/dialogs/confirm.dialog.component.html | 6 +- .../lib/dialogs/confirm.dialog.component.scss | 25 ++++ 32 files changed, 543 insertions(+), 93 deletions(-) create mode 100644 projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss index dbaa7cc2..e01b076b 100644 --- a/projects/ucap-webmessenger-app/src/app/app.theme.scss +++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss @@ -37,14 +37,14 @@ $theme: mat-light-theme( // Add ".theme-default" class to the body to activate this theme. // Class name must start with "theme-" !!! -body.theme-default { +/*body.theme-default { // Create an Angular Material theme from the $theme map @include angular-material-theme($theme); // Apply the theme to the user components @include components-theme($theme); - @include ucap-material-theme($theme); -} + @include ucap-material-theme($theme); +}*/ // ----------------------------------------------------------------------------------------------------- // @ Define a blue-gray dark theme @@ -103,8 +103,8 @@ body.theme-pink-dark { // ----------------------------------------------------------------------------------------------------- // Define the primary, accent and warn palettes -$pink-light-theme-primary-palette: mat-palette($mat-pink); -$pink-light-theme-accent-palette: mat-palette($mat-pink); +$pink-light-theme-primary-palette: mat-palette($mat-grey,800); +$pink-light-theme-accent-palette: mat-palette($lg-red, 400); $pink-light-theme-warn-palette: mat-palette($mat-red); // Create the Material theme object @@ -116,10 +116,11 @@ $pink-light-theme: mat-light-theme( // Add ".theme-pink-dark" class to the body to activate this theme. // Class name must start with "theme-" !!! -body.theme-pink-light { +body.theme-default { // Generate the Angular Material theme @include angular-material-theme($pink-light-theme); // Apply the theme to the user components @include components-theme($pink-light-theme); + @include ucap-material-theme($pink-light-theme); } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html index 50600652..b4bda552 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html @@ -34,6 +34,7 @@ [selectedUserList]="selectedUserList" (checkAllUser)="onCheckAllUser($event)" (checkUser)="onCheckUser($event)" + class="organization-side" > diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss index 7a51d48b..015d4278 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss @@ -25,7 +25,10 @@ width: 100%; flex-direction: row; } - +::ng-deep .organization-side{ + flex-direction: column; + height:100%; +} ::ng-deep .global-menu { border-right: 1px solid #dddddd; .mat-tab-label-container { diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html index 59968a2d..dd59b29c 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html @@ -1,6 +1,6 @@ -
+ + +
+
+
+ + + + +
+
+
(CreateChatDialogComponent, { width: '600px', - height: '500px', + height: '700px', data: { type: UserSelectDialogType.NewGroup, title: 'New Group' @@ -362,8 +362,7 @@ export class GroupComponent implements OnInit, OnDestroy { EditGroupDialogData, EditGroupDialogResult >(EditGroupDialogComponent, { - width: '600px', - height: '500px', + data: { title: 'Group Name Edit', group @@ -391,7 +390,7 @@ export class GroupComponent implements OnInit, OnDestroy { CreateChatDialogResult >(CreateChatDialogComponent, { width: '600px', - height: '500px', + data: { type: UserSelectDialogType.EditMember, title: 'Group Member Edit', @@ -421,7 +420,7 @@ export class GroupComponent implements OnInit, OnDestroy { ConfirmDialogData, ConfirmDialogResult >(ConfirmDialogComponent, { - width: '220px', + width: '360px', data: { title: 'Delete group', html: `그룹(${group.name})을 삭제하시겠습니까?
그룹 멤버는 해당 그룹에서만 삭제됩니다.` diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html index 780cb90b..b2594b37 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html @@ -1,16 +1,15 @@
-
+
-
-
+
+
{{ getSelectedDepartmentName() }} @@ -32,7 +31,7 @@
+ {{ data.title }}
- +
-
+
device_hub -
+
@@ -101,7 +102,7 @@ chat -
+
-
+
+ {{ data.title }} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss index e69de29b..2fce3641 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss @@ -0,0 +1,27 @@ +::ng-deep .mat-card-header-tex{ + margin:0; +} +.confirm-card{ + min-width:500px; + .mat-card-header{ + margin-bottom:20px; + .mat-card-header-text{ + .mat-card-title{ + margin:0 -16px; + } + } + } + .button-farm { + text-align:right; + .mat-primary{ + margin-left:4px; + } + } +} + +form{ +.mat-form-field{ + width:100%; + } +} + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html index 5a346370..9a10a412 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html @@ -1,17 +1,19 @@ - + {{ data.title }} -
+
-
+
+ + {{ inputGroupName.value?.length || 0 }}/20 - - + +
+ + + +
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss index e69de29b..44255067 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss @@ -0,0 +1,66 @@ +::ng-deep .mat-card-header-tex{ + margin:0; +} +.mat-form-field{ + width:100%; + padding:10px; +} +.confirm-card{ + min-width:500px; + .mat-card-content{ + + } + .button-farm { + text-align:right; + .mat-primary{ + margin-left:4px; + } + } +} + +.add-row{ + margin-bottom:10px; + .mat-mini-fab{ + .mat-icon{ + width:40px; + height:40px; + line-height: 40px; + } + .mat-fab__label{ + color:#212121; + margin-left:10px; + } + } + +} + +.mat-selection-list{ + border-top:1px solid #999999; +} + .mat-list-item { + border-bottom:1px solid #dddddd; + } + +.input-groupname-box{ + display:flex; + flex-flow: column; + margin-bottom: 10px; + border-radius: 4px; + /*border:1px solid #dddddd; + box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);*/ + + .btn-box{ + margin-top:10px; + flex-flow:row; + height:40px; + margin-left:auto; + padding:0 10px; + button{ + margin-left:4px; + } + } +} + +::ng-deep .mat-mini-fab .mat-button-wrapper{ + padding:0; +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts index d92572cf..a92a2d71 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts @@ -92,7 +92,7 @@ export class SelectGroupDialogComponent implements OnInit { ConfirmDialogData, ConfirmDialogResult >(ConfirmDialogComponent, { - width: '220px', + width: '300px', data: { title: 'Add group', html: `그룹(${groupName})을 추가하시겠습니까?` diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss index 47330b04..da7e49cf 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss @@ -51,9 +51,11 @@ font-size: 10px; .mat-icon { - transform: translateY(-2px); + //transform: translateY(-2px); width: 16px; height: 16px; + min-height:16px; + min-width:16px; font-size: 16px; } @@ -75,12 +77,12 @@ } &.app-layout-native-title-bar-minimize { - background: darken(#673ab7, 10%); + background: darken(#000000, 10%); color: darken(white, 20%); } &.app-layout-native-title-bar-maximize { - background: darken(#673ab7, 10%); + background: darken(#000000, 10%); color: darken(white, 20%); } } diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss index edae2f4b..9103d893 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss @@ -45,6 +45,39 @@ ul, ol { list-style: none; } +$lg-red: ( + 50: #ffffff, + 100: #f8bbd0, + 200: #f48fb1, + 300: #f06292, + 400: #ef4c73, + /* 400: #ec407a,*/ 500: #ed097e, + 600: #d81b60, + 700: #c2185b, + 800: #ad1457, + 900: #880e4f, + A100: #ff80ab, + A200: #ff4081, + A400: #ff3399, + A700: #c51162, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $light-primary-text, + A400: $light-primary-text, + A700: $light-primary-text + ) +); + @mixin ucap-material-theme($theme) { @include ucap-core-theme($theme); } @@ -60,6 +93,10 @@ ol { background: mat-color($primary); color: mat-color($primary, default-contrast); } + .bg-accent-dark { + background: mat-color($accent, 600); + color: mat-color($primary, default-contrast); + } .bg-accent-color { background: mat-color($accent); color: mat-color($accent, default-contrast); @@ -76,4 +113,28 @@ ol { .border-accent-color { border: 1px solid mat-color($accent); } + .mat-tab-group.mat-primary .mat-ink-bar, + body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: mat-color($accent, 400); + } + .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary { + background-color: mat-color($accent, 200); + } + /*.mat-form-field-appearance-legacy .mat-hint{ + color: mat-color($accent, 800); + }*/ + + .mat-form-field-appearance-legacy { + .mat-form-field-label { + color: mat-color($primary); + } + + .mat-hint { + color: mat-color($primary); + } + + .mat-form-field-underline { + background-color: mat-color($primary); + } + } } diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html index 8e2a539e..0625d156 100644 --- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html +++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html @@ -47,8 +47,7 @@ diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html index d54534ca..eed3fd3d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html @@ -1,3 +1 @@ -
- {{ contents }} -
+
{{ contents }}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html index d3b1638a..b94c43df 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html @@ -28,6 +28,7 @@ + {{ data.title }} diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html index 7ea339fa..418d988c 100644 --- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html @@ -1,6 +1,6 @@ - - - {{ data.title }} + + + {{ data.title }} diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss index e69de29b..013b206c 100644 --- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss @@ -0,0 +1,25 @@ +::ng-deep .mat-card-header-tex{ + margin:0; +} +.mat-card{ + padding:10px; + .mat-card-header{ + margin-bottom:20px; + .mat-card-title{ + margin:0 -16px; + padding-bottom:10px; + } + } + .button-farm { + text-align:right; + .mat-primary{ + margin-left:4px; + } + } +} + +form{ +.mat-form-field{ + width:100%; + } +}