-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(liveshare): improve icons and ctx
- Loading branch information
Showing
14 changed files
with
276 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 18 additions & 9 deletions
27
...ter-write-app/src/components/page/editor/main/render/bar/EditorBaseRenderBarLiveshare.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,28 @@ | ||
| <template> | ||
| <div v-if="Object.entries(presence).length > 0" class="flex cursor-pointer items-center gap-2 bg-theme-background-3 px-2"> | ||
| <div v-for="[index, [user]] in Object.entries(presence)" :key="index" class="p-1" :style="{ backgroundColor: user.color }"> | ||
| <img v-if="user.avatar_url" class="bg-cover w-5 h-5 rounded-full" :src="user.avatar_url"> | ||
| <p v-else class="font-bold font-raleway">{{ user.id.substring(0, 1).toUpperCase() }}</p> | ||
| </div> | ||
| <p>{{ Object.entries(presence).length }} / {{ LIVESHARE.presenceLimit }}</p> | ||
| <div v-if="presence.length > 0" :style="[LIVESHARE.lastUpdatedColor ? { border: `1px solid ${LIVESHARE.lastUpdatedColor}`} : {}]" class="flex px-2 cursor-pointer items-center gap-2" @click.prevent.stop="ABSOLUTE.modal.presence.info = true"> | ||
| <div :style="{ backgroundColor: '#FF0000'}" class="rounded-full w-3 h-3" /> | ||
| <p>{{ t('editor.presence.bar.liveshare')}}</p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useAbsoluteStore } from '@/store/absolute'; | ||
| import { useLiveshareStore } from '@/store/liveshare'; | ||
| import { computed } from 'vue'; | ||
| import { computed } from 'vue'; | ||
| import { useI18n } from 'vue-i18n'; | ||
| const LIVESHARE = useLiveshareStore() | ||
| const ABSOLUTE = useAbsoluteStore() | ||
| const { t } = useI18n() | ||
| const presence = computed({ | ||
| get() { | ||
| return Object.entries(LIVESHARE.presence); | ||
| }, | ||
| set(value) { | ||
| return value | ||
| } | ||
| }); | ||
| // TODO: resolve reactivity for this | ||
| const presence = computed(() => LIVESHARE.presence) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
...rite-app/src/components/page/editor/project/presence/EditorProjectPresenceInformation.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <template> | ||
| <Modal @close="onClose"> | ||
| <div class="flex items-center justify-center w-full h-screen bg-modal"> | ||
| <div | ||
| ref="main" | ||
| class="left-0 top-0 p-5 flex z-max flex-col w-full bg-rgba-blur lg:w-1/2 h-full lg:h-3/4 bg-theme-background-1 wb-text wb-scroll overflow-y-auto rounded shadow-2xl wb-scroll" | ||
| > | ||
| <EditorAbsoluteHeader :title="t('editor.presence.info.title') + ` - ${presence.length} / ${LIVESHARE.presenceLimit}`" @close="onClose" /> | ||
| <div v-if="presence.length > 0" class="flex mt-5 flex-col gap-5" @click.prevent.stop="ABSOLUTE.modal.presence.info = true"> | ||
| <h2 class="text-lg font-bold">Chave da Sala:</h2> | ||
| <EditorProjectPresenceKey :id="LIVESHARE.roomKey" /> | ||
| <h2 class="text-lg font-bold">Usuários Conectados:</h2> | ||
| <div v-for="[index, [user]] in presence" :key="index" class="flex border-3 rounded-full shadow-lg p-2 justify-between items-center w-full" :style="{ borderColor: user.color }"> | ||
| <div class="flex items-center justify-between w-full gap-5"> | ||
| <div class="flex gap-2"> | ||
| <img v-if="user.avatar_url" class="bg-cover rounded-full h-8 w-8" :src="user.avatar_url"> | ||
| <p class="flex items-center truncate justify-center font-bold font-raleway rounded-full wb-text text-sm h-8 sm:text-lg">{{ user.id }}</p> | ||
| </div> | ||
| <EditorProjectPresenceInformationType :type="user.type" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Button @click="plugin.emit('plugin-presence-room-leave', LIVESHARE.roomKey)">{{ t('editor.presence.info.leave') }}</Button> | ||
| </div> | ||
| </div> | ||
| </Modal> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useI18n } from 'vue-i18n' | ||
| import { useAbsoluteStore } from '@/store/absolute'; | ||
| import { useLiveshareStore } from '@/store/liveshare'; | ||
| import { computed } from 'vue'; | ||
| import { usePlugin } from 'better-write-plugin-core'; | ||
| const ABSOLUTE = useAbsoluteStore() | ||
| const LIVESHARE = useLiveshareStore() | ||
| const { t } = useI18n() | ||
| const plugin = usePlugin() | ||
| const presence = computed({ | ||
| get() { | ||
| return Object.entries(LIVESHARE.presence); | ||
| }, | ||
| set(value) { | ||
| return value | ||
| } | ||
| }); | ||
| const onClose = () => { | ||
| ABSOLUTE.modal.presence.info = false | ||
| } | ||
| </script> |
16 changes: 16 additions & 0 deletions
16
...-app/src/components/page/editor/project/presence/EditorProjectPresenceInformationType.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <template> | ||
| <div class="text-center font-raleway"> | ||
| <p v-if="type === 'owner'" :style="{ backgroundColor: '#500', borderColor: '#F00', color: '#F00'}" class="px-2 font-bold border-2 rounded-full">{{ t('editor.presence.type.owner') }}</p> | ||
| <p v-if="type === 'visit'" :style="{ backgroundColor: '#9A0', borderColor: '#FF0', color: '#FF0'}" class="px-2 font-bold border-2 rounded-full">{{ t('editor.presence.type.visit') }}</p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useI18n } from "vue-i18n" | ||
| defineProps<{ | ||
| type: 'owner' | 'visit' | ||
| }>() | ||
| const { t } = useI18n() | ||
| </script> |
31 changes: 31 additions & 0 deletions
31
...better-write-app/src/components/page/editor/project/presence/EditorProjectPresenceKey.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <template> | ||
| <div v-if="props.id" class="flex w-full items-center rounded-full p-1 justify-between"> | ||
| <p class="font-bold text-lg">{{ props.id }}</p> | ||
| <button class="wb-icon" @click.prevent.stop="onCopy"> | ||
| <IconCopyLink class="w-6 h-6" /> | ||
| </button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useClipboard } from "@vueuse/core" | ||
| import { useI18n } from "vue-i18n" | ||
| import { useToast } from "vue-toastification" | ||
| const props = defineProps<{ | ||
| id: string | ||
| }>() | ||
| const toast = useToast() | ||
| const { t } = useI18n() | ||
| const onCopy = async () => { | ||
| const { copy, isSupported } = useClipboard({ source: props.id }) | ||
| if(isSupported.value) { | ||
| await copy() | ||
| toast.success(t('toast.generics.copy')) | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.