diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2020-09-08 16:21:52 +0200 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2020-09-08 21:04:28 +0200 |
| commit | 02c9ff36b6351cd486221f5935904d156a0333cc (patch) | |
| tree | 350a65efac3d14adbc4d333f54e1d2d9ea19a36d /src | |
| parent | fa81480d3253f297c3d9cfdec6f0e4309f502fbe (diff) | |
Add full addressbook display name title
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Settings/SettingsAddressbook.vue | 47 |
1 files changed, 46 insertions, 1 deletions
diff --git a/src/components/Settings/SettingsAddressbook.vue b/src/components/Settings/SettingsAddressbook.vue index 2f75bb5b..ea288758 100644 --- a/src/components/Settings/SettingsAddressbook.vue +++ b/src/components/Settings/SettingsAddressbook.vue @@ -23,7 +23,7 @@ <template> <li :class="{'addressbook--disabled': !addressbook.enabled}" class="addressbook"> <!-- addressbook name --> - <span class="addressbook__name"> + <span class="addressbook__name" :title="addressbook.displayName"> {{ addressbook.displayName }} </span> @@ -278,3 +278,48 @@ export default { }, } </script> + +<style lang="scss" scoped> +.addressbook { + display: flex; + flex-wrap: wrap; + align-items: center; + white-space: nowrap; + text-overflow: ellipsis; + + > .addressbook__name { + + a, + + div { + // put actions at the end + margin-left: auto; + } + } + + &__name { + display: block; + flex: 0 1 auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + &__share, + &__menu .icon-more { + width: 44px; + height: 44px; + opacity: .5; + &:hover, + &:focus, + &:active { + opacity: .7; + } + } + &__share { + &--shared { + opacity: .7; + } + } + &--disabled &__name { + opacity: .5; + } +} +</style> |