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 | |
parent | fa81480d3253f297c3d9cfdec6f0e4309f502fbe (diff) |
Add full addressbook display name title
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | css/Settings/SettingsAddressbook.scss | 65 | ||||
-rw-r--r-- | css/contacts.scss | 1 | ||||
-rw-r--r-- | src/components/Settings/SettingsAddressbook.vue | 47 |
3 files changed, 46 insertions, 67 deletions
diff --git a/css/Settings/SettingsAddressbook.scss b/css/Settings/SettingsAddressbook.scss deleted file mode 100644 index 52dd6bb7..00000000 --- a/css/Settings/SettingsAddressbook.scss +++ /dev/null @@ -1,65 +0,0 @@ -/** - * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> - * - * @author John Molakvoæ <skjnldsv@protonmail.com> - * @author Team Popcorn <teampopcornberlin@gmail.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * - */ - -.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; - } -} diff --git a/css/contacts.scss b/css/contacts.scss index d71474a3..111a7cf2 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -28,7 +28,6 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2; // components @import 'SettingsSection'; -@import 'Settings/SettingsAddressbook'; @import 'Settings/SettingsAddressbookShares'; @import 'Settings/SettingsAddressbookSharee'; @import 'ContactsListItem'; 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> |