martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

remove tooltip from admin dash in small

Browse Source
This commit is contained in:
Roland Osborne 2022-09-06 11:23:04 -07:00
parent a912ceadd7
commit aebd74e8df
4 changed files with 104 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
net/web/src/admin/dashboard/Dashboard.jsx
View File

@ -22,30 +22,54 @@ export function Dashboard({ token, config, logout }) {
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="label">Accounts</div> <div class="label">Accounts</div>
<div class="settings"> { state.display === 'small' && (
<Tooltip placement="topRight" title="Reload Accounts"> <>
<SettingsButton type="text" size="small" icon={<ReloadOutlined />} <div class="settings">
onClick={() => actions.getAccounts()}></SettingsButton> <SettingsButton type="text" size="small" icon={<ReloadOutlined />}
</Tooltip> onClick={() => actions.getAccounts()}></SettingsButton>
</div> </div>
<div class="settings"> <div class="settings">
<Tooltip placement="topRight" title="Configure Server"> <SettingsButton type="text" size="small" icon={<SettingOutlined />}
<SettingsButton type="text" size="small" icon={<SettingOutlined />} onClick={() => actions.setShowSettings(true)}></SettingsButton>
onClick={() => actions.setShowSettings(true)}></SettingsButton> </div>
</Tooltip> <div class="settings">
</div> <SettingsButton type="text" size="small" icon={<LogoutOutlined />}
<div class="settings"> onClick={() => logout()}></SettingsButton>
<Tooltip placement="topRight" title="Logout"> </div>
<SettingsButton type="text" size="small" icon={<LogoutOutlined />} <div class="add">
onClick={() => logout()}></SettingsButton> <AddButton type="text" size="large" icon={<UserAddOutlined />}
</Tooltip> loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton>
</div> </div>
<div class="add"> </>
<Tooltip placement="topRight" title="Create Account Link"> )}
<AddButton type="text" size="large" icon={<UserAddOutlined />} { state.display !== 'small' && (
loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton> <>
</Tooltip> <div class="settings">
</div> <Tooltip placement="topRight" title="Reload Accounts">
<SettingsButton type="text" size="small" icon={<ReloadOutlined />}
onClick={() => actions.getAccounts()}></SettingsButton>
</Tooltip>
</div>
<div class="settings">
<Tooltip placement="topRight" title="Configure Server">
<SettingsButton type="text" size="small" icon={<SettingOutlined />}
onClick={() => actions.setShowSettings(true)}></SettingsButton>
</Tooltip>
</div>
<div class="settings">
<Tooltip placement="topRight" title="Logout">
<SettingsButton type="text" size="small" icon={<LogoutOutlined />}
onClick={() => logout()}></SettingsButton>
</Tooltip>
</div>
<div class="add">
<Tooltip placement="topRight" title="Create Account Link">
<AddButton type="text" size="large" icon={<UserAddOutlined />}
loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton>
</Tooltip>
</div>
</>
)}
</div> </div>
<div class="body"> <div class="body">

66
net/web/src/admin/dashboard/accountItem/AccountItem.jsx
View File

@ -23,23 +23,6 @@ export function AccountItem({ token, item, remove }) {
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
}; };
const Enable = () => {
if (state.disabled) {
return (
<Tooltip placement="topLeft" title="Enable Account">
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
</Tooltip>
)
}
return (
<Tooltip placement="topLeft" title="Disable Account">
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
</Tooltip>
)
}
const accessLink = () => { const accessLink = () => {
return window.location.origin + '/#/login?access=' + state.accessToken; return window.location.origin + '/#/login?access=' + state.accessToken;
}; };
@ -54,15 +37,46 @@ export function AccountItem({ token, item, remove }) {
<div class="guid">{ state.guid }</div> <div class="guid">{ state.guid }</div>
</div> </div>
<div class="control"> <div class="control">
<Tooltip placement="topLeft" title="Account Login Link"> { state.display === 'small' && (
<ResetButton type="text" size="large" icon={<UnlockOutlined />} <>
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton> <ResetButton type="text" size="large" icon={<UnlockOutlined />}
</Tooltip> loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
<Enable /> { state.disabled && (
<Tooltip placement="topLeft" title="Delete Account"> <EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />} loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
loading={state.removeBusy} onClick={removeAccount}></DeleteButton> )}
</Tooltip> { !state.disabled && (
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
)}
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
</>
)}
{ state.display !== 'small' && (
<>
<Tooltip placement="topLeft" title="Account Login Link">
<ResetButton type="text" size="large" icon={<UnlockOutlined />}
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
</Tooltip>
{ state.disabled && (
<Tooltip placement="topLeft" title="Enable Account">
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
</Tooltip>
)}
{ !state.disabled && (
<Tooltip placement="topLeft" title="Disable Account">
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
</Tooltip>
)}
<Tooltip placement="topLeft" title="Delete Account">
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
</Tooltip>
</>
)}
</div> </div>
<Modal title="Access Account Link" visible={state.showAccess} centered width="fitContent" <Modal title="Access Account Link" visible={state.showAccess} centered width="fitContent"
footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]} footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}

