<commit_before><!DOCTYPE html>
<!--
NgTeamTask is licensed under the conditions of the MIT License (MIT)

Copyright (c) 2016 <NAME>

See https://raw.githubusercontent.com/stophi-dev/NgTeamTask/master/LICENSE for details.
-->
<style>
    .task-item, .task-not-assigned {
        padding: 0.5em;
        background-color: #ffffd7;        
    }
    .task-item {
        display: flex;
        margin-bottom: 4px;
        border-radius: 5px;
        cursor: pointer;       
        vertical-align: middle;
    }
    .task-item:last-child {
        margin-bottom: 0;
    }
    .task-item:hover {
        background-color: #ccddff;
    }
    .task-not-assigned {
        font-style: italic;
        color: #555;        
    }
    .task-title {
        flex-grow: 2;
    }
    .task-progress-value {
        width: 5ch;
        text-align: right;
        padding-left: 6px;
        margin-right: 0.5em;
    }
    progress {
        color: #0063a6;
        font-size: .6em;
        line-height: 1.5em;
        text-indent: .5em;
        height: 1.8em;
        border: 1px solid #0063a6;
        background: #fff;        
    }

    .button {
        border-radius: 5px;
        background-color: #0063a6;
        color: white;
        border: none;
        height: 1.5em;
    }

    .modal-dialog {
        z-index: 1000;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.6);
        font-size: larger;
        text-align: center;
        cursor: default;
    }

    .modal-content {
        display: inline-block;
        background-color: #fefefe;
        margin: 15%;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 5px;
        line-height: 1.5em;
    }

    progress::-webkit-progress-bar { background: #fff; }
    progress::-webkit-progress-value { background: #0063a6; }
</style>
<div class="task-container">    
    <div class="task-not-assigned" *ngIf="tasks.length === 0">
        {{noItemText}}
    </div>
    <div class="task-item" *ngFor="let task of tasks"
         attr.data-taskid="{{task.id}}">
         <span class="task-title">{{task.title}}</span>
        <progress attr.max="{{task.workUnits}}" attr.value="{{task.progress}}"></progress>
        <span class="task-progress-value">{{task.getProgressInPercent()}}%</span>
        <button class="button" [title]="deleteTaskToolTip" (click)="showDeleteTaskDialog(task.id)">
            <span class="ui-icon ui-icon-close"></span>
        </button>
        
        <div class="modal-dialog" *ngIf="currentTaskToDelete === task.id" 
             (click)="hideDeleteTaskDialog()" (mousedown)="$event.stopPropagation();">
             <div class="modal-content" (click)="$event.stopPropagation();">
                <div>{{deleteTaskConfirmText(task.title)}}</div>                
                <div>
                    <button class="button" (click)="taskManagement.deleteTask(task.id)">{{deleteDialogYesButtonText}}</button>
                    <button class="button" (click)="hideDeleteTaskDialog()">{{deleteDialogCancelButtonText}}</button>
                </div>
            </div>
        </div>
    </div>
</div><commit_msg>Add fade-in effect<commit_after><!DOCTYPE html>
<!--
NgTeamTask is licensed under the conditions of the MIT License (MIT)

Copyright (c) 2016 <NAME>

See https://raw.githubusercontent.com/stophi-dev/NgTeamTask/master/LICENSE for details.
-->
<style>
    .task-item, .task-not-assigned {
        padding: 0.5em;
        background-color: #ffffd7;        
    }
    .task-item {
        display: flex;
        margin-bottom: 4px;
        border-radius: 5px;
        cursor: pointer;       
        vertical-align: middle;
    }
    .task-item:last-child {
        margin-bottom: 0;
    }
    .task-item:hover {
        background-color: #ccddff;
    }
    .task-not-assigned {
        font-style: italic;
        color: #555;        
    }
    .task-title {
        flex-grow: 2;
    }
    .task-progress-value {
        width: 5ch;
        text-align: right;
        padding-left: 6px;
        margin-right: 0.5em;
    }
    progress {
        color: #0063a6;
        font-size: .6em;
        line-height: 1.5em;
        text-indent: .5em;
        height: 1.8em;
        border: 1px solid #0063a6;
        background: #fff;        
    }

    .button {
        border-radius: 5px;
        background-color: #0063a6;
        color: white;
        border: none;
        height: 1.5em;
    }

    .modal-dialog {
        z-index: 1000;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.6);
        font-size: larger;
        text-align: center;
        cursor: default;
    }

    .modal-content {
        display: inline-block;
        background-color: #fefefe;
        margin: 15%;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 5px;
        line-height: 1.5em;
    }

    @-webkit-keyframes fadeIn {
        from {opacity: 0}
        to {opacity: 100%}
    }
    @keyframes fadeIn {
        from {opacity: 0}
        to {opacity: 100%}
    }

    .fade-in {
        -webkit-animation-name: fadeIn; 
        -webkit-animation-duration: 0.7s;  
        animation-name: fadeIn;
        animation-duration: 0.7s;
    }

    progress::-webkit-progress-bar { background: #fff; }
    progress::-webkit-progress-value { background: #0063a6; }
</style>
<div class="task-container">    
    <div class="task-not-assigned" *ngIf="tasks.length === 0">
        {{noItemText}}
    </div>
    <div class="task-item fade-in" *ngFor="let task of tasks"
         attr.data-taskid="{{task.id}}">
         <span class="task-title">{{task.title}}</span>
        <progress attr.max="{{task.workUnits}}" attr.value="{{task.progress}}"></progress>
        <span class="task-progress-value">{{task.getProgressInPercent()}}%</span>
        <button class="button" [title]="deleteTaskToolTip" (click)="showDeleteTaskDialog(task.id)">
            <span class="ui-icon ui-icon-close"></span>
        </button>

        <div class="modal-dialog fade-in" *ngIf="currentTaskToDelete === task.id" 
             (click)="hideDeleteTaskDialog()" (mousedown)="$event.stopPropagation();">
             <div class="modal-content" (click)="$event.stopPropagation();">
                <div>{{deleteTaskConfirmText(task.title)}}</div>                
                <div>
                    <button class="button" (click)="taskManagement.deleteTask(task.id)">{{deleteDialogYesButtonText}}</button>
                    <button class="button" (click)="hideDeleteTaskDialog()">{{deleteDialogCancelButtonText}}</button>
                </div>
            </div>
        </div>
    </div>
</div>
{'fraction_non_alphanumeric': 0.15338674435542607, 'fraction_numerical': 0.025054624908958486, 'mean_word_length': 1.9341880341880342, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 69, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '815080', 'n_tokens_mistral': 2332, 'n_tokens_neox': 2163, 'n_words': 406}