수정사항반영

This commit is contained in:
khk 2020-01-10 17:32:48 +09:00
parent e2cc7aa3e6
commit ff87a0540e
4 changed files with 129 additions and 83 deletions

View File

@ -63,6 +63,7 @@
<mat-list-option
*ngFor="let groupBuddy of groupBuddyList$ | async"
[value]="groupBuddy.group"
class="group-name"
>
<span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
<span class="text-accent-color number"
@ -71,15 +72,8 @@
>
</mat-list-option>
</mat-selection-list>
<!-- <div>
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[checkable]="true"
>
</ucap-group-expansion-panel>
</div> -->
</mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button
mat-stroked-button

View File

@ -1,66 +1,68 @@
::ng-deep .mat-card-header-tex{
margin:0;
::ng-deep .mat-card-header-tex {
margin: 0;
}
.mat-form-field{
width:100%;
padding:10px;
.mat-form-field {
width: 100%;
padding: 10px;
}
.confirm-card{
min-width:500px;
.mat-card-content{
}
.confirm-card {
min-width: 500px;
.mat-card-content {
}
.button-farm {
text-align:right;
.mat-primary{
margin-left:4px;
text-align: right;
.mat-primary {
margin-left: 4px;
}
}
}
.add-row{
margin-bottom:10px;
.mat-mini-fab{
.mat-icon{
width:40px;
height:40px;
.add-row {
margin-bottom: 10px;
.mat-mini-fab {
.mat-icon {
width: 40px;
height: 40px;
line-height: 40px;
}
.mat-fab__label{
color:#212121;
margin-left:10px;
.mat-fab__label {
color: #212121;
margin-left: 10px;
}
}
}
.mat-selection-list{
border-top:1px solid #999999;
.mat-selection-list {
border-top: 1px solid #999999;
}
.mat-list-item {
border-bottom:1px solid #dddddd;
::ng-deep .group-name {
&.mat-list-item {
border-bottom: 1px solid #dddddd;
.mat-list-text {
flex-direction: row !important;
}
}
}
.input-groupname-box{
display:flex;
.input-groupname-box {
display: flex;
flex-flow: column;
margin-bottom: 10px;
border-radius: 4px;
/*border:1px solid #dddddd;
box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);*/
.btn-box{
margin-top:10px;
flex-flow:row;
height:40px;
margin-left:auto;
padding:0 10px;
button{
margin-left:4px;
.btn-box {
margin-top: 10px;
flex-flow: row;
height: 40px;
margin-left: auto;
padding: 0 10px;
button {
margin-left: 4px;
}
}
}
::ng-deep .mat-mini-fab .mat-button-wrapper{
padding:0;
}
::ng-deep .mat-mini-fab .mat-button-wrapper {
padding: 0;
}

View File

@ -52,40 +52,64 @@
{{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
</mat-icon>
</button>
<div class="group-info">
<ng-container [ngSwitch]="node.nodeType">
<span *ngSwitchCase="NodeType.Profile" class="group-name">
<span class="title-name ellipsis">{{
'profile.my' | translate
}}</span>
<span class="text-accent-color number">
({{ node.countOfChildren
}}{{ 'common.units.persons' | translate }})</span
>
</span>
<ng-container [ngSwitch]="node.nodeType">
<span *ngSwitchCase="NodeType.Profile">
<span class="title-name ellipsis">{{
'profile.my' | translate
}}</span>
</span>
<span *ngSwitchCase="NodeType.Favorit">
<span class="title-name ellipsis">{{
'group.nameFavorit' | translate
}}</span>
</span>
<span *ngSwitchCase="NodeType.Default">
<span class="title-name ellipsis">{{
'group.nameDefault' | translate
}}</span>
</span>
<span *ngSwitchCase="NodeType.MyDept">
<span class="title-name ellipsis">{{
'group.nameMyDept' | translate
}}</span>
</span>
<span *ngSwitchCase="NodeType.Favorit" class="group-name">
<span class="title-name ellipsis">{{
'group.nameFavorit' | translate
}}</span>
<span class="text-accent-color number">
({{ node.countOfChildren
}}{{ 'common.units.persons' | translate }})</span
>
</span>
<span *ngSwitchCase="NodeType.Buddy">
<span class="title-name ellipsis">{{
node.groupDetail.name
}}</span>
</span>
</ng-container>
<span *ngSwitchCase="NodeType.Default" class="group-name">
<span class="title-name ellipsis">{{
'group.nameDefault' | translate
}}</span>
<span class="text-accent-color number">
({{ node.countOfChildren
}}{{ 'common.units.persons' | translate }})</span
>
</span>
<span *ngSwitchCase="NodeType.MyDept" class="group-name">
<span class="title-name ellipsis">{{
'group.nameMyDept' | translate
}}</span>
<span class="text-accent-color number">
({{ node.countOfChildren
}}{{ 'common.units.persons' | translate }})</span
>
</span>
<span *ngSwitchCase="NodeType.Buddy" class="group-name">
<span class="title-name ellipsis">{{
node.groupDetail.name
}}</span>
<span class="text-accent-color number">
({{ node.countOfChildren
}}{{ 'common.units.persons' | translate }})</span
>
</span>
</ng-container>
</div>
<!-- switch안으로 이동
<span class="text-accent-color number">
({{ node.countOfChildren
}}{{ 'common.units.persons' | translate }})</span
>
>-->
<mat-checkbox
*ngIf="checkable"

View File

@ -5,7 +5,6 @@
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
margin-left: 10px;
}
.group-tree-node-invisible {
display: none;
@ -17,13 +16,37 @@
height: 40px;
.tree-node-header {
position: relative;
width: 100%;
.title-name {
display: inline-flex;
flex: 1 1 auto;
.path {
display: flex;
width: 100%;
justify-content: space-between;
.btn-toggle {
margin-left: 10px;
}
.group-info {
display: flex;
flex-flow: row;
width: calc(100% - 80px);
.group-name {
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
display: flex;
.title-name {
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.mat-tree-node {
width: 100%;
&:hover {
@ -83,6 +106,9 @@
margin-left: auto;
margin-right: 16px;
}
.group-name {
flex: 1;
}
.group-menu {
margin-left: auto;