From a1561dfe3a728f3b636852df05d36c1947883dd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 30 Jan 2019 11:16:29 +0100 Subject: [PATCH 1/2] Add property-defined actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/Properties/Properties.scss | 41 ++++++++++--------- css/icons.scss | 4 ++ img/up.svg | 3 ++ package-lock.json | 8 ++-- src/components/ContactDetails.vue | 4 +- .../ContactDetails/ContactDetailsProperty.vue | 12 +++++- .../Properties/PropertyDateTime.vue | 5 +-- .../Properties/PropertyMultipleText.vue | 5 +-- src/components/Properties/PropertySelect.vue | 5 +-- src/components/Properties/PropertyText.vue | 11 +---- src/main.js | 3 +- src/mixins/PropertyMixin.js | 11 +++++ src/models/rfcProps.js | 23 +++++++++-- src/services/checks/missingFN.js | 4 ++ src/store/contacts.js | 4 ++ 15 files changed, 95 insertions(+), 48 deletions(-) create mode 100644 img/up.svg diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 55ad6c999..a777054f8 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -26,8 +26,8 @@ $property-value-max-width: 250px; .property { @include generate-grid-span(1); position: relative; - padding-right: 44px; // delete button - // we need this to keep the alignment of the ext and delete button + padding-right: 44px; // actions menu / button + // we need this to keep the alignment of the ext and delete/action button // The flex grow will never go over those values. Therefore we can set // the max width and keep the right alignment max-width: $property-label-max-width + $property-value-max-width + 44px; @@ -37,8 +37,8 @@ $property-value-max-width: 250px; &--last { margin-bottom: $grid-height-unit; } - // no delete icon on addressbook selector - &--addressbooks &__delete { + // no delete/action icon on addressbook selector + &--addressbooks &__actions { display: none !important; } @@ -132,17 +132,15 @@ $property-value-max-width: 250px; &:hover, &:focus, &:active { - ~ .property__ext, - ~ .property__delete { + ~ .property__ext { opacity: .5; } } } } - // show ext & delete button on full row hover - &:hover &__ext, - &:hover &__delete { + // show ext button on full row hover + &:hover &__ext{ opacity: .5; } @@ -156,28 +154,31 @@ $property-value-max-width: 250px; &:focus, &:active { opacity: .7; - // still show the delete button for keyboard accessibility - ~ .property__delete { - opacity: .5; - } } } - // Delete property button - &__delete { - position: absolute; + // Delete property button + actions + &__actions { + position: absolute !important; top: 0; left: 100%; - width: $grid-height-unit; - height: $grid-height-unit; margin: 0; + margin-top: -3px; // align with line because of the 44x44px size border: 0; background-color: transparent; - opacity: 0; + z-index: 10; + // opacity applies on the single action OR + &:not(.action-item--multiple), + &.action-item--multiple .icon-more { + opacity: 0.5; + } &:hover, &:active, &:focus { - opacity: .7; + &:not(.action-item--multiple), + &.action-item--multiple .icon-more { + opacity: 0.7; + } } } } diff --git a/css/icons.scss b/css/icons.scss index 5549a1625..41cc93b39 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -35,3 +35,7 @@ .icon-eye-white { @include icon-color('eye', 'contacts', $color-white, 1); } + +.icon-up { + @include icon-color('up', 'contacts', $color-black, 1); +} diff --git a/img/up.svg b/img/up.svg new file mode 100644 index 000000000..fa3ecbb1d --- /dev/null +++ b/img/up.svg @@ -0,0 +1,3 @@ + + + diff --git a/package-lock.json b/package-lock.json index 597691c06..b77bc8777 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2042,7 +2042,7 @@ }, "cdav-library": { "version": "github:nextcloud/cdav-library#37cfc379b050deff8cb15407d5652098c350bff0", - "from": "github:nextcloud/cdav-library#37cfc379b050deff8cb15407d5652098c350bff0", + "from": "github:nextcloud/cdav-library", "requires": { "@babel/polyfill": "^7.2.5" } @@ -10242,9 +10242,9 @@ "dev": true }, "vue2-datepicker": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.8.0.tgz", - "integrity": "sha512-IQw/ai04WYGZC4P7toLhryBHhrqc1hCJ3ivgEayXfeDD1EjJnIhUMb4nqo2JvRG72nPqc9HJvHM/66K+AZnjUA==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.9.0.tgz", + "integrity": "sha512-THS5uCcWAPSU8OAqeie+Jie+7aw23WVbptfR5x1A8YFn4IizgWvttXoLpgwKmwwuJ59O36eoY0aeP/ugsK1RCQ==", "requires": { "fecha": "^2.3.3" } diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index ab55c2218..1bc9b3cf4 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -95,9 +95,11 @@
+ + :update-contact="debounceUpdateContact" @updatedcontact="debounceUpdateContact" /> -