diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss index 4eb729b8..dbaa7cc2 100644 --- a/projects/ucap-webmessenger-app/src/app/app.theme.scss +++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss @@ -43,6 +43,7 @@ body.theme-default { // Apply the theme to the user components @include components-theme($theme); + @include ucap-material-theme($theme); } // ----------------------------------------------------------------------------------------------------- diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss index bbf3f2f7..5f8d2020 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss @@ -1,21 +1,20 @@ -.current-head{ - display:flex; +@charset 'utf-8'; +.current-head { + display: flex; justify-content: center; - padding:0 10px; - height:60px; - h3{ - display:inline-flex; - padding-left:10px; + padding: 0 10px; + height: 60px; + h3 { + display: inline-flex; + padding-left: 10px; align-items: center; } - .btn-box{ + .btn-box { height: 100%; - margin-left:auto; - display:inline-flex; + margin-left: auto; + display: inline-flex; align-items: center; - .mat-icon-button{ - + .mat-icon-button { } } - -} \ No newline at end of file +} 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 04f77885..afa5c2fc 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 @@ -30,13 +30,16 @@
- - - - +
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss index ca14095b..2e9e56bf 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss @@ -1,28 +1,76 @@ +@charset 'utf-8'; + +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} + .oraganization-tab { height: 100%; - .oraganization-tab-tree { overflow-y: auto; } } -.btn-box { - height: 80px; +.btn-box{ + height:100px; position: absolute; - bottom: 0; - border-top: 1px solid #ddd; + bottom:0; + border-top:1px solid #ddd; align-items: center; - width: 100%; - background-color: #ffffff; + width:100%; + background-color:#ffffff; } -.select-dept { - border-top: 1px solid #dddddd; - height: 40px; - width: 100%; - display: inline-flex; +.select-dept{ + border-top:1px solid #dddddd; + height:40px; + width:100%; + display:inline-flex; align-items: center; - padding: 0 10px; + padding:0 10px; } -.select-list { +.search-list{ height: calc(100% - 120px); overflow: auto; + .list-item{ + height:70px; + } } +.btn-box{ + padding:10px; + button{ + width:100%; + @include ellipsis(1); + } + ul{ + display:flex; + flex-flow: row; + align-content: space-between; + margin-top:4px; + li{ + display:inline-flex; + align-items: center; + flex-grow: 1; + width:33%; + margin-right: 4px; + &:last-child{ + margin-right: 0; + } + button{ + text-align:center; + width:100%; + height:100%; + padding: 0 6px; + } + } + } +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss index 060dc8a3..90dc506d 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss @@ -1,5 +1,19 @@ @charset 'utf-8'; -@import '../../../../assets/scss/global/common'; +$line-basic:1px solid #dddddd; +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} :host { display: flex; width: 100%; diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html index 46111ea7..d661507a 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html +++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html @@ -7,7 +7,7 @@ - + --> diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss index 60a82962..5030855a 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss +++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss @@ -1,9 +1,14 @@ .login { width: 100%; background-size: cover; + height: 100%; + background: #eaeff1; + background: -webkit-linear-gradient(to top, #93a3af, #eaeff1); + background: linear-gradient(to top, #93a3af, #eaeff1); .login-wrapper { flex: 1 0 auto; - padding: 32px; + background: url(/assets/images/bg_login.png)no-repeat 50% bottom; + background-size: 100% auto; } } diff --git a/projects/ucap-webmessenger-app/src/assets/images/bg_login.png b/projects/ucap-webmessenger-app/src/assets/images/bg_login.png new file mode 100644 index 00000000..c7ac0f57 Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/bg_login.png differ diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss deleted file mode 100644 index 52db36f0..00000000 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss +++ /dev/null @@ -1,52 +0,0 @@ -@charset 'utf-8'; - -$listH-row3: 120px; -$listH-row2: 90px; -$listH-row2-s: 70px; -$checkbox-size: 16px; -$presence-size: 8px; -$thumbnail-msize: 40px; -$bg-list-hover: #efefef; -$bg-list-item-msg: #f0f4f6; - -$font-dark: #212121; -$font-mid: #666666; -$font-light: #848d95; -$font-white: #ffffff; - -$line-basic: 1px solid #dddddd; -$color-main: #ee278b; - -@mixin ellipsis($row) { - overflow: hidden; - text-overflow: ellipsis; - @if $row == 1 { - display: block; - white-space: nowrap; - word-wrap: normal; - } @else if $row >= 2 { - display: -webkit-box; - -webkit-line-clamp: $row; - -webkit-box-orient: vertical; - word-wrap: break-word; - } -} -@mixin border-radius($radius) { - border-radius: $radius; - -webkit-border-radius: $radius; - -moz-border-radius: $radius; -} -@mixin visible($sh) { - display: $sh; -} -@mixin presence-status($status) { - @if $status == pcOn { - background-color: #28ad66; - } @else if $status == pcOut { - background-color: #f35b5b; - } @else if $status == pcOff { - background-color: #a29f9f; - } @else if $status == pcOther { - background-color: #f0c10a; - } -} 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 22f1ca11..8fee6b74 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss @@ -45,3 +45,36 @@ ul, ol { list-style: none; } +@mixin ucap-material-theme($theme) { + @include ucap-core-theme($theme); +} + + +@mixin ucap-core-theme($theme) { + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $primary: map-get($theme, primary); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .bg-primary-color { + background: mat-color($primary); + color: mat-color($primary, default-contrast); + } + .bg-accent-color{ + background: mat-color($accent); + color: mat-color($accent, default-contrast); + } + .text-primary-color{ + color: mat-color($primary); + } + .text-accent-color{ + color: mat-color($accent); + } + .border-primary-color{ + border:1px solid mat-color($primary); + } + .border-accent-color{ + border:1px solid mat-color($accent); + } +} \ No newline at end of file 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 3e803dc4..8e2a539e 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 @@ -1,8 +1,8 @@
-
LOGIN TO YOUR ACCOUNT
+
LOGIN TO YOUR ACCOUNT
- + Company - + Login ID @@ -27,7 +27,7 @@ - + Password @@ -61,4 +61,5 @@ Don't have an account? Create an account
+
개인정보 처리방침
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss index 9017f954..51ae3b7e 100644 --- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss +++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss @@ -1,11 +1,15 @@ + .login-form { + position: relative; width: 384px; max-width: 384px; - padding: 32px; + padding: 50px; text-align: center; + background-color: rgba( 255, 255, 255, 0.8 ); + border-radius: 0px; + box-shadow: 4px 4px 0px rgba(0,0,0,0.1); - .title { - font-size: 20px; + .mat-title { margin: 16px 0 32px 0; } @@ -37,8 +41,8 @@ } .submit-button { - width: 220px; - margin: 16px auto; + width: 100%; + margin: 0 auto; display: block; } } @@ -85,6 +89,15 @@ } } } + .policy{ + position: absolute; + bottom:0; + width:100%; + padding:10px; + left:0; + background-color: #4f586b; + color: #ffffff; + } button { &.google, diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html index 4cf8a445..60b682c7 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html @@ -47,7 +47,7 @@ type="submit" aria-label="Send message" > - + send diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss index a5a1f288..3917f916 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss @@ -1,3 +1,5 @@ +@charset 'utf-8'; + .container { display: flex; flex-direction: column; @@ -28,8 +30,7 @@ } .send-message-button { margin-left: 20px; - i { - background-color: #ff3399; + i{ display: inline-block; width: 40px; height: 40px; @@ -38,7 +39,7 @@ font-size: 20px; color: #ffffff; &:hover{ - background-color: #333333; + opacity: 0.8; } } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss index 6d659f7b..e8649832 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss @@ -85,6 +85,7 @@ width: 100%; li { width: 50%; + height: 100%; display: inline-block; text-align: center; align-items: center; @@ -96,6 +97,7 @@ .mat-button { width: 100%; display: block; + height: 100%; } } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss index 3f879e9b..3ada92d8 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss @@ -13,6 +13,6 @@ width: 160px; font-size: 13px; text-align: center; - font-weight: 500; + font-weight: 600; } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss index ddad5bc9..11ff8734 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss @@ -1,5 +1,20 @@ @charset 'utf-8'; -@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss'; + +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} + .bubble-main { padding: 14px; text-align: left; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html index 673d2493..31fcbc0c 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html @@ -2,6 +2,4 @@ {{ message.sentMessage }} - - - + \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss index 2b897501..f4b0a68f 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss @@ -44,6 +44,7 @@ width: 100%; li { width: 50%; + height:100%; display: inline-block; text-align: center; align-items: center; @@ -54,6 +55,7 @@ } .mat-button { width: 100%; + height:100%; display: block; } } 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 d07c3966..4e1332c8 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 @@ -8,130 +8,132 @@ contact: message.senderSeq !== loginRes.userSeq }" > -
- - -
-
- - - - - - - - - - - - - -
- - -
+ + -
-
- {{ getUserName(message.senderSeq) }} -
- -
- +
+ + + - - - - - - - - - -
- mass-translation - - notice - - - translation - - video-conference - - -
- {{ message.sentMessage }} -
-
- + + + + + + + + + + +
+ +
-
-
- {{ message.sendDate | date: 'a hh:mm' }} -
- +
+
+ {{ getUserName(message.senderSeq) }} +
+ +
+ + + + + + + + + + +
+ mass-translation + + notice + + + translation + + video-conference + + +
+ {{ message.sentMessage }} +
+
+ +
+
+ +
+ {{ message.sendDate | date: 'a hh:mm' }} +
+ +
- + \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss index 4cd6b3a3..cd0c2a72 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss @@ -139,26 +139,34 @@ $meBox-bg: #ffffff; padding: 30px 40px; display: flex; flex-direction: column; - .message-row { +} + +.message-row { + margin-bottom: 30px; + .date-splitter{ + display:block; + width:100%; + margin-bottom:10px; + } + .chat-row{ position: relative; display: flex; flex-direction: row; - &.me { + .profile-img { + flex: 0 0 auto; + } + } + &.me { + .chat-row{ flex-direction: row-reverse; .profile-info { flex-direction: row-reverse; display: flex; justify-content: flex-end; } - } + } } -} -.message-row { - margin-bottom: 30px; - .profile-img { - flex: 0 0 auto; - } .message-main { margin-left: 20px; margin-right: 10px; @@ -203,6 +211,7 @@ $meBox-bg: #ffffff; .secondary-text { align-self: flex-end; font-size: 11px; + color:#666666; word-wrap: break-word; white-space: nowrap; } diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss index a988bf19..48d62939 100644 --- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss +++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss @@ -1,3 +1,4 @@ +@charset 'utf-8'; :host { display: flex; flex: 1; @@ -7,25 +8,23 @@ flex: 1 1 auto; width: 20px; } - } ::ng-deep .groupExpansionPanel .mat-expansion-panel-body { - padding: 0; + padding: 0; } -.mat-expansion-panel-header{ - height:40px ! important; +.mat-expansion-panel-header { + height: 40px !important; padding: 0 20px; - .mat-expansion-panel-header-title { - align-items: center; - font-size: 13px; + .mat-expansion-panel-header-title { + align-items: center; + font-size: 13px; } - .mat-expansion-panel-header-description{ - margin-right:0; + .mat-expansion-panel-header-description { + margin-right: 0; } } - .mat-icon-button { margin-right: 0; width: inherit; diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss index 93b42a1e..0c80d950 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss +++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss @@ -1,3 +1,4 @@ +@charset 'utf-8'; .organization-tree { padding:10px; ul, @@ -46,8 +47,6 @@ line-height: 20px; margin-right:10px; .mat-icon-rtl-mirror{ - line-height: 14px; - font-size: 14px; border: 1px solid #dddddd; padding: 2px; font-size: 14px; diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss index 9e009306..df53e9c6 100644 --- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss +++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss @@ -1,6 +1,30 @@ @charset 'utf-8'; -@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common'; +$font-dark: #212121; +$font-mid: #666666; +$font-light: #848d95; +$font-white: #ffffff; +$line-basic:1px solid #dddddd; +$bg-list-item-msg: #f0f4f6; +$bg-list-hover: #efefef; +$listH-row2: 80px; +$presence-size: 8px; +$thumbnail-msize: 40px; + +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} %list-item { position: relative; @@ -11,16 +35,7 @@ border-bottom: $line-basic; padding: 20px; } -%presence { - display: inline-block; - width: $presence-size; - height: $presence-size; - align-self: flex-start; - align-items: center; - text-indent: -10000000px; - margin-right: 4px; - border-radius: 100px; -} + %msg-status { display: inline-block; height: 40px; @@ -30,7 +45,7 @@ vertical-align: middle; align-items: center; @include ellipsis(2); - @include border-radius(4px); + border-radius: 4px; } .list-item { @@ -38,21 +53,6 @@ &:hover { background-color: $bg-list-hover; } - .presence { - @extend %presence; - &.pcOn { - @include presence-status(pcOn); - } - &.pcOut { - @include presence-status(pcOut); - } - &.pcOff { - @include presence-status(pcOff); - } - &.pcOther { - @include presence-status(pcOther); - } - } .mat-checkbox { padding-left: 10px; } @@ -67,7 +67,7 @@ width: $thumbnail-msize; height: $thumbnail-msize; margin-right: 16px; - @include border-radius(50%); + border-radius: 50%; } } @@ -122,9 +122,15 @@ width: 100%; } .msg-status { - @include visible(none); + display:none; } } } } } + +.org{ + .list-item{ + height:70px; + } +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss index 599f2ff9..453a30c0 100644 --- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss +++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss @@ -1,5 +1,30 @@ @charset 'utf-8'; -@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss'; +$font-dark: #212121; +$font-mid: #666666; +$font-light: #848d95; +$font-white: #ffffff; +$line-basic:1px solid #dddddd; +$bg-list-hover: #efefef; +$color-main:#e53096; +$listH-row2: 80px; +$presence-size: 8px; +$thumbnail-msize: 40px; + +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} + .profile { white-space: normal; text-align: left; @@ -9,7 +34,6 @@ padding: 16px; font-weight: 400; border-radius: 0; - .avatar-wrapper { .avatar { margin-right: 16px; @@ -28,7 +52,6 @@ .profile-last-message-time { font-size: 12px; - margin-top: 4px; } .profile-mood { @@ -61,7 +84,7 @@ width: $thumbnail-msize; height: $thumbnail-msize; margin-right: 16px; - @include border-radius(100px); + border-radius:50%; } .info { position: relative; @@ -92,7 +115,6 @@ .room-msg { font-size: 12px; color: $font-mid; - margin-top: 4px; @include ellipsis(1); } } @@ -125,7 +147,7 @@ color: #ffffff; background-color: $color-main; @include ellipsis(1); - @include border-radius(100px); + border-radius:50%; } .notiBadge { diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss index 8624180f..0462c56d 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss +++ b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss @@ -12,3 +12,5 @@ @import 'partials/icons'; @import 'partials/normalize'; @import 'partials/scrollbars'; +@import 'partials/presence.scss'; +@import 'partials/list-item'; diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss new file mode 100644 index 00000000..615342ce --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss @@ -0,0 +1,16 @@ +@charset 'utf-8'; + +.ellipsis{ + overflow: hidden; + text-overflow: ellipsis; + display: block; + white-space: nowrap; + word-wrap: normal; +} +.ellipsis2{ + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + word-wrap: break-word; +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss new file mode 100644 index 00000000..459d967a --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss @@ -0,0 +1,25 @@ +%presence { + display: inline-block; + width: 8px; + height: 8px; + align-self: flex-start; + align-items: center; + text-indent: -10000000px; + margin-right: 4px; + border-radius: 100px; +} +.presence{ + @extend %presence; + &.pcOn { + background-color: #28ad66; + } + &.pcOut { + background-color: #f35b5b; + } + & .pcOff { + background-color: #a29f9f; + } + &.pcOther { + background-color: #f0c10a; + } +}