Skip to content

Commit fee8c5e

Browse files
ElectricS01ElectricS01
committed
1.228.0: Emoji picker
1 parent 5a8e9a3 commit fee8c5e

File tree

8 files changed

+234
-83
lines changed

8 files changed

+234
-83
lines changed

‎bun.lock‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@vitejs/plugin-vue": "^5.2.4",
1515
"axios": "^1.9.0",
1616
"dayjs": "^1.11.13",
17+
"emojilib": "^4.0.2",
1718
"markdown-it": "^14.1.0",
1819
"pinia": "^2.3.1",
1920
"register-service-worker": "^1.7.2",

‎src/App.vue‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
class="right chat-icon"
106106
size="28"
107107
icon="search"
108-
@click=";(store.search = !store.search), (store.pins = false)"
108+
@click=";((store.search = !store.search), (store.pins = false))"
109109
>
110110
<title>Search this chat</title>
111111
</icons>
@@ -114,7 +114,7 @@
114114
class="right chat-icon"
115115
size="28"
116116
icon="pin"
117-
@click=";(store.pins = !store.pins), (store.search = false)"
117+
@click=";((store.pins = !store.pins), (store.search = false))"
118118
>
119119
<title>View this chat's pins</title>
120120
</icons>
@@ -267,19 +267,6 @@ const toggleChatBar = () => {
267267
}
268268
store.chatBarOpen = localStorage.getItem("chatBarOpen")
269269
}
270-
const toggleQuickSwitcher = ({ repeat, metaKey, ctrlKey, key }) => {
271-
if (repeat) return
272-
if ((metaKey || ctrlKey) && (key === "k" || key === "/")) {
273-
store.quickSwitcherShown = !store.quickSwitcherShown
274-
searchedItems = store.switcherItems
275-
if (store.quickSwitcherShown) {
276-
nextTick(() => {
277-
const quickSwitcher = document.getElementById("quick-switcher")
278-
quickSwitcher?.focus()
279-
})
280-
}
281-
}
282-
}
283270
const searchItems = () => {
284271
if (store.quickSwitcherShown) {
285272
const lastSearchedItems = searchedItems
@@ -377,14 +364,28 @@ const activateItem = (id) => {
377364
store.sortSwitcher()
378365
}
379366
}
380-
const escPressed = ({ key }) => {
367+
const keyPressed = ({ repeat, metaKey, ctrlKey, key }) => {
381368
if (key === "Escape") {
382369
store.quickSwitcherShown = false
383370
}
371+
if (repeat) return
372+
if (metaKey || ctrlKey) {
373+
if (key === "k" || key === "/") {
374+
store.quickSwitcherShown = !store.quickSwitcherShown
375+
searchedItems = store.switcherItems
376+
if (store.quickSwitcherShown) {
377+
nextTick(() => {
378+
const quickSwitcher = document.getElementById("quick-switcher")
379+
quickSwitcher?.focus()
380+
})
381+
}
382+
} else if (key == ".") {
383+
toggleMode()
384+
}
385+
}
384386
}
385387
386-
document.addEventListener("keydown", toggleQuickSwitcher)
387-
document.addEventListener("keydown", escPressed)
388+
document.addEventListener("keydown", keyPressed)
388389
389390
const navbarShown = computed(
390391
() =>

‎src/assets/stile.css‎

Lines changed: 62 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ body {
44
color: #fff;
55
/*background-image: linear-gradient(rgb(255, 204, 0),rgb(255, 102, 0));*/ /*debug*/
66
background-color: #181a1b;
7-
/*
8-
light grey 3d4244
9-
grey 282a2b
10-
grey hover 313435
11-
dark 212425
12-
dark hover 313435
13-
*/
7+
--light: #3d4244;
8+
--grey: #282a2b;
9+
--grey-hover: #313435;
10+
--grey-transparent: #282a2b80;
11+
--dark: #212425;
12+
--dark-hover: #313435;
13+
--hover-transparent: #31343580;
1414
}
1515

1616
.scroll-bar-dark::-webkit-scrollbar,
@@ -19,12 +19,12 @@ body {
1919
}
2020

2121
.scroll-bar::-webkit-scrollbar-thumb {
22-
background: #282a2b80;
22+
background: var(--grey-transparent);
2323
border-radius: 3px;
2424
}
2525

2626
.scroll-bar-dark::-webkit-scrollbar-thumb {
27-
background: #212425;
27+
background: var(--dark);
2828
border-radius: 3px;
2929
}
3030

@@ -131,34 +131,34 @@ iframe {
131131
}
132132

133133
.spacer {
134-
border-bottom: 1px solid #3d4244;
134+
border-bottom: 1px solid var(--light);
135135
width: 100%;
136136
margin: 3px 0;
137137
}
138138

139139
.switcher-modal {
140140
height: 400px;
141141
width: min(calc(100vw - 48px), 400px);
142-
background-color: #282a2b80;
143-
border-radius: 2px;
142+
background-color: var(--grey-transparent);
143+
border-radius: 4px;
144144
padding: 16px;
145145
}
146146

147147
.switch-container {
148148
overflow-y: auto;
149-
height: calc(100% - 32px);
149+
height: calc(100% - 44px);
150150
}
151151

152152
.switcher-input {
153-
margin: 0 0 4px;
153+
margin: 0 0 16px;
154154
}
155155

156156
.switcher-item {
157157
margin: 0 0 4px;
158158
padding: 4px;
159159

160160
&:hover {
161-
background-color: #31343580;
161+
background-color: var(--hover-transparent);
162162
}
163163
}
164164

@@ -269,7 +269,7 @@ button {
269269
}
270270

271271
div {
272-
border-bottom: 1px solid #3d4244;
272+
border-bottom: 1px solid var(--light);
273273
width: 100%;
274274
margin: 20px 0;
275275
}
@@ -307,15 +307,15 @@ button {
307307
.message-text-large {
308308
cursor: pointer;
309309
padding: 6px;
310-
background-color: #212425;
310+
background-color: var(--dark);
311311
width: 40%;
312312

313313
&.active {
314-
background-color: #313435;
314+
background-color: var(--dark-hover);
315315
}
316316

317317
&:hover {
318-
background-color: #3d4244;
318+
background-color: var(--light);
319319
}
320320
}
321321
}
@@ -327,23 +327,45 @@ button {
327327
}
328328

329329
.message-send {
330+
position: relative;
330331
display: flex;
331-
justify-content: center;
332332
height: 48px;
333-
background-color: #282a2b;
333+
background-color: var(--grey);
334334
text-align: center;
335335
}
336336

337+
.emoji-picker {
338+
position: absolute;
339+
text-align: left;
340+
width: calc(100% - 22px);
341+
bottom: 48px;
342+
left: 0;
343+
padding: 8px 8px 0;
344+
background-color: var(--grey);
345+
border-top-left-radius: 16px;
346+
border-top-right-radius: 16px;
347+
}
348+
349+
.emoji-picker-inner {
350+
max-height: 210px;
351+
overflow-y: auto;
352+
353+
.selected {
354+
background-color: var(--grey-hover);
355+
border-radius: 4px;
356+
}
357+
}
358+
337359
.scroll-button {
338360
display: flex;
339361
font-size: 12px;
340362
overflow: hidden;
341-
background-color: #282a2b;
363+
background-color: var(--grey);
342364
left: 0;
343365
right: 0;
344366
z-index: 1;
345-
border-top-left-radius: 24px;
346-
border-top-right-radius: 24px;
367+
border-top-left-radius: 16px;
368+
border-top-right-radius: 16px;
347369
text-align: left;
348370
padding: 4px 12px;
349371
}
@@ -354,7 +376,7 @@ button {
354376
align-items: center;
355377
margin: 0 0 4px;
356378
padding: 4px;
357-
background-color: #212425;
379+
background-color: var(--dark);
358380
cursor: pointer;
359381
height: 20px;
360382
}
@@ -369,8 +391,8 @@ button {
369391
left: 0;
370392
right: 0;
371393
z-index: 2;
372-
border-bottom-left-radius: 24px;
373-
border-bottom-right-radius: 24px;
394+
border-bottom-left-radius: 16px;
395+
border-bottom-right-radius: 16px;
374396
text-align: left;
375397
padding: 4px 24px;
376398
}
@@ -502,13 +524,13 @@ button {
502524
.right:hover,
503525
button:hover,
504526
.chat-navbar a:hover {
505-
background-color: #313435;
527+
background-color: var(--dark-hover);
506528
}
507529

508530
.context-menu-item:hover,
509531
.chat-settings:hover,
510532
.message-grid:hover {
511-
background-color: #212425;
533+
background-color: var(--dark);
512534
}
513535

514536
.light-mode .icon-mobile {
@@ -569,9 +591,9 @@ button:hover,
569591
}
570592

571593
.mention {
572-
padding: 1px;
594+
padding: 2px;
573595
background-color: #1e90ff80;
574-
border-radius: 2px;
596+
border-radius: 4px;
575597
cursor: pointer;
576598

577599
&:hover {
@@ -697,7 +719,7 @@ input {
697719

698720
.message-input {
699721
height: 32px;
700-
width: calc(100% - 100px);
722+
width: calc(100% - 88px);
701723
margin: 8px;
702724
padding: 6px;
703725
resize: none;
@@ -741,6 +763,12 @@ h4 {
741763
margin-bottom: 4px;
742764
}
743765

766+
code {
767+
background-color: var(--dark);
768+
border-radius: 4px;
769+
padding: 0 2px;
770+
}
771+
744772
.title {
745773
font-size: 36px;
746774
margin-top: 12px;
@@ -940,7 +968,7 @@ h4 {
940968
min-width: 150px;
941969
margin: 10px;
942970
padding: 10px;
943-
background-color: #212425;
971+
background-color: var(--dark);
944972
border-radius: 15px;
945973
flex-grow: 1;
946974
flex-basis: 0;
@@ -1107,7 +1135,7 @@ input:checked + .slider:before {
11071135
}
11081136

11091137
.settings-spacer {
1110-
border-bottom: 1px solid #3d4244;
1138+
border-bottom: 1px solid var(--light);
11111139
width: 100%;
11121140
margin: 10px 0;
11131141
}

‎src/components/Changelog.vue‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@
22
<h2 class="settings-text">Changelog</h2>
33
<div>BetterCommunications changelog</div>
44
<div class="settings-spacer" />
5+
<h2 class="settings-text">1.228 Emoji Quick Picker</h2>
6+
<div class="settings-spacer" />
7+
<ul>
8+
<li v-markdown>
9+
Added an Emoji Quick Picker to comms activated by typing `:`
10+
</li>
11+
<li v-markdown>
12+
New key combination to quickly change chat with `opt` or `alt` + `up` or
13+
`down`
14+
</li>
15+
<li>Fixed the "Scroll to bottom" button not working</li>
16+
<li>Changed the rounding of some corners to be more consistent</li>
17+
<li>Fixed the "Scroll to bottom" button's width</li>
18+
<li>Changed the background colour of code blocks</li>
19+
<li>Made mentions more distinct</li>
20+
<li>
21+
Added build date in the
22+
<router-link to="/account/about">About page</router-link>
23+
</li>
24+
</ul>
525
<h2 class="settings-text">1.227 Image Uploading Alpha</h2>
626
<div class="settings-spacer" />
727
<ul>
@@ -175,7 +195,7 @@
175195
<ul>
176196
<li>
177197
Display Backend Server Name in the
178-
<router-link to="/account/privacy">About Page</router-link>
198+
<router-link to="/account/about">About Page</router-link>
179199
</li>
180200
<li>Add browser titles to all pages</li>
181201
<li>Refactor file paths</li>
@@ -586,4 +606,11 @@
586606
<li>Changed the rounding of some corners to be more consistent</li>
587607
<li>Fix creating chats</li>
588608
</ul>
609+
<h2 class="settings-text">1.166 Clickable mentions</h2>
610+
<div class="settings-spacer" />
611+
<ul>
612+
<li>Clicking a mention now shows the user's profile page</li>
613+
<li>Improve error messages</li>
614+
<li>Refactoring</li>
615+
</ul>
589616
</template>

0 commit comments

Comments
 (0)