diff options
author | Carl Schwan <carl@carlschwan.eu> | 2022-07-11 14:08:07 +0200 |
---|---|---|
committer | Carl Schwan <carl@carlschwan.eu> | 2022-07-11 14:08:07 +0200 |
commit | 114b25df0f144db936353451ce7872c7bd628d02 (patch) | |
tree | e07ebe6be7a67a91206159ba7990bcc7799b7a82 | |
parent | c0a43071ff1b5ff6541e409f933d4b913feccb90 (diff) |
Fix button style in composer
and cleanup a bit the code
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
-rw-r--r-- | src/components/Composer.vue | 504 |
1 files changed, 262 insertions, 242 deletions
diff --git a/src/components/Composer.vue b/src/components/Composer.vue index c1bd0db0..d10df3b8 100644 --- a/src/components/Composer.vue +++ b/src/components/Composer.vue @@ -44,7 +44,7 @@ </div> <div v-if="replyTo" class="reply-to"> <p> - <span>In reply to</span> + <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()" /> @@ -70,267 +70,54 @@ </div> </masonry> - <div class="options my-3"> - <div class="new-post-form__emoji-picker mr-3"> + <div class="options"> + <Button type="tertiary" + @click.prevent="clickImportInput" + :aria-label="t('social', 'Add attachment')" + v-tooltip="t('social', 'Add attachment')"> + <template #icon> + <FileUpload :size="22" decorative title="" /> + </template> + </Button> + + <div class="new-post-form__emoji-picker"> <EmojiPicker ref="emojiPicker" :search="search" :close-on-select="false" :container="containerElement" @select="insert"> - <Button type="ternary-no-background" :aria-haspopup="true" :aria-label="t('social', 'Add emoji')"> + <Button type="tertiary" + :aria-haspopup="true" + :aria-label="t('social', 'Add emoji')" + v-tooltip="t('social', 'Add emoji')"> <template #icon> - <EmoticonOutline :size="16" decorative title="" /> + <EmoticonOutline :size="22" decorative title="" /> </template> </Button> </EmojiPicker> </div> - <Button type="ternary-no-background" class="mr-3" :aria-label="t('social', 'Add attachment')" - @click.prevent="clickImportInput"> - <template #icon> - <FileUpload :size="16" decorative title="" /> - </template> - </Button> - - <div v-click-outside="hidePopoverMenu" class="mr-3"> - <Button type="ternary-no-background" :class="currentVisibilityIconClass" @click.prevent="togglePopoverMenu" /> - <div :class="{open: menuOpened}" class="popovermenu menu-center"> + <div v-click-outside="hidePopoverMenu" class="popovermenu-parent"> + <Button type="tertiary" + :class="currentVisibilityIconClass" + @click.prevent="togglePopoverMenu" + v-tooltip="t('social', 'Visibility')" /> + <div :class="{open: menuOpened}" class="popovermenu"> <popover-menu :menu="visibilityPopover" /> </div> </div> + <div class="emptySpace" /> <Button :value="currentVisibilityPostLabel" :disabled="post.length < 1 || post==='<br>'" type="primary" @click.prevent="createPost"> <template #icon> - <Send title="" :size="16" decorative /> + <Send title="" :size="22" decorative /> </template> - <template>{{ t('social', 'Post to followers') }}</template> + <template>{{ postTo }}</template> </button> </div> </form> </div> </template> -<style scoped lang="scss"> - - .new-post { - padding: 10px; - background-color: var(--color-main-background); - position: sticky; - top: 47px; - z-index: 100; - margin-bottom: 10px; - - &-form { - flex-grow: 1; - position: relative; - top: -10px; - margin-left: 39px; - &__emoji-picker { - z-index: 1; - } - } - } - .new-post-author { - padding: 5px; - display: flex; - flex-wrap: wrap; - - .post-author { - padding: 6px; - - .post-author-name { - font-weight: bold; - } - - .post-author-id { - opacity: .7; - } - } - } - - .reply-to { - background-image: url(../../img/reply.svg); - background-position: 5px 5px; - background-repeat: no-repeat; - margin-left: 39px; - margin-bottom: 20px; - overflow: hidden; - background-color: #fafafa; - border-radius: 3px; - padding: 5px; - padding-left: 30px; - - .icon-close { - display: inline-block; - float: right; - opacity: .7; - padding: 3px; - } - } - - .message { - width: 100%; - padding-right: 44px; - min-height: 70px; - min-width: 2px; - display: block; - } - - [contenteditable=true]:empty:before { - content: attr(placeholder); - display: block; /* For Firefox */ - opacity: .5; - } - - input[type=submit].inline { - width: 44px; - height: 44px; - margin: 0; - padding: 13px; - background-color: transparent; - border: none; - opacity: 0.3; - position: absolute; - bottom: 0; - right: 0; - } - - .options { - display: flex; - align-items: flex-end; - width: 100%; - } - - .emptySpace { - flex-grow:1; - } - - .popovermenu { - top: 55px; - } - - .attachment-picker-wrapper { - position: absolute; - right: 0; - top: 2; - } -</style> -<style> - /* Tribute-specific styles TODO: properly scope component css */ - .tribute-container { - position: absolute; - top: 0; - left: 0; - height: auto; - max-height: 300px; - max-width: 500px; - min-width: 200px; - overflow: auto; - display: block; - z-index: 999999; - border-radius: 4px; - box-shadow: 0 1px 3px var(--color-box-shadow); - } - - .tribute-container ul { - margin: 0; - margin-top: 2px; - padding: 0; - list-style: none; - background: var(--color-main-background); - border-radius: 4px; - background-clip: padding-box; - overflow: hidden; - } - - .tribute-container li { - color: var(--color-text); - padding: 5px 10px; - cursor: pointer; - font-size: 14px; - display: flex; - } - - .tribute-container li span { - display: block; - } - - .tribute-container li.highlight, - .tribute-container li:hover { - background: var(--color-primary); - color: var(--color-primary-text); - } - - .tribute-container li img { - width: 32px; - height: 32px; - border-radius: 50%; - overflow: hidden; - margin-right: 10px; - margin-left: -3px; - margin-top: 3px; - } - - .tribute-container li span { - font-weight: bold; - } - - .tribute-container li.no-match { - cursor: default; - } - - .tribute-container .menu-highlighted { - font-weight: bold; - } - - .tribute-container .account, - .tribute-container li.highlight .account, - .tribute-container li:hover .account { - font-weight: normal; - color: var(--color-text-light); - opacity: 0.5; - } - - .tribute-container li.highlight .account, - .tribute-container li:hover .account { - color: var(--color-primary-text) !important; - opacity: .6; - } - - .message .mention { - color: var(--color-primary-element); - background-color: var(--color-background-dark); - border-radius: 5px; - padding-top: 1px; - padding-left: 2px; - padding-bottom: 1px; - padding-right: 5px; - } - - .mention img { - width: 16px; - border-radius: 50%; - overflow: hidden; - margin-right: 3px; - vertical-align: middle; - margin-top: -1px; - } - - .hashtag { - text-decoration: underline; - } - .mt-3, .my-3 { - margin-top: 1rem; - } - .mb-3, .my-3 { - margin-bottom: 1rem; - } - .mr-3, .mx-3 { - margin-right: 1rem; - } - .ml-3, .mx-3 { - margin-left: 1rem; - } -</style> <script> import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline' @@ -359,10 +146,10 @@ export default { VueTribute, EmoticonOutline, Button, - Send + Send, }, directives: { - FocusOnCreate: FocusOnCreate + FocusOnCreate, }, mixins: [CurrentUserMixin], props: {}, @@ -470,6 +257,17 @@ export default { } }, computed: { + postTo() { + switch (this.type) { + case 'public': + case 'unlisted': + return t('social', 'Post') + case 'followers': + return t('social', 'Post to followers') + case 'direct': + return t('social', 'Post to mentioned users') + } + }, containerElement() { return document.querySelector('#content-vue') }, @@ -561,7 +359,13 @@ export default { longtext: t('social', 'Post to mentioned users only') } ] - } + }, + container() { + return '#content-vue' + }, + containerElement() { + return document.querySelector(this.container) + }, }, mounted() { this.$root.$on('composer-reply', (data) => { @@ -804,3 +608,219 @@ export default { } </script> + +<style scoped lang="scss"> + .new-post { + padding: 10px; + background-color: var(--color-main-background); + position: sticky; + top: 47px; + z-index: 100; + margin-bottom: 10px; + + &-form { + flex-grow: 1; + position: relative; + top: -10px; + margin-left: 39px; + &__emoji-picker { + z-index: 1; + } + } + } + + .new-post-author { + padding: 5px; + display: flex; + flex-wrap: wrap; + + .post-author { + padding: 6px; + + .post-author-name { + font-weight: bold; + } + + .post-author-id { + opacity: .7; + } + } + } + + .reply-to { + background-image: url(../../img/reply.svg); + background-position: 5px 5px; + background-repeat: no-repeat; + margin-left: 39px; + margin-bottom: 20px; + overflow: hidden; + background-color: #fafafa; + border-radius: 3px; + padding: 5px; + padding-left: 30px; + + .icon-close { + display: inline-block; + float: right; + opacity: .7; + padding: 3px; + } + } + + .message { + width: 100%; + padding-right: 44px; + min-height: 70px; + min-width: 2px; + display: block; + } + + [contenteditable=true]:empty:before { + content: attr(placeholder); + display: block; /* For Firefox */ + opacity: .5; + } + + input[type=submit].inline { + width: 44px; + height: 44px; + margin: 0; + padding: 13px; + background-color: transparent; + border: none; + opacity: 0.3; + position: absolute; + bottom: 0; + right: 0; + } + + .options { + display: flex; + align-items: flex-end; + width: 100%; + margin-top: 0.5rem; + margin-bottom: 1rem; + } + + .emptySpace { + flex-grow:1; + } + + .popovermenu-parent { + position: relative; + } + .popovermenu { + top: 55px; + } + + .attachment-picker-wrapper { + position: absolute; + right: 0; + top: 2; + } +</style> +<style> + /* Tribute-specific styles TODO: properly scope component css */ + .tribute-container { + position: absolute; + top: 0; + left: 0; + height: auto; + max-height: 300px; + max-width: 500px; + min-width: 200px; + overflow: auto; + display: block; + z-index: 999999; + border-radius: 4px; + box-shadow: 0 1px 3px var(--color-box-shadow); + } + + .tribute-container ul { + margin: 0; + margin-top: 2px; + padding: 0; + list-style: none; + background: var(--color-main-background); + border-radius: 4px; + background-clip: padding-box; + overflow: hidden; + } + + .tribute-container li { + color: var(--color-text); + padding: 5px 10px; + cursor: pointer; + font-size: 14px; + display: flex; + } + + .tribute-container li span { + display: block; + } + + .tribute-container li.highlight, + .tribute-container li:hover { + background: var(--color-primary); + color: var(--color-primary-text); + } + + .tribute-container li img { + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; + margin-right: 10px; + margin-left: -3px; + margin-top: 3px; + } + + .tribute-container li span { + font-weight: bold; + } + + .tribute-container li.no-match { + cursor: default; + } + + .tribute-container .menu-highlighted { + font-weight: bold; + } + + .tribute-container .account, + .tribute-container li.highlight .account, + .tribute-container li:hover .account { + font-weight: normal; + color: var(--color-text-light); + opacity: 0.5; + } + + .tribute-container li.highlight .account, + .tribute-container li:hover .account { + color: var(--color-primary-text) !important; + opacity: .6; + } + + .message .mention { + color: var(--color-primary-element); + background-color: var(--color-background-dark); + border-radius: 5px; + padding-top: 1px; + padding-left: 2px; + padding-bottom: 1px; + padding-right: 5px; + } + + .mention img { + width: 16px; + border-radius: 50%; + overflow: hidden; + margin-right: 3px; + vertical-align: middle; + margin-top: -1px; + } + + .hashtag { + text-decoration: underline; + } +</style> |