libre-service.eu/pad.libre-service.eu-etherpad
libre-service.eu/pad.libre-service.eu-etherpad
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-01-31 19:02:59 +01:00
Code Issues Projects Releases Wiki Activity

Fixed admin panel mobile view.

Browse source
This commit is contained in:
SamTv12345 2024-09-13 15:36:31 +02:00
parent 3de6c7caef
commit 178fe7c24d
3 changed files with 577 additions and 513 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
admin/src/App.tsx
View file

@ -1,4 +1,4 @@
import {useEffect} from 'react' import {useEffect, useState} from 'react'
import './App.css' import './App.css'
import {connect} from 'socket.io-client' import {connect} from 'socket.io-client'
import {isJSONClean} from './utils/utils.ts' import {isJSONClean} from './utils/utils.ts'
@ -6,107 +6,111 @@ import {NavLink, Outlet, useNavigate} from "react-router-dom";
import {useStore} from "./store/store.ts"; import {useStore} from "./store/store.ts";
import {LoadingScreen} from "./utils/LoadingScreen.tsx"; import {LoadingScreen} from "./utils/LoadingScreen.tsx";
import {Trans, useTranslation} from "react-i18next"; import {Trans, useTranslation} from "react-i18next";
import {Cable, Construction, Crown, NotepadText, Wrench, PhoneCall} from "lucide-react"; import {Cable, Construction, Crown, NotepadText, Wrench, PhoneCall, LucideMenu} from "lucide-react";
const WS_URL = import.meta.env.DEV? 'http://localhost:9001' : '' const WS_URL = import.meta.env.DEV ? 'http://localhost:9001' : ''
export const App = ()=> { export const App = () => {
const setSettings = useStore(state => state.setSettings); const setSettings = useStore(state => state.setSettings);
const {t} = useTranslation() const {t} = useTranslation()
const navigate = useNavigate() const navigate = useNavigate()
const [sidebarOpen, setSidebarOpen] = useState<boolean>(true)
useEffect(() => { useEffect(() => {
fetch('/admin-auth/', { fetch('/admin-auth/', {
method: 'POST' method: 'POST'
}).then((value)=>{ }).then((value) => {
if(!value.ok){ if (!value.ok) {
navigate('/login') navigate('/login')
} }
}).catch(()=>{ }).catch(() => {
navigate('/login') navigate('/login')
}) })
}, []); }, []);
useEffect(() => { useEffect(() => {
document.title = t('admin.page-title') document.title = t('admin.page-title')
useStore.getState().setShowLoading(true); useStore.getState().setShowLoading(true);
const settingSocket = connect(`${WS_URL}/settings`, { const settingSocket = connect(`${WS_URL}/settings`, {
transports: ['websocket'], transports: ['websocket'],
}); });
const pluginsSocket = connect(`${WS_URL}/pluginfw/installer`, { const pluginsSocket = connect(`${WS_URL}/pluginfw/installer`, {
transports: ['websocket'], transports: ['websocket'],
}) })
pluginsSocket.on('connect', () => { pluginsSocket.on('connect', () => {
useStore.getState().setPluginsSocket(pluginsSocket); useStore.getState().setPluginsSocket(pluginsSocket);
}); });
settingSocket.on('connect', () => { settingSocket.on('connect', () => {
useStore.getState().setSettingsSocket(settingSocket); useStore.getState().setSettingsSocket(settingSocket);
useStore.getState().setShowLoading(false) useStore.getState().setShowLoading(false)
settingSocket.emit('load'); settingSocket.emit('load');
console.log('connected'); console.log('connected');
}); });
settingSocket.on('disconnect', (reason) => { settingSocket.on('disconnect', (reason) => {
// The settingSocket.io client will automatically try to reconnect for all reasons other than "io // The settingSocket.io client will automatically try to reconnect for all reasons other than "io
// server disconnect". // server disconnect".
useStore.getState().setShowLoading(true) useStore.getState().setShowLoading(true)
if (reason === 'io server disconnect') { if (reason === 'io server disconnect') {
settingSocket.connect(); settingSocket.connect();
} }
}); });
settingSocket.on('settings', (settings) => { settingSocket.on('settings', (settings) => {
/* Check whether the settings.json is authorized to be viewed */ /* Check whether the settings.json is authorized to be viewed */
if (settings.results === 'NOT_ALLOWED') { if (settings.results === 'NOT_ALLOWED') {
console.log('Not allowed to view settings.json') console.log('Not allowed to view settings.json')
return; return;
} }
/* Check to make sure the JSON is clean before proceeding */ /* Check to make sure the JSON is clean before proceeding */
if (isJSONClean(settings.results)) { if (isJSONClean(settings.results)) {
setSettings(settings.results); setSettings(settings.results);
} else { } else {
alert('Invalid JSON'); alert('Invalid JSON');
} }
useStore.getState().setShowLoading(false); useStore.getState().setShowLoading(false);
}); });
settingSocket.on('saveprogress', (status)=>{ settingSocket.on('saveprogress', (status) => {
console.log(status) console.log(status)
}) })
return () => { return () => {
settingSocket.disconnect(); settingSocket.disconnect();
pluginsSocket.disconnect() pluginsSocket.disconnect()
} }
}, []); }, []);
return <div id="wrapper"> return <div id="wrapper" className={`${sidebarOpen ? '': 'closed' }`}>
<LoadingScreen/> <LoadingScreen/>
<div className="menu"> <div className="menu">
<div className="inner-menu"> <div className="inner-menu">
<span> <span>
<Crown width={40} height={40}/> <Crown width={40} height={40}/>
<h1>Etherpad</h1> <h1>Etherpad</h1>
</span> </span>
<ul> <ul>
<li><NavLink to="/plugins"><Cable/><Trans i18nKey="admin_plugins"/></NavLink></li> <li><NavLink to="/plugins"><Cable/><Trans i18nKey="admin_plugins"/></NavLink></li>
<li><NavLink to={"/settings"}><Wrench/><Trans i18nKey="admin_settings"/></NavLink></li> <li><NavLink to={"/settings"}><Wrench/><Trans i18nKey="admin_settings"/></NavLink></li>
<li><NavLink to={"/help"}> <Construction/> <Trans i18nKey="admin_plugins_info"/></NavLink></li> <li><NavLink to={"/help"}> <Construction/> <Trans i18nKey="admin_plugins_info"/></NavLink></li>
<li><NavLink to={"/pads"}><NotepadText/><Trans <li><NavLink to={"/pads"}><NotepadText/><Trans
i18nKey="ep_admin_pads:ep_adminpads2_manage-pads"/></NavLink></li> i18nKey="ep_admin_pads:ep_adminpads2_manage-pads"/></NavLink></li>
<li><NavLink to={"/shout"}><PhoneCall/>Communication</NavLink></li> <li><NavLink to={"/shout"}><PhoneCall/>Communication</NavLink></li>
</ul> </ul>
</div> </div>
</div>
<div className="innerwrapper">
<Outlet/>
</div>
</div> </div>
<button id="icon-button" onClick={() => {
setSidebarOpen(!sidebarOpen)
}}><LucideMenu/></button>
<div className="innerwrapper">
<Outlet/>
</div>
</div>
} }
export default App export default App

916
admin/src/index.css
View file

File diff suppressed because it is too large Load diff

2
admin/src/pages/HomePage.tsx
View file

@ -193,6 +193,7 @@ export const HomePage = () => {
<h2><Trans i18nKey="admin_plugins.available"/></h2> <h2><Trans i18nKey="admin_plugins.available"/></h2>
<SearchField onChange={v=>{setSearchTerm(v.target.value)}} placeholder={t('admin_plugins.available_search.placeholder')} value={searchTerm}/> <SearchField onChange={v=>{setSearchTerm(v.target.value)}} placeholder={t('admin_plugins.available_search.placeholder')} value={searchTerm}/>
<div className="table-container">
<table id="available-plugins"> <table id="available-plugins">
<thead> <thead>
<tr> <tr>
@ -240,5 +241,6 @@ export const HomePage = () => {
} }
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
} }