9
net/web/src/admin/dashboard/accountItem/useAccountItem.hook.js
View File

@ -1,7 +1,8 @@
import { useState, useEffect } from 'react'; import { useContext, useState, useEffect } from 'react';
import { getAccountImageUrl } from 'api/getAccountImageUrl'; import { getAccountImageUrl } from 'api/getAccountImageUrl';
import { setAccountStatus } from 'api/setAccountStatus'; import { setAccountStatus } from 'api/setAccountStatus';
import { addAccountAccess } from 'api/addAccountAccess'; import { addAccountAccess } from 'api/addAccountAccess';
import { ViewportContext } from 'context/ViewportContext';
export function useAccountItem(token, item, remove) { export function useAccountItem(token, item, remove) {
@ -11,6 +12,8 @@ export function useAccountItem(token, item, remove) {
accessBusy: false, accessBusy: false,
showAccess: false, showAccess: false,
}); });
const viewport = useContext(ViewportContext);
const updateState = (value) => { const updateState = (value) => {
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
@ -28,6 +31,10 @@ export function useAccountItem(token, item, remove) {
}); });
}, [token, item]); }, [token, item]);
useEffect(() => {
updateState({ display: viewport.state.display });
}, [viewport]);
const actions = { const actions = {
setAccessLink: async () => { setAccessLink: async () => {
if (!state.accessBusy) { if (!state.accessBusy) {

9
net/web/src/admin/dashboard/useDashboard.hook.js
View File

@ -1,8 +1,9 @@
import { useState, useEffect } from 'react'; import { useContext, useState, useEffect } from 'react';
import { setNodeConfig } from 'api/setNodeConfig'; import { setNodeConfig } from 'api/setNodeConfig';
import { getNodeAccounts } from 'api/getNodeAccounts'; import { getNodeAccounts } from 'api/getNodeAccounts';
import { removeAccount } from 'api/removeAccount'; import { removeAccount } from 'api/removeAccount';
import { addAccountCreate } from 'api/addAccountCreate'; import { addAccountCreate } from 'api/addAccountCreate';
import { ViewportContext } from 'context/ViewportContext';
export function useDashboard(token, config) { export function useDashboard(token, config) {
@ -21,6 +22,8 @@ export function useDashboard(token, config) {
showCreate: false, showCreate: false,
}); });
const viewport = useContext(ViewportContext);
const updateState = (value) => { const updateState = (value) => {
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
} }
@ -109,6 +112,10 @@ export function useDashboard(token, config) {
}, },
}; };
useEffect(() => {
updateState({ display: viewport.state.display });
}, [viewport]);
useEffect(() => { useEffect(() => {
const { accountStorage, domain, keyType, enableImage, enableAudio, enableVideo } = config; const { accountStorage, domain, keyType, enableImage, enableAudio, enableVideo } = config;
updateState({ domain, accountStorage: Math.ceil(accountStorage / 1073741824), keyType, updateState({ domain, accountStorage: Math.ceil(accountStorage / 1073741824), keyType,