mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-07-06 12:38:47 +00:00
Code Issues Releases Wiki Activity

Add highlight to latest message

Browse Source
This commit is contained in:
Kristóf Tóth 2018-06-26 12:03:25 +02:00
parent 02f8fc9774
commit c6f9edc9f7
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/messages/messages.component.html
View File

@ -11,7 +11,9 @@
<div class="jumping-circle" id="jc2"></div> <div class="jumping-circle" id="jc2"></div>
<div class="jumping-circle" id="jc3"></div> <div class="jumping-circle" id="jc3"></div>
</div> </div>
<div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()"> <div class="tfw-grid-message"
*ngFor="let message of messages.slice().reverse(); let first = first"
[class.highlighted-message]="first">
<div class="tfw-grid-message-header"> <div class="tfw-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/> <img class="tao-grid-center-left" src="images/avataobot.svg"/>
<div class="tao-grid-center-left originator">{{message.originator}}</div> <div class="tao-grid-center-left originator">{{message.originator}}</div>

6
src/app/messages/messages.component.scss
View File

@ -34,6 +34,12 @@
animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1); animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1);
} }
.highlighted-message {
border-style: solid;
border-width: 1px;
border-color: $tao-blue-100;
}
@keyframes inflate { @keyframes inflate {
0% { transform: scale(0,0); } 0% { transform: scale(0,0); }
100% { transform: scale(1,1); } 100% { transform: scale(1,1); }