diff options
author | Carl Schwan <carl@carlschwan.eu> | 2022-09-12 18:13:43 +0200 |
---|---|---|
committer | Carl Schwan <carl@carlschwan.eu> | 2022-09-12 18:13:43 +0200 |
commit | ee2fbc470ae53882305d84a8e8aa6cbe05eb9fcc (patch) | |
tree | 2c10b82be82118fcdb53267afce9ec0969fb79e9 /src | |
parent | d6ba6644030ba0c42773a23831daaaaf9824a298 (diff) |
Improve a bit usage of nc components
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Diffstat (limited to 'src')
-rw-r--r-- | src/App.vue | 14 | ||||
-rw-r--r-- | src/components/ActorAvatar.vue | 4 | ||||
-rw-r--r-- | src/components/Composer/Composer.vue | 46 | ||||
-rw-r--r-- | src/components/TimelinePost.vue | 6 |
4 files changed, 43 insertions, 27 deletions
diff --git a/src/App.vue b/src/App.vue index cd876fde..b9108f50 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,12 +1,14 @@ <template> <NcContent v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}"> <NcAppNavigation v-if="!serverData.public"> - <NcAppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to" - :title="item.title" :exact="true"> - <template #icon> - <component :is="item.icon" /> - </template> - </NcAppNavigationItem> + <template #list> + <NcAppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to" + :title="item.title" :exact="true"> + <template #icon> + <component :is="item.icon" /> + </template> + </NcAppNavigationItem> + </template> </NcAppNavigation> <NcAppContent> <div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper"> diff --git a/src/components/ActorAvatar.vue b/src/components/ActorAvatar.vue index 641bd105..153d00c3 100644 --- a/src/components/ActorAvatar.vue +++ b/src/components/ActorAvatar.vue @@ -22,8 +22,8 @@ <template> <NcAvatar v-if="actor.local" :size="size" :user="actor.preferredUsername" - :display-name="actor.account" :disable-tooltip="true" /> - <NcAvatar v-else :size="size" :url="avatarUrl" + :display-name="actor.account" :disable-tooltip="true" :showUserStatus="false" /> + <NcAvatar v-else :size="size" :url="avatarUrl" :showUserStatus="false" :disable-tooltip="true" /> </template> diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue index db07a13e..61344ff5 100644 --- a/src/components/Composer/Composer.vue +++ b/src/components/Composer/Composer.vue @@ -44,11 +44,17 @@ </div> </div> <div v-if="replyTo" class="reply-to"> - <p> + <p class="reply-info"> <span>{{ t('social', 'In reply to') }}</span> <actor-avatar :actor="replyTo.actor_info" :size="16" /> <strong>{{ replyTo.actor_info.account }}</strong> - <a class="icon-close" @click="closeReply()" /> + <NcButton type="tertiary" class="close-button" + @click="closeReply" + :aria-label="t('social', 'Close reply')"> + <template #icon> + <Close :size="20" /> + </template> + </NcButton> </p> <div class="reply-to-preview"> {{ replyTo.content }} @@ -75,27 +81,27 @@ </NcButton> <div class="new-post-form__emoji-picker"> - <EmojiPicker ref="emojiPicker" :search="search" :close-on-select="false" + <NcEmojiPicker ref="emojiPicker" :search="search" :close-on-select="false" :container="container" @select="insert"> - <Button type="tertiary" + <NcButton type="tertiary" :aria-haspopup="true" :aria-label="t('social', 'Add emoji')" v-tooltip="t('social', 'Add emoji')"> <template #icon> <EmoticonOutline :size="22" decorative title="" /> </template> - </Button> - </EmojiPicker> + </NcButton> + </NcEmojiPicker> </div> <div v-click-outside="hidePopoverMenu" class="popovermenu-parent"> - <Button type="tertiary" + <NcButton type="tertiary" :class="currentVisibilityIconClass" @click.prevent="togglePopoverMenu" v-tooltip="t('social', 'Visibility')" /> <div :class="{open: menuOpened}" class="popovermenu"> - <popover-menu :menu="visibilityPopover" /> + <NcPopoverMenu :menu="visibilityPopover" /> </div> </div> @@ -116,6 +122,7 @@ import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue' import Send from 'vue-material-design-icons/Send.vue' +import Close from 'vue-material-design-icons/Close.vue' import FileUpload from 'vue-material-design-icons/FileUpload.vue' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' @@ -135,13 +142,14 @@ export default { components: { NcPopoverMenu, NcAvatar, - NcActorAvatar, NcEmojiPicker, NcButton, + ActorAvatar, FileUpload, VueTribute, EmoticonOutline, Send, + Close, PreviewGrid, }, directives: { @@ -566,21 +574,27 @@ export default { .reply-to { background-image: url(../../../img/reply.svg); - background-position: 5px 5px; + background-position: 8px 12px; background-repeat: no-repeat; margin-left: 39px; margin-bottom: 20px; overflow: hidden; - background-color: #fafafa; - border-radius: 3px; + background-color: var(--color-background-hover); + border-radius: var(--border-radius-large); padding: 5px; padding-left: 30px; - .icon-close { - display: inline-block; - float: right; + .reply-info { + display: flex; + align-items: center; + } + .close-button { + margin-left: auto; opacity: .7; - padding: 3px; + min-width: 30px; + min-height: 30px; + height: 30px; + width: 30px !important; } } diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue index 9aa7c3c5..7a85388a 100644 --- a/src/components/TimelinePost.vue +++ b/src/components/TimelinePost.vue @@ -99,9 +99,9 @@ export default { components: { PostAttachment, MessageContent, - Actions, - ActionButton, - Button, + NcActions, + NcActionButton, + NcButton, Repeat, Reply, Heart, |