diff --git a/README.md b/README.md index a701a3c4..71d40fac 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms. - Support for password protected `NEKO_ICESERVERS` (by @mbattista). - Added bunch of translations (πŸ‡ΈπŸ‡°, πŸ‡ͺπŸ‡Έ, πŸ‡ΈπŸ‡ͺ, πŸ‡³πŸ‡΄, πŸ‡«πŸ‡·) by various people. - Added `m1k1o/neko:google-chrome` tag. +- Show red dot badge on sidebar toggle if there are new messages, and user can't see them. ### Bugs - Fixed minor gst pipeline bug. diff --git a/client/src/components/header.vue b/client/src/components/header.vue index 1f5977d7..7c8b59e1 100644 --- a/client/src/components/header.vue +++ b/client/src/components/header.vue @@ -25,6 +25,7 @@ />
  • +
  • @@ -94,6 +95,40 @@ .toggle { background: $background-primary; } + + .badge { + position: absolute; + background: red; + font-weight: bold; + font-size: 1.25em; + border-radius: 50%; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + pointer-events: none; + + transform: translate(-50%, -25%) scale(1); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); + animation: badger-pulse 2s infinite; + } + + @keyframes badger-pulse { + 0% { + transform: translate(-50%, -25%) scale(0.85); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); + } + + 70% { + transform: translate(-50%, -25%) scale(1); + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + + 100% { + transform: translate(-50%, -25%) scale(0.85); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } + } } } } @@ -112,8 +147,22 @@ return this.$accessor.locked } + get side() { + return this.$accessor.client.side + } + + get texts() { + return this.$accessor.chat.texts + } + + get showBadge() { + return !this.side && this.readTexts != this.texts + } + + readTexts: number = 0 toggleMenu() { this.$accessor.client.toggleSide() + this.readTexts = this.texts } toggleLock() { diff --git a/client/src/store/chat.ts b/client/src/store/chat.ts index 2ca5da96..7441db7f 100644 --- a/client/src/store/chat.ts +++ b/client/src/store/chat.ts @@ -23,6 +23,7 @@ interface Message { export const state = () => ({ history: [] as Message[], emotes: {} as Emotes, + texts: 0, }) export const getters = getterTree(state, { @@ -31,6 +32,10 @@ export const getters = getterTree(state, { export const mutations = mutationTree(state, { addMessage(state, message: Message) { + if (message.type == 'text') { + state.texts++ + } + state.history = state.history.concat([message]) }, @@ -52,6 +57,7 @@ export const mutations = mutationTree(state, { reset(state) { state.emotes = {} state.history = [] + state.texts = 0 }, })