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

Update nc vue components to v7 

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
pull/1469/head
Carl Schwan 2022-09-12 15:42:18 +02:00
rodzic d129f65f37
commit 184de87c86
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: C3AA6B3A5EFA7AC5
22 zmienionych plików z 10605 dodań i 16395 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
babel.config.js 100644
Wyświetl plik

@ -0,0 +1,3 @@
const babelConfig = require('@nextcloud/babel-config')
module.exports = babelConfig

4
lib/Db/CoreRequestBuilder.php
Wyświetl plik

@ -584,7 +584,7 @@ class CoreRequestBuilder {
protected function exprLimitToDBField( protected function exprLimitToDBField(
IQueryBuilder &$qb, string $field, string $value, bool $eq = true, bool $cs = true, IQueryBuilder &$qb, string $field, string $value, bool $eq = true, bool $cs = true,
string $alias = '' string $alias = ''
): IQueryFunction { ): string {
$expr = $qb->expr(); $expr = $qb->expr();
$pf = ''; $pf = '';
@ -618,7 +618,7 @@ class CoreRequestBuilder {
protected function exprLimitToDBFieldInt( protected function exprLimitToDBFieldInt(
IQueryBuilder &$qb, string $field, int $value, string $alias = '' IQueryBuilder &$qb, string $field, int $value, string $alias = ''
): IQueryFunction { ): string {
$expr = $qb->expr(); $expr = $qb->expr();
$pf = ''; $pf = '';

4
lib/Tools/Db/ExtendedQueryBuilder.php
Wyświetl plik

@ -174,7 +174,7 @@ class ExtendedQueryBuilder extends QueryBuilder implements IExtendedQueryBuilder
public function exprLimitToDBField( public function exprLimitToDBField(
string $field, string $value, bool $eq = true, bool $cs = true, string $alias = '' string $field, string $value, bool $eq = true, bool $cs = true, string $alias = ''
): IQueryFunction { ): string {
$expr = $this->expr(); $expr = $this->expr();
$pf = ''; $pf = '';
@ -295,7 +295,7 @@ class ExtendedQueryBuilder extends QueryBuilder implements IExtendedQueryBuilder
} }
public function exprLimitToDBFieldInt(string $field, int $value, string $alias = '', bool $eq = true public function exprLimitToDBFieldInt(string $field, int $value, string $alias = '', bool $eq = true
): IQueryFunction { ): string {
$expr = $this->expr(); $expr = $this->expr();
$pf = ''; $pf = '';

4
lib/Tools/IExtendedQueryBuilder.php
Wyświetl plik

@ -134,7 +134,7 @@ interface IExtendedQueryBuilder extends IQueryBuilder {
public function exprLimitToDBField( public function exprLimitToDBField(
string $field, string $value, bool $eq = true, bool $cs = true, string $alias = '' string $field, string $value, bool $eq = true, bool $cs = true, string $alias = ''
): IQueryFunction; ): string;
public function limitToDBFieldArray( public function limitToDBFieldArray(
string $field, array $values, bool $cs = true, string $alias = '' string $field, array $values, bool $cs = true, string $alias = ''
@ -191,7 +191,7 @@ interface IExtendedQueryBuilder extends IQueryBuilder {
* @param int $value * @param int $value
* @param string $alias * @param string $alias
*/ */
public function exprLimitToDBFieldInt(string $field, int $value, string $alias = ''): IQueryFunction; public function exprLimitToDBFieldInt(string $field, int $value, string $alias = ''): string;
/** /**

26526
package-lock.json wygenerowano
Wyświetl plik

Plik diff jest za duży Load Diff

71
package.json
Wyświetl plik

@ -17,9 +17,9 @@
"license": "agpl", "license": "agpl",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "NODE_ENV=development webpack --config webpack.dev.js", "dev": "NODE_ENV=development webpack --config webpack.common.js",
"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js", "watch": "NODE_ENV=development webpack --progress --watch --config webpack.common.js",
"build": "NODE_ENV=production webpack --progress --config webpack.prod.js", "build": "NODE_ENV=production webpack --progress --config webpack.common.js",
"lint": "eslint --ext .js,.vue src", "lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix", "lint:fix": "eslint --ext .js,.vue src --fix",
"test": "jest", "test": "jest",
@ -28,26 +28,27 @@
"cypress:gui": "cypress open" "cypress:gui": "cypress open"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@nextcloud/auth": "^2.0.0",
"@nextcloud/auth": "^1.3.0", "@nextcloud/axios": "^2.0.0",
"@nextcloud/axios": "^1.9.0", "@nextcloud/initial-state": "^2.0.0",
"@nextcloud/initial-state": "^1.2.1",
"@nextcloud/logger": "^2.2.1", "@nextcloud/logger": "^2.2.1",
"@nextcloud/moment": "^1.1.1", "@nextcloud/moment": "^1.2.1",
"@nextcloud/router": "^1.2.0", "@nextcloud/router": "^1.2.0",
"@nextcloud/vue": "^5.3.1", "@nextcloud/stylelint-config": "^2.2.0",
"@nextcloud/vue": "^7.0.0-beta.2",
"he": "^1.2.0", "he": "^1.2.0",
"linkifyjs": "^2.1.8", "linkifyjs": "^2.1.8",
"tributejs": "^3.7.3", "tributejs": "^3.7.3",
"twemoji": "12.0.1", "twemoji": "12.0.1",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"v-tooltip": "^3.0.0-alpha.21", "v-tooltip": "^3.0.0-alpha.21",
"vue": "^2.6.14", "vue": "^2.7.10",
"vue-click-outside": "^1.0.7", "vue-click-outside": "^1.0.7",
"vue-contenteditable-directive": "^1.2.0", "vue-contenteditable-directive": "^1.2.0",
"vue-infinite-loading": "^2.4.4", "vue-infinite-loading": "^2.4.4",
"vue-material-design-icons": "^5.0.0", "vue-material-design-icons": "^5.0.0",
"vue-router": "^3.5.3", "vue-router": "^3.5.3",
"vue-template-compiler": "^2.7.10",
"vue-tribute": "^1.0.6", "vue-tribute": "^1.0.6",
"vue-twemoji": "^1.0.1", "vue-twemoji": "^1.0.1",
"vuetrend": "^0.3.4", "vuetrend": "^0.3.4",
@ -55,55 +56,23 @@
"vuex-router-sync": "^5.0.0" "vuex-router-sync": "^5.0.0"
}, },
"browserslist": [ "browserslist": [
"last 2 versions", "extends @nextcloud/browserslist-config"
"not ie <= 11"
], ],
"browser": {
"fs": false
},
"engines": { "engines": {
"node": "^14.0.0", "node": "^16.0.0",
"npm": "^7.0.0" "npm": "^7.0.0 || ^8.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.9", "@nextcloud/babel-config": "^1.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.18.10",
"@nextcloud/browserslist-config": "^2.2.0", "@nextcloud/browserslist-config": "^2.2.0",
"@nextcloud/eslint-config": "^8.0.0", "@nextcloud/eslint-config": "^8.0.0",
"@nextcloud/eslint-plugin": "^1.5.0", "@nextcloud/webpack-vue-config": "^5.3.0",
"@vue/test-utils": "^1.1.3",
"acorn": "^8.1.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^28.1.2",
"babel-loader": "^8.2.5",
"css-loader": "^5.2.7",
"cypress": "^9.6.1",
"cypress-image-snapshot": "^4.0.1",
"cypress-testing-library": "^4.0.0",
"eslint": "^6.8.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^6.2.2",
"file-loader": "^6.2.0",
"jest": "^26.6.3", "jest": "^26.6.3",
"jest-serializer-vue": "^2.0.2", "jest-serializer-vue": "^2.0.2",
"node-sass": "^5.0.0", "prettier-eslint": "^14.0.3"
"prettier-eslint": "^14.0.3",
"raw-loader": "^4.0.2",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"stylelint": "^8.4.0",
"stylelint-config-recommended-scss": "^3.3.0",
"stylelint-webpack-plugin": "^0.10.5",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2",
"webpack-merge": "^5.8.0"
}, },
"jest": { "jest": {
"moduleFileExtensions": [ "moduleFileExtensions": [

104
src/App.vue
Wyświetl plik

@ -1,14 +1,14 @@
<template> <template>
<Content v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}"> <NcContent v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}">
<AppNavigation v-if="!serverData.public"> <NcAppNavigation v-if="!serverData.public">
<AppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to" <NcAppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to"
:title="item.title" :exact="true"> :title="item.title" :exact="true">
<template #icon> <template #icon>
<component :is="item.icon" /> <component :is="item.icon" />
</template> </template>
</AppNavigationItem> </NcAppNavigationItem>
</AppNavigation> </NcAppNavigation>
<AppContent> <NcAppContent>
<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper"> <div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper">
<h3 v-if="!serverData.checks.checks.wellknown"> <h3 v-if="!serverData.checks.checks.wellknown">
{{ t('social', '.well-known/webfinger isn\'t properly set up!') }} {{ t('social', '.well-known/webfinger isn\'t properly set up!') }}
@ -24,10 +24,10 @@
</div> </div>
<Search v-if="searchTerm !== ''" :term="searchTerm" /> <Search v-if="searchTerm !== ''" :term="searchTerm" />
<router-view v-if="searchTerm === ''" :key="$route.fullPath" /> <router-view v-if="searchTerm === ''" :key="$route.fullPath" />
</AppContent> </NcAppContent>
</Content> </NcContent>
<Content v-else app-name="social"> <NcContent v-else app-name="social">
<AppContent v-if="serverData.isAdmin" class="setup"> <NcAppContent v-if="serverData.isAdmin" class="setup">
<h2>{{ t('social', 'Social app setup') }}</h2> <h2>{{ t('social', 'Social app setup') }}</h2>
<p>{{ t('social', 'ActivityPub requires a fixed URL to make entries unique. Note that this cannot be changed later without resetting the Social app.') }}</p> <p>{{ t('social', 'ActivityPub requires a fixed URL to make entries unique. Note that this cannot be changed later without resetting the Social app.') }}</p>
<form @submit.prevent="setCloudAddress"> <form @submit.prevent="setCloudAddress">
@ -55,47 +55,18 @@
</p> </p>
</template> </template>
</form> </form>
</AppContent> </NcAppContent>
<AppContent v-else class="setup"> <NcAppContent v-else class="setup">
<p>{{ t('social', 'The Social app needs to be set up by the server administrator.') }}</p> <p>{{ t('social', 'The Social app needs to be set up by the server administrator.') }}</p>
</AppContent> </NcAppContent>
</Content> </NcContent>
</template> </template>
<style scoped>
#app-content-vue .social__wrapper {
padding: 15px;
max-width: 630px;
margin: auto;
}
.setup {
margin: 0 auto !important;
padding: 15px;
max-width: 630px;
}
.setup input[type=url] {
width: 300px;
max-width: 100%;
}
#social-spacer a:hover,
#social-spacer a:focus {
border: none !important;
}
a.external_link {
text-decoration: underline;
}
</style>
<script> <script>
import Content from '@nextcloud/vue/dist/Components/Content' import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
import AppContent from '@nextcloud/vue/dist/Components/AppContent' import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation' import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem' import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import Home from 'vue-material-design-icons/Home.vue' import Home from 'vue-material-design-icons/Home.vue'
import CommentAccount from 'vue-material-design-icons/CommentAccount.vue' import CommentAccount from 'vue-material-design-icons/CommentAccount.vue'
@ -107,17 +78,17 @@ import Earth from 'vue-material-design-icons/Earth.vue'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import Search from './components/Search.vue' import Search from './components/Search.vue'
import currentuserMixin from './mixins/currentUserMixin' import currentuserMixin from './mixins/currentUserMixin.js'
import { loadState } from '@nextcloud/initial-state' import { loadState } from '@nextcloud/initial-state'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
export default { export default {
name: 'App', name: 'App',
components: { components: {
Content, NcContent,
AppContent, NcAppContent,
AppNavigation, NcAppNavigation,
AppNavigationItem, NcAppNavigationItem,
Search, Search,
}, },
mixins: [currentuserMixin], mixins: [currentuserMixin],
@ -258,3 +229,32 @@ export default {
} }
} }
</script> </script>
<style scoped>
#app-content-vue .social__wrapper {
padding: 15px;
max-width: 630px;
margin: auto;
}
.setup {
margin: 0 auto !important;
padding: 15px;
max-width: 630px;
}
.setup input[type=url] {
width: 300px;
max-width: 100%;
}
#social-spacer a:hover,
#social-spacer a:focus {
border: none !important;
}
a.external_link {
text-decoration: underline;
}
</style>

8
src/components/ActorAvatar.vue
Wyświetl plik

@ -21,20 +21,20 @@
--> -->
<template> <template>
<avatar v-if="actor.local" :size="size" :user="actor.preferredUsername" <NcAvatar v-if="actor.local" :size="size" :user="actor.preferredUsername"
:display-name="actor.account" :disable-tooltip="true" /> :display-name="actor.account" :disable-tooltip="true" />
<avatar v-else :size="size" :url="avatarUrl" <NcAvatar v-else :size="size" :url="avatarUrl"
:disable-tooltip="true" /> :disable-tooltip="true" />
</template> </template>
<script> <script>
import Avatar from '@nextcloud/vue/dist/Components/Avatar' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
export default { export default {
name: 'ActorAvatar', name: 'ActorAvatar',
components: { components: {
Avatar NcAvatar
}, },
props: { props: {
actor: { type: Object, default: () => {} }, actor: { type: Object, default: () => {} },

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

@ -32,7 +32,7 @@
aria-hidden="true" aria-hidden="true"
class="hidden-visually"> class="hidden-visually">
<div class="new-post-author"> <div class="new-post-author">
<avatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true" <NcAvatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
:size="32" /> :size="32" />
<div class="post-author"> <div class="post-author">
<span class="post-author-name"> <span class="post-author-name">
@ -65,14 +65,14 @@
<PreviewGrid :uploading="false" :uploadProgress="0.4" :miniatures="previewUrls" /> <PreviewGrid :uploading="false" :uploadProgress="0.4" :miniatures="previewUrls" />
<div class="options"> <div class="options">
<Button type="tertiary" <NcButton type="tertiary"
@click.prevent="clickImportInput" @click.prevent="clickImportInput"
:aria-label="t('social', 'Add attachment')" :aria-label="t('social', 'Add attachment')"
v-tooltip="t('social', 'Add attachment')"> v-tooltip="t('social', 'Add attachment')">
<template #icon> <template #icon>
<FileUpload :size="22" decorative title="" /> <FileUpload :size="22" decorative title="" />
</template> </template>
</Button> </NcButton>
<div class="new-post-form__emoji-picker"> <div class="new-post-form__emoji-picker">
<EmojiPicker ref="emojiPicker" :search="search" :close-on-select="false" <EmojiPicker ref="emojiPicker" :search="search" :close-on-select="false"
@ -100,13 +100,13 @@
</div> </div>
<div class="emptySpace" /> <div class="emptySpace" />
<Button :value="currentVisibilityPostLabel" :disabled="!canPost" type="primary" <NcButton :value="currentVisibilityPostLabel" :disabled="!canPost" type="primary"
@click.prevent="createPost"> @click.prevent="createPost">
<template #icon> <template #icon>
<Send title="" :size="22" decorative /> <Send title="" :size="22" decorative />
</template> </template>
<template>{{ postTo }}</template> <template>{{ postTo }}</template>
</button> </NcButton>
</div> </div>
</form> </form>
</div> </div>
@ -114,33 +114,33 @@
<script> <script>
import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline' import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
import Send from 'vue-material-design-icons/Send' import Send from 'vue-material-design-icons/Send.vue'
import FileUpload from 'vue-material-design-icons/FileUpload' import FileUpload from 'vue-material-design-icons/FileUpload.vue'
import Avatar from '@nextcloud/vue/dist/Components/Avatar' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import Button from '@nextcloud/vue/dist/Components/Button' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu' import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker' import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
import VueTribute from 'vue-tribute' import VueTribute from 'vue-tribute'
import he from 'he' import he from 'he'
import CurrentUserMixin from '../../mixins/currentUserMixin' import CurrentUserMixin from '../../mixins/currentUserMixin.js'
import FocusOnCreate from '../../directives/focusOnCreate' import FocusOnCreate from '../../directives/focusOnCreate.js'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import ActorAvatar from '../ActorAvatar.vue' import ActorAvatar from '../ActorAvatar.vue'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import PreviewGrid from './PreviewGrid' import PreviewGrid from './PreviewGrid.vue'
export default { export default {
name: 'Composer', name: 'Composer',
components: { components: {
PopoverMenu, NcPopoverMenu,
Avatar, NcAvatar,
NcActorAvatar,
NcEmojiPicker,
NcButton,
FileUpload, FileUpload,
ActorAvatar,
EmojiPicker,
VueTribute, VueTribute,
EmoticonOutline, EmoticonOutline,
Button,
Send, Send,
PreviewGrid, PreviewGrid,
}, },

26
src/components/Composer/PreviewGridItem.vue
Wyświetl plik

@ -2,51 +2,51 @@
<div class="preview-item-wrapper"> <div class="preview-item-wrapper">
<div class="preview-item" :style="backgroundStyle"> <div class="preview-item" :style="backgroundStyle">
<div class="preview-item__actions"> <div class="preview-item__actions">
<Button type="tertiary-no-background" @click="$emit('delete', index)"> <NcButton type="tertiary-no-background" @click="$emit('delete', index)">
<template #icon> <template #icon>
<Close :size="16" fillColor="white" /> <Close :size="16" fillColor="white" />
</template> </template>
<span>{{ t('social', 'Delete') }}</span> <span>{{ t('social', 'Delete') }}</span>
</Button> </NcButton>
<Button type="tertiary-no-background" @click="showModal"> <NcButton type="tertiary-no-background" @click="showModal">
<template #icon> <template #icon>
<Edit :size="16" fillColor="white" /> <Edit :size="16" fillColor="white" />
</template> </template>
<span>{{ t('social', 'Edit') }}</span> <span>{{ t('social', 'Edit') }}</span>
</Button> </NcButton>
</div> </div>
<div class="description-warning" v-if="preview.description.length === 0"> <div class="description-warning" v-if="preview.description.length === 0">
{{ t('social', 'No description added') }} {{ t('social', 'No description added') }}
</div> </div>
<Modal v-if="modal" @close="closeModal" size="small"> <NcModal v-if="modal" @close="closeModal" size="small">
<div class="modal__content"> <div class="modal__content">
<label :for="`image-description-${index}`"> <label :for="`image-description-${index}`">
{{ t('social', 'Describe for the visually impaired') }} {{ t('social', 'Describe for the visually impaired') }}
</label> </label>
<textarea :id="`image-description-${index}`" v-model="preview.description"> <textarea :id="`image-description-${index}`" v-model="preview.description">
</textarea> </textarea>
<Button type="primary" @click="closeModal">{{ t('social', 'Close') }}</Button> <NcButton type="primary" @click="closeModal">{{ t('social', 'Close') }}</NcButton>
</div> </div>
</Modal> </NcModal>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Close from 'vue-material-design-icons/Close' import Close from 'vue-material-design-icons/Close.vue'
import Edit from 'vue-material-design-icons/Pencil' import Edit from 'vue-material-design-icons/Pencil.vue'
import Button from '@nextcloud/vue/dist/Components/Button' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import Modal from '@nextcloud/vue/dist/Components/Modal' import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
export default { export default {
name: 'PreviewGridItem', name: 'PreviewGridItem',
components: { components: {
Close, Close,
Edit, Edit,
Button, NcButton,
Modal, NcModal,
}, },
data() { data() {
return { return {

4
src/components/FollowButton.vue
Wyświetl plik

@ -36,8 +36,8 @@
</template> </template>
<script> <script>
import accountMixins from '../mixins/accountMixins' import accountMixins from '../mixins/accountMixins.js'
import currentUser from '../mixins/currentUserMixin' import currentUser from '../mixins/currentUserMixin.js'
export default { export default {
name: 'FollowButton', name: 'FollowButton',

10
src/components/PostAttachment.vue
Wyświetl plik

@ -3,26 +3,26 @@
<div v-for="(item, index) in attachments" :key="index"> <div v-for="(item, index) in attachments" :key="index">
<img :src="imageUrl(item)" @click="showModal(index)"> <img :src="imageUrl(item)" @click="showModal(index)">
</div> </div>
<modal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)" <NcModal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
size="full" @close="closeModal" @previous="showPrevious" size="full" @close="closeModal" @previous="showPrevious"
@next="showNext"> @next="showNext">
<div class="modal__content"> <div class="modal__content">
<canvas ref="modalCanvas" /> <canvas ref="modalCanvas" />
</div> </div>
</modal> </NcModal>
</masonry> </masonry>
</template> </template>
<script> <script>
import serverData from '../mixins/serverData' import serverData from '../mixins/serverData.js'
import Modal from '@nextcloud/vue/dist/Components/Modal' import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
export default { export default {
name: 'PostAttachment', name: 'PostAttachment',
components: { components: {
Modal NcModal
}, },
mixins: [ mixins: [
serverData serverData

25
src/components/ProfileInfo.vue
Wyświetl plik

@ -22,9 +22,9 @@
<template> <template>
<div v-if="profileAccount && accountInfo" class="user-profile"> <div v-if="profileAccount && accountInfo" class="user-profile">
<avatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true" <NcAvatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true"
:size="128" /> :size="128" />
<avatar v-else :url="avatarUrl" :disable-tooltip="true" <NcAvatar v-else :url="avatarUrl" :disable-tooltip="true"
:size="128" /> :size="128" />
<h2>{{ displayName }}</h2> <h2>{{ displayName }}</h2>
<!-- TODO: we have no details, timeline and follower list for non-local accounts for now --> <!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
@ -52,16 +52,17 @@
</a> </a>
</p> </p>
<follow-button :account="accountInfo.account" :uid="uid" /> <follow-button :account="accountInfo.account" :uid="uid" />
<button v-if="serverData.public" class="primary" @click="followRemote"> <NcButton v-if="serverData.public" class="primary" @click="followRemote">
{{ t('social', 'Follow') }} {{ t('social', 'Follow') }}
</button> </NcButton>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.user-profile { .user-profile {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -94,11 +95,12 @@
} }
</style> </style>
<script> <script>
import Avatar from '@nextcloud/vue/dist/Components/Avatar' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import accountMixins from '../mixins/accountMixins' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import serverData from '../mixins/serverData' import accountMixins from '../mixins/accountMixins.js'
import currentUser from '../mixins/currentUserMixin' import serverData from '../mixins/serverData.js'
import follow from '../mixins/follow' import currentUser from '../mixins/currentUserMixin.js'
import follow from '../mixins/follow.js'
import FollowButton from './FollowButton.vue' import FollowButton from './FollowButton.vue'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
@ -106,7 +108,8 @@ export default {
name: 'ProfileInfo', name: 'ProfileInfo',
components: { components: {
FollowButton, FollowButton,
Avatar NcAvatar,
NcButton,
}, },
mixins: [ mixins: [
accountMixins, accountMixins,

8
src/components/TimelineAvatar.vue
Wyświetl plik

@ -1,25 +1,25 @@
<template> <template>
<div v-if="item.actor_info" class="post-avatar"> <div v-if="item.actor_info" class="post-avatar">
<Avatar v-if="item.local" <NcAvatar v-if="item.local"
class="messages__avatar__icon" class="messages__avatar__icon"
:show-user-status="false" :show-user-status="false"
menu-position="left" menu-position="left"
:user="userTest" :user="userTest"
:display-name="item.actor_info.account" :display-name="item.actor_info.account"
:disable-tooltip="true" /> :disable-tooltip="true" />
<Avatar v-else <NcAvatar v-else
:url="avatarUrl" :url="avatarUrl"
:disable-tooltip="true" /> :disable-tooltip="true" />
</div> </div>
</template> </template>
<script> <script>
import Avatar from '@nextcloud/vue/dist/Components/Avatar' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
export default { export default {
name: 'TimelineAvatar', name: 'TimelineAvatar',
components: { components: {
Avatar, NcAvatar,
}, },
props: { props: {
item: { item: {

4
src/components/TimelineList.vue
Wyświetl plik

@ -58,7 +58,7 @@
<script> <script>
import InfiniteLoading from 'vue-infinite-loading' import InfiniteLoading from 'vue-infinite-loading'
import TimelineEntry from './TimelineEntry.vue' import TimelineEntry from './TimelineEntry.vue'
import CurrentUserMixin from './../mixins/currentUserMixin' import CurrentUserMixin from './../mixins/currentUserMixin.js'
import EmptyContent from './EmptyContent.vue' import EmptyContent from './EmptyContent.vue'
import Logger from '../logger.js' import Logger from '../logger.js'
@ -73,7 +73,7 @@ export default {
props: { props: {
type: { type: String, default: () => 'home' } type: { type: String, default: () => 'home' }
}, },
data: function() { data() {
return { return {
infoHidden: false, infoHidden: false,
state: [], state: [],

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

@ -33,43 +33,43 @@
<post-attachment :attachments="item.attachment" /> <post-attachment :attachments="item.attachment" />
</div> </div>
<div v-if="this.$route.params.type !== 'notifications' && !serverData.public" class="post-actions"> <div v-if="this.$route.params.type !== 'notifications' && !serverData.public" class="post-actions">
<Button type="tertiary-no-background" <NcButton type="tertiary-no-background"
v-tooltip="t('social', 'Reply')" v-tooltip="t('social', 'Reply')"
@click="reply"> @click="reply">
<template #icon> <template #icon>
<Reply :size="20" /> <Reply :size="20" />
</template> </template>
</Button> </NcButton>
<Button type="tertiary-no-background" <NcButton type="tertiary-no-background"
v-tooltip="t('social', 'Boost')" v-tooltip="t('social', 'Boost')"
@click="boost"> @click="boost">
<template #icon> <template #icon>
<Repeat :size="20" :fill-color="isBoosted ? 'blue' : 'black'" /> <Repeat :size="20" :fill-color="isBoosted ? 'blue' : 'black'" />
</template> </template>
</Button> </NcButton>
<Button v-if="!isLiked" <NcButton v-if="!isLiked"
type="tertiary-no-background" type="tertiary-no-background"
v-tooltip="t('social', 'Like')" v-tooltip="t('social', 'Like')"
@click="like"> @click="like">
<template #icon> <template #icon>
<HeartOutline :size="20" /> <HeartOutline :size="20" />
</template> </template>
</Button> </NcButton>
<Button v-if="isLiked" <NcButton v-if="isLiked"
type="tertiary-no-background" type="tertiary-no-background"
v-tooltip="t('social', 'Undo Like')" v-tooltip="t('social', 'Undo Like')"
@click="like"> @click="like">
<template #icon> <template #icon>
<Heart :size="20" :fill-color="'var(--color-error)'" /> <Heart :size="20" :fill-color="'var(--color-error)'" />
</template> </template>
</Button> </NcButton>
<Actions> <NcActions>
<ActionButton v-if="item.actor_info.account === cloudId" <NcActionButton v-if="item.actor_info.account === cloudId"
@click="remove()" @click="remove()"
icon="icon-delete"> icon="icon-delete">
{{ t('social', 'Delete') }} {{ t('social', 'Delete') }}
</ActionButton> </NcActionButton>
</Actions> </NcActions>
</div> </div>
</div> </div>
</template> </template>
@ -80,9 +80,9 @@ import pluginMention from 'linkifyjs/plugins/mention'
import 'linkifyjs/string' import 'linkifyjs/string'
import currentUser from './../mixins/currentUserMixin' import currentUser from './../mixins/currentUserMixin'
import PostAttachment from './PostAttachment.vue' import PostAttachment from './PostAttachment.vue'
import Button from '@nextcloud/vue/dist/Components/Button' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import Actions from '@nextcloud/vue/dist/Components/Actions' import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import Repeat from 'vue-material-design-icons/Repeat.vue' import Repeat from 'vue-material-design-icons/Repeat.vue'
import Reply from 'vue-material-design-icons/Reply.vue' import Reply from 'vue-material-design-icons/Reply.vue'
import Heart from 'vue-material-design-icons/Heart.vue' import Heart from 'vue-material-design-icons/Heart.vue'

12
src/components/UserEntry.vue
Wyświetl plik

@ -24,9 +24,9 @@
<div v-if="item" class="user-entry"> <div v-if="item" class="user-entry">
<div class="entry-content"> <div class="entry-content">
<div class="user-avatar"> <div class="user-avatar">
<avatar v-if="item.local" :size="32" :user="item.preferredUsername" <NcAvatar v-if="item.local" :size="32" :user="item.preferredUsername"
:disable-tooltip="true" /> :disable-tooltip="true" />
<avatar v-else :url="avatarUrl" /> <NcAvatar v-else :url="avatarUrl" />
</div> </div>
<div class="user-details"> <div class="user-details">
<router-link v-if="!serverData.public" :to="{ name: 'profile', params: { account: item.local ? item.preferredUsername : item.account }}"> <router-link v-if="!serverData.public" :to="{ name: 'profile', params: { account: item.local ? item.preferredUsername : item.account }}">
@ -55,9 +55,9 @@
</template> </template>
<script> <script>
import Avatar from '@nextcloud/vue/dist/Components/Avatar' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import follow from '../mixins/follow' import follow from '../mixins/follow.js'
import currentUser from '../mixins/currentUserMixin' import currentUser from '../mixins/currentUserMixin.js'
import FollowButton from './FollowButton.vue' import FollowButton from './FollowButton.vue'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
@ -65,7 +65,7 @@ export default {
name: 'UserEntry', name: 'UserEntry',
components: { components: {
FollowButton, FollowButton,
Avatar NcAvatar,
}, },
mixins: [ mixins: [
follow, follow,

16
src/views/OStatus.vue
Wyświetl plik

@ -7,7 +7,7 @@
{{ t('social', 'Please confirm that you want to follow this account:') }} {{ t('social', 'Please confirm that you want to follow this account:') }}
</p> </p>
<avatar :url="avatarUrl" :disable-tooltip="true" :size="128" /> <NcAvatar :url="avatarUrl" :disable-tooltip="true" :size="128" />
<h2>{{ displayName }}</h2> <h2>{{ displayName }}</h2>
<form v-if="!isFollowing" @submit.prevent="follow"> <form v-if="!isFollowing" @submit.prevent="follow">
<input type="submit" class="primary" value="Follow"> <input type="submit" class="primary" value="Follow">
@ -18,15 +18,15 @@
</p> </p>
<div v-if="isFollowing"> <div v-if="isFollowing">
<button @click="close"> <NcButton @click="close">
{{ t('social', 'Close') }} {{ t('social', 'Close') }}
</button> </NcButton>
</div> </div>
</div> </div>
<!-- Some unauthenticated user wants to follow a local account --> <!-- Some unauthenticated user wants to follow a local account -->
<div v-if="serverData.local"> <div v-if="serverData.local">
<p>{{ t('social', 'You are going to follow:') }}</p> <p>{{ t('social', 'You are going to follow:') }}</p>
<avatar :user="serverData.local" :disable-tooltip="true" :size="128" /> <NcAvatar :user="serverData.local" :disable-tooltip="true" :size="128" />
<h2>{{ displayName }}</h2> <h2>{{ displayName }}</h2>
<form @submit.prevent="followRemote"> <form @submit.prevent="followRemote">
<input v-model="remote" type="text" :placeholder="t('social', 'name@domain of your federation account')"> <input v-model="remote" type="text" :placeholder="t('social', 'name@domain of your federation account')">
@ -61,17 +61,17 @@
</style> </style>
<script> <script>
import Avatar from '@nextcloud/vue/dist/Components/Avatar' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import accountMixins from '../mixins/accountMixins' import accountMixins from '../mixins/accountMixins.js'
import currentuserMixin from '../mixins/currentUserMixin' import currentuserMixin from '../mixins/currentUserMixin.js'
import { loadState } from '@nextcloud/initial-state' import { loadState } from '@nextcloud/initial-state'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
export default { export default {
name: 'App', name: 'App',
components: { components: {
Avatar NcAvatar,
}, },
mixins: [ mixins: [
accountMixins, accountMixins,

29
src/views/Profile.vue
Wyświetl plik

@ -25,7 +25,15 @@
<profile-info v-if="accountLoaded && accountInfo" :uid="uid" /> <profile-info v-if="accountLoaded && accountInfo" :uid="uid" />
<!-- TODO: we have no details, timeline and follower list for non-local accounts for now --> <!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
<router-view v-if="accountLoaded && accountInfo && accountInfo.local" name="details" /> <router-view v-if="accountLoaded && accountInfo && accountInfo.local" name="details" />
<empty-content v-if="accountLoaded && !accountInfo" :item="emptyContentData" /> <NcEmptyContent v-if="accountLoaded && !accountInfo"
:title="t('social', 'User not found')"
:description="t('social', 'Sorry, we could not find the account of {userId}', { userId: this.uid })">
<template #icon>
<img :src="emptyContentImage"
class="icon-illustration"
alt="">
</template>
</NcEmptyContent>
</div> </div>
</template> </template>
@ -39,14 +47,15 @@
<script> <script>
import ProfileInfo from './../components/ProfileInfo.vue' import ProfileInfo from './../components/ProfileInfo.vue'
import EmptyContent from '../components/EmptyContent.vue' import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
import accountMixins from '../mixins/accountMixins' import accountMixins from '../mixins/accountMixins.js'
import serverData from '../mixins/serverData' import serverData from '../mixins/serverData.js'
import { generateFilePath } from '@nextcloud/router'
export default { export default {
name: 'Profile', name: 'Profile',
components: { components: {
EmptyContent, NcEmptyContent,
ProfileInfo ProfileInfo
}, },
mixins: [ mixins: [
@ -63,13 +72,9 @@ export default {
timeline: function() { timeline: function() {
return this.$store.getters.getTimeline return this.$store.getters.getTimeline
}, },
emptyContentData() { emptyContentImage() {
return { return generateFilePath('social', 'img', 'undraw/profile.svg')
image: 'img/undraw/profile.svg', },
title: t('social', 'User not found'),
description: t('social', 'Sorry, we could not find the account of {userId}', { userId: this.uid })
}
}
}, },
// Start fetching account information before mounting the component // Start fetching account information before mounting the component
beforeMount() { beforeMount() {

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

@ -93,8 +93,8 @@
<script> <script>
import Composer from './../components/Composer/Composer.vue' import Composer from './../components/Composer/Composer.vue'
import CurrentUserMixin from './../mixins/currentUserMixin' import CurrentUserMixin from './../mixins/currentUserMixin.js'
import follow from './../mixins/follow' import follow from './../mixins/follow.js'
import TimelineList from './../components/TimelineList.vue' import TimelineList from './../components/TimelineList.vue'
export default { export default {

6
src/views/TimelineSinglePost.vue
Wyświetl plik

@ -25,9 +25,9 @@ import Composer from '../components/Composer/Composer.vue'
import ProfileInfo from '../components/ProfileInfo.vue' import ProfileInfo from '../components/ProfileInfo.vue'
import TimelineEntry from '../components/TimelineEntry.vue' import TimelineEntry from '../components/TimelineEntry.vue'
import TimelineList from '../components/TimelineList.vue' import TimelineList from '../components/TimelineList.vue'
import currentUserMixin from '../mixins/currentUserMixin' import currentUserMixin from '../mixins/currentUserMixin.js'
import accountMixins from '../mixins/accountMixins' import accountMixins from '../mixins/accountMixins.js'
import serverData from '../mixins/serverData' import serverData from '../mixins/serverData.js'
import { loadState } from '@nextcloud/initial-state' import { loadState } from '@nextcloud/initial-state'
export default { export default {

62
webpack.common.js
Wyświetl plik

@ -1,56 +1,12 @@
// SPDX-FileCopyrigthText: 2022 Carl Schwan <carl@carlschwan.eu>
// SPDX-License-Identifier: AGPL-3.0-or-later
const path = require('path'); const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); const webpackConfig = require('@nextcloud/webpack-vue-config')
webpackConfig.entry = {
social: path.join(__dirname, 'src', 'main.js'),
ostatus: path.join(__dirname, 'src', 'ostatus.js'),
}
module.exports = { module.exports = webpackConfig
entry: {
social: path.join(__dirname, 'src', 'main.js'),
ostatus: path.join(__dirname, 'src', 'ostatus.js'),
},
output: {
path: path.resolve(__dirname, './js'),
publicPath: '/js/',
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [new VueLoaderPlugin()],
resolve: {
extensions: ['*', '.js', '.vue'],
symlinks: false
}
};