조직도 - 트리& 테이블 수정
This commit is contained in:
khk
parent
63c3971053
commit
d4269a1300
|
|
@ -1,11 +1,9 @@
|
|||
<div class="container" fxFlex fxLayout="column">
|
||||
<div class="container organization-list" fxFlex fxLayout="column">
|
||||
<mat-toolbar class="organization-toolbar">
|
||||
<div fxFlex fxLayout="row" class="organization-header">
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
class="profile-img"
|
||||
></div>
|
||||
<div fxLayout="row" class="icon-img dept-img">
|
||||
<i class="mid mdi-file-tree"></i>
|
||||
</div>
|
||||
<div class="organization-info">
|
||||
<h3 class="organization-name">
|
||||
<ng-container *ngIf="!isSearch">
|
||||
|
|
@ -30,7 +28,7 @@
|
|||
</ng-container>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="organization-option">
|
||||
<div class="organization-option selectbox input-lineless ">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
|
||||
<mat-select
|
||||
|
|
@ -178,12 +176,12 @@
|
|||
</div>
|
||||
|
||||
<div fxFlex="auto" fxLayout="column">
|
||||
<mat-accordion>
|
||||
<mat-accordion class="organization-accordion">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<mat-panel-title class="select-user-title">
|
||||
{{ 'organization.selectedUser' | translate }}
|
||||
<span *ngIf="selectedUserList.length > 0">
|
||||
<span *ngIf="selectedUserList.length > 0" class="text-accent-color">
|
||||
({{ selectedUserList.length }})
|
||||
{{ 'common.units.persons' | translate }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,14 +42,12 @@
|
|||
class="ui-column-resizer"
|
||||
(mousedown)="resizeTable($event)"
|
||||
></span>
|
||||
<div>
|
||||
<span mat-sort-header="name">
|
||||
{{ 'search.fieldName' | translate }}
|
||||
</span>
|
||||
<span mat-sort-header="grade">
|
||||
{{ 'search.fieldGrade' | translate }}
|
||||
</span>
|
||||
</div>
|
||||
<span mat-sort-header="name">
|
||||
{{ 'search.fieldName' | translate }}
|
||||
</span>
|
||||
<span mat-sort-header="grade">
|
||||
{{ 'search.fieldGrade' | translate }}
|
||||
</span>
|
||||
<div mat-sort-header="dept">
|
||||
{{ 'search.fieldDeptartment' | translate }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user