moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'admin-dashboard-fixes' into 'develop' 

Fixes and minor improvements for admin dashboard

See merge request pleroma/pleroma-fe!1863
This commit is contained in:
HJ 2023-11-27 13:26:01 +00:00
parent 18c0cf1845 b707a14b10
commit d21e3d5de2
12 changed files with 132 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.d/admin-dash-fixes.fix Normal file
View File

@ -0,0 +1 @@
fix admin dashboard not having any feedback on frontend installation

2
index.html
View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<!--server-generated-meta-->
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<!--server-generated-meta-->
</head> </head>
<body class="hidden"> <body class="hidden">
<noscript>To use Pleroma, please enable JavaScript.</noscript> <noscript>To use Pleroma, please enable JavaScript.</noscript>

2
src/components/global_notice_list/global_notice_list.vue
View File

@ -32,7 +32,7 @@
top: calc(var(--navbar-height) + 0.5em); top: calc(var(--navbar-height) + 0.5em);
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
z-index: var(--ZI_navbar_popovers); z-index: var(--ZI_modals_popovers);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

51
src/components/settings_modal/admin_tabs/frontends_tab.js
View File

@ -4,6 +4,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
import StringSetting from '../helpers/string_setting.vue' import StringSetting from '../helpers/string_setting.vue'
import GroupSetting from '../helpers/group_setting.vue' import GroupSetting from '../helpers/group_setting.vue'
import Popover from 'src/components/popover/popover.vue' import Popover from 'src/components/popover/popover.vue'
import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
@ -22,12 +23,18 @@ const FrontendsTab = {
defaultSource: 'admin' defaultSource: 'admin'
} }
}, },
data () {
return {
working: false
}
},
components: { components: {
BooleanSetting, BooleanSetting,
ChoiceSetting, ChoiceSetting,
IntegerSetting, IntegerSetting,
StringSetting, StringSetting,
GroupSetting, GroupSetting,
PanelLoading,
Popover Popover
}, },
created () { created () {
@ -42,18 +49,56 @@ const FrontendsTab = {
...SharedComputedObject() ...SharedComputedObject()
}, },
methods: { methods: {
canInstall (frontend) {
const fe = this.frontends.find(f => f.name === frontend.name)
if (!fe) return false
return fe.refs.includes(frontend.ref)
},
getSuggestedRef (frontend) {
const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
return defaultFe.ref
} else {
return frontend.refs[0]
}
},
update (frontend, suggestRef) { update (frontend, suggestRef) {
const ref = suggestRef || frontend.refs[0] const ref = suggestRef || this.getSuggestedRef(frontend)
const { name } = frontend const { name } = frontend
const payload = { name, ref } const payload = { name, ref }
this.working = true
this.$store.state.api.backendInteractor.installFrontend({ payload }) this.$store.state.api.backendInteractor.installFrontend({ payload })
.then((externalUser) => { .finally(() => {
this.working = false
})
.then(async (response) => {
this.$store.dispatch('loadFrontendsStuff') this.$store.dispatch('loadFrontendsStuff')
if (response.error) {
const reason = await response.error.json()
this.$store.dispatch('pushGlobalNotice', {
level: 'error',
messageKey: 'admin_dash.frontend.failure_installing_frontend',
messageArgs: {
version: name + '/' + ref,
reason: reason.error
},
timeout: 5000
})
} else {
this.$store.dispatch('pushGlobalNotice', {
level: 'success',
messageKey: 'admin_dash.frontend.success_installing_frontend',
messageArgs: {
version: name + '/' + ref
},
timeout: 2000
})
}
}) })
}, },
setDefault (frontend, suggestRef) { setDefault (frontend, suggestRef) {
const ref = suggestRef || frontend.refs[0] const ref = suggestRef || this.getSuggestedRef(frontend)
const { name } = frontend const { name } = frontend
this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } }) this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })

16
src/components/settings_modal/admin_tabs/frontends_tab.scss
View File

