diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-09-25 10:41:57 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-09-25 14:53:28 +0200 |
commit | 6e4c413aef45f681805a587938096c45e049eae2 (patch) | |
tree | dcd15b1b721d27822f43d2ec4df21dad32e30779 | |
parent | 563b1868a5552e04e7a8b91fab14525429f107d3 (diff) |
Css pulse and warning on unsaved vcards
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | css/ContactDetails.scss | 6 | ||||
-rw-r--r-- | css/animations.scss | 16 | ||||
-rw-r--r-- | css/contacts.scss | 3 | ||||
-rw-r--r-- | src/components/ContactDetails.vue | 12 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsProperty.vue | 2 |
5 files changed, 35 insertions, 4 deletions
diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss index 93663279..baefdb01 100644 --- a/css/ContactDetails.scss +++ b/css/ContactDetails.scss @@ -109,6 +109,12 @@ position: relative; height: 44px; width: 44px; + border-radius: 22px; + &.menu-icon--pulse { + margin: 8px; + width: 16px; + height: 16px; + } } [class^='icon-'], [class*=' icon-'] { diff --git a/css/animations.scss b/css/animations.scss new file mode 100644 index 00000000..ab49c84e --- /dev/null +++ b/css/animations.scss @@ -0,0 +1,16 @@ +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(50, 50, 50, .4); + } + 70% { + box-shadow: 0 0 0 15px rgba(50, 50, 50, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(50, 50, 50, 0); + } +} + +[class*='--pulse '], +[class$='--pulse'] { + animation: pulse 1.5s infinite; +}
\ No newline at end of file diff --git a/css/contacts.scss b/css/contacts.scss index ee075b25..9d0ff38f 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -45,4 +45,5 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; @import 'ContactDetails'; @import 'Properties/Properties'; @import 'Properties/PropertyTitle'; -@import 'importScreen';
\ No newline at end of file +@import 'importScreen'; +@import 'animations';
\ No newline at end of file diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index 889dc973..1a371a7c 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -71,7 +71,7 @@ <!-- actions --> <div id="contact-header-actions"> - <div :class="{'icon-loading-small': loadingUpdate}" class="menu-icon" /> + <div v-tooltip.auto="warning" :class="{'icon-loading-small': loadingUpdate, 'icon-error-white menu-icon--pulse': warning}" class="menu-icon" /> <div class="menu-icon"> <div v-click-outside="closeMenu" class="icon-more-white" @click="toggleMenu" /> <div :class="{ 'open': openedMenu }" class="popovermenu"> @@ -163,6 +163,16 @@ export default { }, computed: { + + /** + * + */ + warning() { + if (!this.contact.dav) { + return t('contacts', 'This contact is not yet synced. Edit it to trigger a change.') + } + }, + /** * Contact color based on uid */ diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue index 3be03f70..ac8374aa 100644 --- a/src/components/ContactDetails/ContactDetailsProperty.vue +++ b/src/components/ContactDetails/ContactDetailsProperty.vue @@ -147,8 +147,6 @@ export default { } }) - console.log(matchingTypes) - // Sort by score, filtering out the null score and selecting the first match let matchingType = matchingTypes .sort((a, b) => b.score - a.score) |