diff options
| author | Jan C. Borchardt <hey@jancborchardt.net> | 2021-02-10 12:49:24 +0300 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2021-04-16 17:44:38 +0300 |
| commit | 0cbf59cb09f5258cd6a552e3d46adcec3285f93e (patch) | |
| tree | 8428d76052413027e62a0a75d33b819fdcaba0c5 /src | |
| parent | 0015be0f8ebb63069476482e376e41bf0f33c7c1 (diff) | |
Improve design of idle/reconnect message
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/EditorWrapper.vue | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 78701bff2..3dd9e97d3 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -23,13 +23,13 @@ <template> <div id="editor-container"> <div v-if="currentSession && active" class="document-status"> - <p v-if="idle" class="msg icon-info"> + <p v-if="idle" class="msg"> {{ t('text', 'Document idle for {timeout} minutes, click to continue editing', { timeout: IDLE_TIMEOUT }) }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a> </p> <p v-else-if="hasSyncCollission" class="msg icon-error"> {{ t('text', 'The document has been changed outside of the editor. The changes cannot be applied.') }} </p> - <p v-else-if="hasConnectionIssue" class="msg icon-info"> + <p v-else-if="hasConnectionIssue" class="msg"> {{ t('text', 'File could not be loaded. Please check your internet connection.') }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a> </p> </div> @@ -564,13 +564,20 @@ export default { z-index: 1010; position: relative; background-color: var(--color-main-background); - } - .document-status .msg { - padding: 12px; - padding-left: 30px; - border-bottom: 1px solid var(--color-border); - background-position: 8px center; + .msg { + padding: 12px; + background-position: 8px center; + color: var(--color-text-maxcontrast); + + &.icon-error { + padding-left: 30px; + } + + .button { + margin-left: 8px; + } + } } .save-status { |