diff options
author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2020-01-08 21:02:25 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-01-08 21:02:25 +0300 |
commit | 824f85b6d22b3dd108d738eb431e70758d20708a (patch) | |
tree | ed95e222f9ef4b71980bc6509e323eedffa459b5 /src | |
parent | 51a2b74853c862beed77e22ec0808a1a542a7de9 (diff) | |
parent | e10c0f89720b40e260309b6af47073bfd3c21ecd (diff) |
Merge pull request #2689 from nextcloud/fix/design/ConversationIcon
Cleanup: fixes on the ConversationIcon design
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ConversationIcon.vue | 22 | ||||
-rw-r--r-- | src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue | 31 |
2 files changed, 31 insertions, 22 deletions
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue index 426d6ce40..bff76a7d8 100644 --- a/src/components/ConversationIcon.vue +++ b/src/components/ConversationIcon.vue @@ -90,34 +90,36 @@ export default { </script> <style lang="scss" scoped> +$icon-size: 44px; + .conversation-icon { - width: 44px; - height: 44px; + width: $icon-size; + height: $icon-size; .icon:not(.icon-favorite) { - width: 44px; - height: 44px; - line-height: 44px; - font-size: 24px; + width: $icon-size; + height: $icon-size; + line-height: $icon-size; + font-size: $icon-size / 2; background-color: var(--color-background-darker); &.icon-changelog { - background-size: 44px; + background-size: $icon-size; } &.icon-public, &.icon-contacts, &.icon-password, &.icon-file, &.icon-mail { - background-size: 20px; + background-size: $icon-size / 2; } } .favorite-mark { position: absolute; - top: 8px; - left: calc(44px - 8px); + top: 6px; + left: $icon-size - 6px; line-height: 100%; .icon-favorite { diff --git a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue b/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue index 83d413ed2..bce1a52d5 100644 --- a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue +++ b/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue @@ -142,27 +142,32 @@ export default { // AppContentListItem .acli { position: relative; - padding: 10px 2px 10px 8px; display: flex; - justify-content: space-between; align-items: center; flex: 0 0 auto; + justify-content: flex-start; + padding: 10px 2px 10px 8px; cursor: pointer; + &__content { width: 240px; + // same as the acli left padding for + // nice visual balance around the avatar margin-left: 8px; + &__line-one { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; white-space: nowrap; + &__title { - flex-grow: 1; overflow: hidden; - text-overflow: ellipsis; - color: var(--color-main-text); + flex-grow: 1; padding-right: 4px; cursor: pointer; + text-overflow: ellipsis; + color: var(--color-main-text); } &__actions { margin: -5px 0 -3px 0; @@ -173,19 +178,21 @@ export default { } } } + &__line-two { display: flex; - justify-content: space-between; align-items: flex-start; + justify-content: space-between; white-space: nowrap; + &__subtitle { - flex-grow: 1; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--color-text-lighter); + flex-grow: 1; padding-right: 4px; cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--color-text-lighter); } &__counter { margin-right: 12px; @@ -196,7 +203,7 @@ export default { .active { background-color: var(--color-primary-light); - box-shadow: inset 4px 0 var(--color-primary) + box-shadow: inset 4px 0 var(--color-primary); } </style> |