From eb6b543b39f3cd0f6c75528431f3177e9c387af4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=82=A8=EC=A4=91?= <baram2270@naver.com>
Date: Thu, 10 Oct 2019 10:03:25 +0900
Subject: [PATCH 1/2] user list designed
---
.../components/template.page.component.html | 18 +++-
.../src/assets/scss/global/_common.scss | 44 +++++++++
.../src/assets/scss/global/_default.scss | 47 +++++++++
.../src/assets/scss/ucap.scss | 3 +
.../components/user-list-item.component.html | 30 +++---
.../components/user-list-item.component.scss | 98 +++++++++++++++++++
6 files changed, 225 insertions(+), 15 deletions(-)
create mode 100644 projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
create mode 100644 projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
diff --git a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
index cbefe8a2..37fac5cd 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
@@ -1,11 +1,21 @@
<div>
<h3>User-list-item</h3>
<div>
- <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]='presence'>
+ <ucap-profile-user-list-item
+ [userInfo]="userInfo"
+ [profileImageRoot]="profileImageRoot"
+ [presence]="presence"
+ ></ucap-profile-user-list-item>
+ <ucap-profile-user-list-item
+ [userInfo]="userInfo"
+ [profileImageRoot]="profileImageRoot"
+ >
</ucap-profile-user-list-item>
- <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot">
- </ucap-profile-user-list-item>
- <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]='true'>
+ <ucap-profile-user-list-item
+ [userInfo]="userInfo"
+ [profileImageRoot]="profileImageRoot"
+ [checkable]="true"
+ >
</ucap-profile-user-list-item>
</div>
</div>
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
new file mode 100644
index 00000000..561bdc5d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
@@ -0,0 +1,44 @@
+@charset 'utf-8';
+
+$listH-row3: 90px;
+$checkbox-size: 16px;
+$presence-size: 10px;
+$thumbnail-msize: 50px !global;
+$bg-list-hover: #efefef !global;
+
+@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;
+}
+@function position-m($h, $o, $p) {
+ @return ($h - $o - $p) / 2;
+}
+@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
new file mode 100644
index 00000000..2331f4ec
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -0,0 +1,47 @@
+@charset 'utf-8';
+
+html {
+ height: 100%;
+ overflow-y: scroll;
+}
+body {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ color: #333;
+ font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
+ Gulim, '굴림';
+ font-size: 12px;
+ line-height: 18px !important;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+div,
+p,
+ol,
+ul,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+iframe,
+dl,
+dt,
+dd {
+ margin: 0;
+ padding: 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+ul,
+ol {
+ list-style: none;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
index 8624180f..0a1ba1af 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
@@ -12,3 +12,6 @@
@import 'partials/icons';
@import 'partials/normalize';
@import 'partials/scrollbars';
+
+//creative
+@import 'global/default';
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
index 81f92bab..ec8972b1 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -1,12 +1,20 @@
-<div matRipple>
- <span *ngIf='presence'>{{ presence.pcStatus }} </span>
- <img src='{{ profileImageRoot + userInfo.profileImageFile }}'>
- <span>
- {{ userInfo.name }} {{ userInfo.grade }}
- </span>
- <span>
- {{ userInfo.deptName }}
- </span>
- <span>{{ userInfo.intro }}</span>
- <mat-checkbox *ngIf='checkable'></mat-checkbox>
+<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple> 클래스에 checkbox만 추가-->
+<div class="list-item checkbox" matRipple>
+ <!--presence-pcOn , presence-pcOut presence-pcOff , presence-pcOther-->
+ <span class="presence-pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
+ <div class="item-default">
+ <img
+ class="thumbnail"
+ src="{{ profileImageRoot + userInfo.profileImageFile }}"
+ />
+ <ul class="info">
+ <li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
+ <li class="dept">
+ {{ userInfo.deptName }}
+ 가나다라마바사아자차카파하가나다라마바사아자차카파하
+ </li>
+ <li class="record">{{ userInfo.intro }}</li>
+ </ul>
+ </div>
+ <mat-checkbox *ngIf="checkable"></mat-checkbox>
</div>
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 e69de29b..c1779501 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
@@ -0,0 +1,98 @@
+@charset 'utf-8';
+@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
+
+%list-item {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: $listH-row3;
+ border-bottom: 1px solid #dddddd;
+ padding: 14px;
+}
+
+%presence {
+ display: inline-block;
+ width: $presence-size;
+ height: $presence-size;
+ vertical-align: middle;
+ margin-top: position-m($thumbnail-msize, $presence-size, 0) * -1;
+ text-indent: -10000000px;
+ margin-right: 10px;
+ border-radius: 100px;
+}
+
+.list-item {
+ @extend %list-item;
+ &:hover {
+ background-color: $bg-list-hover;
+ }
+ .presence {
+ &-pcOn {
+ @extend %presence;
+ @include presence-status(pcOn);
+ }
+ &-pcOut {
+ @extend %presence;
+ @include presence-status(pcOut);
+ }
+ &-pcOff {
+ @extend %presence;
+ @include presence-status(pcOff);
+ }
+ &-pcOther {
+ @extend %presence;
+ @include presence-status(pcOther);
+ }
+ }
+ .mat-checkbox {
+ padding-left: 10px;
+ }
+}
+
+.item-default {
+ display: flex;
+ width: 100%;
+ .thumbnail {
+ width: $thumbnail-msize;
+ height: $thumbnail-msize;
+ margin-right: 12px;
+ @include border-radius(100px);
+ }
+ .info {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ width: calc(100% - 62px);
+ li {
+ margin-bottom: 4px;
+ @include ellipsis(1);
+ &.name {
+ display: block;
+ font-size: 15px;
+ font-weight: bold;
+ @include ellipsis(1);
+ }
+ &.dept {
+ display: block;
+ font-size: 13px;
+ }
+ &.record {
+ //@include visible(none);
+ }
+ }
+ }
+}
+
+.list-item {
+ span[class*='presence'] {
+ + .item-default {
+ width: calc(100% - 20px);
+ }
+ }
+ &.checkbox {
+ .item-default {
+ width: calc(100% - 30px);
+ }
+ }
+}
From b32480d8efde36ec6a209e0f338db090149b131b Mon Sep 17 00:00:00 2001
From: khk <kanghk@biztechpartners.co.kr>
Date: Thu, 10 Oct 2019 10:40:11 +0900
Subject: [PATCH 2/2] git test
---
.../src/lib/components/user-list-item.component.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
index ec8972b1..147c7cd7 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -11,7 +11,7 @@
<li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
<li class="dept">
{{ userInfo.deptName }}
- 가나다라마바사아자차카파하가나다라마바사아자차카파하
+ 가나다라마바사아자차카파하가나다라마바사아자차카파하하
</li>
<li class="record">{{ userInfo.intro }}</li>
</ul>