diff --git a/README.md b/README.md
index 4e879456..2afa6152 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-# 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
@@ -21,15 +21,15 @@ This is a fork of Pleroma-FE from the Pleroma project, with support for new Akko
# 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
@@ -65,4 +65,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.
diff --git a/index.html b/index.html
index b4e02603..e2641312 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
+
diff --git a/package.json b/package.json
index e712cffd..4bb94fcd 100644
--- a/package.json
+++ b/package.json
@@ -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",
@@ -82,7 +84,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",
diff --git a/src/App.scss b/src/App.scss
index 7e6d0dfc..38574cab 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -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;
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index de261243..0f95237c 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -4,6 +4,8 @@ import { createRouter, createWebHistory } from 'vue-router'
import vClickOutside from 'click-outside-vue3'
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'
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 1a35a77d..7090260e 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -17,6 +17,7 @@ import {
faPencilAlt,
faAlignRight
} from '@fortawesome/free-solid-svg-icons'
+import Blurhash from '../blurhash/Blurhash.vue'
library.add(
faFile,
@@ -61,7 +62,8 @@ const Attachment = {
},
components: {
StillImage,
- VideoAttachment
+ VideoAttachment,
+ Blurhash
},
computed: {
classNames () {
@@ -82,6 +84,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()
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 947b1bfc..0ccdb776 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -64,7 +64,15 @@
:title="attachment.description"
@click.prevent.stop="toggleHidden"
>
+
+
+
+
+
+
+
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 2fb8a5ac..f4900c38 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -98,15 +98,11 @@ export default {
logoLeft () { return this.$store.state.instance.logoLeft },
currentUser () { return this.$store.state.users.currentUser },
privateMode () { return this.$store.state.instance.private },
- federating () { return this.$store.state.instance.federating },
shouldConfirmLogout () {
return this.$store.getters.mergedConfig.modalOnLogout
},
showBubbleTimeline () {
return this.$store.state.instance.localBubbleInstances.length > 0
- },
- restrictedTimelines () {
- return this.$store.state.instance.restrict_unauthenticated.timelines
}
},
methods: {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index a52989a5..92d3fa5b 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -44,7 +44,6 @@
/>
@@ -68,7 +67,6 @@
/>
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 078253c2..d4760edc 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -18,6 +18,7 @@
.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 +18,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 +29,10 @@
min-width: 50%;
max-width: 130%;
}
+
+ .Status > .emoji-picker {
+ z-index: 1000;
+ }
}
}
.emoji-picker {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 00ffb9d2..3ec694f0 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -84,7 +84,10 @@
-