조직도 - 트리& 테이블 수정

This commit is contained in:
khk 2020-03-12 18:01:49 +09:00
parent 63c3971053
commit d4269a1300
7 changed files with 189 additions and 51 deletions

View File

@ -1,11 +1,9 @@
<div class="container" fxFlex fxLayout="column"> <div class="container organization-list" fxFlex fxLayout="column">
<mat-toolbar class="organization-toolbar"> <mat-toolbar class="organization-toolbar">
<div fxFlex fxLayout="row" class="organization-header"> <div fxFlex fxLayout="row" class="organization-header">
<div <div fxLayout="row" class="icon-img dept-img">
fxLayout="row" <i class="mid mdi-file-tree"></i>
fxLayoutAlign="start center" </div>
class="profile-img"
></div>
<div class="organization-info"> <div class="organization-info">
<h3 class="organization-name"> <h3 class="organization-name">
<ng-container *ngIf="!isSearch"> <ng-container *ngIf="!isSearch">
@ -30,7 +28,7 @@
</ng-container> </ng-container>
</h3> </h3>
</div> </div>
<div class="organization-option"> <div class="organization-option selectbox input-lineless ">
<mat-form-field> <mat-form-field>
<mat-label>{{ 'search.fieldCompany' | translate }}</mat-label> <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
<mat-select <mat-select
@ -178,12 +176,12 @@
</div> </div>
<div fxFlex="auto" fxLayout="column"> <div fxFlex="auto" fxLayout="column">
<mat-accordion> <mat-accordion class="organization-accordion">
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title class="select-user-title">
{{ 'organization.selectedUser' | translate }} {{ 'organization.selectedUser' | translate }}
<span *ngIf="selectedUserList.length > 0"> <span *ngIf="selectedUserList.length > 0" class="text-accent-color">
({{ selectedUserList.length }}) ({{ selectedUserList.length }})
{{ 'common.units.persons' | translate }} {{ 'common.units.persons' | translate }}
</span> </span>

View File

@ -43,11 +43,26 @@
justify-items: center; justify-items: center;
padding: 4px 20px; 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 { .organization-info {
display: flex; display: flex;
width: 20%;
flex-flow: row; flex-flow: row;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
}
.organization-name { .organization-name {
font-size: 0.94rem; font-size: 0.94rem;
line-height: normal; line-height: normal;
@ -55,13 +70,18 @@
} }
} }
.organization-option { .organization-option {
margin-left: auto; position: relative;
margin-right: -10px; width: 80%;
.icon-button { height: 50px;
transform: translateY(-2px); font-size: 0.9em;
i { .mat-form-field {
width: 22%;
margin-left: 3%;
height: 100%;
display: inline-flex;
color: #333333;
.mat-select {
font-size: 0.9em; font-size: 0.9em;
}
} }
} }
} }
@ -76,7 +96,7 @@
background: transparent; background: transparent;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
height: calc(100% - 100px);
margin: 20px; margin: 20px;
} }
@ -89,10 +109,6 @@
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
} }
.scrollbar {
height: 550px;
}
.table-box { .table-box {
font-size: 13px; font-size: 13px;
width: 100%; width: 100%;
@ -101,6 +117,7 @@
.detail-table { .detail-table {
width: 100%; 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;
}
}
}
}
}

View File

@ -42,14 +42,12 @@
class="ui-column-resizer" class="ui-column-resizer"
(mousedown)="resizeTable($event)" (mousedown)="resizeTable($event)"
></span> ></span>
<div>
<span mat-sort-header="name"> <span mat-sort-header="name">
{{ 'search.fieldName' | translate }} {{ 'search.fieldName' | translate }}
</span> </span>
<span mat-sort-header="grade"> <span mat-sort-header="grade">
{{ 'search.fieldGrade' | translate }} {{ 'search.fieldGrade' | translate }}
</span> </span>
</div>
<div mat-sort-header="dept"> <div mat-sort-header="dept">
{{ 'search.fieldDeptartment' | translate }} {{ 'search.fieldDeptartment' | translate }}
</div> </div>

View File

@ -22,30 +22,46 @@
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
} }
.scrollbar { /*.scrollbar {
height: 550px; height: 550px;
} }*/
table { table {
width: 100%; width: 100%;
min-width: 600px;
table-layout: fixed;
} }
th.mat-header-cell { th.mat-header-cell {
@include disable-selection; @include disable-selection;
position: relative; position: relative;
padding: 0 10px;
span.ui-column-resizer { span.ui-column-resizer {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 0;
margin: 0; margin: 0;
width: 5px; width: 2px;
height: 100%; height: 40px;
padding: 0; padding: 0;
cursor: col-resize; cursor: col-resize;
border: 1px solid transparent; border: none;
background-color: #666; 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; padding: 6px;
position: relative; position: relative;
div {
@include ellipsis(1);
}
div:nth-chlid(2) {
padding-top: 4px;
}
&.profileImage { &.profileImage {
width: 70px; width: 90px;
text-overflow: unset; text-overflow: unset;
flex: 0 0 auto; flex: 0 0 90px;
.table-item { .table-item {
display: flex; display: flex;
@ -90,8 +113,8 @@ td.mat-cell {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
bottom: 4px; bottom: 0;
left: 50px; left: 64px;
display: flex; display: flex;
align-items: center; align-items: center;
align-content: center; align-content: center;
@ -108,21 +131,39 @@ td.mat-cell {
} }
} }
&.mat-column-checkable {
padding-left: 10px;
flex: 0 0 50px;
}
&.profileInfo { &.profileInfo {
cursor: pointer; cursor: pointer;
flex: 0 0 200px;
.baseInfo { .baseInfo {
display: flex; display: flex;
width: 200px;
font-size: 1em; font-size: 1em;
.name {
@include ellipsis(1); @include ellipsis(1);
.name {
font-size: 1em; font-size: 1em;
font-weight: 600; 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 { .hpNumber {
cursor: pointer; cursor: pointer;

View File

@ -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;
}
}

View File

@ -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%;
}
}

View File

@ -42,6 +42,12 @@ mat-icon {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
font-weight: normal; font-weight: normal;
&-16 {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
}
&-18 { &-18 {
font-size: 18px; font-size: 18px;
width: 18px; width: 18px;
@ -60,6 +66,12 @@ mat-icon {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
&-48 {
font-size: 48px;
width: 47px;
height: 48px;
line-height: 48px;
}
} }
&:before { &:before {
display: inline-block; display: inline-block;