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-19 06:03:34 +01:00
Code Issues Projects Releases Wiki Activity

Added icons.

Browse source
This commit is contained in:
SamTV12345 2024-05-24 23:08:04 +02:00
parent df3686dcad
commit c4878b6f66
2 changed files with 117 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
admin/src/index.css
View file

@ -582,12 +582,45 @@ pre {
grid-area: action; grid-area: action;
} }
.help-block {
display: grid; .help-block{
grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid;
gap: 20px grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
} }
.help-block svg {
position: absolute;
width: 40px;
height: 40px;
right: 10px;
top: 25%;
color: var(--etherpad-color);
}
.help-block div {
background: white;
gap: 10px;
}
.help-block > div {
position: relative;
padding: 20px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
border-radius: 0.375rem; /* 6px */
}
/* Heading of a card */
.help-block > div > div:first-child {
font-size: 1.25rem; /* 20px */
font-weight: 700;
color: #333;
}
.search-field { .search-field {
position: relative; position: relative;
} }
@ -801,3 +834,4 @@ input, button, select, optgroup, textarea {
background-color: var(--etherpad-color); background-color: var(--etherpad-color);
color: white color: white
} }

135
admin/src/pages/HelpPage.tsx
View file

@ -2,69 +2,92 @@ import {Trans} from "react-i18next";
import {useStore} from "../store/store.ts"; import {useStore} from "../store/store.ts";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {HelpObj} from "./Plugin.ts"; import {HelpObj} from "./Plugin.ts";
import {HistoryIcon, ArrowUpFromDotIcon, HashIcon, UnplugIcon, PuzzleIcon, WebhookIcon, LucideWebhook} from 'lucide-react'
export const HelpPage = () => { export const HelpPage = () => {
const settingsSocket = useStore(state=>state.settingsSocket) const settingsSocket = useStore(state => state.settingsSocket)
const [helpData, setHelpData] = useState<HelpObj>(); const [helpData, setHelpData] = useState<HelpObj>();
useEffect(() => { useEffect(() => {
if(!settingsSocket) return; if (!settingsSocket) return;
settingsSocket?.on('reply:help', (data) => { settingsSocket?.on('reply:help', (data) => {
setHelpData(data) setHelpData(data)
}); });
settingsSocket?.emit('help'); settingsSocket?.emit('help');
}, [settingsSocket]); }, [settingsSocket]);
const renderHooks = (hooks:Record<string, Record<string, string>>) => { const renderHooks = (hooks: Record<string, Record<string, string>>) => {
return Object.keys(hooks).map((hookName, i) => { return Object.keys(hooks).map((hookName, i) => {
return <div key={hookName+i}> return <div key={hookName + i}>
<h3>{hookName}</h3> <h3>{hookName}</h3>
<ul> <ul>
{Object.keys(hooks[hookName]).map((hook, i) => <li key={hook+i}>{hook} {Object.keys(hooks[hookName]).map((hook, i) => <li key={hook + i}>{hook}
<ul key={hookName+hook+i}> <ul key={hookName + hook + i}>
{Object.keys(hooks[hookName][hook]).map((subHook, i) => <li key={i}>{subHook}</li>)} {Object.keys(hooks[hookName][hook]).map((subHook, i) => <li key={i}>{subHook}</li>)}
</ul> </ul>
</li>)} </li>)}
</ul> </ul>
</div> </div>
}) })
}
if (!helpData) return <div></div>
return <div>
<h1><Trans i18nKey="admin_plugins_info.version"/></h1>
<div className="help-block">
<div>
<div>
<Trans i18nKey="admin_plugins_info.version_number"/>
</div>
<div>
{helpData.epVersion}
</div>
<HistoryIcon/>
</div>
<div>
<div>
<Trans i18nKey="admin_plugins_info.version_latest"/>
</div>
<div>{helpData.latestVersion}</div>
<ArrowUpFromDotIcon/>
</div>
<div>
<div>
Git sha
</div>
<div>
{helpData.gitCommit}
</div>
<HashIcon/>
</div>
</div>
<h2><Trans i18nKey="admin_plugins.installed"/> <UnplugIcon/></h2>
<ul>
{helpData.installedPlugins.map((plugin, i) => <li key={plugin + i}>{plugin}</li>)}
</ul>
<h2><Trans i18nKey="admin_plugins_info.parts"/> <PuzzleIcon/></h2>
<ul>
{helpData.installedParts.map((part, i) => <li key={part + i}>{part}</li>)}
</ul>
<h2><Trans i18nKey="admin_plugins_info.hooks"/> <WebhookIcon/></h2>
{
renderHooks(helpData.installedServerHooks)
} }
<h2>
<Trans i18nKey="admin_plugins_info.hooks_client"/> <LucideWebhook/>
if (!helpData) return <div></div> </h2>
<div>
return <div> {
<h1><Trans i18nKey="admin_plugins_info.version"/></h1> renderHooks(helpData.installedClientHooks)
<div className="help-block"> }
<div><Trans i18nKey="admin_plugins_info.version_number"/></div>
<div>{helpData?.epVersion}</div>
<div><Trans i18nKey="admin_plugins_info.version_latest"/></div>
<div>{helpData.latestVersion}</div>
<div>Git sha</div>
<div>{helpData.gitCommit}</div>
</div>
<h2><Trans i18nKey="admin_plugins.installed"/></h2>
<ul>
{helpData.installedPlugins.map((plugin, i) => <li key={plugin+i}>{plugin}</li>)}
</ul>
<h2><Trans i18nKey="admin_plugins_info.parts"/></h2>
<ul>
{helpData.installedParts.map((part, i) => <li key={part+i}>{part}</li>)}
</ul>
<h2><Trans i18nKey="admin_plugins_info.hooks"/></h2>
{
renderHooks(helpData.installedServerHooks)
}
<h2>
<Trans i18nKey="admin_plugins_info.hooks_client"/>
{
renderHooks(helpData.installedClientHooks)
}
</h2>
</div> </div>
</div>
} }