Added icons.

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

View file

@ -582,12 +582,45 @@ pre {
grid-area: action;
}
.help-block{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
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 {
position: relative;
}
@ -801,3 +834,4 @@ input, button, select, optgroup, textarea {
background-color: var(--etherpad-color);
color: white
}

View file

@ -2,6 +2,7 @@ import {Trans} from "react-i18next";
import {useStore} from "../store/store.ts";
import {useEffect, useState} from "react";
import {HelpObj} from "./Plugin.ts";
import {HistoryIcon, ArrowUpFromDotIcon, HashIcon, UnplugIcon, PuzzleIcon, WebhookIcon, LucideWebhook} from 'lucide-react'
export const HelpPage = () => {
const settingsSocket = useStore(state => state.settingsSocket)
@ -37,34 +38,56 @@ export const HelpPage = () => {
return <div>
<h1><Trans i18nKey="admin_plugins_info.version"/></h1>
<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>
<div>
<Trans i18nKey="admin_plugins_info.version_number"/>
</div>
<h2><Trans i18nKey="admin_plugins.installed"/></h2>
<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"/></h2>
<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"/></h2>
<h2><Trans i18nKey="admin_plugins_info.hooks"/> <WebhookIcon/></h2>
{
renderHooks(helpData.installedServerHooks)
}
<h2>
<Trans i18nKey="admin_plugins_info.hooks_client"/>
<Trans i18nKey="admin_plugins_info.hooks_client"/> <LucideWebhook/>
</h2>
<div>
{
renderHooks(helpData.installedClientHooks)
}
</h2>
</div>
</div>
}