kopia lustrzana https://github.com/nextcloud/social
Add visibility on statuses
Signed-off-by: Louis Chemineau <louis@chmn.me>pull/1675/head
rodzic
f95a8c57c4
commit
db03f9d100
|
@ -29,7 +29,6 @@
|
|||
"tributejs": "^5.1.3",
|
||||
"twemoji": "12.0.1",
|
||||
"uuid": "^8.3.2",
|
||||
"v-tooltip": "^4.0.0-beta.0",
|
||||
"vue": "^2.7.10",
|
||||
"vue-click-outside": "^1.0.7",
|
||||
"vue-infinite-loading": "^2.4.4",
|
||||
|
@ -3643,15 +3642,6 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.6",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
|
||||
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@sideway/address": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
|
||||
|
@ -18485,18 +18475,6 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/v-tooltip": {
|
||||
"version": "4.0.0-beta.0",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-beta.0.tgz",
|
||||
"integrity": "sha512-I0X7ggjr8W0DsJG4qmtOl+rpHzvC1pa0DyjVC7sRzSG4cBDEhy97oYR1eo38RSblZ0nWE8Hhxcv/1JFF1k0Kig==",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.0",
|
||||
"vue-resize": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.6.10"
|
||||
}
|
||||
},
|
||||
"node_modules/v8-compile-cache": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
|
||||
|
@ -22366,11 +22344,6 @@
|
|||
"fastq": "^1.6.0"
|
||||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.11.6",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
|
||||
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
|
||||
},
|
||||
"@sideway/address": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
|
||||
|
@ -33597,15 +33570,6 @@
|
|||
"resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
|
||||
"integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w=="
|
||||
},
|
||||
"v-tooltip": {
|
||||
"version": "4.0.0-beta.0",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-beta.0.tgz",
|
||||
"integrity": "sha512-I0X7ggjr8W0DsJG4qmtOl+rpHzvC1pa0DyjVC7sRzSG4cBDEhy97oYR1eo38RSblZ0nWE8Hhxcv/1JFF1k0Kig==",
|
||||
"requires": {
|
||||
"@popperjs/core": "^2.11.0",
|
||||
"vue-resize": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
|
||||
|
|
|
@ -52,7 +52,6 @@
|
|||
"tributejs": "^5.1.3",
|
||||
"twemoji": "12.0.1",
|
||||
"uuid": "^8.3.2",
|
||||
"v-tooltip": "^4.0.0-beta.0",
|
||||
"vue": "^2.7.10",
|
||||
"vue-click-outside": "^1.0.7",
|
||||
"vue-infinite-loading": "^2.4.4",
|
||||
|
|
|
@ -80,7 +80,7 @@
|
|||
@deleted="deletePreview" />
|
||||
|
||||
<div class="options">
|
||||
<NcButton v-tooltip="t('social', 'Add attachment')"
|
||||
<NcButton :title="t('social', 'Add attachment')"
|
||||
type="tertiary"
|
||||
:aria-label="t('social', 'Add attachment')"
|
||||
@click.prevent="clickImportInput">
|
||||
|
@ -95,7 +95,7 @@
|
|||
:close-on-select="false"
|
||||
container="#content-vue"
|
||||
@select="insert">
|
||||
<NcButton v-tooltip="t('social', 'Add emoji')"
|
||||
<NcButton :title="t('social', 'Add emoji')"
|
||||
type="tertiary"
|
||||
:aria-haspopup="true"
|
||||
:aria-label="t('social', 'Add emoji')">
|
||||
|
@ -521,13 +521,6 @@ input[type=submit].inline {
|
|||
flex-grow:1;
|
||||
}
|
||||
|
||||
.popovermenu-parent {
|
||||
position: relative;
|
||||
}
|
||||
.popovermenu {
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.attachment-picker-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<template>
|
||||
<div v-click-outside="hidePopoverMenu" class="popovermenu-parent">
|
||||
<NcButton v-tooltip="t('social', 'Visibility')"
|
||||
<NcButton :title="t('social', 'Change visibility')"
|
||||
type="tertiary"
|
||||
:class="currentVisibilityIconClass"
|
||||
@click.prevent="togglePopoverMenu" />
|
||||
|
@ -35,6 +35,7 @@
|
|||
<script>
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||
import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
|
||||
import visibilitiesInfo from '../VisibilitiesInfos.js'
|
||||
import { translate } from '@nextcloud/l10n'
|
||||
|
||||
export default {
|
||||
|
@ -52,52 +53,23 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
menuOpened: false,
|
||||
test: false,
|
||||
typeToClass: {
|
||||
public: 'icon-link',
|
||||
followers: 'icon-contacts-dark',
|
||||
direct: 'icon-external',
|
||||
unlisted: 'icon-password',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/** @return {string} */
|
||||
currentVisibilityIconClass() {
|
||||
return this.typeToClass[this.visibility]
|
||||
return visibilitiesInfo.find(({ id }) => this.visibility === id).icon
|
||||
},
|
||||
/** @return {Array} */
|
||||
|
||||
/** @return {object[]} */
|
||||
visibilityPopover() {
|
||||
return [
|
||||
{
|
||||
action: () => this.switchType('public'),
|
||||
icon: this.typeToClass.public,
|
||||
active: this.visibility === 'public',
|
||||
text: t('social', 'Public'),
|
||||
longtext: t('social', 'Post to public timelines'),
|
||||
},
|
||||
{
|
||||
action: () => this.switchType('unlisted'),
|
||||
icon: this.typeToClass.unlisted,
|
||||
active: this.visibility === 'unlisted',
|
||||
text: t('social', 'Unlisted'),
|
||||
longtext: t('social', 'Do not post to public timelines'),
|
||||
},
|
||||
{
|
||||
action: () => this.switchType('followers'),
|
||||
icon: this.typeToClass.followers,
|
||||
active: this.visibility === 'followers',
|
||||
text: t('social', 'Followers'),
|
||||
longtext: t('social', 'Post to followers only'),
|
||||
},
|
||||
{
|
||||
action: () => this.switchType('direct'),
|
||||
icon: this.typeToClass.direct,
|
||||
active: this.visibility === 'direct',
|
||||
text: t('social', 'Direct'),
|
||||
longtext: t('social', 'Post to mentioned users only'),
|
||||
},
|
||||
]
|
||||
return visibilitiesInfo.map(visibilityInfo => {
|
||||
return {
|
||||
...visibilityInfo,
|
||||
action: () => this.switchType(visibilityInfo.id),
|
||||
active: this.visibility === visibilityInfo.id,
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
@ -119,3 +91,12 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.popovermenu-parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popovermenu {
|
||||
top: 55px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -14,6 +14,9 @@
|
|||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="post-visibility"
|
||||
:class="{ [visibility.icon]: true }"
|
||||
:title="visibility.text" />
|
||||
<a :data-timestamp="timestamp"
|
||||
class="post-timestamp live-relative-timestamp"
|
||||
:title="formattedDate"
|
||||
|
@ -30,14 +33,14 @@
|
|||
<PostAttachment :attachments="item.media_attachments || []" />
|
||||
</div>
|
||||
<div v-if="$route && $route.params.type !== 'notifications' && !serverData.public" class="post-actions">
|
||||
<NcButton v-tooltip="t('social', 'Reply')"
|
||||
<NcButton :title="t('social', 'Reply')"
|
||||
type="tertiary-no-background"
|
||||
@click="reply">
|
||||
<template #icon>
|
||||
<Reply :size="20" />
|
||||
</template>
|
||||
</NcButton>
|
||||
<NcButton v-tooltip="t('social', 'Boost')"
|
||||
<NcButton :title="t('social', 'Boost')"
|
||||
type="tertiary-no-background"
|
||||
@click="boost">
|
||||
<template #icon>
|
||||
|
@ -45,7 +48,7 @@
|
|||
</template>
|
||||
</NcButton>
|
||||
<NcButton v-if="!isLiked"
|
||||
v-tooltip="t('social', 'Like')"
|
||||
:title="t('social', 'Like')"
|
||||
type="tertiary-no-background"
|
||||
@click="like">
|
||||
<template #icon>
|
||||
|
@ -53,7 +56,7 @@
|
|||
</template>
|
||||
</NcButton>
|
||||
<NcButton v-if="isLiked"
|
||||
v-tooltip="t('social', 'Undo Like')"
|
||||
:title="t('social', 'Undo Like')"
|
||||
type="tertiary-no-background"
|
||||
@click="like">
|
||||
<template #icon>
|
||||
|
@ -88,6 +91,7 @@ import HeartOutline from 'vue-material-design-icons/HeartOutline.vue'
|
|||
import logger from '../services/logger.js'
|
||||
import moment from '@nextcloud/moment'
|
||||
import MessageContent from './MessageContent.js'
|
||||
import visibilitiesInfo from './VisibilitiesInfos.js'
|
||||
|
||||
export default {
|
||||
name: 'TimelinePost',
|
||||
|
@ -173,6 +177,10 @@ export default {
|
|||
isNotification() {
|
||||
return this.item.type !== undefined
|
||||
},
|
||||
/** @return {object} */
|
||||
visibility() {
|
||||
return visibilitiesInfo.find(({ id }) => this.item.visibility === id)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
@ -240,6 +248,7 @@ export default {
|
|||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import '@nextcloud/vue-richtext/dist/style.css';
|
||||
|
||||
.post-content {
|
||||
padding: 4px 4px 4px 8px;
|
||||
font-size: 15px;
|
||||
|
@ -254,20 +263,51 @@ export default {
|
|||
border-radius: 8px;
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
|
||||
.post-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.post-author-wrapper {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.post-author {
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.post-author-id {
|
||||
opacity: .7;
|
||||
color: var(--color-text-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
.post-visibility {
|
||||
flex-grow: 1;
|
||||
opacity: 0.5;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
.post-timestamp {
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
flex-grow: 2;
|
||||
color: var(--color-text-lighter);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-message :deep(a) {
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
|
@ -281,6 +321,7 @@ export default {
|
|||
height: 34px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-reply,
|
||||
.icon-boost,
|
||||
.icon-boosted,
|
||||
|
@ -295,24 +336,9 @@ export default {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-boosted {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.post-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.post-timestamp {
|
||||
opacity: .7;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.post-message a {
|
||||
text-decoration: underline;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
import { translate as t } from '@nextcloud/l10n'
|
||||
|
||||
const visibilityToClass = {
|
||||
public: 'icon-link',
|
||||
followers: 'icon-contacts-dark',
|
||||
direct: 'icon-external',
|
||||
unlisted: 'icon-password',
|
||||
}
|
||||
|
||||
export default [
|
||||
{
|
||||
id: 'public',
|
||||
icon: visibilityToClass.public,
|
||||
text: t('social', 'Public'),
|
||||
longtext: t('social', 'Post to public timelines'),
|
||||
},
|
||||
{
|
||||
id: 'unlisted',
|
||||
icon: visibilityToClass.unlisted,
|
||||
text: t('social', 'Unlisted'),
|
||||
longtext: t('social', 'Do not post to public timelines'),
|
||||
},
|
||||
{
|
||||
id: 'followers',
|
||||
icon: visibilityToClass.followers,
|
||||
text: t('social', 'Followers'),
|
||||
longtext: t('social', 'Post to followers only'),
|
||||
},
|
||||
{
|
||||
id: 'direct',
|
||||
icon: visibilityToClass.direct,
|
||||
text: t('social', 'Direct'),
|
||||
longtext: t('social', 'Post to mentioned users only'),
|
||||
},
|
||||
]
|
|
@ -28,7 +28,6 @@ import store from './store/index.js'
|
|||
import router from './router.js'
|
||||
import vuetwemoji from 'vue-twemoji'
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
|
||||
import VueMasonry from 'vue-masonry-css'
|
||||
|
||||
sync(store, router)
|
||||
|
@ -48,7 +47,6 @@ Vue.prototype.OC = OC
|
|||
Vue.prototype.OCA = OCA
|
||||
|
||||
Vue.directive('ClickOutside', ClickOutside)
|
||||
Vue.directive('Tooltip', VTooltip)
|
||||
Vue.use(vuetwemoji, {
|
||||
baseUrl: OC.linkTo('social', 'img/'), // can set to local folder of emojis. default: https://twemoji.maxcdn.com/
|
||||
extension: '.svg', // .svg, .png
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="social__wrapper">
|
||||
<transition name="slide-fade">
|
||||
<div v-if="true || showInfo" class="social__welcome">
|
||||
<div v-if="showInfo" class="social__welcome">
|
||||
<a class="close icon-close" href="#" @click="hideInfo()">
|
||||
<span class="hidden-visually">
|
||||
{{ t('social', 'Close') }}
|
||||
|
|
Ładowanie…
Reference in New Issue