mirror
/
social
kopia lustrzana https://github.com/nextcloud/social
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Add visibility on statuses 

Signed-off-by: Louis Chemineau <louis@chmn.me>
pull/1675/head
Louis Chemineau 2023-03-17 14:47:12 +01:00
rodzic f95a8c57c4
commit db03f9d100
8 zmienionych plików z 116 dodań i 120 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

36
package-lock.json wygenerowano
Wyświetl plik

@ -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",

1
package.json
Wyświetl plik

@ -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",

11
src/components/Composer/Composer.vue
Wyświetl plik

@ -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;

61
src/components/Composer/VisibilitySelect.vue
Wyświetl plik

@ -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>

88
src/components/TimelinePost.vue
Wyświetl plik

@ -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 {
color: var(--color-text-lighter);
}
}
.post-visibility {
flex-grow: 1;
opacity: 0.5;
background-position: right;
}
.post-timestamp {
text-align: right;
color: var(--color-text-lighter);
&:hover {
text-decoration: underline;
}
}
}
}
.post-author {
font-weight: bold;
}
.post-message :deep(a) {
overflow-wrap: anywhere;
.post-author-id {
opacity: .7;
}
.post-timestamp {
width: 120px;
text-align: right;
flex-grow: 2;
&: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>

35
src/components/VisibilitiesInfos.js 100644
Wyświetl plik

@ -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'),
},
]

2
src/main.js
Wyświetl plik

@ -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

2
src/views/Timeline.vue
Wyświetl plik

@ -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') }}