@ -3,6 +3,22 @@
padding: 0; padding: 0;
} }
.relative {
position: relative;
}
.overlay {
position: absolute;
background: var(--bg);
// fix buttons showing through
z-index: 2;
opacity: 0.9;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
dd { dd {
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: nowrap; word-wrap: nowrap;

30
src/components/settings_modal/admin_tabs/frontends_tab.vue
View File

@ -10,7 +10,6 @@
<li> <li>
<h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3> <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
<p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p> <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
<p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<StringSetting path=":pleroma.:frontends.:primary.name" /> <StringSetting path=":pleroma.:frontends.:primary.name" />
@ -24,7 +23,8 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<div class="setting-list"> <div class="setting-list relative">
<PanelLoading class="overlay" v-if="working"/>
<h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3> <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
<ul class="cards-list"> <ul class="cards-list">
<li <li
@ -86,6 +86,11 @@
? $t('admin_dash.frontend.reinstall') ? $t('admin_dash.frontend.reinstall')
: $t('admin_dash.frontend.install') : $t('admin_dash.frontend.install')
}} }}
<code>
{{
getSuggestedRef(frontend)
}}
</code>
</button> </button>
<Popover <Popover
v-if="frontend.refs.length > 1" v-if="frontend.refs.length > 1"
@ -93,13 +98,14 @@
class="button-dropdown" class="button-dropdown"
placement="bottom" placement="bottom"
> >
<template #content> <template #content="{close}">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-for="ref in frontend.refs" v-for="ref in frontend.refs"
:key="ref" :key="ref"
class="button-default dropdown-item" class="button-default dropdown-item"
@click="update(frontend, ref)" @click.prevent="update(frontend, ref)"
@click="close"
> >
<i18n-t keypath="admin_dash.frontend.install_version"> <i18n-t keypath="admin_dash.frontend.install_version">
<template #version> <template #version>
@ -128,14 +134,19 @@
class="button button-default btn" class="button button-default btn"
type="button" type="button"
:disabled=" :disabled="
adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name && adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0] adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]
" "
@click="setDefault(frontend)" @click="setDefault(frontend)"
> >
{{ {{
$t('admin_dash.frontend.set_default') $t('admin_dash.frontend.set_default')
}} }}
<code>
{{
getSuggestedRef(frontend)
}}
</code>
</button> </button>
{{ ' ' }} {{ ' ' }}
<Popover <Popover
@ -144,13 +155,14 @@
class="button-dropdown" class="button-dropdown"
placement="bottom" placement="bottom"
> >
<template #content> <template #content="{close}">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-for="ref in frontend.refs.slice(1)" v-for="ref in frontend.installedRefs || frontend.refs"
:key="ref" :key="ref"
class="button-default dropdown-item" class="button-default dropdown-item"
@click="setDefault(frontend, ref)" @click.prevent="setDefault(frontend, ref)"
@click="close"
> >
<i18n-t keypath="admin_dash.frontend.set_default_version"> <i18n-t keypath="admin_dash.frontend.set_default_version">
<template #version> <template #version>

6
src/components/settings_modal/admin_tabs/instance_tab.vue
View File

@ -6,6 +6,10 @@
<li> <li>
<StringSetting path=":pleroma.:instance.:name" /> <StringSetting path=":pleroma.:instance.:name" />
</li> </li>
<!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
<li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
<AttachmentSetting compact path=":pleroma.:instance.:favicon" />
</li>
<li> <li>
<StringSetting path=":pleroma.:instance.:email" /> <StringSetting path=":pleroma.:instance.:email" />
</li> </li>
@ -16,7 +20,7 @@
<StringSetting path=":pleroma.:instance.:short_description" /> <StringSetting path=":pleroma.:instance.:short_description" />
</li> </li>
<li> <li>
<AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" /> <AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
</li> </li>
<li> <li>
<AttachmentSetting path=":pleroma.:instance.:background_image" /> <AttachmentSetting path=":pleroma.:instance.:background_image" />

