diff options
author | John Molakvoæ <skjnldsv@users.noreply.github.com> | 2020-08-21 12:19:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-08-21 12:19:54 +0200 |
commit | 42917255482b04f1b3d987055575e96a6fab844d (patch) | |
tree | 3b1ed499eb9ce6c189c48ae63ea9acd981cfbec1 | |
parent | 87615fb6549c884aa9891666748170aea27e89e5 (diff) | |
parent | ea399a48680c6024deff20c865bce7bb55083ba5 (diff) |
Merge pull request #1446 from nextcloud/design/form-simplifyy
-rw-r--r-- | css/Properties/Properties.scss | 29 | ||||
-rw-r--r-- | css/Properties/PropertyTitle.scss | 4 | ||||
-rw-r--r-- | src/components/Properties/PropertyDateTime.vue | 3 | ||||
-rw-r--r-- | src/components/Properties/PropertyMultipleText.vue | 3 | ||||
-rw-r--r-- | src/components/Properties/PropertySelect.vue | 3 | ||||
-rw-r--r-- | src/components/Properties/PropertyText.vue | 4 | ||||
-rw-r--r-- | src/components/Properties/PropertyTitle.vue | 13 | ||||
-rw-r--r-- | src/models/rfcProps.js | 45 |
8 files changed, 44 insertions, 60 deletions
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 8dbf2785..5a9aca79 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -135,6 +135,11 @@ $property-ext-padding-right: 8px; } } + // Hide delete buttons initially + .action-item.icon-delete { + opacity: 0; + } + // Property value within row, after label &__value { flex: 1 1; @@ -152,19 +157,25 @@ $property-ext-padding-right: 8px; input&--with-ext { // ext icon width + 8px padding padding-right: 24px; - &:hover, - &:focus, - &:active { - ~ .property__ext { - opacity: .5; - } + } + + // Show ext and delete icon permanently on focus + &:hover, + &:focus, + &:active { + ~ .property__ext, + ~ .action-item.icon-delete { + opacity: .5; } } } - // show ext button on full row hover - &:hover &__ext { - opacity: .5; + // Show ext and delete buttons on full row hover + &:hover { + .property__ext, + .action-item { + opacity: .5; + } } // External link (tel, mailto, http, ftp...) diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss index eed16496..b4a579d8 100644 --- a/css/Properties/PropertyTitle.scss +++ b/css/Properties/PropertyTitle.scss @@ -25,7 +25,6 @@ align-items: center; margin: 0; user-select: none; - opacity: .6; .property__title--right { display: flex; @@ -34,7 +33,4 @@ .property__title--icon { background-position: center right; } - .property__title--icon-details { - margin-left: 7px; - } } diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue index 342ab7f6..7acc7233 100644 --- a/src/components/Properties/PropertyDateTime.vue +++ b/src/components/Properties/PropertyDateTime.vue @@ -25,8 +25,7 @@ <!-- title if first element --> <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" - :readable-name="propModel.readableName" - :info="propModel.info" /> + :readable-name="propModel.readableName" /> <div class="property__row"> <!-- type selector --> diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue index af7bb430..d23d9434 100644 --- a/src/components/Properties/PropertyMultipleText.vue +++ b/src/components/Properties/PropertyMultipleText.vue @@ -25,8 +25,7 @@ <!-- title if first element --> <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" - :readable-name="propModel.readableName" - :info="propModel.info" /> + :readable-name="propModel.readableName" /> <div class="property__row"> <!-- type selector --> diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue index 321ec771..67b7a35c 100644 --- a/src/components/Properties/PropertySelect.vue +++ b/src/components/Properties/PropertySelect.vue @@ -25,8 +25,7 @@ <!-- title if first element --> <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" - :readable-name="propModel.readableName" - :info="propModel.info" /> + :readable-name="propModel.readableName" /> <div class="property__row"> <!-- if we do not support any type on our model but one is set anyway --> diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue index 8bb254fb..39554ef3 100644 --- a/src/components/Properties/PropertyText.vue +++ b/src/components/Properties/PropertyText.vue @@ -25,8 +25,7 @@ <!-- title if first element --> <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" - :readable-name="propModel.readableName" - :info="propModel.info" /> + :readable-name="propModel.readableName" /> <div class="property__row"> <!-- type selector --> @@ -73,6 +72,7 @@ :class="{'property__value--with-ext': haveExtHandler}" type="text" class="property__value" + :placeholder="type" @input="updateValue"> <!-- external link --> diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue index 4bda3363..fcaa731a 100644 --- a/src/components/Properties/PropertyTitle.vue +++ b/src/components/Properties/PropertyTitle.vue @@ -23,11 +23,9 @@ <template> <h3 class="property__title property__row"> <div :class="icon" class="property__label property__title--icon" /> - <span class="property__value property__title--right"> - <div>{{ readableName }}</div> - <!-- display tooltip with hint if available --> - <div v-if="info" v-tooltip.auto="info" class="property__title--icon-details icon-details" /> - </span> + <div class="property__value property__title--right"> + {{ readableName }} + </div> </h3> </template> @@ -46,11 +44,6 @@ export default { default: '', required: true, }, - info: { - type: String, - default: '', - required: false, - }, }, } </script> diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js index f23aff77..62f1d3c5 100644 --- a/src/models/rfcProps.js +++ b/src/models/rfcProps.js @@ -141,7 +141,6 @@ const properties = { }, anniversary: { readableName: t('contacts', 'Anniversary'), - info: t('contacts', 'The date of marriage, or equivalent, of this contact'), icon: 'icon-calendar-dark', force: 'date', // most ppl prefer date for birthdays, time is usually irrelevant defaultValue: { @@ -228,35 +227,27 @@ const properties = { value: '', type: ['facebook'], }, - info: t( - 'contacts', - 'The link of the profile. e.g. https://www.facebook.com/Nextclouders/ ' - ), options: [ - { id: 'FACEBOOK', name: 'Facebook' }, - { id: 'GITHUB', name: 'GitHub' }, - { id: 'GOOGLEPLUS', name: 'Google+' }, - { id: 'INSTAGRAM', name: 'Instagram' }, - { id: 'LINKEDIN', name: 'LinkedIn' }, - { id: 'PINTEREST', name: 'Pinterest' }, - { id: 'QZONE', name: 'QZone' }, - { id: 'TUMBLR', name: 'Tumblr' }, - { id: 'TWITTER', name: 'Twitter' }, - { id: 'WECHAT', name: 'WeChat' }, - { id: 'YOUTUBE', name: 'YouTube' }, - { id: 'MASTODON', name: 'Mastodon' }, - { id: 'DIASPORA', name: 'Diaspora' }, - { id: 'OTHER', name: 'other Social Media' }, + { id: 'FACEBOOK', name: 'Facebook', placeholder: 'https://facebook.com/…' }, + { id: 'GITHUB', name: 'GitHub', placeholder: 'https://github.com/…' }, + { id: 'GOOGLEPLUS', name: 'Google+', placeholder: 'https://plus.google.com/…' }, + { id: 'INSTAGRAM', name: 'Instagram', placeholder: 'https://instagram.com/…' }, + { id: 'LINKEDIN', name: 'LinkedIn', placeholder: 'https://linkedin.com/…' }, + { id: 'PINTEREST', name: 'Pinterest', placeholder: 'https://pinterest.com/…' }, + { id: 'QZONE', name: 'QZone', placeholder: 'https://qzone.com/…' }, + { id: 'TUMBLR', name: 'Tumblr', placeholder: 'https://tumblr.com/…' }, + { id: 'TWITTER', name: 'Twitter', placeholder: 'https://twitter.com/…' }, + { id: 'WECHAT', name: 'WeChat', placeholder: 'https://wechat.com/…' }, + { id: 'YOUTUBE', name: 'YouTube', placeholder: 'https://youtube.com/…' }, + { id: 'MASTODON', name: 'Mastodon', placeholder: 'https://mastodon.social/…' }, + { id: 'DIASPORA', name: 'Diaspora', placeholder: 'https://joindiaspora.com/…' }, + { id: 'OTHER', name: 'Other social media', placeholder: 'https://example.com/…' }, ], }, relationship: { - readableName: t('contacts', 'Relationship'), + readableName: t('contacts', 'Relationship to you'), force: 'select', icon: 'icon-group', - info: t( - 'contacts', - 'Specify a relationship between you and the entity represented by this vCard.' - ), options: [ { id: 'SPOUSE', name: t('contacts', 'Spouse') }, { id: 'CHILD', name: t('contacts', 'Child') }, @@ -274,12 +265,8 @@ const properties = { }, related: { multiple: true, - readableName: t('contacts', 'Related'), + readableName: t('contacts', 'Related contacts'), icon: 'icon-group', - info: t( - 'contacts', - 'Specify a relationship between another entity and the entity represented by this vCard.' - ), defaultValue: { value: [''], type: ['CONTACT'], |