diff options
| author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2021-02-10 18:20:25 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-02-10 18:20:25 +0300 |
| commit | a32abd6f093dd3bbf3c1463252245702307383aa (patch) | |
| tree | 7bec79d129d996496954178e9c325a3edba0bfef | |
| parent | 3dcb6867e182ca884eb91acb2550101ccd55d39c (diff) | |
| parent | a7bc25ae66bc9bf795ef1981571cbcbb741ed78d (diff) | |
Merge pull request #5074 from nextcloud/improve-deck-card-ui
Improve deck card UI
| -rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue | 68 |
1 files changed, 65 insertions, 3 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue index debba6455..260482a5f 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue @@ -21,11 +21,21 @@ <template> <a - v-tooltip.bottom="deckLocation" - class="external" + class="deck-card" :href="link" + :aria-label="deckCardAriaLabel" target="_blank"> - <strong>{{ name }}</strong> + <div class="deck-card__lineone"> + <div class="icon-deck" /> + <div class="title"> + {{ name }} + </div> + </div> + <div class="deck-card__linetwo"> + <div> + {{ deckLocation }} + </div> + </div> </a> </template> @@ -73,6 +83,58 @@ export default { board: this.boardname, }) }, + deckCardAriaLabel() { + return t('spreed', 'Deck Card') + }, }, } </script> + +<style lang="scss" scoped> +.deck-card { + display: flex; + transition: box-shadow 0.1s ease-in-out; + box-shadow: 0 0 2px 0 var(--color-box-shadow); + border-radius: var(--border-radius-large); + font-size: 100%; + background-color: var(--color-main-background); + margin: 12px 0; + max-width: 300px; + padding: 8px 16px; + flex-direction: column; + white-space: nowrap; + &:hover, + &:focus{ + box-shadow: 0 0 5px 0 var(--color-box-shadow); + } + &__lineone { + height: 30px; + display: flex; + justify-content: flex-start; + align-items: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + .title { + margin-left: 8px; + } + } + &__linetwo { + height: 30px; + color: var(--color-text-lighter); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + // Dark theme + body.dark &, body.theme--dark & { + border: 2px solid var(--color-border); + } +} + +.icon-deck { + opacity: .8; +} + +</style> |