diff options
author | Luka Trovic <luka@nextcloud.com> | 2022-06-22 09:55:40 +0300 |
---|---|---|
committer | nextcloud-command <nextcloud-command@users.noreply.github.com> | 2022-06-30 17:38:23 +0300 |
commit | dfbaece5aacae49457dd34b3c930a4b12166d561 (patch) | |
tree | 3d23d0e1046388829c951c413c38af38c61ee994 /src | |
parent | 7201d0ac12ad8dd2450ef5e9b55188fcc654f570 (diff) |
feat: improve collaborator style
Signed-off-by: Luka Trovic <luka@nextcloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/EditorWrapper.vue | 50 | ||||
-rw-r--r-- | src/components/SessionList.vue | 15 |
2 files changed, 58 insertions, 7 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 32551cad4..1ec1d0cb1 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -54,10 +54,17 @@ :autohide="autohide" :loaded.sync="menubarLoaded"> <div class="text-editor__session-list"> - <div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass"> + <div v-if="isMobile" v-tooltip="lastSavedStatusTooltip" :class="saveStatusClass" /> + <div v-else + v-tooltip="lastSavedStatusTooltip" + class="save-status" + :class="lastSavedStatusClass"> {{ lastSavedStatus }} </div> <SessionList :sessions="filteredSessions"> + <p slot="lastSaved" class="last-saved"> + {{ t('text', 'Last saved') }}: {{ lastSavedString }} + </p> <GuestNameDialog v-if="isPublic && !currentSession.userId" :session="currentSession" /> </SessionList> </div> @@ -323,6 +330,12 @@ export default { }, } }, + saveStatusClass() { + if (this.syncError && this.lastSavedString !== '') { + return 'save-error' + } + return this.dirtyStateIndicator ? 'saving-status' : 'saved-status' + }, }, watch: { displayed() { @@ -925,4 +938,39 @@ export default { #files-public-content { height: 100%; } + + .saved-status,.saving-status { + display: inline-flex; + padding: 0; + text-overflow: ellipsis; + color: var(--color-text-lighter); + position: relative; + background-color: white; + width: 38px !important; + height: 38px !important; + left: 25%; + z-index: 2; + top: 0px; + } + + .saved-status { + border: 2px solid #04AA6D; + border-radius: 50%; + } + + .saving-status { + border: 2px solid #f3f3f3; + border-top: 2px solid #3498db; + border-radius: 50%; + animation: spin 2s linear infinite; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + .last-saved { + padding: 6px; + } </style> diff --git a/src/components/SessionList.vue b/src/components/SessionList.vue index 28fd89782..99c03efd9 100644 --- a/src/components/SessionList.vue +++ b/src/components/SessionList.vue @@ -33,12 +33,13 @@ </button> <template #default> <div class="session-menu"> + <slot name="lastSaved" /> <ul> <slot /> <li v-for="session in participantsPopover" :key="session.id" :style="avatarStyle(session)"> - <AvatarWrapper :session="session" :size="32" /> + <AvatarWrapper :session="session" :size="36" /> <span class="session-label"> {{ session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest')) }} </span> @@ -144,17 +145,19 @@ export default { } .avatar-wrapper { - margin: 0 -8px 0 0; + margin: 0 -18px 0 0; z-index: 1; border-radius: 50%; overflow: hidden; box-sizing: content-box !important; + height: 36px; + width: 36px; } .icon-more, .icon-group, .icon-settings-dark { background-color: var(--color-background-dark); - width: 44px; - height: 44px; + width: 40px; + height: 40px; margin: 0 6px 0 0; } } @@ -170,8 +173,8 @@ export default { padding: 6px; .avatar-wrapper { - height: 32px; - width: 32px; + height: 36px; + width: 36px; margin-right: 6px; } |