1
src/components/settings_modal/helpers/attachment_setting.js
View File

@ -7,6 +7,7 @@ export default {
...Setting, ...Setting,
props: { props: {
...Setting.props, ...Setting.props,
compact: Boolean,
acceptTypes: { acceptTypes: {
type: String, type: String,
required: false, required: false,

38
src/components/settings_modal/helpers/attachment_setting.vue
View File

@ -2,6 +2,7 @@
<span <span
v-if="matchesExpertLevel" v-if="matchesExpertLevel"
class="AttachmentSetting" class="AttachmentSetting"
:class="{ '-compact': compact }"
> >
<label <label
:for="path" :for="path"
@ -24,8 +25,8 @@
{{ backendDescriptionDescription + ' ' }} {{ backendDescriptionDescription + ' ' }}
</p> </p>
<div class="attachment-input"> <div class="attachment-input">
<div>{{ $t('settings.url') }}</div> <div class="controls control-field">
<div class="controls"> <label for="path">{{ $t('settings.url') }}</label>
<input <input
:id="path" :id="path"
class="string-input" class="string-input"
@ -40,7 +41,7 @@
/> />
<ProfileSettingIndicator :is-profile="isProfileSetting" /> <ProfileSettingIndicator :is-profile="isProfileSetting" />
</div> </div>
<div>{{ $t('settings.preview') }}</div> <div v-if="!compact">{{ $t('settings.preview') }}</div>
<Attachment <Attachment
class="attachment" class="attachment"
:compact="compact" :compact="compact"
@ -50,7 +51,7 @@
@setMedia="onMedia" @setMedia="onMedia"
@naturalSizeLoad="onNaturalSizeLoad" @naturalSizeLoad="onNaturalSizeLoad"
/> />
<div class="controls"> <div class="controls control-upload">
<MediaUpload <MediaUpload
ref="mediaUpload" ref="mediaUpload"
class="media-upload-icon" class="media-upload-icon"
@ -84,6 +85,35 @@
width: 20em; width: 20em;
} }
&.-compact {
.attachment-input {
flex-direction: row;
align-items: flex-end;
}
.attachment {
flex: 0;
order: 0;
display: block;
min-width: 4em;
height: 4em;
align-self: center;
margin-bottom: 0;
}
.control-field {
order: 1;
min-width: 12em;
margin-left: 0.5em;
}
.control-upload {
order: 2;
min-width: 12em;
padding: 0 0.5em;
}
}
.controls { .controls {
margin-bottom: 0.5em; margin-bottom: 0.5em;

5
src/i18n/en.json
View File

@ -914,8 +914,9 @@
"wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.", "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
"default_frontend": "Default front-end", "default_frontend": "Default front-end",
"default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.", "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
"default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.", "available_frontends": "Available for install",
"available_frontends": "Available for install" "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
"success_installing_frontend": "Frontend {version} successfully installed"
}, },
"temp_overrides": { "temp_overrides": {
":pleroma": { ":pleroma": {

1
src/i18n/zh.json
View File

@ -1266,7 +1266,6 @@
"wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。", "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
"default_frontend": "默认前端", "default_frontend": "默认前端",
"default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。", "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
"default_frontend_tip2": "WIP: 由于 Pleroma 后端没有正确列出所有已安装的前端，你必须手动输入名称和引用。下面的列表提供了填写这些值的快捷方式。",
"available_frontends": "可供安装" "available_frontends": "可供安装"
}, },
"temp_overrides": { "temp_overrides": {

1
src/modules/adminSettings.js
View File

@ -26,6 +26,7 @@ const adminSettingsStorage = {
}, },
setAvailableFrontends (state, { frontends }) { setAvailableFrontends (state, { frontends }) {
state.frontends = frontends.map(f => { state.frontends = frontends.map(f => {
f.installedRefs = f.installed_refs
if (f.name === 'pleroma-fe') { if (f.name === 'pleroma-fe') {
f.refs = ['master', 'develop'] f.refs = ['master', 'develop']
} else { } else {