diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html index 2e442afa..a96d826f 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html @@ -1,11 +1,9 @@ -
+
-
+
+ +

@@ -30,7 +28,7 @@

-
+
{{ 'search.fieldCompany' | translate }}
- + - + {{ 'organization.selectedUser' | translate }} - + ({{ selectedUserList.length }}) {{ 'common.units.persons' | translate }} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss index f66adb06..fde4e5a4 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss @@ -43,25 +43,45 @@ justify-items: center; padding: 4px 20px; + .icon-img { + color: #ffffff; + background-color: #2d3a4a; + border-radius: 50px; + margin-right: 10px; + width: 30px; + height: 30px; + justify-content: center; + align-items: center; + flex: 0 0 30px; + i { + } + } .organization-info { display: flex; + width: 20%; flex-flow: row; overflow: hidden; align-items: center; - .organization-name { - font-size: 0.94rem; - line-height: normal; - @include ellipsis(1); - } } - .organization-option { - margin-left: auto; - margin-right: -10px; - .icon-button { - transform: translateY(-2px); - i { - font-size: 0.9em; - } + .organization-name { + font-size: 0.94rem; + line-height: normal; + @include ellipsis(1); + } + } + .organization-option { + position: relative; + width: 80%; + height: 50px; + font-size: 0.9em; + .mat-form-field { + width: 22%; + margin-left: 3%; + height: 100%; + display: inline-flex; + color: #333333; + .mat-select { + font-size: 0.9em; } } } @@ -76,7 +96,7 @@ background: transparent; overflow: auto; -webkit-overflow-scrolling: touch; - + height: calc(100% - 100px); margin: 20px; } @@ -89,10 +109,6 @@ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } -.scrollbar { - height: 550px; -} - .table-box { font-size: 13px; width: 100%; @@ -101,6 +117,7 @@ .detail-table { width: 100%; + border-top: 2px solid #00bcd4; } } @@ -136,3 +153,27 @@ } } } + +.organization-list { + height: 100%; +} + +.select-user-title { + font-size: 0.9em; + font-weight: 600; +} + +::ng-depp .organization-accordion { + .mat-expansion-panel { + .mat-expansion-panel-header { + .mat-expansion-indicator { + transform: rotate(180deg) !important; + } + &.mat-expanded { + .mat-expansion-indicator { + transform: rotate(0deg) !important; + } + } + } + } +} diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html index 94cb6551..9fe0bf6e 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html +++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html @@ -42,14 +42,12 @@ class="ui-column-resizer" (mousedown)="resizeTable($event)" > -
- - {{ 'search.fieldName' | translate }} - - - {{ 'search.fieldGrade' | translate }} - -
+ + {{ 'search.fieldName' | translate }} + + + {{ 'search.fieldGrade' | translate }} +
{{ 'search.fieldDeptartment' | translate }}
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.scss index 3cb305c0..77994a48 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.scss +++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.scss @@ -22,30 +22,46 @@ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } -.scrollbar { +/*.scrollbar { height: 550px; -} +}*/ table { width: 100%; + min-width: 600px; + table-layout: fixed; } th.mat-header-cell { @include disable-selection; position: relative; + padding: 0 10px; span.ui-column-resizer { display: block; position: absolute; - top: 0; + top: 10px; right: 0; margin: 0; - width: 5px; - height: 100%; + width: 2px; + height: 40px; padding: 0; cursor: col-resize; - border: 1px solid transparent; - background-color: #666; + border: none; + background-color: #d4d4d4; + } + span { + &[mat-sort-header='name'], + &[mat-sort-header='grade'] { + display: inline-flex; + padding-right: 10px; + } + } + &.profileImage { + width: 90px; + } + &.mat-column-checkable { + width: 50px; } } @@ -53,10 +69,17 @@ td.mat-cell { padding: 6px; position: relative; + div { + @include ellipsis(1); + } + div:nth-chlid(2) { + padding-top: 4px; + } + &.profileImage { - width: 70px; + width: 90px; text-overflow: unset; - flex: 0 0 auto; + flex: 0 0 90px; .table-item { display: flex; @@ -90,8 +113,8 @@ td.mat-cell { width: 20px; height: 20px; border-radius: 50%; - bottom: 4px; - left: 50px; + bottom: 0; + left: 64px; display: flex; align-items: center; align-content: center; @@ -108,20 +131,38 @@ td.mat-cell { } } + &.mat-column-checkable { + padding-left: 10px; + flex: 0 0 50px; + } + &.profileInfo { cursor: pointer; - + flex: 0 0 200px; .baseInfo { display: flex; - width: 200px; font-size: 1em; - + @include ellipsis(1); .name { - @include ellipsis(1); font-size: 1em; font-weight: 600; } + .grade { + font-size: 0.86em; + color: #666666; + } } + .deptName { + font-size: 0.9em; + color: #666666; + } + } + + .companyName, + .workplace, + .responsibilities { + font-size: 0.86em; + font-weight: 600; } .hpNumber { 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 8266c1aa..6f094217 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 @@ -93,3 +93,21 @@ } } } + +.current { + &.tree-node-body { + color: #ff6f00; + background-color: #fff3e0 !important; + border: 1px solid #ff6f00 !important; + .dept-name { + font-weight: 600; + } + button { + color: #ff6f00; + } + } + .tree-node-body { + color: #ff6f00; + font-weight: 600; + } +} diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss index 3c97fb02..e59b6ff1 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss +++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss @@ -139,3 +139,33 @@ textarea { } } } + +.selectbox { + &-lineless { + .mat-form-field { + flex-flow: row; + flex: 1 1 auto; + width: 90%; + align-items: center; + display: flex; + color: #333333; + &-wrapper { + padding: 0; + display: flex; + flex: 1 1 auto; + } + .mat-form-field-underline { + display: none; + } + } + } +} + +.mat-select-panel-wrap { + position: relative; + width: 100%; + font-size: 0.9em; + .mat-select-panel { + max-width: 100%; + } +} diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss index fa019354..a6899534 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss +++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss @@ -42,6 +42,12 @@ mat-icon { height: 20px; line-height: 20px; font-weight: normal; + &-16 { + font-size: 16px; + width: 16px; + height: 16px; + line-height: 16px; + } &-18 { font-size: 18px; width: 18px; @@ -60,6 +66,12 @@ mat-icon { height: 30px; line-height: 30px; } + &-48 { + font-size: 48px; + width: 47px; + height: 48px; + line-height: 48px; + } } &:before { display: inline-block;