butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

style read marker a bit

Browse source
This commit is contained in:
N-Pex 2021-01-14 17:21:11 +01:00
parent 0671a9ec40
commit 62fbe3e949
3 changed files with 35 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/assets/css/chat.scss
View file

@ -363,4 +363,34 @@
font-weight: 700; font-weight: 700;
font-size: 21 * $chat-text-size; font-size: 21 * $chat-text-size;
color: black; color: black;
}
.read-marker {
//display: block;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
height: 1px;
line-height: var(--v-theme-title-featured-line-height);
position: relative;
font-family: sans-serif;
font-style: normal;
font-weight: bold;
font-size: 9.88014 * $chat-text-size;
line-height: 140%;
/* identical to box height, or 14px */
letter-spacing: 0.29px;
color: #9C9CAE;
background-color: #9C9CAE;
&::after {
position: absolute;
left: 10px;
top: -6px;
background: white;
padding-left: 10px;
padding-right: 10px;
content: attr(title);
}
} }

4
src/components/Chat.vue
View file

@ -62,8 +62,8 @@
v-on:send-quick-reaction="sendQuickReaction" v-on:send-quick-reaction="sendQuickReaction"
v-on:context-menu="showContextMenuForEvent($event)" v-on:context-menu="showContextMenuForEvent($event)"
/> />
<div>EventID: {{ event.getId() }}</div> <!-- <div>EventID: {{ event.getId() }}</div> -->
<div v-if="event.getId() == readMarker">------- READ MARKER -------</div> <div v-if="event.getId() == readMarker && index < (events.length - 1)" class="read-marker" title="Unread messages" />
</div> </div>
</div> </div>
</div> </div>

6
src/components/ChatHeader.vue
View file

@ -21,15 +21,15 @@
<!-- "REALLY LEAVE?" dialog --> <!-- "REALLY LEAVE?" dialog -->
<v-dialog v-model="showLeaveConfirmation" class="ma-0 pa-0" width="50%"> <v-dialog v-model="showLeaveConfirmation" class="ma-0 pa-0" width="50%">
<v-card> <v-card>
<v-card-title>Leave room?</v-card-title> <v-card-title>Are you sure you want to leave?</v-card-title>
<v-card-text> <v-card-text>
<div>Do you really want to leave the room?</div> <div>You may not be able to rejoin.</div>
</v-card-text> </v-card-text>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn text @click="showLeaveConfirmation = false">Cancel</v-btn> <v-btn text @click="showLeaveConfirmation = false">Cancel</v-btn>
<v-btn color="primary" text @click="doLeaveRoom();showLeaveConfirmation = false">Ok</v-btn> <v-btn color="primary" text @click="doLeaveRoom();showLeaveConfirmation = false">Next</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>