diff options
| author | greta <gretadoci@gmail.com> | 2022-06-01 16:44:06 +0300 |
|---|---|---|
| committer | greta <gretadoci@gmail.com> | 2022-06-01 16:44:06 +0300 |
| commit | 8c52ed3be91d5652b9dc9494de617bc2264f8184 (patch) | |
| tree | fc5afc81e21ef85757d0eb6841f069e3d7b8c099 | |
| parent | 4feeee9d313ffe28728a75aae8576c1cf6cebfea (diff) | |
Migrate info icon to material design
Signed-off-by: greta <gretadoci@gmail.com>
| -rw-r--r-- | src/components/MailboxThread.vue | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue index e6886888a..0729c2d85 100644 --- a/src/components/MailboxThread.vue +++ b/src/components/MailboxThread.vue @@ -21,7 +21,11 @@ <div class="app-content-list-item"> <SectionTitle class="important" :name="t('mail', 'Important and unread')" /> <Popover trigger="hover focus"> - <button slot="trigger" :aria-label="t('mail', 'Important info')" class="button icon-info" /> + <Button slot="trigger" :aria-label="t('mail', 'Important info')" class="button"> + <template #icon> + <IconInfo :size="20" /> + </template> + </Button> <p class="important-info"> {{ importantInfo }} </p> @@ -67,12 +71,14 @@ <script> import AppContent from '@nextcloud/vue/dist/Components/AppContent' import AppContentList from '@nextcloud/vue/dist/Components/AppContentList' +import Button from '@nextcloud/vue/dist/Components/Button' import Popover from '@nextcloud/vue/dist/Components/Popover' import isMobile from '@nextcloud/vue/dist/Mixins/isMobile' import SectionTitle from './SectionTitle' import Vue from 'vue' import infiniteScroll from '../directives/infinite-scroll' +import IconInfo from 'vue-material-design-icons/InformationOutline' import logger from '../logger' import Mailbox from './Mailbox' import NoMessageSelected from './NoMessageSelected' @@ -93,6 +99,8 @@ export default { components: { AppContent, AppContentList, + Button, + IconInfo, Mailbox, NoMessageSelected, Popover, @@ -249,10 +257,8 @@ export default { .button { background-color: var(--color-main-background); - width: 44px; - height: 44px; - border: 0; - margin-bottom: 17px; + margin-bottom: 12px; + right: 2px; &:hover, &:focus { @@ -263,4 +269,7 @@ export default { #app-content-wrapper { display: flex; } +::v-deep .button-vue--vue-secondary { + box-shadow: none; +} </style> |