summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJohn Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>2018-09-25 10:41:57 +0200
committerJohn Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>2018-09-25 14:53:28 +0200
commit6e4c413aef45f681805a587938096c45e049eae2 (patch)
treedcd15b1b721d27822f43d2ec4df21dad32e30779
parent563b1868a5552e04e7a8b91fab14525429f107d3 (diff)
Css pulse and warning on unsaved vcards
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r--css/ContactDetails.scss6
-rw-r--r--css/animations.scss16
-rw-r--r--css/contacts.scss3
-rw-r--r--src/components/ContactDetails.vue12
-rw-r--r--src/components/ContactDetails/ContactDetailsProperty.vue2
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)