Skip to content

Temporary editor colors during editing sessions #1296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusknorr merged 11 commits into from
Jan 14, 2021
Merged

Temporary editor colors during editing sessions #1296

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cc65498
First throw on editor colors based on change tracking example of pros…
juliusknorr Jan 1, 2020
52810af
Refactor session list to use the popover
juliusknorr Jan 12, 2021
a508d18
Use brighter colors as annotation background
juliusknorr Jan 12, 2021
5226f52
Some code cleanup
juliusknorr Jan 13, 2021
6cca6b1
Keep session information as long as we need it for steps
juliusknorr Jan 13, 2021
352da20
Make sure document status messages are always shown on top
juliusknorr Jan 13, 2021
49f2f80
Bump bundles
juliusknorr Jan 13, 2021
12b42d1
Always use the updated color depending on the guest name
juliusknorr Jan 13, 2021
43f443f
Fix cases where vuex is not setup globally
juliusknorr Jan 13, 2021
7ef4dbc
Fix color contrast ratio for author annotations
juliusknorr Jan 13, 2021
ec853ba
Bump bundles
juliusknorr Jan 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Always use the updated color depending on the guest name 
Signed-off-by: Julius Härtl <[email protected]>
  • Loading branch information
@juliusknorr
juliusknorr committed Jan 13, 2021
commit 12b42d11f977f4895cb782dd0bcdfc756e9e6187
3 changes: 3 additions & 0 deletions lib/Service/SessionService.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,9 @@ public function updateSession(int $documentId, int $sessionId, string $sessionTo
}
$session = $this->sessionMapper->find($documentId, $sessionId, $sessionToken);
$session->setGuestName($guestName);
$color = $this->avatarManager->getGuestAvatar($guestName)->avatarBackgroundColor($guestName);
$color = sprintf("#%02x%02x%02x", $color->r, $color->g, $color->b);
$session->setColor($color);
return $this->sessionMapper->update($session);
}
}
7 changes: 6 additions & 1 deletion src/components/EditorWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,6 @@ export default {

this.syncError = null
this.tiptap.setOptions({ editable: !this.readOnly })

})
.on('loaded', ({ documentSource }) => {
this.hasConnectionIssue = false
Expand Down Expand Up @@ -483,6 +482,12 @@ export default {

updateSessions(sessions) {
this.sessions = sessions.sort((a, b) => b.lastContact - a.lastContact)

// Make sure we get our own session updated
// This should ideally be part of a global store where we can have that updated on the actual name change for guests
const currentUpdatedSession = this.sessions.find(session => session.id === this.currentSession.id)
Vue.set(this, 'currentSession', currentUpdatedSession)

const currentSessionIds = this.sessions.map((session) => session.userId)
const currentGuestIds = this.sessions.map((session) => session.guestId)

Expand Down
5 changes: 3 additions & 2 deletions src/extensions/UserColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,11 @@ export default class UserColor extends Extension {
.filter(span => typeof tState.commits[span.commit]?.author?.color !== 'undefined')
.map(span => {
const commit = tState.commits[span.commit]
const clientID = commit.author.clientID
return Decoration.inline(span.from, span.to, {
class: 'author-annotation',
style: 'background-color: ' + commit.author.color + 'ee;',
title: commit.author.name,
style: 'background-color: ' + this.spec.color(clientID) + 'ee;',
title: this.spec.name(clientID),
})
}).filter(dec => dec !== null)
return { tracked, deco: DecorationSet.create(state.doc, decos) }
Expand Down
9 changes: 7 additions & 2 deletions tests/psalm-baseline.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,18 @@
</UndefinedThisPropertyFetch>
</file>
<file src="lib/Service/SessionService.php">
<UndefinedDocblockClass occurrences="4">
<UndefinedDocblockClass occurrences="8">
<code>$color-&gt;b</code>
<code>$color-&gt;b</code>
<code>$color-&gt;g</code>
<code>$color-&gt;g</code>
<code>$color-&gt;r</code>
<code>$color-&gt;r</code>
<code>$this-&gt;avatarManager-&gt;getGuestAvatar($guestName)-&gt;avatarBackgroundColor($guestName)</code>
<code>$this-&gt;avatarManager-&gt;getGuestAvatar($userName)-&gt;avatarBackgroundColor($userName)</code>
</UndefinedDocblockClass>
<UndefinedMagicMethod occurrences="6">
<UndefinedMagicMethod occurrences="7">
<code>setColor</code>
<code>setColor</code>
<code>setDocumentId</code>
<code>setGuestName</code>
Expand Down