forked from AkkomaGang/akkoma-fe
Merge remote-tracking branch 'upstream/develop' into develop
This commit is contained in:
commit
d8fa8c4ee4
58 changed files with 1319 additions and 440 deletions
49
.gitea/issue_template/bug.yml
Normal file
49
.gitea/issue_template/bug.yml
Normal file
|
@ -0,0 +1,49 @@
|
|||
name: "Bug report"
|
||||
about: "Something isn't working as expected"
|
||||
title: "[bug] "
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: "Thanks for taking the time to file this bug report! Please try to be as specific and detailed as you can, so we can track down the issue and fix it as soon as possible."
|
||||
- type: input
|
||||
id: version
|
||||
attributes:
|
||||
label: "Version"
|
||||
description: "Which version of pleroma-fe are you running? If running develop, specify the commit hash."
|
||||
placeholder: "e.g. 2022.11, 40e86998e6"
|
||||
- type: textarea
|
||||
id: attempt
|
||||
attributes:
|
||||
label: "What were you trying to do?"
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: expectation
|
||||
attributes:
|
||||
label: "What did you expect to happen?"
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: reality
|
||||
attributes:
|
||||
label: "What actually happened?"
|
||||
validations:
|
||||
required: true
|
||||
- type: dropdown
|
||||
id: severity
|
||||
attributes:
|
||||
label: "Severity"
|
||||
description: "Does this issue prevent you from using the software as normal?"
|
||||
options:
|
||||
- "I cannot use the software"
|
||||
- "I cannot use it as easily as I'd like"
|
||||
- "I can manage"
|
||||
validations:
|
||||
required: true
|
||||
- type: checkboxes
|
||||
id: searched
|
||||
attributes:
|
||||
label: "Have you searched for this issue?"
|
||||
description: "Please double-check that your issue is not already being tracked on [the forums](https://meta.akkoma.dev) or [the issue tracker](https://akkoma.dev/AkkomaGang/pleroma-fe/issues)."
|
||||
options:
|
||||
- label: "I have double-checked and have not found this issue mentioned anywhere."
|
29
.gitea/issue_template/feat.yml
Normal file
29
.gitea/issue_template/feat.yml
Normal file
|
@ -0,0 +1,29 @@
|
|||
name: "Feature request"
|
||||
about: "I'd like something to be added to pleroma-fe"
|
||||
title: "[feat] "
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: "Thanks for taking the time to request a new feature! Please be as concise and clear as you can in your proposal, so we could understand what you're going for."
|
||||
- type: textarea
|
||||
id: idea
|
||||
attributes:
|
||||
label: "The idea"
|
||||
description: "What do you think you should be able to do in pleroma-fe?"
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: reason
|
||||
attributes:
|
||||
label: "The reasoning"
|
||||
description: "Why would this be a worthwhile feature? Does it solve any problems? Have people talked about wanting it?"
|
||||
validations:
|
||||
required: true
|
||||
- type: checkboxes
|
||||
id: searched
|
||||
attributes:
|
||||
label: "Have you searched for this feature request?"
|
||||
description: "Please double-check that your issue is not already being tracked on [the forums](https://meta.akkoma.dev), [the issue tracker](https://akkoma.dev/AkkomaGang/pleroma-fe/issues), or the one for [the backend](https://akkoma.dev/AkkomaGang/akkoma/issues)."
|
||||
options:
|
||||
- label: "I have double-checked and have not found this feature request mentioned anywhere."
|
||||
- label: "This feature is related to the pleroma-fe Akkoma frontend specifically, and not the backend."
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
|
||||
name: "Issue"
|
||||
about: "Something isn't working as expected"
|
||||
|
||||
---
|
||||
|
||||
## Your setup
|
||||
|
||||
Frontend version:
|
||||
[] stable
|
||||
[] develop
|
||||
[] custom (please elaborate)
|
||||
|
||||
## What were you trying to do?
|
||||
|
||||
## What did you expect to happen?
|
||||
|
||||
## What actually happened?
|
||||
|
||||
## Relative severity (does this prevent you from using the software as normal?)
|
||||
|
||||
[] I cannot use the software
|
||||
[] I cannot use it as easily as I'd like
|
||||
[] I can manage
|
12
README.md
12
README.md
|
@ -1,22 +1,22 @@
|
|||
# Pleroma-FE
|
||||
# Akkoma-FE
|
||||
|
||||
![English OK](https://img.shields.io/badge/English-OK-blueviolet) ![日本語OK](https://img.shields.io/badge/%E6%97%A5%E6%9C%AC%E8%AA%9E-OK-blueviolet)
|
||||
|
||||
This is a fork of Pleroma-FE from the Pleroma project, with support for new Akkoma features such as:
|
||||
This is a fork of Akkoma-FE from the Pleroma project, with support for new Akkoma features such as:
|
||||
- MFM support via [marked-mfm](https://akkoma.dev/sfr/marked-mfm)
|
||||
- Custom emoji reactions
|
||||
|
||||
# For Translators
|
||||
|
||||
The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Pleroma-FE.
|
||||
The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Akkoma-FE.
|
||||
|
||||
Alternatively, edit/create `src/i18n/$LANGUAGE_CODE.json` (where `$LANGUAGE_CODE` is the [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language), then add your language to [src/i18n/messages.js](https://akkoma.dev/AkkomaGang/pleroma-fe/src/branch/develop/src/i18n/messages.js) if it doesn't already exist there.
|
||||
|
||||
Pleroma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
|
||||
Akkoma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
|
||||
|
||||
# FOR ADMINS
|
||||
|
||||
To use Pleroma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/administration/CLI_tasks/frontend/) CLI task to install Pleroma-FE, then modify your configuration as described in the [Frontend Management](https://docs.akkoma.dev/stable/configuration/frontend_management/) doc.
|
||||
To use Akkoma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/administration/CLI_tasks/frontend/) CLI task to install Akkoma-FE, then modify your configuration as described in the [Frontend Management](https://docs.akkoma.dev/stable/configuration/frontend_management/) doc.
|
||||
|
||||
## Build Setup
|
||||
|
||||
|
@ -52,4 +52,4 @@ Edit config.json for configuration.
|
|||
|
||||
### Login methods
|
||||
|
||||
```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations.
|
||||
```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations.
|
||||
|
|
|
@ -31,6 +31,11 @@
|
|||
rel="stylesheet"
|
||||
href="/static/custom.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/static/theme-holder.css"
|
||||
id="theme-holder"
|
||||
/>
|
||||
<!--server-generated-meta-->
|
||||
<link
|
||||
rel="icon"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "pleroma_fe",
|
||||
"version": "3.2.0",
|
||||
"version": "3.5.0",
|
||||
"description": "A frontend for Akkoma instances",
|
||||
"author": "Roger Braun <roger@rogerbraun.net>",
|
||||
"private": true,
|
||||
|
@ -18,19 +18,21 @@
|
|||
"dependencies": {
|
||||
"@babel/runtime": "7.17.8",
|
||||
"@chenfengyuan/vue-qrcode": "2.0.0",
|
||||
"@floatingghost/pinch-zoom-element": "^1.3.1",
|
||||
"@fortawesome/fontawesome-svg-core": "1.3.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
||||
"@fortawesome/vue-fontawesome": "3.0.1",
|
||||
"@kazvmoe-infra/pinch-zoom-element": "1.2.0",
|
||||
"@vuelidate/core": "^2.0.0",
|
||||
"@vuelidate/validators": "^2.0.0",
|
||||
"blurhash": "^2.0.4",
|
||||
"body-scroll-lock": "2.7.1",
|
||||
"chromatism": "3.0.0",
|
||||
"click-outside-vue3": "4.0.1",
|
||||
"cropperjs": "1.5.12",
|
||||
"diff": "3.5.0",
|
||||
"escape-html": "1.0.3",
|
||||
"iso-639-1": "^2.1.15",
|
||||
"js-cookie": "^3.0.1",
|
||||
"localforage": "1.10.0",
|
||||
"parse-link-header": "^2.0.0",
|
||||
|
@ -84,7 +86,6 @@
|
|||
"html-webpack-plugin": "^5.5.0",
|
||||
"http-proxy-middleware": "0.21.0",
|
||||
"inject-loader": "2.0.1",
|
||||
"iso-639-1": "2.1.15",
|
||||
"isparta-loader": "2.0.0",
|
||||
"json-loader": "0.5.7",
|
||||
"karma": "6.3.17",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// stylelint-disable rscss/class-format
|
||||
@import './_variables.scss';
|
||||
|
||||
@import '@fortawesome/fontawesome-svg-core/styles.css';
|
||||
@import '@floatingghost/pinch-zoom-element/dist/pinch-zoom.css';
|
||||
:root {
|
||||
--navbar-height: 3.5rem;
|
||||
--post-line-height: 1.4;
|
||||
|
|
|
@ -7,6 +7,8 @@ import {
|
|||
FontAwesomeIcon,
|
||||
FontAwesomeLayers
|
||||
} from '@fortawesome/vue-fontawesome'
|
||||
import { config } from '@fortawesome/fontawesome-svg-core'
|
||||
config.autoAddCss = false
|
||||
|
||||
import App from '../App.vue'
|
||||
import routes from './routes'
|
||||
|
|
|
@ -18,6 +18,7 @@ import {
|
|||
faPencilAlt,
|
||||
faAlignRight
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import Blurhash from '../blurhash/Blurhash.vue'
|
||||
|
||||
library.add(
|
||||
faFile,
|
||||
|
@ -65,7 +66,8 @@ const Attachment = {
|
|||
components: {
|
||||
Flash,
|
||||
StillImage,
|
||||
VideoAttachment
|
||||
VideoAttachment,
|
||||
Blurhash
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
|
@ -86,6 +88,9 @@ const Attachment = {
|
|||
useContainFit() {
|
||||
return this.$store.getters.mergedConfig.useContainFit
|
||||
},
|
||||
useBlurhash() {
|
||||
return this.$store.getters.mergedConfig.useBlurhash
|
||||
},
|
||||
placeholderName() {
|
||||
if (this.attachment.description === '' || !this.attachment.description) {
|
||||
return this.type.toUpperCase()
|
||||
|
|
|
@ -69,7 +69,15 @@
|
|||
:title="attachment.description"
|
||||
@click.prevent.stop="toggleHidden"
|
||||
>
|
||||
<Blurhash
|
||||
v-if="useBlurhash && attachment.blurhash"
|
||||
:height="512"
|
||||
:width="1024"
|
||||
:hash="attachment.blurhash"
|
||||
:punch="1"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
:key="nsfwImage"
|
||||
class="nsfw"
|
||||
:src="nsfwImage"
|
||||
|
|
66
src/components/blurhash/Blurhash.vue
Normal file
66
src/components/blurhash/Blurhash.vue
Normal file
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<canvas
|
||||
ref="canvas"
|
||||
class="blurhash"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { decode } from "blurhash";
|
||||
|
||||
export default {
|
||||
name: 'Blurhash',
|
||||
props: {
|
||||
hash: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
punch: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = this.$refs.canvas;
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.canvas.width = 1024;
|
||||
this.canvas.height = 512;
|
||||
this.draw();
|
||||
},
|
||||
methods: {
|
||||
draw() {
|
||||
const pixels = decode(this.hash, this.width, this.height, this.punch);
|
||||
const imageData = this.ctx.createImageData(this.width, this.height);
|
||||
imageData.data.set(pixels);
|
||||
this.ctx.putImageData(imageData, 0, 0);
|
||||
fetch("/static/blurhash-overlay.png")
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const img = new Image();
|
||||
img.src = URL.createObjectURL(blob);
|
||||
img.onload = () => {
|
||||
this.ctx.drawImage(img, 0, 0, this.width, this.height);
|
||||
};
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
133
src/components/emoji_grid/emoji_grid.js
Normal file
133
src/components/emoji_grid/emoji_grid.js
Normal file
|
@ -0,0 +1,133 @@
|
|||
const EMOJI_SIZE = 32 + 8
|
||||
const GROUP_TITLE_HEIGHT = 24
|
||||
const BUFFER_SIZE = 3 * EMOJI_SIZE
|
||||
|
||||
const EmojiGrid = {
|
||||
props: {
|
||||
groups: {
|
||||
required: true,
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
containerWidth: 0,
|
||||
containerHeight: 0,
|
||||
scrollPos: 0,
|
||||
resizeObserver: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const rect = this.$refs.container.getBoundingClientRect()
|
||||
this.containerWidth = rect.width
|
||||
this.containerHeight = rect.height
|
||||
this.resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
this.containerWidth = entry.contentRect.width
|
||||
this.containerHeight = entry.contentRect.height
|
||||
}
|
||||
})
|
||||
this.resizeObserver.observe(this.$refs.container)
|
||||
},
|
||||
beforeUnmount () {
|
||||
this.resizeObserver.disconnect()
|
||||
this.resizeObserver = null
|
||||
},
|
||||
watch: {
|
||||
groups () {
|
||||
// Scroll to top when grid content changes
|
||||
if (this.$refs.container) {
|
||||
this.$refs.container.scrollTo(0, 0)
|
||||
}
|
||||
},
|
||||
activeGroup (group) {
|
||||
this.$emit('activeGroup', group)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onScroll () {
|
||||
this.scrollPos = this.$refs.container.scrollTop
|
||||
},
|
||||
onEmoji (emoji) {
|
||||
this.$emit('emoji', emoji)
|
||||
},
|
||||
scrollToItem (itemId) {
|
||||
const container = this.$refs.container
|
||||
if (!container) return
|
||||
|
||||
for (const item of this.itemList) {
|
||||
if (item.id === itemId) {
|
||||
container.scrollTo(0, item.position.y)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Total height of scroller content
|
||||
gridHeight () {
|
||||
if (this.itemList.length === 0) return 0
|
||||
const lastItem = this.itemList[this.itemList.length - 1]
|
||||
return (
|
||||
lastItem.position.y +
|
||||
('title' in lastItem ? GROUP_TITLE_HEIGHT : EMOJI_SIZE)
|
||||
)
|
||||
},
|
||||
activeGroup () {
|
||||
const items = this.itemList
|
||||
for (let i = items.length - 1; i >= 0; i--) {
|
||||
const item = items[i]
|
||||
if ('title' in item && item.position.y <= this.scrollPos) {
|
||||
return item.id
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
itemList () {
|
||||
const items = []
|
||||
let x = 0
|
||||
let y = 0
|
||||
for (const group of this.groups) {
|
||||
items.push({ position: { x, y }, id: group.id, title: group.text })
|
||||
if (group.text.length) {
|
||||
y += GROUP_TITLE_HEIGHT
|
||||
}
|
||||
for (const emoji of group.emojis) {
|
||||
items.push({
|
||||
position: { x, y },
|
||||
id: `${group.id}-${emoji.displayText}`,
|
||||
emoji
|
||||
})
|
||||
x += EMOJI_SIZE
|
||||
if (x + EMOJI_SIZE > this.containerWidth) {
|
||||
y += EMOJI_SIZE
|
||||
x = 0
|
||||
}
|
||||
}
|
||||
if (x > 0) {
|
||||
y += EMOJI_SIZE
|
||||
x = 0
|
||||
}
|
||||
}
|
||||
return items
|
||||
},
|
||||
visibleItems () {
|
||||
const startPos = this.scrollPos - BUFFER_SIZE
|
||||
const endPos = this.scrollPos + this.containerHeight + BUFFER_SIZE
|
||||
return this.itemList.filter((i) => {
|
||||
return i.position.y >= startPos && i.position.y < endPos
|
||||
})
|
||||
},
|
||||
scrolledClass () {
|
||||
if (this.scrollPos <= 5) {
|
||||
return 'scrolled-top'
|
||||
} else if (this.scrollPos >= this.gridHeight - this.containerHeight - 5) {
|
||||
return 'scrolled-bottom'
|
||||
} else {
|
||||
return 'scrolled-middle'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default EmojiGrid
|
60
src/components/emoji_grid/emoji_grid.scss
Normal file
60
src/components/emoji_grid/emoji_grid.scss
Normal file
|
@ -0,0 +1,60 @@
|
|||
.emoji {
|
||||
&-grid {
|
||||
flex: 1 1 1px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
user-select: none;
|
||||
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
||||
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
transition: mask-size 150ms;
|
||||
mask-size: 100% 20px, 100% 20px, auto;
|
||||
// Autoprefixed seem to ignore this one, and also syntax is different
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
&.scrolled {
|
||||
&-top {
|
||||
mask-size: 100% 20px, 100% 0, auto;
|
||||
}
|
||||
&-bottom {
|
||||
mask-size: 100% 0, 100% 20px, auto;
|
||||
}
|
||||
}
|
||||
margin-left: 5px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
&-group-title {
|
||||
position: absolute;
|
||||
font-size: 0.85em;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 4px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
48
src/components/emoji_grid/emoji_grid.vue
Normal file
48
src/components/emoji_grid/emoji_grid.vue
Normal file
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div
|
||||
ref="container"
|
||||
class="emoji-grid"
|
||||
:class="scrolledClass"
|
||||
@scroll.passive="onScroll"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
height: `${gridHeight}px`,
|
||||
}"
|
||||
>
|
||||
<template v-for="item in visibleItems">
|
||||
<h6
|
||||
v-if="'title' in item && item.title.length"
|
||||
:key="'title-' + item.id"
|
||||
class="emoji-group-title"
|
||||
:style="{
|
||||
top: item.position.y + 'px',
|
||||
left: item.position.x + 'px'
|
||||
}"
|
||||
>
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<span
|
||||
v-else-if="'emoji' in item"
|
||||
:key="'emoji-' + item.id"
|
||||
class="emoji-item"
|
||||
:title="item.emoji.displayText"
|
||||
:style="{
|
||||
top: item.position.y + 'px',
|
||||
left: item.position.x + 'px'
|
||||
}"
|
||||
@click.stop.prevent="onEmoji(item.emoji)"
|
||||
>
|
||||
<span v-if="!item.emoji.imageUrl">{{ item.emoji.replacement }}</span>
|
||||
<img
|
||||
v-else
|
||||
:src="item.emoji.imageUrl"
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./emoji_grid.js"></script>
|
||||
<style lang="scss" src="./emoji_grid.scss"></style>
|
|
@ -207,7 +207,6 @@ const EmojiInput = {
|
|||
},
|
||||
triggerShowPicker() {
|
||||
this.showPicker = true
|
||||
this.$refs.picker.startEmojiLoad()
|
||||
this.$nextTick(() => {
|
||||
this.scrollIntoView()
|
||||
this.focusPickerInput()
|
||||
|
@ -225,7 +224,6 @@ const EmojiInput = {
|
|||
this.showPicker = !this.showPicker
|
||||
if (this.showPicker) {
|
||||
this.scrollIntoView()
|
||||
this.$refs.picker.startEmojiLoad()
|
||||
this.$nextTick(this.focusPickerInput)
|
||||
}
|
||||
},
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
<EmojiPicker
|
||||
v-if="enableEmojiPicker"
|
||||
ref="picker"
|
||||
show-keep-open
|
||||
:class="{ hide: !showPicker }"
|
||||
:enable-sticker-picker="enableStickerPicker"
|
||||
class="emoji-picker-panel"
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { defineAsyncComponent } from 'vue'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import EmojiGrid from '../emoji_grid/emoji_grid.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faBoxOpen,
|
||||
|
@ -10,19 +11,17 @@ import { trim, escapeRegExp, startCase } from 'lodash'
|
|||
|
||||
library.add(faBoxOpen, faStickyNote, faSmileBeam)
|
||||
|
||||
// At widest, approximately 20 emoji are visible in a row,
|
||||
// loading 3 rows, could be overkill for narrow picker
|
||||
const LOAD_EMOJI_BY = 60
|
||||
|
||||
// When to start loading new batch emoji, in pixels
|
||||
const LOAD_EMOJI_MARGIN = 64
|
||||
|
||||
const EmojiPicker = {
|
||||
props: {
|
||||
enableStickerPicker: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showKeepOpen: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
@ -30,18 +29,13 @@ const EmojiPicker = {
|
|||
keyword: '',
|
||||
activeGroup: 'standard',
|
||||
showingStickers: false,
|
||||
groupsScrolledClass: 'scrolled-top',
|
||||
keepOpen: false,
|
||||
customEmojiBufferSlice: LOAD_EMOJI_BY,
|
||||
customEmojiTimeout: null,
|
||||
customEmojiLoadAllConfirmed: false
|
||||
keepOpen: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StickerPicker: defineAsyncComponent(() =>
|
||||
import('../sticker_picker/sticker_picker.vue')
|
||||
),
|
||||
Checkbox
|
||||
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
|
||||
Checkbox,
|
||||
EmojiGrid
|
||||
},
|
||||
methods: {
|
||||
onStickerUploaded(e) {
|
||||
|
@ -56,6 +50,7 @@ const EmojiPicker = {
|
|||
: emoji.replacement
|
||||
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
onScroll(e) {
|
||||
const target = (e && e.target) || this.$refs['emoji-groups']
|
||||
this.updateScrolledClass(target)
|
||||
|
@ -63,12 +58,16 @@ const EmojiPicker = {
|
|||
this.triggerLoadMore(target)
|
||||
},
|
||||
onWheel(e) {
|
||||
=======
|
||||
onWheel (e) {
|
||||
>>>>>>> upstream/develop
|
||||
e.preventDefault()
|
||||
this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
|
||||
},
|
||||
highlight(key) {
|
||||
this.setShowStickers(false)
|
||||
this.activeGroup = key
|
||||
<<<<<<< HEAD
|
||||
},
|
||||
updateScrolledClass(target) {
|
||||
if (target.scrollTop <= 5) {
|
||||
|
@ -133,6 +132,14 @@ const EmojiPicker = {
|
|||
return
|
||||
}
|
||||
this.customEmojiBufferSlice = LOAD_EMOJI_BY
|
||||
=======
|
||||
if (this.keyword.length) {
|
||||
this.$refs.emojiGrid.scrollToItem(key)
|
||||
}
|
||||
},
|
||||
onActiveGroup (group) {
|
||||
this.activeGroup = group
|
||||
>>>>>>> upstream/develop
|
||||
},
|
||||
toggleStickers() {
|
||||
this.showingStickers = !this.showingStickers
|
||||
|
@ -151,6 +158,7 @@ const EmojiPicker = {
|
|||
})
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
watch: {
|
||||
keyword() {
|
||||
this.customEmojiLoadAllConfirmed = false
|
||||
|
@ -158,6 +166,8 @@ const EmojiPicker = {
|
|||
this.startEmojiLoad(true)
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> upstream/develop
|
||||
computed: {
|
||||
activeGroupView() {
|
||||
return this.showingStickers ? '' : this.activeGroup
|
||||
|
@ -171,10 +181,14 @@ const EmojiPicker = {
|
|||
filteredEmoji() {
|
||||
return this.filterByKeyword(this.$store.state.instance.customEmoji || [])
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
customEmojiBuffer() {
|
||||
return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
|
||||
},
|
||||
emojis() {
|
||||
=======
|
||||
emojis () {
|
||||
>>>>>>> upstream/develop
|
||||
const standardEmojis = this.$store.state.instance.emoji || []
|
||||
const customEmojis = this.sortedEmoji
|
||||
const emojiPacks = []
|
||||
|
|
|
@ -1,5 +1,23 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
// The worst query selector ever
|
||||
// selects ONLY emojis pickers in replies in notifications
|
||||
// who thought this was a good idea?
|
||||
.notification
|
||||
> .Status
|
||||
> .status-container
|
||||
> .post-status-form
|
||||
> form
|
||||
> .form-group
|
||||
> .emoji-input
|
||||
> .emoji-picker {
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
@media (min-width: 1300px) {
|
||||
left: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
.Notification {
|
||||
.emoji-picker {
|
||||
min-width: 160%;
|
||||
|
@ -7,7 +25,7 @@
|
|||
overflow: hidden;
|
||||
left: -70%;
|
||||
max-width: 100%;
|
||||
@media (min-width: 800px) and (max-width: 1300px) {
|
||||
@media (min-width: 800px) and (max-width: 1280px) {
|
||||
left: -50%;
|
||||
min-width: 50%;
|
||||
max-width: 130%;
|
||||
|
@ -18,6 +36,10 @@
|
|||
min-width: 50%;
|
||||
max-width: 130%;
|
||||
}
|
||||
|
||||
.Status > .emoji-picker {
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emoji-picker {
|
||||
|
@ -70,10 +92,6 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.emoji-groups {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.additional-tabs {
|
||||
border-left: 1px solid;
|
||||
border-left-color: $fallback--icon;
|
||||
|
@ -152,14 +170,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
&-search {
|
||||
padding: 5px;
|
||||
flex: 0 0 auto;
|
||||
.emoji-search {
|
||||
padding: 5px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-groups {
|
||||
|
|
|
@ -53,11 +53,15 @@
|
|||
@input="$event.target.composing = false"
|
||||
/>
|
||||
</div>
|
||||
<EmojiGrid
|
||||
ref="emojiGrid"
|
||||
:groups="emojisView"
|
||||
@emoji="onEmoji"
|
||||
@active-group="onActiveGroup"
|
||||
/>
|
||||
<div
|
||||
ref="emoji-groups"
|
||||
class="emoji-groups"
|
||||
:class="groupsScrolledClass"
|
||||
@scroll="onScroll"
|
||||
v-if="showKeepOpen"
|
||||
class="keep-open"
|
||||
>
|
||||
<div
|
||||
v-for="group in emojisView"
|
||||
|
|
|
@ -72,6 +72,11 @@
|
|||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.reaction-emoji {
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
width: 2.55em !important;
|
||||
height: 2.55em !important;
|
||||
>>>>>>> upstream/develop
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
img.reaction-emoji {
|
||||
|
|
|
@ -178,6 +178,7 @@ const ExtraButtons = {
|
|||
statusPoll: this.status.poll,
|
||||
statusFiles: [...this.status.attachments],
|
||||
statusScope: this.status.visibility,
|
||||
statusLanguage: this.status.language,
|
||||
statusContentType: data.content_type
|
||||
})
|
||||
)
|
||||
|
|
|
@ -45,6 +45,7 @@ const FollowRequestCard = {
|
|||
doApprove() {
|
||||
this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
|
||||
this.$store.dispatch('removeFollowRequest', this.user)
|
||||
this.$store.dispatch('decrementFollowRequestsCount')
|
||||
|
||||
const notifId = this.findFollowRequestNotificationId()
|
||||
this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
|
||||
|
@ -69,6 +70,7 @@ const FollowRequestCard = {
|
|||
.denyUser({ id: this.user.id })
|
||||
.then(() => {
|
||||
this.$store.dispatch('dismissNotificationLocal', { id: notifId })
|
||||
this.$store.dispatch('decrementFollowRequestsCount')
|
||||
this.$store.dispatch('removeFollowRequest', this.user)
|
||||
})
|
||||
this.hideDenyConfirmDialog()
|
||||
|
@ -83,6 +85,11 @@ const FollowRequestCard = {
|
|||
},
|
||||
shouldConfirmDeny() {
|
||||
return this.mergedConfig.modalOnDenyFollow
|
||||
},
|
||||
show () {
|
||||
const notifId = this.$store.state.api.followRequests.find(req => req.id === this.user.id)
|
||||
|
||||
return notifId !== undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<basic-user-card :user="user">
|
||||
<basic-user-card :user="user" v-if="show">
|
||||
<div class="follow-request-card-content-container">
|
||||
<button
|
||||
class="btn button-default"
|
||||
|
|
|
@ -1,10 +1,28 @@
|
|||
import FollowRequestCard from '../follow_request_card/follow_request_card.vue'
|
||||
import withLoadMore from '../../hocs/with_load_more/with_load_more'
|
||||
import List from '../list/list.vue'
|
||||
import get from 'lodash/get'
|
||||
|
||||
const FollowRequestList = withLoadMore({
|
||||
fetch: (props, $store) => $store.dispatch('fetchFollowRequests'),
|
||||
select: (props, $store) =>
|
||||
get($store.state.api, 'followRequests', []).map((req) =>
|
||||
$store.getters.findUser(req.id)
|
||||
),
|
||||
destroy: (props, $store) => $store.dispatch('clearFollowRequests'),
|
||||
childPropName: 'items',
|
||||
additionalPropNames: ['userId']
|
||||
})(List)
|
||||
|
||||
const FollowRequests = {
|
||||
components: {
|
||||
FollowRequestCard
|
||||
FollowRequestCard,
|
||||
FollowRequestList
|
||||
},
|
||||
computed: {
|
||||
userId() {
|
||||
return this.$store.state.users.currentUser.id
|
||||
},
|
||||
requests() {
|
||||
return this.$store.state.api.followRequests
|
||||
}
|
||||
|
|
|
@ -6,12 +6,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<FollowRequestCard
|
||||
v-for="request in requests"
|
||||
:key="request.id"
|
||||
:user="request"
|
||||
class="list-item"
|
||||
/>
|
||||
<FollowRequestList :user-id="userId">
|
||||
<template #item="{item}">
|
||||
<FollowRequestCard :user="item" />
|
||||
</template>
|
||||
</FollowRequestList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
77
src/components/followed_tag_card/FollowedTagCard.vue
Normal file
77
src/components/followed_tag_card/FollowedTagCard.vue
Normal file
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div class="followed-tag-card">
|
||||
<span>
|
||||
<router-link :to="{ name: 'tag-timeline', params: {tag: tag.name}}">
|
||||
<span class="tag-link">#{{ tag.name }}</span>
|
||||
</router-link>
|
||||
<span class="unfollow-tag">
|
||||
<button
|
||||
v-if="isFollowing"
|
||||
class="button-default unfollow-tag-button"
|
||||
:title="$t('user_card.unfollow_tag')"
|
||||
@click="unfollowTag(tag.name)"
|
||||
>
|
||||
{{ $t('user_card.unfollow_tag') }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="button-default follow-tag-button"
|
||||
:title="$t('user_card.follow_tag')"
|
||||
@click="followTag(tag.name)"
|
||||
>
|
||||
{{ $t('user_card.follow_tag') }}
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FollowedTagCard',
|
||||
props: {
|
||||
tag: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
// this is a hack to update the state of the button
|
||||
// for some reason, List does not update on changes to the tag object
|
||||
data: () => ({
|
||||
isFollowing: true
|
||||
}),
|
||||
mounted () {
|
||||
this.isFollowing = this.tag.following
|
||||
},
|
||||
methods: {
|
||||
unfollowTag (tag) {
|
||||
this.$store.dispatch('unfollowTag', tag)
|
||||
this.isFollowing = false
|
||||
},
|
||||
followTag (tag) {
|
||||
this.$store.dispatch('followTag', tag)
|
||||
this.isFollowing = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.followed-tag-card {
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.unfollow-tag {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.tag-link {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.unfollow-tag-button, .follow-tag-button {
|
||||
font-size: medium;
|
||||
}
|
||||
</style>
|
|
@ -33,11 +33,6 @@ library.add(
|
|||
)
|
||||
|
||||
const NavPanel = {
|
||||
created() {
|
||||
if (this.currentUser && this.currentUser.locked) {
|
||||
this.$store.dispatch('startFetchingFollowRequests')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TimelineMenuContent
|
||||
},
|
||||
|
@ -54,11 +49,13 @@ const NavPanel = {
|
|||
computed: {
|
||||
...mapState({
|
||||
currentUser: (state) => state.users.currentUser,
|
||||
followRequestCount: (state) => state.api.followRequests.length,
|
||||
privateMode: (state) => state.instance.private,
|
||||
federating: (state) => state.instance.federating
|
||||
}),
|
||||
...mapGetters(['unreadAnnouncementCount'])
|
||||
...mapGetters(['unreadAnnouncementCount']),
|
||||
followRequestCount() {
|
||||
return this.$store.state.users.currentUser.follow_requests_count
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
|
||||
import PinchZoom from '@floatingghost/pinch-zoom-element'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
|
|
|
@ -13,6 +13,7 @@ import suggestor from '../emoji_input/suggestor.js'
|
|||
import { mapGetters, mapState } from 'vuex'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import Select from '../select/select.vue'
|
||||
import iso6391 from 'iso-639-1'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
@ -56,6 +57,7 @@ const PostStatusForm = {
|
|||
'statusMediaDescriptions',
|
||||
'statusScope',
|
||||
'statusContentType',
|
||||
'statusLanguage',
|
||||
'replyTo',
|
||||
'quoteId',
|
||||
'repliedUser',
|
||||
|
@ -122,7 +124,8 @@ const PostStatusForm = {
|
|||
const {
|
||||
postContentType: contentType,
|
||||
sensitiveByDefault,
|
||||
sensitiveIfSubject
|
||||
sensitiveIfSubject,
|
||||
interfaceLanguage
|
||||
} = this.$store.getters.mergedConfig
|
||||
|
||||
let statusParams = {
|
||||
|
@ -134,6 +137,7 @@ const PostStatusForm = {
|
|||
poll: {},
|
||||
mediaDescriptions: {},
|
||||
visibility: this.suggestedVisibility(),
|
||||
language: interfaceLanguage,
|
||||
contentType
|
||||
}
|
||||
|
||||
|
@ -151,6 +155,7 @@ const PostStatusForm = {
|
|||
poll: this.statusPoll || {},
|
||||
mediaDescriptions: this.statusMediaDescriptions || {},
|
||||
visibility: this.statusScope || this.suggestedVisibility(),
|
||||
language: this.statusLanguage || interfaceLanguage,
|
||||
contentType: statusContentType
|
||||
}
|
||||
}
|
||||
|
@ -269,7 +274,10 @@ const PostStatusForm = {
|
|||
...mapGetters(['mergedConfig']),
|
||||
...mapState({
|
||||
mobileLayout: (state) => state.interface.mobileLayout
|
||||
})
|
||||
}),
|
||||
isoLanguages() {
|
||||
return iso6391.getAllCodes()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
newStatus: {
|
||||
|
@ -292,6 +300,7 @@ const PostStatusForm = {
|
|||
files: [],
|
||||
visibility: newStatus.visibility,
|
||||
contentType: newStatus.contentType,
|
||||
language: newStatus.language,
|
||||
poll: {},
|
||||
mediaDescriptions: {}
|
||||
}
|
||||
|
@ -362,6 +371,7 @@ const PostStatusForm = {
|
|||
inReplyToStatusId: this.replyTo,
|
||||
quoteId: this.quoteId,
|
||||
contentType: newStatus.contentType,
|
||||
language: newStatus.language,
|
||||
poll,
|
||||
idempotencyKey: this.idempotencyKey
|
||||
}
|
||||
|
@ -399,6 +409,7 @@ const PostStatusForm = {
|
|||
inReplyToStatusId: this.replyTo,
|
||||
quoteId: this.quoteId,
|
||||
contentType: newStatus.contentType,
|
||||
language: newStatus.language,
|
||||
poll: {},
|
||||
preview: true
|
||||
})
|
||||
|
|
|
@ -212,6 +212,23 @@
|
|||
:on-scope-change="changeVis"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="language-selector"
|
||||
>
|
||||
<Select
|
||||
id="post-language"
|
||||
v-model="newStatus.language"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
v-for="language in isoLanguages"
|
||||
:key="language"
|
||||
:value="language"
|
||||
>
|
||||
{{ language }}
|
||||
</option>
|
||||
</Select>
|
||||
</div>
|
||||
<div
|
||||
v-if="postFormats.length > 1"
|
||||
class="text-format"
|
||||
|
|
|
@ -403,6 +403,15 @@
|
|||
{{ $t('settings.preload_images') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting
|
||||
path="useBlurhash"
|
||||
expert="1"
|
||||
:disabled="!hideNsfw"
|
||||
>
|
||||
{{ $t('settings.use_blurhash') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting
|
||||
path="useOneClickNsfw"
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.user-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
--_still-image-img-visibility: visible;
|
||||
|
@ -237,7 +237,8 @@
|
|||
flex-wrap: wrap;
|
||||
|
||||
.following,
|
||||
.requested_by {
|
||||
.requested_by,
|
||||
.blocking {
|
||||
flex: 1 0 auto;
|
||||
margin: 0;
|
||||
margin-bottom: 0.25em;
|
||||
|
|
|
@ -128,6 +128,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="user-meta">
|
||||
<div
|
||||
v-if="relationship.blocked_by && loggedIn && isOtherUser"
|
||||
class="blocking"
|
||||
>
|
||||
{{ $t('user_card.blocks_you') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="relationship.followed_by && loggedIn && isOtherUser"
|
||||
class="following"
|
||||
|
@ -188,6 +194,7 @@
|
|||
<FollowButton
|
||||
:relationship="relationship"
|
||||
:user="user"
|
||||
:disabled="relationship.blocked_by"
|
||||
/>
|
||||
<template v-if="relationship.following">
|
||||
<ProgressButton
|
||||
|
|
|
@ -9,9 +9,16 @@ import List from '../list/list.vue'
|
|||
import withLoadMore from '../../hocs/with_load_more/with_load_more'
|
||||
import { debounce } from 'lodash'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
|
||||
import {
|
||||
faCircleNotch,
|
||||
faCircleCheck
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import FollowedTagCard from '../followed_tag_card/FollowedTagCard.vue'
|
||||
|
||||
library.add(faCircleNotch)
|
||||
library.add(
|
||||
faCircleNotch,
|
||||
faCircleCheck
|
||||
)
|
||||
|
||||
const FollowerList = withLoadMore({
|
||||
fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
|
||||
|
@ -35,8 +42,15 @@ const FriendList = withLoadMore({
|
|||
additionalPropNames: ['userId']
|
||||
})(List)
|
||||
|
||||
const isUserPage = ({ name }) =>
|
||||
name === 'user-profile' || name === 'external-user-profile'
|
||||
const FollowedTagList = withLoadMore({
|
||||
fetch: (props, $store) => $store.dispatch('fetchFollowedTags', props.userId),
|
||||
select: (props, $store) => get($store.getters.findUser(props.userId), 'followedTagIds', []).map(id => $store.getters.findTag(id)),
|
||||
destroy: (props, $store) => $store.dispatch('clearFollowedTags', props.userId),
|
||||
childPropName: 'items',
|
||||
additionalPropNames: ['userId']
|
||||
})(List)
|
||||
|
||||
const isUserPage = ({ name }) => name === 'user-profile' || name === 'external-user-profile'
|
||||
|
||||
const UserProfile = {
|
||||
data() {
|
||||
|
@ -44,6 +58,7 @@ const UserProfile = {
|
|||
error: false,
|
||||
userId: null,
|
||||
tab: 'statuses',
|
||||
followsTab: 'users',
|
||||
footerRef: null,
|
||||
note: null,
|
||||
noteLoading: false
|
||||
|