Add message icon to each chat item
This commit is contained in:
parent
ad1b0fdeb8
commit
a8a1554a0f
20
src/app.scss
20
src/app.scss
|
@ -59,6 +59,12 @@ html {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 900px) and (min-width: 769px) {
|
||||||
|
.chat-menu-item .chat-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
@media only screen and (max-width: 768px) {
|
||||||
.navbar {
|
.navbar {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
@ -213,6 +219,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Delete button on side menu chat name */
|
/* Delete button on side menu chat name */
|
||||||
|
|
||||||
.menu-list {
|
.menu-list {
|
||||||
a:hover {
|
a:hover {
|
||||||
.delete-button {
|
.delete-button {
|
||||||
|
@ -220,8 +227,17 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
|
||||||
background-color: initial;
|
background-color: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.delete-button {
|
||||||
|
opacity: .8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.delete-button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Loading chat messages */
|
/* Loading chat messages */
|
||||||
.is-loading {
|
.is-loading {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
@ -277,7 +293,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
|
||||||
.chat-menu-item {
|
.chat-menu-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.chat-menu-item span {
|
.chat-menu-item .chat-item-name {
|
||||||
display: block;
|
display: block;
|
||||||
white-space:nowrap;
|
white-space:nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -429,6 +445,7 @@ aside.menu.main-menu .menu-expanse {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 340px) {
|
@media only screen and (max-width: 340px) {
|
||||||
.section-footer {
|
.section-footer {
|
||||||
.author {
|
.author {
|
||||||
|
@ -437,7 +454,6 @@ aside.menu.main-menu .menu-expanse {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.content.running-total-container {
|
.content.running-total-container {
|
||||||
min-height:1em;
|
min-height:1em;
|
||||||
// padding-bottom:.6em;
|
// padding-bottom:.6em;
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
import { apiKeyStorage, deleteChat, pinMainMenu } from './Storage.svelte'
|
import { apiKeyStorage, deleteChat, pinMainMenu } from './Storage.svelte'
|
||||||
import Fa from 'svelte-fa/src/fa.svelte'
|
import Fa from 'svelte-fa/src/fa.svelte'
|
||||||
import { faTrash, faCircleCheck } from '@fortawesome/free-solid-svg-icons/index'
|
import { faTrash, faCircleCheck } from '@fortawesome/free-solid-svg-icons/index'
|
||||||
|
import { faMessage } from '@fortawesome/free-regular-svg-icons/index'
|
||||||
|
|
||||||
export let chat:Chat
|
export let chat:Chat
|
||||||
export let activeChatId:number|undefined
|
export let activeChatId:number|undefined
|
||||||
|
@ -39,10 +40,10 @@
|
||||||
<li>
|
<li>
|
||||||
<a class="chat-menu-item" href={`#/chat/${chat.id}`} on:click={() => { $pinMainMenu = false }} class:is-waiting={waitingForConfirm} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}>
|
<a class="chat-menu-item" href={`#/chat/${chat.id}`} on:click={() => { $pinMainMenu = false }} class:is-waiting={waitingForConfirm} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}>
|
||||||
{#if waitingForConfirm}
|
{#if waitingForConfirm}
|
||||||
<a class="is-pulled-right is-hidden px-1 py-0 greyscale has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faCircleCheck} /></a>
|
<a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faCircleCheck} /></a>
|
||||||
{:else}
|
{:else}
|
||||||
<a class="is-pulled-right is-hidden px-1 py-0 greyscale has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faTrash} /></a>
|
<a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faTrash} /></a>
|
||||||
{/if}
|
{/if}
|
||||||
<span>{chat.name || `Chat ${chat.id}`}</span>
|
<span class="chat-item-name"><Fa class="mr-2 chat-icon" size="xs" icon="{faMessage}"/>{chat.name || `Chat ${chat.id}`}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
Loading…
Reference in New Issue