supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

style: Put user colors into the smallest possible scope

Browse Source 
The only thing that cares about user colors is the user component.
Putting a class value on the chat component seems to be the wrong
place.

This also allows us to remove various css selectors so that we
don't need to be that specific.
After all whatever has that class needs to be colored, we don't
care where it is.
This commit is contained in:
Reto Brunner 2022-11-27 15:59:46 +01:00
parent deeea274da
commit f55f772659
4 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/components/Chat.vue
View File

@ -4,7 +4,6 @@
id="chat" id="chat"
:class="{ :class="{
'hide-motd': store.state.settings.motd, 'hide-motd': store.state.settings.motd,
'colored-nicks': store.state.settings.coloredNicks,
'time-seconds': store.state.settings.showSeconds, 'time-seconds': store.state.settings.showSeconds,
'time-12h': store.state.settings.use12hClock, 'time-12h': store.state.settings.use12hClock,
}" }"

6
client/components/Username.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<span <span
:class="['user', nickColor, {active: active}]" :class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
:data-name="user.nick" :data-name="user.nick"
role="button" role="button"
v-on="onHover ? {mouseenter: hover} : {}" v-on="onHover ? {mouseenter: hover} : {}"
@ -16,6 +16,7 @@ import {UserInMessage} from "../../server/models/msg";
import eventbus from "../js/eventbus"; import eventbus from "../js/eventbus";
import colorClass from "../js/helpers/colorClass"; import colorClass from "../js/helpers/colorClass";
import type {ClientChan, ClientNetwork, ClientUser} from "../js/types"; import type {ClientChan, ClientNetwork, ClientUser} from "../js/types";
import {useStore} from "../js/store";
type UsernameUser = Partial<UserInMessage> & { type UsernameUser = Partial<UserInMessage> & {
mode?: string; mode?: string;
@ -69,11 +70,14 @@ export default defineComponent({
}); });
}; };
const store = useStore();
return { return {
mode, mode,
nickColor, nickColor,
hover, hover,
openContextMenu, openContextMenu,
store,
}; };
}, },
}); });

1
client/components/Windows/SearchResults.vue
View File

@ -3,7 +3,6 @@
<div <div
id="chat" id="chat"
:class="{ :class="{
'colored-nicks': store.state.settings.coloredNicks,
'time-seconds': store.state.settings.showSeconds, 'time-seconds': store.state.settings.showSeconds,
'time-12h': store.state.settings.use12hClock, 'time-12h': store.state.settings.use12hClock,
}" }"

66
client/css/style.css
View File

@ -1438,42 +1438,42 @@ textarea.input {
/* Nicknames */ /* Nicknames */
#chat .user { .user {
color: #50a656; color: #50a656;
} }
#chat.colored-nicks .user.color-1 { color: #107ead; } .user.color-1 { color: #107ead; }
#chat.colored-nicks .user.color-2 { color: #a86500; } .user.color-2 { color: #a86500; }
#chat.colored-nicks .user.color-3 { color: #008a3c; } .user.color-3 { color: #008a3c; }
#chat.colored-nicks .user.color-4 { color: #e00096; } .user.color-4 { color: #e00096; }
#chat.colored-nicks .user.color-5 { color: #f0000c; } .user.color-5 { color: #f0000c; }
#chat.colored-nicks .user.color-6 { color: #000094; } .user.color-6 { color: #000094; }
#chat.colored-nicks .user.color-7 { color: #006441; } .user.color-7 { color: #006441; }
#chat.colored-nicks .user.color-8 { color: #00566e; } .user.color-8 { color: #00566e; }
#chat.colored-nicks .user.color-9 { color: #e6006b; } .user.color-9 { color: #e6006b; }
#chat.colored-nicks .user.color-10 { color: #0d8766; } .user.color-10 { color: #0d8766; }
#chat.colored-nicks .user.color-11 { color: #006b3b; } .user.color-11 { color: #006b3b; }
#chat.colored-nicks .user.color-12 { color: #00857e; } .user.color-12 { color: #00857e; }
#chat.colored-nicks .user.color-13 { color: #00465b; } .user.color-13 { color: #00465b; }
#chat.colored-nicks .user.color-14 { color: #eb005a; } .user.color-14 { color: #eb005a; }
#chat.colored-nicks .user.color-15 { color: #e62600; } .user.color-15 { color: #e62600; }
#chat.colored-nicks .user.color-16 { color: #0f8546; } .user.color-16 { color: #0f8546; }
#chat.colored-nicks .user.color-17 { color: #e60067; } .user.color-17 { color: #e60067; }
#chat.colored-nicks .user.color-18 { color: #eb002b; } .user.color-18 { color: #eb002b; }
#chat.colored-nicks .user.color-19 { color: #eb003f; } .user.color-19 { color: #eb003f; }
#chat.colored-nicks .user.color-20 { color: #007a56; } .user.color-20 { color: #007a56; }
#chat.colored-nicks .user.color-21 { color: #095092; } .user.color-21 { color: #095092; }
#chat.colored-nicks .user.color-22 { color: #000bde; } .user.color-22 { color: #000bde; }
#chat.colored-nicks .user.color-23 { color: #008577; } .user.color-23 { color: #008577; }
#chat.colored-nicks .user.color-24 { color: #00367d; } .user.color-24 { color: #00367d; }
#chat.colored-nicks .user.color-25 { color: #007e9e; } .user.color-25 { color: #007e9e; }
#chat.colored-nicks .user.color-26 { color: #006119; } .user.color-26 { color: #006119; }
#chat.colored-nicks .user.color-27 { color: #007ea8; } .user.color-27 { color: #007ea8; }
#chat.colored-nicks .user.color-28 { color: #3c8500; } .user.color-28 { color: #3c8500; }
#chat.colored-nicks .user.color-29 { color: #e6007e; } .user.color-29 { color: #e6007e; }
#chat.colored-nicks .user.color-30 { color: #c75300; } .user.color-30 { color: #c75300; }
#chat.colored-nicks .user.color-31 { color: #eb0400; } .user.color-31 { color: #eb0400; }
#chat.colored-nicks .user.color-32 { color: #e60082; } .user.color-32 { color: #e60082; }
#chat .self .content { #chat .self .content {
color: var(--body-color-muted); color: var(--body-color-muted);