Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-17 17:36:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: drop blueprintjs 6 (#1073)

Browse Source
This commit is contained in:
undefined authored and GitHub committed 2025-11-04 09:08:20 +00:00
1 parent 40114323e4
commit 3996f6f2ef
27 files changed
+764 -652
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/common/subtask.ts
+5 -2
View File
@@ -1,4 +1,4 @@
import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
import { parseMemoryMB, parseTimeMS, sortFiles } from '@hydrooj/utils/lib/common';
export function convertIniConfig(ini: string) {
const f = ini.split('\n');
@@ -118,13 +118,16 @@ export function readSubtasksFromFiles(files: string[], config) {
id: sid,
};
} else if (!subtask[sid].cases) subtask[sid].cases = [c];
else subtask[sid].cases.push(c);
else if (!subtask[sid].cases.find((i) => i.input === c.input && i.output === c.output)) {
subtask[sid].cases.push(c);
}
break;
}
}
if (match) break;
}
}
for (const id in subtask) subtask[id].cases = sortFiles(subtask[id].cases, 'input');
return Object.values(subtask);
}
packages/components/frontend/autocomplete/autocomplete.scss
-18
View File
@@ -75,12 +75,6 @@
white-space: nowrap;
text-overflow: ellipsis;
}
&>span.bp6-icon>svg {
font-size: 12px;
cursor: pointer;
padding: 4px;
}
}
.autocomplete-list {
@@ -104,26 +98,14 @@
flex-grow: 1;
}
&>span.bp6-icon>svg {
color: transparent;
}
&[aria-selected='true'] {
background-color: #fafafa;
font-weight: 600;
&>span.bp6-icon>svg {
color: #1890ff;
}
}
&[data-focus='true'] {
background-color: #e6f7ff;
cursor: pointer;
&>span.bp6-icon>svg {
color: currentColor;
}
}
}
}
packages/ui-default/components/datepicker/datepicker.styl
-1
View File
@@ -16,7 +16,6 @@
opacity .1s ease-in-out,
max-height 0s,
border-width 0s
box-shadow: $data-picker-shadow
.picker__list
padding: 0
packages/ui-default/components/discussion/history.page.tsx
+29 -23
View File
@@ -1,8 +1,7 @@
/* eslint-disable react-refresh/only-export-components */
import { Popover } from '@blueprintjs/core';
import { MantineProvider, Popover } from '@mantine/core';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import TimeAgo from 'timeago-react';
import { InfoDialog } from 'vj/components/dialog';
import { AutoloadPage } from 'vj/misc/Page';
@@ -22,22 +21,31 @@ async function historyDialog(payload, time, uid) {
}).open();
}
const queryClient = new QueryClient();
function History({ payload }) {
const [load, setLoad] = React.useState(false);
const { isLoading, isError, data } = useQuery(['history', payload], async () => {
const { history } = await request.get(`${payload}?all=1`);
return history;
}, { enabled: !!load });
return (
<Popover
usePortal
interactionKind="hover"
position="bottom"
onOpening={() => setLoad(true)}
content={<ol className="menu">
{(isLoading || isError) && (
const [data, setData] = React.useState([]);
const [isLoading, setLoading] = React.useState(true);
const [error, setError] = React.useState('');
React.useEffect(() => {
if (!load) return;
setLoading(true);
request.get(`${payload}?all=1`).then(({ history }) => {
setData(history);
}).catch((e) => {
setError(e.message);
}).finally(() => {
setLoading(false);
});
}, [load]);
return <Popover onOpen={() => setLoad(true)}>
<Popover.Target>
<span>{i18n('Edited')} <span className="icon icon-expand_more"></span></span>
</Popover.Target>
<Popover.Dropdown>
<ol className="menu">
{(isLoading || error) && (
<li className="menu__item">
<a className="menu__link">
{isLoading ? i18n('Loading...') : i18n('Loading failed.')}
@@ -53,11 +61,9 @@ function History({ payload }) {
</a>
</li>
))}
</ol>}
>
<span>{i18n('Edited')} <span className="icon icon-expand_more"></span></span>
</Popover>
);
</ol>
</Popover.Dropdown>
</Popover>;
}
const page = new AutoloadPage('discussionHistoryPage', () => {
@@ -65,9 +71,9 @@ const page = new AutoloadPage('discussionHistoryPage', () => {
const url = $(e).data('raw-url');
if (!url) return;
ReactDOM.createRoot(e).render(
<QueryClientProvider client={queryClient}>
<MantineProvider>
<History payload={url} />
</QueryClientProvider>,
</MantineProvider>,
);
});
});
packages/ui-default/components/discussion/reaction.page.tsx
+22 -15
View File
@@ -1,7 +1,7 @@
/* eslint-disable react-refresh/only-export-components */
import 'jquery.easing';
import { Popover } from '@blueprintjs/core';
import { MantineProvider, Popover } from '@mantine/core';
import $ from 'jquery';
import { chunk } from 'lodash';
import * as React from 'react';
@@ -36,21 +36,30 @@ function Reaction({ payload, ele }) {
const emojiList: string[] = (UiContext.emojiList || '👍 👎 😄 😕 ❤️ 🤔 🤣 🌿 🍋 🕊️ 👀 🤡').split(' ');
const elesPerRow = getRow(Math.sqrt(emojiList.length));
const [focus, updateFocus] = React.useState(false);
const [finish, updateFinish] = React.useState(false);
if (finish) setTimeout(() => updateFinish(false), 1000);
const [open, updateOpen] = React.useState(false);
const [trigger, updateTrigger] = React.useState(false);
return (
<Popover
usePortal
interactionKind="hover"
isOpen={finish ? false : (focus ? true : undefined)}
content={<div>
<Popover opened={trigger || open || focus}>
<Popover.Target>
<span
className="icon icon-emoji"
onMouseEnter={() => updateTrigger(true)}
onMouseLeave={() => {
setTimeout(() => updateTrigger(false), 300);
}}
/>
</Popover.Target>
<Popover.Dropdown onMouseEnter={() => updateOpen(true)} onMouseLeave={() => updateOpen(false)}>
{chunk(emojiList, elesPerRow).map((line, i) => (
<div className="row" key={+i} style={{ paddingBottom: 4, paddingTop: 4 }}>
{line.map((emoji) => (
<div
key={emoji}
className={`medium-${12 / elesPerRow} small-${12 / elesPerRow} columns popover-reaction-item`}
onClick={() => handleEmojiClick(payload, emoji, ele).then(() => updateFinish(true))}
onClick={() => handleEmojiClick(payload, emoji, ele).then(() => {
updateOpen(false);
updateTrigger(false);
})}
>
{emoji}
</div>
@@ -62,9 +71,7 @@ function Reaction({ payload, ele }) {
<input name="emojiSuggest" onFocus={() => updateFocus(true)} onBlur={() => updateFocus(false)}></input>
</div>
</div>
</div>}
>
<span className="icon icon-emoji"></span>
</Popover.Dropdown>
</Popover>
);
}
@@ -72,9 +79,9 @@ function Reaction({ payload, ele }) {
const reactionPage = new AutoloadPage('reactionPage', () => {
const canUseReaction = $('[data-op="react"]').length > 0;
$('[data-op="react"]').each((i, e) => {
ReactDOM.createRoot(e).render(
<Reaction payload={$(e).data('form')} ele={$(`.reactions[data-${$(e).data('form').nodeType}='${$(e).data('form').id}']`)} />,
);
ReactDOM.createRoot(e).render(<MantineProvider>
<Reaction payload={$(e).data('form')} ele={$(`.reactions[data-${$(e).data('form').nodeType}='${$(e).data('form').id}']`)} />
</MantineProvider>);
});
$(document).on('click', '.reaction', async (e) => {
if (!canUseReaction) {
packages/ui-default/components/notification/index.ts
+68 -18
View File
@@ -1,17 +1,43 @@
import { Intent, OverlayToaster, Position } from '@blueprintjs/core';
import { createTheme, MantineProvider, Notification as MantineNotification } from '@mantine/core';
import { Notifications, notifications } from '@mantine/notifications';
import $ from 'jquery';
import React from 'react';
import { tpl, zIndexManager } from 'vj/utils/base';
const ToasterContainer = document.createElement('div');
ToasterContainer.style.position = 'fixed';
ToasterContainer.style.bottom = '0px';
ToasterContainer.style.width = '100%';
ToasterContainer.style.zIndex = '9999';
document.body.append(ToasterContainer);
const colorWhite = {
color: 'var(--mantine-color-white)',
} as const;
const AppToaster = OverlayToaster.create(
{ position: Position.BOTTOM_LEFT, usePortal: false },
{ container: ToasterContainer },
const theme = createTheme({
components: {
Notification: MantineNotification.extend({
classNames: {
closeButton: 'mantine-notifications-close-button',
},
styles: {
root: {
backgroundColor: 'var(--notification-color, var(--mantine-primary-color-filled))',
paddingInlineStart: 'var(--mantine-spacing-xs)',
},
title: {
...colorWhite,
fontSize: 'var(--mantine-font-size-md)',
},
icon: {
fontSize: '24px',
marginInlineEnd: 'var(--mantine-spacing-xs)',
},
description: colorWhite,
closeButton: colorWhite,
},
}),
},
});
document.body.append(tpl(
React.createElement(MantineProvider, { theme },
React.createElement(Notifications, { position: 'bottom-left', zIndex: 99999 }),
), true),
);
interface NotificationOptions {
@@ -66,20 +92,44 @@ export default class Notification {
setTimeout(() => this.$n.remove(), 200);
}
static async success(message: string, duration?: number) {
return (await AppToaster).show({ message, timeout: duration, intent: Intent.SUCCESS });
static success(message: string, duration?: number) {
return notifications.show({
title: message,
color: '#238551',
message: '',
icon: React.createElement('i', { className: 'icon icon-check' }),
autoClose: duration,
});
}
static async info(message: string, duration?: number) {
return (await AppToaster).show({ message, timeout: duration, intent: Intent.PRIMARY });
static info(message: string, duration?: number) {
return notifications.show({
title: message,
color: '#2d72d2',
message: '',
icon: React.createElement('i', { className: 'icon icon-info--circle' }),
autoClose: duration,
});
}
static async warn(message: string, duration?: number) {
return (await AppToaster).show({ message, timeout: duration, intent: Intent.WARNING });
static warn(message: string, duration?: number) {
return notifications.show({
title: message,
color: '#fbb360',
message: '',
icon: React.createElement('i', { className: 'icon icon-warning' }),
autoClose: duration,
});
}
static async error(message: string, duration?: number) {
return (await AppToaster).show({ message, timeout: duration, intent: Intent.DANGER });
static error(message: string, duration?: number) {
return notifications.show({
title: message,
color: '#cd4246',
message: '',
icon: React.createElement('i', { className: 'icon icon-close--circle' }),
autoClose: duration,
});
}
}
packages/ui-default/components/notification/notification.page.styl
+4
View File
@@ -77,4 +77,8 @@
.notification {
display: none !important
}
}
.mantine-notifications-close-button:hover {
background-color: rgba(0, 0, 0, 0.1) !important;
}
packages/ui-default/components/problem/tag.page.styl
+30
View File
@@ -19,11 +19,41 @@
margin-left: rem(3px)
margin-bottom: rem(5px)
line-height: 30px !important
display: inline-flex
flex-direction: row
align-items: center
border: none
border-radius: 2px
box-shadow: none
font-size: 14px
line-height: 18px
max-width: 100%
min-height: 30px
min-width: 30px
padding: 6px 8px
position: relative
background-color: rgba(143, 153, 168, 0.15)
color: #1c2127
&:hover
text-decoration: none
> span
display: flex
align-items: center
> *
flex-grow: 0
flex-shrink: 0
margin-right: 8px
> :last-child
margin-right: 0
&:focus
outline: rgba(33, 93, 176, 0.752) solid 2px
outline-offset: 0
-moz-outline-radius: 6px
&.interactive
cursor: pointer
&:hover
background: rgba(143, 153, 168, 0.3)
color: #111418
.problem__tag-link
display: inline-block
packages/ui-default/components/problemconfig/ProblemConfigForm.tsx
+9 -9
View File
@@ -1,6 +1,4 @@
import {
Card, InputGroup, Tag,
} from '@blueprintjs/core';
import { Card, Text, TextInput } from '@mantine/core';
import { isEqual } from 'lodash';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
@@ -16,16 +14,18 @@ function FileIOConfig() {
const dispatch = useDispatch();
return (
<FormItem columns={12} label="FileIOConfig" disableLabel>
<Card style={{ padding: 10 }}>
<Card withBorder style={{ padding: 10, overflow: 'visible' }}>
<div className="row">
<FormItem columns={6} label="FileIO">
<InputGroup
rightElement={<Tag minimal>.in/.out</Tag>}
<TextInput
rightSection={<Text size="sm">.in/.out</Text>}
rightSectionWidth={100}
rightSectionPointerEvents="none"
value={filename || ''}
onChange={(ev) => {
dispatch({ type: 'problemconfig/updateFileIO', filename: ev.currentTarget.value });
}}
fill
style={{ width: '100%' }}
/>
</FormItem>
</div>
@@ -41,7 +41,7 @@ function ExtraFilesConfig() {
const dispatch = useDispatch();
return (
<FormItem columns={12} label="ExtraFilesConfig" disableLabel>
<Card style={{ padding: 10 }}>
<Card withBorder style={{ padding: 10, overflow: 'visible' }}>
<div className="row">
<FormItem columns={12} label={i18n('user_extra_files')}>
<FileSelectAutoComplete
@@ -70,7 +70,7 @@ function LangConfig() {
const dispatch = useDispatch();
return (
<FormItem columns={12} label="langs" disableLabel>
<Card style={{ padding: 10 }}>
<Card withBorder style={{ padding: 10, overflow: 'visible' }}>
<div className="row">
<FormItem columns={12} label="langs">
<LanguageSelectAutoComplete
packages/ui-default/components/problemconfig/ProblemConfigTree.tsx
+69 -75
View File
@@ -1,13 +1,12 @@
import { normalizeSubtasks, readSubtasksFromFiles } from '@hydrooj/common';
import { TestCaseConfig } from 'hydrooj';
import {
Button, Classes, Icon, Popover, TreeNode,
} from '@blueprintjs/core';
import { Button, Text, Tree } from '@mantine/core';
import { isEqual } from 'lodash';
import React from 'react';
import { DndProvider, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { useDispatch, useSelector, useStore } from 'react-redux';
import { confirm } from 'vj/components/dialog/index';
import { i18n } from 'vj/utils';
import { RootState } from './reducer';
import { AddTestcase } from './tree/AddTestcase';
@@ -47,14 +46,6 @@ export function SubtaskNode(props: { subtaskId: number }) {
}));
function deleteSubtask() {
dispatch({
type: 'problemconfig/moveTestcases',
payload: {
target: -1,
source: subtaskId,
cases,
},
});
dispatch({
type: 'problemconfig/deleteSubtask',
id: subtaskId,
@@ -62,47 +53,47 @@ export function SubtaskNode(props: { subtaskId: number }) {
}
return (
<li className={`${Classes.TREE_NODE} ${Classes.TREE_NODE_EXPANDED}`}>
{subtaskId !== -1 && <div className={Classes.TREE_NODE_CONTENT} onClick={() => setExpand((e) => !e)}>
<Icon icon={expand ? 'folder-open' : 'folder-close'} />&nbsp;
<span className={Classes.TREE_NODE_LABEL}>{i18n('Subtask {0}', subtaskId)}</span>
<span className={Classes.TREE_NODE_SECONDARY_LABEL} onClick={(ev) => ev.stopPropagation()}>
<Popover
content={<div style={{ padding: 20 }}>
<b>{i18n('Are you sure you want to delete this subtask?')}</b>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 }}>
<Button intent="danger" onClick={deleteSubtask}>{i18n('Delete')}</Button>
</div>
</div>}
<div style={{ marginBottom: 8 }}>
{subtaskId !== -1 && (
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => setExpand((e) => !e)}>
<Text fw={600} style={{ marginRight: 8 }}>
{expand ? <i className="icon icon-expand_more" /> : <i className="icon icon-expand_less" />}
</Text>
<Text>{i18n('Subtask {0}', subtaskId)}</Text>
<Button
variant="subtle"
size="sm"
color="black"
style={{ marginLeft: 'auto' }}
onClick={(ev) => {
ev.stopPropagation();
confirm(i18n('Are you sure you want to delete this subtask?')).then((yes) => {
if (yes) deleteSubtask();
});
}}
>
<Icon icon="trash" />
</Popover>
</span>
</div>}
<ul className={Classes.TREE_NODE_LIST} ref={drop}>
{subtaskId !== -1 && <SubtaskSettings subtaskId={subtaskId} subtaskIds={subtaskIds} time={time} memory={memory} />}
<i className="icon icon-delete" />
</Button>
</div>
)}
<div ref={drop}>
{subtaskId !== -1 && expand && (
<SubtaskSettings subtaskId={subtaskId} subtaskIds={subtaskIds} time={time} memory={memory} />
)}
{expand
? <SelectionManager subtaskId={subtaskId} subtaskIds={subtaskIds} />
: <TreeNode
depth={0}
id={`s${subtaskId}`}
onClick={() => setExpand(false)}
icon="layers"
label={<>&nbsp;{cases.length} testcases.</>}
path={[0]}
/>}
: <div style={{ paddingLeft: 22 }}>
<Text>{cases.length} testcases.</Text>
</div>}
{!cases.length && (
<li className={Classes.TREE_NODE}>
<div className={Classes.TREE_NODE_CONTENT}>
<span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
<span className={`${Classes.TREE_NODE_LABEL} text-gray`}>{subtaskId === -1
? i18n('No testcase here')
: i18n('Drag and drop testcases here:')}</span>
</div>
</li>
<div style={{ paddingLeft: 22 }}>
<Text c="dimmed">{subtaskId === -1
? i18n('No testcase here')
: i18n('Drag and drop testcases here:')}</Text>
</div>
)}
</ul>
</li>
</div>
</div>
);
}
@@ -110,7 +101,7 @@ export function SubtaskConfigTree() {
const ids = useSelector((s: RootState) => Object.values(s.config?.subtasks || []).map((i) => i.id), isEqual);
const dispatch = useDispatch();
const store = useStore<RootState>();
function autoConfigure() {
const autoConfigure = React.useCallback(() => {
const state = store.getState();
const subtasks = readSubtasksFromFiles(state.testdata.map((t) => t.name), state.config);
const cases = subtasks.reduce((a, b) => a.concat(b.cases), []);
@@ -122,29 +113,34 @@ export function SubtaskConfigTree() {
type: 'problemconfig/delTestcases',
cases,
});
}
}, [dispatch, store]);
const rootNodes = React.useMemo<any[]>(() => [
{ id: 'auto', label: i18n('Auto configure'), type: 'action' as const },
{ id: 'global', label: i18n('Global settings'), type: 'global' as const },
...ids.map((id) => ({ id: `sub-${id}`, label: i18n('Subtask {0}', id), type: 'subtask' as const, subtaskId: id })),
{ id: 'add', label: i18n('Add new subtask'), type: 'add' as const },
], [ids]);
return (
<div className={Classes.TREE}>
<ul className={`${Classes.TREE_NODE_LIST} ${Classes.TREE_ROOT}`}>
<li className={Classes.TREE_NODE} onClick={autoConfigure}>
<div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
<Icon icon="clean" />&nbsp;
<span className={Classes.TREE_NODE_LABEL}>{i18n('Auto configure')}</span>
</div>
</li>
<GlobalSettings />
{ids.map((id) => <SubtaskNode key={id} subtaskId={id} />)}
<li
className={Classes.TREE_NODE}
onClick={() => dispatch({ type: 'problemconfig/addSubtask' })}
>
<div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
<Icon icon="folder-new" />&nbsp;
<span className={Classes.TREE_NODE_LABEL}>{i18n('Add new subtask')}</span>
</div>
</li>
</ul>
</div>
<Tree
data={rootNodes}
levelOffset={12}
renderNode={({ node }) => {
const n: any = node;
if (n.type === 'action') {
return <div style={{ padding: '6px 0' }} onClick={autoConfigure}>
<Text><i className="icon icon-settings" /> {i18n('Auto configure')}</Text>
</div>;
}
if (n.type === 'global') return <GlobalSettings />;
if (n.type === 'add') {
return <div style={{ padding: '6px 0' }} onClick={() => dispatch({ type: 'problemconfig/addSubtask' })}>
<Text><i className="icon icon-add" /> {i18n('Add new subtask')}</Text>
</div>;
}
return <SubtaskNode subtaskId={n.subtaskId} />;
}}
/>
);
}
@@ -156,11 +152,9 @@ export function ProblemConfigTree() {
<SubtaskConfigTree />
</div>
<div className="medium-6 columns">
<div className={Classes.TREE}>
<ul className={`${Classes.TREE_ROOT} ${Classes.TREE_NODE_LIST}`}>
<AddTestcase />
<SubtaskNode subtaskId={-1} />
</ul>
<div>
<AddTestcase />
<SubtaskNode subtaskId={-1} />
</div>
</div>
</div>
packages/ui-default/components/problemconfig/ProblemType.tsx
+126 -145
View File
@@ -1,6 +1,4 @@
import {
Card, Classes, Switch, Tab, Tabs, TabsExpander,
} from '@blueprintjs/core';
import { Card, SegmentedControl, Switch } from '@mantine/core';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { i18n } from 'vj/utils';
@@ -26,158 +24,141 @@ export default function ProblemType() {
}, [checker]);
return (
<FormItem columns={12} label="" disableLabel>
<Card style={{ padding: 10 }}>
<Tabs
id="ProblemTypeTabs"
selectedTabId={Type}
onChange={dispatcher({ type: 'CONFIG_FORM_UPDATE', key: 'type' })}
defaultSelectedTabId="default"
renderActiveTabPanelOnly
>
<span className={Classes.TAB}>{i18n('Problem Type')}</span>
<TabsExpander />
<Tab
id="default"
title={i18n('problem_type.default')}
panel={(
<Tabs
id="CheckerTypeTabs"
selectedTabId={
['strict', 'default'].includes(checkerType) || !checkerType
? 'default' : (checkerType !== 'testlib' ? 'other' : 'testlib')
}
<Card withBorder style={{ padding: 10, overflow: 'visible' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 3 }}>
<div>{i18n('Problem Type')}</div>
<SegmentedControl
value={Type}
onChange={dispatcher({ type: 'CONFIG_FORM_UPDATE', key: 'type' })}
data={[
{ label: i18n('problem_type.default'), value: 'default' },
{ label: i18n('problem_type.interactive'), value: 'interactive' },
{ label: i18n('problem_type.communication'), value: 'communication' },
{ label: i18n('problem_type.submit_answer'), value: 'submit_answer' },
{ label: i18n('problem_type.objective'), value: 'objective' },
]}
/>
</div>
{Type === 'default' && (
<>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 3 }}>
<div>{i18n('CheckerType')}</div>
<SegmentedControl
value={(['strict', 'default'].includes(checkerType) || !checkerType)
? 'default' : (checkerType !== 'testlib' ? 'other' : 'testlib')}
onChange={(value) => {
dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type', value });
if (value === 'testlib' && !category) setCategory('custom');
}}
renderActiveTabPanelOnly
>
<span className={Classes.TAB}>{i18n('CheckerType')}</span>
<TabsExpander />
<Tab
id="default"
title={i18n('default')}
panel={(
<div className="row">
<FormItem columns={12} label="Config">
<Switch
checked={checkerType !== 'strict'}
label={i18n('Ignore trailing space and enter.')}
onChange={() => {
dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type', value: checkerType === 'strict' ? 'default' : 'strict' });
}}
/>
</FormItem>
</div>
)}
/>
<Tab
id="testlib"
title="testlib"
panel={(
<div className="row">
<FormItem columns={4} label="Type">
<select
value={category}
onChange={(ev) => {
setCategory(ev.currentTarget.value);
dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker', value: ev.currentTarget.value === 'preset' ? 'acmp' : null });
}}
className="select"
>
<option value="preset">{i18n('Preset')}</option>
<option value="custom">{i18n('Custom')}</option>
</select>
</FormItem>
{category === 'preset'
? <FormItem columns={8} label="Checker">
<select
value={typeof checker === 'string' ? checker : checker.file}
onChange={(ev) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker', value: ev.currentTarget.value })}
className="select"
>
{testlibCheckers.map((c) => (
<option key={c} value={c}>{c}</option>
))}
</select>
</FormItem>
: <SingleFileSelect formKey="checker" label="Checker" withLang />}
</div>
)}
/>
<Tab
id="other"
title="other"
panel={(
<div className="row">
<FormItem columns={4} label="Interface">
<ManagedSelect options={['syzoj', 'hustoj', 'qduoj', 'lemon', 'kattis']} formKey="checker_type" />
</FormItem>
<SingleFileSelect formKey="checker" label="Checker" withLang />
</div>
)}
/>
</Tabs>
data={[
{ label: i18n('default'), value: 'default' },
{ label: 'testlib', value: 'testlib' },
{ label: 'other', value: 'other' },
]}
/>
</div>
{((['strict', 'default'].includes(checkerType) || !checkerType)) && (
<Switch
styles={{ body: { display: 'flex' } }}
checked={checkerType !== 'strict'}
label={i18n('Ignore trailing space and enter.')}
onChange={() => {
dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type', value: checkerType === 'strict' ? 'default' : 'strict' });
}}
/>
)}
/>
<Tab
id="interactive"
title={i18n('problem_type.interactive')}
panel={(
{(!['strict', 'default'].includes(checkerType) && checkerType && checkerType === 'testlib') && (
<div className="row">
<SingleFileSelect formKey="interactor" label="Interactor" withLang />
</div>
)}
/>
<Tab
id="communication"
title={i18n('problem_type.communication')}
panel={(
<div className="row">
<SingleFileSelect formKey="manager" label="Manager" withLang />
<FormItem columns={4} label="Number of Processes">
<input
defaultValue={numProcesses || 2}
placeholder="2"
onChange={(ev) => dispatch(({ type: 'CONFIG_FORM_UPDATE', key: 'num_processes', value: +ev.currentTarget.value }))}
className="textbox"
/>
</FormItem>
</div>
)}
/>
<Tab
id="submit_answer"
title={i18n('problem_type.submit_answer')}
panel={(
<div className="row">
<FormItem columns={6} label="Config" disableLabel>
<Switch
checked={subType === 'multi'}
label={i18n('Multi-file')}
onChange={() => {
dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'subType', value: subType === 'multi' ? 'single' : 'multi' });
<FormItem columns={4} label="Type">
<select
value={category}
onChange={(ev) => {
setCategory(ev.currentTarget.value);
dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker', value: ev.currentTarget.value === 'preset' ? 'acmp' : null });
}}
/>
</FormItem>
<FormItem columns={6} label="Filename">
<input
defaultValue={filename || '#.txt'}
placeholder="#.txt"
disabled={subType !== 'multi'}
onChange={(ev) => dispatch(({ type: 'CONFIG_FORM_UPDATE', key: 'filename', value: ev.currentTarget.value }))}
className="textbox"
/>
className="select"
>
<option value="preset">{i18n('Preset')}</option>
<option value="custom">{i18n('Custom')}</option>
</select>
</FormItem>
{category === 'preset'
? <FormItem columns={8} label="Checker">
<select
value={typeof checker === 'string' ? checker : checker.file}
onChange={(ev) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker', value: ev.currentTarget.value })}
className="select"
>
{testlibCheckers.map((c) => (
<option key={c} value={c}>{c}</option>
))}
</select>
</FormItem>
: <SingleFileSelect formKey="checker" label="Checker" withLang />}
</div>
)}
/>
<Tab
id="objective"
title={i18n('problem_type.objective')}
panel={(<p>{i18n('Unsupported configure this type of problem. Please refer to the documentation.')}</p>)}
/>
</Tabs>
{(!['strict', 'default'].includes(checkerType) && checkerType && checkerType !== 'testlib') && (
<div className="row">
<FormItem columns={4} label="Interface">
<ManagedSelect options={['syzoj', 'hustoj', 'qduoj', 'lemon', 'kattis']} formKey="checker_type" />
</FormItem>
<SingleFileSelect formKey="checker" label="Checker" withLang />
</div>
)}
</>
)}
{Type === 'interactive' && (
<div className="row">
<SingleFileSelect formKey="interactor" label="Interactor" withLang />
</div>
)}
{Type === 'communication' && (
<div className="row">
<SingleFileSelect formKey="manager" label="Manager" withLang />
<FormItem columns={4} label="Number of Processes">
<input
defaultValue={numProcesses || 2}
placeholder="2"
onChange={(ev) => dispatch(({ type: 'CONFIG_FORM_UPDATE', key: 'num_processes', value: +ev.currentTarget.value }))}
className="textbox"
/>
</FormItem>
</div>
)}
{Type === 'submit_answer' && (
<div className="row">
<FormItem columns={6} label="Config" disableLabel>
<Switch
checked={subType === 'multi'}
styles={{ body: { display: 'flex' } }}
label={i18n('Multi-file')}
onChange={() => {
dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'subType', value: subType === 'multi' ? 'single' : 'multi' });
}}
/>
</FormItem>
<FormItem columns={6} label="Filename">
<input
defaultValue={filename || '#.txt'}
placeholder="#.txt"
disabled={subType !== 'multi'}
onChange={(ev) => dispatch(({ type: 'CONFIG_FORM_UPDATE', key: 'filename', value: ev.currentTarget.value }))}
className="textbox"
/>
</FormItem>
</div>
)}
{Type === 'objective' && (
<p>{i18n('Unsupported configure this type of problem. Please refer to the documentation.')}</p>
)}
</Card>
</FormItem>
);
packages/ui-default/components/problemconfig/index.tsx
+71 -36
View File
@@ -1,8 +1,9 @@
import {
Button, Dialog, DialogBody, DialogFooter, Tab, Tabs,
} from '@blueprintjs/core';
import { Button, Tabs } from '@mantine/core';
import { Allotment } from 'allotment';
import { ContextMenuProvider } from 'mantine-contextmenu';
import React from 'react';
import { useSelector } from 'react-redux';
import { useSelector, useStore } from 'react-redux';
import { confirm } from 'vj/components/dialog/index';
import { i18n } from 'vj/utils';
import ProblemConfigEditor from './ProblemConfigEditor';
import ProblemConfigForm from './ProblemConfigForm';
@@ -15,40 +16,74 @@ interface Props {
export default function ProblemConfig(props: Props) {
const [selected, setSelected] = React.useState('basic');
const [open, setOpen] = React.useState(false);
const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
const [tabs, setTabs] = React.useState<HTMLDivElement | null>(null);
const [editor, setEditor] = React.useState<any>(null);
const store = useStore<RootState>();
const valid = useSelector((state: RootState) => state.config.__valid);
const errors = useSelector((state: RootState) => state.config.__errors, (a, b) => JSON.stringify(a) === JSON.stringify(b));
React.useEffect(() => {
if (valid) setOpen(false);
}, [valid]);
return (<>
<div className="row">
<div className="medium-4 columns">
<ProblemConfigEditor />
</div>
<div className="medium-8 columns">
<Tabs onChange={(t) => (t !== 'errors' && setSelected(t.toString()))} selectedTabId={valid ? selected : 'errors'}>
<Tab id="basic" disabled={!valid} title={i18n('Basic')} panel={<ProblemConfigForm />} />
<Tab id="subtasks" disabled={!valid} title={i18n('Subtasks')} panel={<ProblemConfigTree />} />
<Tab
id="errors"
disabled={valid}
title={errors.length ? `Errors(${errors.length})` : 'No Errors'}
panel={<div>{errors.map((i) => (<pre key={i}>{i}</pre>))}</div>}
/>
</Tabs>
</div>
const handleSave = React.useCallback(async () => {
if (valid) props.onSave();
else if (await confirm(i18n('Errors detected in the config. Confirm save?'))) props.onSave();
}, [valid, props.onSave]);
React.useEffect(() => {
if (!container) return () => { };
container.style.height ||= '600px';
const callback = () => {
setTimeout(() => {
const target = Math.max(container.clientHeight, tabs?.clientHeight || 0);
container.style.height = `${target}px`;
if (editor) editor.layout();
}, 50);
};
const dispose = store.subscribe(callback);
window.addEventListener('resize', callback);
return () => {
dispose();
window.removeEventListener('resize', callback);
};
}, [container, tabs, store]);
return <ContextMenuProvider>
<div ref={setContainer}>
<Allotment defaultSizes={[2, 3]}>
<Allotment.Pane>
<div style={{ height: '100%', overflow: 'auto' }}>
<ProblemConfigEditor ref={setEditor} />
</div>
</Allotment.Pane>
<Allotment.Pane>
<Tabs
ref={setTabs}
value={valid ? selected : 'errors'}
keepMounted={false}
style={{ paddingLeft: 20 }}
onChange={(t) => (t !== 'errors' && t && setSelected(t.toString()))}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Tabs.List>
<Tabs.Tab value="basic" disabled={!valid}>{i18n('Basic')}</Tabs.Tab>
<Tabs.Tab value="subtasks" disabled={!valid}>{i18n('Subtasks')}</Tabs.Tab>
<Tabs.Tab value="errors" disabled={valid}>{errors.length ? `Errors(${errors.length})` : 'No Errors'}</Tabs.Tab>
</Tabs.List>
<Button onClick={handleSave}>
{i18n('Save')}
</Button>
</div>
<Tabs.Panel value="basic">
<ProblemConfigForm />
</Tabs.Panel>
<Tabs.Panel value="subtasks">
<ProblemConfigTree />
</Tabs.Panel>
<Tabs.Panel value="errors">
<div>{errors.map((i) => (<pre key={i}>{i}</pre>))}</div>
</Tabs.Panel>
</Tabs>
</Allotment.Pane>
</Allotment>
</div>
<Dialog isOpen={open && !valid} onClose={() => setOpen(false)}>
<DialogBody>
<p>{i18n('Errors detected in the config. Confirm save?')}</p>
</DialogBody>
<DialogFooter actions={<>
<Button onClick={() => setOpen(false)}>{i18n('Cancel')}</Button>
<Button intent="warning" onClick={props.onSave}>{i18n('Save')}</Button>
</>} />
</Dialog>
<button className="rounded primary button" onClick={valid ? props.onSave : () => setOpen(true)}>{i18n('Save')}</button>
</>);
</ContextMenuProvider>;
}
packages/ui-default/components/problemconfig/reducer/config.ts
+9 -3
View File
@@ -138,17 +138,21 @@ export default function reducer(state = {
case 'problemconfig/moveTestcases': {
const testcases = action.payload.cases;
const subtasks = cloneDeep(state.subtasks);
const targetCases = action.payload.target === -1
? state.__cases
: (subtasks.find((s) => s.id === action.payload.target)?.cases || []);
const toAdd = testcases.filter((tc) => !targetCases.find((j) => j.input === tc.input && j.output === tc.output));
const __cases = action.payload.source === -1
? state.__cases.filter((i) => !testcases.find((j) => i.input === j.input && i.output === j.output))
: action.payload.target === -1
? sortFiles([...state.__cases, ...testcases], 'input')
? sortFiles([...state.__cases, ...toAdd], 'input')
: state.__cases;
for (const key in subtasks) {
const subtask = subtasks[key];
if (subtask.id === action.payload.source) {
subtask.cases = subtask.cases.filter((i) => !testcases.find((j) => i.input === j.input && i.output === j.output));
} else if (subtask.id === action.payload.target) {
subtask.cases = sortFiles([...subtask.cases, ...testcases], 'input');
subtask.cases = sortFiles([...subtask.cases, ...toAdd], 'input');
}
}
return { ...state, subtasks, __cases };
@@ -158,8 +162,10 @@ export default function reducer(state = {
return { ...state, __cases: state.__cases.filter((i) => !testcases.find((j) => i.input === j.input && i.output === j.output)) };
}
case 'problemconfig/deleteSubtask': {
const currentCases = state.subtasks.find((i) => i.id === action.id)?.cases || [];
const subtasks = state.subtasks.filter((i) => i.id !== action.id);
return { ...state, subtasks };
const add = currentCases.filter((i) => !subtasks.find((j) => j.cases.find((k) => k.input === i.input && k.output === i.output)));
return { ...state, subtasks, __cases: sortFiles([...state.__cases, ...add], 'input') };
}
default:
return state;
packages/ui-default/components/problemconfig/tree/AddTestcase.tsx
+44 -52
View File
@@ -1,7 +1,5 @@
import { readSubtasksFromFiles } from '@hydrooj/common';
import {
Button, Classes, Dialog, DialogBody, DialogFooter, Icon,
} from '@blueprintjs/core';
import { Button, Modal, Text } from '@mantine/core';
import React, { useEffect, useRef } from 'react';
import { useSelector, useStore } from 'react-redux';
import { i18n } from 'vj/utils';
@@ -83,14 +81,14 @@ export function AddTestcase() {
}
return (<>
<li className={Classes.TREE_NODE} onClick={auto}>
<div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
<Icon icon="clean" />&nbsp;
<span className={Classes.TREE_NODE_LABEL}>{i18n('Auto detect')}</span>
</div>
</li>
<li
className={Classes.TREE_NODE}
<div
style={{ cursor: 'pointer', padding: '6px 0' }}
onClick={auto}
>
<Text><i className="icon icon-wrench" /> {i18n('Auto detect')}</Text>
</div>
<div
style={{ cursor: 'pointer', padding: '6px 0' }}
onClick={() => {
setInput('');
setOutput('');
@@ -99,47 +97,41 @@ export function AddTestcase() {
setOpen(true);
}}
>
<div className={`${Classes.TREE_NODE_CONTENT} ${Classes.TREE_NODE_CONTENT}-0`}>
<Icon icon="clean" />&nbsp;
<span className={Classes.TREE_NODE_LABEL}>{i18n('Add testcase')}</span>
</div>
</li>
<Dialog title="Add testcase" icon="cog" isOpen={open} onClose={() => setOpen(false)}>
<DialogBody>
<div className="row">
<div className="columns medium-6">
<FileSelectAutoComplete
ref={refInput}
data={testdata}
label="Input"
width="100%"
onChange={(e) => setInput(e)}
placeholder={i18n('Input')}
value={input || ''}
/>
</div>
<div className="columns medium-6">
<FileSelectAutoComplete
ref={refOutput}
data={testdata}
label="Output"
width="100%"
onChange={(e) => setOutput(e)}
placeholder={i18n('Output')}
value={input || ''}
/>
</div>
<Text><i className="icon icon-add" /> {i18n('Add testcase')}</Text>
</div>
<Modal
opened={open}
onClose={() => setOpen(false)}
title={i18n('Add testcase')}
styles={{ body: { overflow: 'visible' }, content: { overflow: 'visible' } }}
>
<div className="row" style={{ overflow: 'visible' }}>
<div className="columns medium-6" style={{ overflow: 'visible' }}>
<FileSelectAutoComplete
ref={refInput}
data={testdata}
label="Input"
width="100%"
onChange={(e) => setInput(e)}
placeholder={i18n('Input')}
value={input || ''}
/>
</div>
</DialogBody>
<DialogFooter
actions={<Button
className={`primary rounded button${valid ? '' : ' disabled'}`}
onClick={onConfirm}
disabled={!valid}
intent="primary"
text="Save"
/>}
/>
</Dialog>
<div className="columns medium-6" style={{ overflow: 'visible' }}>
<FileSelectAutoComplete
ref={refOutput}
data={testdata}
label="Output"
width="100%"
onChange={(e) => setOutput(e)}
placeholder={i18n('Output')}
value={output || ''}
/>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
<Button onClick={onConfirm} disabled={!valid}> {i18n('Save')}</Button>
</div>
</Modal>
</>);
}
packages/ui-default/components/problemconfig/tree/SubtaskSettings.tsx
+91 -109
View File
@@ -1,10 +1,6 @@
import { CustomSelectAutoComplete } from '@hydrooj/components';
import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
import {
Button, Classes, ControlGroup,
Dialog, DialogBody, DialogFooter,
Icon, InputGroup, Tag,
} from '@blueprintjs/core';
import { Button, Group, Modal, Text, TextInput } from '@mantine/core';
import { isEqual } from 'lodash';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
@@ -61,83 +57,71 @@ export function SubtaskSettings(props: SubtaskSettingsProps) {
}
return (<>
<Dialog title={i18n('Set time and memory limits')} icon="cog" isOpen={open} onClose={() => setOpen(false)}>
<DialogBody>
<ControlGroup fill={true} vertical={false}>
<InputGroup
leftElement={<Icon icon="time" />}
rightElement={<Tag minimal>ms</Tag>}
onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
placeholder={parseTimeMS(props.time, false).toString() || '1000'}
value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
/>
<InputGroup
leftElement={<Icon icon="comparison" />}
rightElement={<Tag minimal>MB</Tag>}
onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
placeholder={parseMemoryMB(props.memory, false).toString() || '256'}
value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
/>
<InputGroup
leftElement={<Icon icon="star" />}
onChange={(ev) => setScore(+ev.target.value || 0)}
placeholder="Score"
type="number"
value={cscore.toString()}
/>
</ControlGroup>
</DialogBody>
<DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
</Dialog>
<Dialog title={i18n('Set dependencies')} icon="cog" isOpen={depsOpen} onClose={() => setDepsOpen(false)}>
<DialogBody>
<CustomSelectAutoComplete
data={subtaskIds.map((i) => ({ _id: i, name: `${i18n('Subtask {0}', i)}` }))}
setSelectItems={cdeps.split(',').map((i) => i.trim()).filter((i) => +i).map((i) => +i)}
onChange={(items) => setDeps(items)}
placeholder="dependencies"
multi
<Modal opened={open} onClose={() => setOpen(false)} title={i18n('Set time and memory limits')}>
<Group grow>
<TextInput
leftSection={<i className="icon icon-stopwatch" />}
rightSection={<Text size="sm">ms</Text>}
rightSectionWidth={60}
onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
placeholder={parseTimeMS(props.time, false).toString() || '1000'}
value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
/>
</DialogBody>
<DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
</Dialog>
<li className={Classes.TREE_NODE} onClick={() => setOpen(true)}>
<div className={Classes.TREE_NODE_CONTENT}>
<span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
<Icon icon="time" />
&nbsp;&nbsp;
<span className={`${Classes.TREE_NODE_LABEL}${time ? '' : ' text-gray'}`}>{time || props.time || '1s'}</span>
<Icon icon="comparison" />
&nbsp;&nbsp;
<span className={`${Classes.TREE_NODE_LABEL}${memory ? '' : ' text-gray'}`}>{memory || props.memory || '256m'}</span>
<Icon icon="star" />
{' '}
<span className={Classes.TREE_NODE_SECONDARY_LABEL}>{score || 0}</span>
<TextInput
leftSection={<i className="icon icon-comparison" />}
rightSection={<Text size="sm">MB</Text>}
rightSectionWidth={60}
onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
placeholder={parseMemoryMB(props.memory, false).toString() || '256'}
value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
/>
<TextInput
leftSection={<i className="icon icon-star" />}
onChange={(ev) => setScore(+ev.target.value || 0)}
placeholder="Score"
type="number"
value={cscore.toString()}
/>
</Group>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
<Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
</div>
</li>
<li className={Classes.TREE_NODE} onClick={() => setDepsOpen(true)}>
<div className={Classes.TREE_NODE_CONTENT}>
<span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
<Icon icon="diagram-tree" />
&nbsp;&nbsp;
<span className={Classes.TREE_NODE_LABEL}>{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</span>
</Modal>
<Modal opened={depsOpen} onClose={() => setDepsOpen(false)} title={i18n('Set dependencies')}>
<CustomSelectAutoComplete
data={subtaskIds.map((i) => ({ _id: i, name: `${i18n('Subtask {0}', i)}` }))}
setSelectItems={cdeps.split(',').map((i) => i.trim()).filter((i) => +i).map((i) => +i)}
onChange={(items) => setDeps(items)}
placeholder="dependencies"
multi
/>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
<Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
</div>
</li>
<li className={Classes.TREE_NODE}>
<div className={Classes.TREE_NODE_CONTENT}>
<span className={`${Classes.TREE_NODE_CARET_NONE} ${Classes.ICON_STANDARD}`}></span>
<Icon icon="asterisk" />
&nbsp;&nbsp;
<span className={Classes.TREE_NODE_LABEL}>{i18n('Scoring method')}</span>
<span className={Classes.TREE_NODE_SECONDARY_LABEL}>
<select className="compact select" value={ctype} onChange={(e) => setType(e.target.value)}>
<option value="min">Min</option>
<option value="max">Max</option>
<option value="sum">Sum</option>
</select>
</span>
</div>
</li>
</Modal>
<div style={{ paddingLeft: 22, display: 'flex', cursor: 'pointer', gap: 8 }} onClick={() => setOpen(true)}>
<Text><i className="icon icon-stopwatch" /></Text>
<Text className={time ? '' : 'text-gray'}>{time || props.time || '1s'}&nbsp;&nbsp;</Text>
<Text><i className="icon icon-comparison" /></Text>
<Text className={memory ? '' : 'text-gray'}>{memory || props.memory || '256m'}&nbsp;&nbsp;</Text>
<Text><i className="icon icon-star" /></Text>
<Text>{score || 0}</Text>
</div>
<div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 8 }} onClick={() => setDepsOpen(true)}>
<Text><i className="icon icon-diagram-tree" /></Text>
<Text>{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</Text>
</div>
<div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', gap: 8 }}>
<i className="icon icon-asterisk" />
<Text>{i18n('Scoring method')}</Text>
<span style={{ marginLeft: 'auto' }}>
<select className="compact select" value={ctype} onChange={(e) => setType(e.target.value)}>
<option value="min">Min</option>
<option value="max">Max</option>
<option value="sum">Sum</option>
</select>
</span>
</div>
</>);
}
@@ -163,36 +147,34 @@ export function GlobalSettings() {
setOpen(false);
}
return (<>
<Dialog title={i18n('Set time and memory limits')} icon="cog" isOpen={open} onClose={() => setOpen(false)}>
<DialogBody>
<ControlGroup fill={true} vertical={false}>
<InputGroup
leftElement={<Icon icon="time" />}
rightElement={<Tag minimal>ms</Tag>}
onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
placeholder="1000"
value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
/>
<InputGroup
leftElement={<Icon icon="comparison" />}
rightElement={<Tag minimal>MB</Tag>}
onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
placeholder="256"
value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
/>
</ControlGroup>
</DialogBody>
<DialogFooter actions={<Button className="primary rounded button" onClick={onConfirm} intent="primary" text="Save" />} />
</Dialog>
<li className="bp6-tree-node" onClick={() => setOpen(true)}>
<div className="bp6-tree-node-content">
<Icon icon="time" />
&nbsp;&nbsp;
<span className={`bp6-tree-node-label${time ? '' : ' text-gray'}`}>{time || '1s'}</span>
<Icon icon="comparison" />
{' '}
<span className={`bp6-tree-node-secondary-label${memory ? '' : ' text-gray'}`}>{memory || '256MB'}</span>
<Modal opened={open} onClose={() => setOpen(false)} title={i18n('Set time and memory limits')}>
<Group grow>
<TextInput
leftSection={<i className="icon icon-stopwatch" />}
rightSection={<Text size="sm">ms</Text>}
rightSectionWidth={60}
onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
placeholder="1000"
value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
/>
<TextInput
leftSection={<i className="icon icon-comparison" />}
rightSection={<Text size="sm">MB</Text>}
rightSectionWidth={60}
onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
placeholder="256"
value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
/>
</Group>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
<Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
</div>
</li>
</Modal>
<div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 8 }} onClick={() => setOpen(true)}>
<i className="icon icon-stopwatch" />
<Text className={time ? '' : 'text-gray'}>{time || '1s'}</Text>
<i className="icon icon-comparison" />
<Text className={memory ? '' : 'text-gray'}>{memory || '256MB'}</Text>
</div>
</>);
}
packages/ui-default/components/problemconfig/tree/Testcase.tsx
+49 -30
View File
@@ -1,10 +1,10 @@
import { TestCaseConfig } from 'hydrooj';
import {
ContextMenu, Menu, MenuItem, TreeNode,
} from '@blueprintjs/core';
import { Text } from '@mantine/core';
import { omit } from 'lodash';
import { useContextMenu } from 'mantine-contextmenu';
import React from 'react';
import { useDrag } from 'react-dnd';
import { useDispatch } from 'react-redux';
import { i18n } from 'vj/utils';
interface TestcaseNodeProps {
@@ -20,37 +20,35 @@ interface TestcaseNodeProps {
export function TestcaseNode(props: TestcaseNodeProps) {
const {
c, selected, onClick, subtaskIds, subtaskId,
c, selected, onClick, subtaskId,
} = props;
let display = `${c.input} / ${c.output}`;
const minlength = Math.min(c.input.length, c.output.length);
for (let i = minlength; i >= 0; i--) {
const prefix = c.input.slice(0, i);
if (c.input.startsWith(prefix) && c.output.startsWith(prefix)) {
display = `${prefix}(${c.input.substring(i)}/${c.output.substring(i)})`;
break;
}
}
return (
<ContextMenu
onContextMenu={onClick}
<div
onClick={onClick}
data-subtaskid={subtaskId}
data-index={c.input}
data-selected={selected}
content={
<Menu>
<MenuItem icon="drawer-left" text={i18n('Move to subtask')}>
{subtaskIds.filter((i) => i !== subtaskId).map((i) => (
<MenuItem key={i} text={i18n('Subtask {0}', i)} />
))}
{subtaskIds.length <= 1 && (
<MenuItem icon="disable" disabled text={i18n('No target available')} />
)}
</MenuItem>
</Menu>
}
style={{
paddingLeft: 22,
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
background: selected ? 'var(--mantine-color-blue-light, #ebf3ff)' : 'transparent',
borderRadius: 4,
fontFamily: 'var(--mantine-font-family-monospace)',
}}
>
<TreeNode
depth={0}
id={c.input}
isSelected={selected}
onClick={onClick}
icon="document"
label={<>&nbsp;{c.input} / {c.output}</>}
path={[0]}
/>
</ContextMenu>
<Text ml="xs"><i className="icon icon-file" /> {display}</Text>
</div>
);
}
@@ -61,8 +59,11 @@ interface TestcaseGroupProps extends Omit<TestcaseNodeProps, 'c'> {
export function TestcaseGroup(props: TestcaseGroupProps) {
const {
cases, subtaskId, onClick, index,
cases, subtaskId, subtaskIds, onClick, index,
} = props;
const dispatch = useDispatch();
const { showContextMenu } = useContextMenu();
const moveTargets = subtaskIds.filter((i) => i !== subtaskId);
const [collected, drag] = useDrag(() => ({
type: 'cases',
collect: (monitor) => ({
@@ -71,7 +72,25 @@ export function TestcaseGroup(props: TestcaseGroupProps) {
canDrag: props.selected,
item: { cases, subtaskId },
}), [JSON.stringify(cases), subtaskId]);
return <div ref={drag} onClick={onClick} onMouseDown={props.onMouseDown} style={{ opacity: collected.isDragging ? 0.5 : 1 }}>
return <div
ref={drag}
onClick={onClick}
onMouseDown={props.onMouseDown}
onContextMenu={showContextMenu(
moveTargets.length
? moveTargets.map((id) => ({
key: `move-${id}`,
icon: <i className="icon icon-send" />,
title: `${i18n('Move to')} ${i18n('Subtask {0}', id)}`,
onClick: () => dispatch({
type: 'problemconfig/moveTestcases',
payload: { target: id, source: subtaskId, cases },
}),
}))
: [{ key: 'no-target', title: i18n('No target available'), onClick: () => { }, disabled: true }],
)}
style={{ opacity: collected.isDragging ? 0.5 : 1 }}
>
{cases.map((c, id) => (
<TestcaseNode c={c} key={`${c.input}@${index + id}`} {...omit(props, 'onClick')} index={index + id} />
))}
packages/ui-default/components/upload.tsx
+32 -26
View File
@@ -1,4 +1,4 @@
import { Classes } from '@blueprintjs/core';
import { MantineProvider, Progress } from '@mantine/core';
import $ from 'jquery';
import React from 'react';
import { Dialog } from 'vj/components/dialog/index';
@@ -19,36 +19,40 @@ interface UploadOptions {
filenameCallback?: (file: File) => string;
}
export default async function uploadFiles(endpoint = '', files: File[] | FileList = [], options: UploadOptions = {}) {
const dialog = new Dialog({
$body: $(tpl(<>
let fileLabel = '';
let uploadLabel = '';
let fileProgress = 0;
let uploadProgress = 0;
let render = () => { };
function ProgressDialog() {
const [, setRender] = React.useState(0);
React.useEffect(() => {
render = () => setRender((r) => r + 1);
}, []);
return <MantineProvider>
<div
className="file-label"
style={{
textAlign: 'center', marginBottom: '5px', color: 'gray', fontSize: 'small',
}}
></div>
<div className={`${Classes.PROGRESS_BAR} ${Classes.INTENT_PRIMARY} bp5-no-stripes`}>
<div className={`file-progress ${Classes.PROGRESS_METER}`} style={{ width: 0 }}></div>
</div>
>{uploadLabel}</div>
<Progress value={uploadProgress} />
<div
className="upload-label"
style={{
textAlign: 'center', margin: '5px 0', color: 'gray', fontSize: 'small',
}}
></div>
<div className={`${Classes.PROGRESS_BAR} ${Classes.INTENT_PRIMARY} bp5-no-stripes`}>
<div className={`upload-progress ${Classes.PROGRESS_METER}`} style={{ width: 0 }}></div>
</div>
</>)),
>{fileLabel}</div>
<Progress value={fileProgress} />
</MantineProvider>;
}
const dialog = new Dialog({
$body: $(tpl(<ProgressDialog />, true)),
});
try {
Notification.info(i18n('Uploading files...'));
window.addEventListener('beforeunload', onBeforeUnload);
dialog.open();
const $uploadLabel = dialog.$dom.find('.dialog__body .upload-label');
const $uploadProgress = dialog.$dom.find('.dialog__body .upload-progress');
const $fileLabel = dialog.$dom.find('.dialog__body .file-label');
const $fileProgress = dialog.$dom.find('.dialog__body .file-progress');
for (const i in files) {
if (Number.isNaN(+i)) continue;
const file = files[i];
@@ -58,20 +62,22 @@ export default async function uploadFiles(endpoint = '', files: File[] | FileLis
if (options.type) data.append('type', options.type);
data.append('operation', 'upload_file');
await request.postFile(endpoint, data, {
xhr() {
xhr() { // eslint-disable-line
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('loadstart', () => {
$fileLabel.text(`[${+i + 1}/${files.length}] ${file.name} `);
$fileProgress.width(`${Math.round((+i + 1) / files.length * 100)}% `);
$uploadLabel.text(i18n('Uploading... ({0}%)', 0));
$uploadProgress.width(0);
uploadLabel = `[${+i + 1}/${files.length}] ${file.name} `;
uploadProgress = Math.round((+i + 1) / files.length * 100);
fileLabel = i18n('Uploading... ({0}%)', 0);
fileProgress = 0;
render();
});
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percentComplete = Math.round((e.loaded / e.total) * 100);
if (percentComplete === 100) $uploadLabel.text(i18n('Processing...'));
else $uploadLabel.text(i18n('Uploading... ({0}%)', percentComplete));
$uploadProgress.width(`${percentComplete}% `);
if (percentComplete === 100) fileLabel = i18n('Processing...');
else fileLabel = i18n('Uploading... ({0}%)', percentComplete);
fileProgress = percentComplete;
render();
}
}, false);
return xhr;
packages/ui-default/package.json
+12 -9
View File
@@ -11,7 +11,6 @@
"cli": false
},
"devDependencies": {
"@blueprintjs/core": "^6.3.2",
"@fontsource/dm-mono": "^5.2.7",
"@fontsource/fira-code": "^5.2.7",
"@fontsource/inconsolata": "^5.2.8",
@@ -21,8 +20,11 @@
"@fontsource/source-code-pro": "^5.2.7",
"@fontsource/ubuntu-mono": "^5.2.8",
"@hydrooj/utils": "workspace:^",
"@mantine/core": "^8.3.6",
"@mantine/hooks": "^8.3.6",
"@mantine/notifications": "^8.3.6",
"@sentry/browser": "^10.22.0",
"@sentry/webpack-plugin": "^4.5.0",
"@sentry/webpack-plugin": "^4.6.0",
"@simplewebauthn/browser": "13.2.2",
"@svgr/webpack": "^8.1.0",
"@types/html-to-text": "^9.0.4",
@@ -34,8 +36,8 @@
"@types/nunjucks": "^3.2.6",
"@types/pickadate": "^3.5.35",
"@types/qrcode": "^1.5.6",
"@types/react": "^18.3.26",
"@types/react-dom": "^18.3.7",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"@types/redux-logger": "^3.0.13",
"@types/uuid": "^11.0.0",
"@types/webpack-env": "^1.18.8",
@@ -65,6 +67,7 @@
"jquery-scroll-lock": "^3.1.3",
"jquery.easing": "^1.4.1",
"jquery.transit": "^0.9.12",
"mantine-contextmenu": "^8.2.0",
"matchmedia-polyfill": "^0.3.2",
"md-editor-rt": "^6.1.0",
"mini-css-extract-plugin": "^2.9.4",
@@ -80,17 +83,17 @@
"p-queue": "^9.0.0",
"pickadate": "^3.6.4",
"postcss-loader": "7.3.4",
"postcss-preset-mantine": "^1.18.0",
"prism-themes": "^1.9.0",
"prismjs": "^1.30.0",
"prop-types": "^15.8.1",
"qface": "^1.4.1",
"qrcode": "^1.5.4",
"react": "^18.3.1",
"react": "^19.2.0",
"react-colorful": "^5.6.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.3.1",
"react-query": "^3.39.3",
"react-dom": "^19.2.0",
"react-redux": "^9.2.0",
"reconnecting-websocket": "^4.4.0",
"redux": "^5.0.1",
@@ -98,7 +101,7 @@
"redux-promise-middleware": "^6.2.0",
"redux-thunk": "^3.1.0",
"rupture": "^0.7.1",
"sass": "^1.93.2",
"sass": "^1.93.3",
"sass-loader": "^16.0.6",
"schemastery": "^3.17.1",
"shorty.js": "^1.0.1",
@@ -117,7 +120,7 @@
"webpack": "^5.102.1",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-dev-server": "^5.2.2",
"webpack-manifest-plugin": "^5.0.1",
"webpack-manifest-plugin": "^6.0.1",
"webpackbar": "^7.0.0"
},
"dependencies": {
packages/ui-default/pages/problem_config.page.styl
+4 -41
View File
@@ -1,50 +1,14 @@
.page--problem_config
.main
.row
max-width: 100vw !important;
.textbox,.select
margin: 0
.bp6-tab-panel
margin-top: 5px
.bp6-dialog
font-family: var(--code-font-family)
background: #fff
.autocomplete-container
font-size: 0.875rem
color: #666
.bp6-dialog-footer-fixed
border-top: 0
.button
margin: 0
input::placeholder
color: rgba(95,107,124,.6)!important
.bp6-input-group
input
appearance: none
display: block
width: 100%
font-size: 0.875rem
height: 2.1875rem
line-height: 1.2
padding: 0.3125rem;
border: 1px solid #ddd
color: inherit
border-radius: 0
outline: 2px solid transparent
transition: outline-color 0.2s, border-color 0.2s
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
box-shadow: none
.bp6-tag.bp6-minimal
background: transparent
.bp6-input-action
pointer-events: none
.problem-config-form
font-family: var(--code-font-family)
@@ -55,4 +19,3 @@
.hover-row.status-bar
display: none
packages/ui-default/pages/problem_config.page.tsx
+9 -4
View File
@@ -1,4 +1,5 @@
import { normalizeSubtasks, readSubtasksFromFiles, SubtaskType } from '@hydrooj/common';
import { MantineProvider } from '@mantine/core';
import $ from 'jquery';
import yaml from 'js-yaml';
import React from 'react';
@@ -114,6 +115,7 @@ const page = new NamedPage('problem_config', () => {
type: 'CONFIG_LOAD',
payload: request.get(''),
});
let autoConfigTriggered = false;
const unsubscribe = store.subscribe(() => {
// TODO set yaml schema
const state = store.getState();
@@ -129,7 +131,10 @@ const page = new NamedPage('problem_config', () => {
delete state.config.cases;
delete state.config.score;
}
if (state.config.subtasks?.length) return;
if (state.config.subtasks?.length || autoConfigTriggered) {
autoConfigTriggered = true;
return;
}
const testdata = (state.testdata || []).map((i) => i.name);
unsubscribe();
const subtasks = readSubtasksFromFiles(testdata, state.config);
@@ -138,11 +143,11 @@ const page = new NamedPage('problem_config', () => {
subtasks: normalizeSubtasks(subtasks, (i) => i, state.config.time, state.config.memory, true),
});
});
createRoot(document.getElementById('ProblemConfig')!).render(
createRoot(document.getElementById('ProblemConfig')!).render(<MantineProvider>
<Provider store={store}>
<ProblemConfig onSave={() => uploadConfig(store.getState().config)} />
</Provider>,
);
</Provider>
</MantineProvider>);
}
mountComponent();
packages/ui-default/pages/problem_main.page.tsx
+1 -1
View File
@@ -373,7 +373,7 @@ function ProblemSelectionDisplay(props) { // eslint-disable-line
}, [pids]);
return (<>
<a href="javascript:;" className="menu__link display-mode-hide" onClick={() => setDialogOpen(true)}>
<a className="menu__link display-mode-hide" onClick={() => setDialogOpen(true)}>
<span className="icon icon-stack"></span>
{' '}{i18n('{0} problem(s) selected', pids.length)}
</a>
packages/ui-default/postcss.config.js
+10
View File
@@ -1,5 +1,15 @@
module.exports = {
plugins: {
autoprefixer: {},
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
packages/ui-default/templates/contest_detail.html
+7 -7
View File
@@ -12,14 +12,14 @@
<h1 class="section__title">{{ tdoc.title }}</h1>
</div>
<div class="section__body">
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item">{{ _(model.contest.statusText(tdoc, tsdoc)) }}</span>
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-award">{{ _(model.contest.RULES[tdoc.rule].TEXT) }}</span>
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item">{{ _('Start at') }}: {{ contest.render_time(tsdoc.startAt or tdoc.beginAt) }}</span>
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-schedule">{{ contest.render_duration(tdoc) }} {{ _('hour(s)') }}</span>
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item">{{ _('Host') }}: {{ user.render_inline(udict[tdoc.owner], badge=false) }}</span>
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-user--multiple">{{ tdoc['attend']|default(0) }}</span>
<span class="problem__tag-item">{{ _(model.contest.statusText(tdoc, tsdoc)) }}</span>
<span class="problem__tag-item icon icon-award">{{ _(model.contest.RULES[tdoc.rule].TEXT) }}</span>
<span class="problem__tag-item">{{ _('Start at') }}: {{ contest.render_time(tsdoc.startAt or tdoc.beginAt) }}</span>
<span class="problem__tag-item icon icon-schedule">{{ contest.render_duration(tdoc) }} {{ _('hour(s)') }}</span>
<span class="problem__tag-item">{{ _('Host') }}: {{ user.render_inline(udict[tdoc.owner], badge=false) }}</span>
<span class="problem__tag-item icon icon-user--multiple">{{ tdoc['attend']|default(0) }}</span>
{% if tsdoc.attend %}
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-check">{{ _('Attended') }}</span>
<span class="problem__tag-item icon icon-check">{{ _('Attended') }}</span>
{% endif %}
</div>
</div>
packages/ui-default/templates/problem_detail.html
+11 -11
View File
@@ -90,26 +90,26 @@
<div class="section__body">
<ul class="problem__tags">
{% if not tdoc %}
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item">{{ _('ID') }}: {{ pdoc.docId }}</span>
<span class="problem__tag-item">{{ _('ID') }}: {{ pdoc.docId }}</span>
{% endif %}
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-book">{{ _('problem_type.' + pdoc.config.type).format(pdoc.config.subType) }}</span>
<span class="problem__tag-item icon icon-book">{{ _('problem_type.' + pdoc.config.type).format(pdoc.config.subType) }}</span>
{% if pdoc.config.type == 'default' and pdoc.config.subType %}
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-book">{{ _('File IO: {0}').format(pdoc.config.subType) }}</span>
<span class="problem__tag-item icon icon-book">{{ _('File IO: {0}').format(pdoc.config.subType) }}</span>
{% endif %}
{% if pdoc.config.type != 'objective' and pdoc.config.type != 'submit_answer' %}
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-stopwatch">{{ pdoc.config.timeMax if pdoc.config.timeMax == pdoc.config.timeMin else pdoc.config.timeMin+'~'+pdoc.config.timeMax }}ms</span>
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item icon icon-comparison">{{ pdoc.config.memoryMax if pdoc.config.memoryMax == pdoc.config.memoryMin else pdoc.config.memoryMin+'~'+pdoc.config.memoryMax }}MiB</span>
<span class="problem__tag-item icon icon-stopwatch">{{ pdoc.config.timeMax if pdoc.config.timeMax == pdoc.config.timeMin else pdoc.config.timeMin+'~'+pdoc.config.timeMax }}ms</span>
<span class="problem__tag-item icon icon-comparison">{{ pdoc.config.memoryMax if pdoc.config.memoryMax == pdoc.config.memoryMin else pdoc.config.memoryMin+'~'+pdoc.config.memoryMax }}MiB</span>
{% endif %}
{% if not tdoc %}
<a class="bp6-tag bp6-large bp6-minimal bp6-interactive problem__tag-item" href="{{ url('record_main', query={pid:pdoc.docId}) }}">{{ _('Tried') }}: {{ pdoc.nSubmit }}</a>
<a class="bp6-tag bp6-large bp6-minimal bp6-interactive problem__tag-item" href="{{ url('record_main', query={pid:pdoc.docId, status:1}) }}">{{ _('Accepted') }}: {{ pdoc.nAccept if ((not tdoc) or showAccept) else '?' }}</a>
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item">{{ _('Difficulty') }}: {{ pdoc['difficulty'] or lib.difficulty(pdoc.nSubmit, pdoc.nAccept) or _('(None)') }}</span>
<span class="bp6-tag bp6-large bp6-minimal bp6-interactive problem__tag-item">{{ _('Uploaded By') }}: {{ user.render_inline(udoc, badge=false) }}</span>
<a class="problem__tag-item interactive" href="{{ url('record_main', query={pid:pdoc.docId}) }}">{{ _('Tried') }}: {{ pdoc.nSubmit }}</a>
<a class="problem__tag-item interactive" href="{{ url('record_main', query={pid:pdoc.docId, status:1}) }}">{{ _('Accepted') }}: {{ pdoc.nAccept if ((not tdoc) or showAccept) else '?' }}</a>
<span class="problem__tag-item">{{ _('Difficulty') }}: {{ pdoc['difficulty'] or lib.difficulty(pdoc.nSubmit, pdoc.nAccept) or _('(None)') }}</span>
<span class="problem__tag-item interactive">{{ _('Uploaded By') }}: {{ user.render_inline(udoc, badge=false) }}</span>
{% endif %}
{% if pdoc.tag.length %}
<span name="show_tags" class="bp6-tag bp6-large bp6-minimal bp6-interactive problem__tag-item nojs--hide icon icon-tag">{{ _('Tags') + '>' }}</span>
<span name="show_tags" class="problem__tag-item interactive nojs--hide icon icon-tag">{{ _('Tags') + '>' }}</span>
{%- for tag in pdoc.tag -%}
<span class="bp6-tag bp6-large bp6-minimal problem__tag-item tags hasjs--hide">{{ tag }}</span>
<span class="problem__tag-item tags hasjs--hide">{{ tag }}</span>
{%- endfor -%}
{% endif %}
</ul>
packages/ui-default/theme/bp6-compat.css
+48
View File
@@ -0,0 +1,48 @@
.bp6-progress-bar {
background: rgba(95, 107, 124, 0.2);
border-radius: 40px;
display: block;
height: 8px;
overflow: hidden;
position: relative;
width: 100%;
}
.bp6-progress-bar .bp6-progress-meter {
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%);
background-color: rgba(95, 107, 124, 0.8);
background-size: 30px 30px;
border-radius: 40px;
height: 100%;
position: absolute;
transition: width 200ms cubic-bezier(0.4, 1, 0.75, 0.9);
width: 100%;
}
.bp6-progress-bar.bp6-no-stripes .bp6-progress-meter {
background-image: none;
}
.bp6-dark .bp6-progress-bar {
background: rgba(17, 20, 24, 0.5);
}
.bp6-dark .bp6-progress-bar .bp6-progress-meter {
background-color: #8f99a8;
}
.bp6-progress-bar.bp6-intent-primary .bp6-progress-meter {
background-color: #2d72d2;
}
.bp6-progress-bar.bp6-intent-success .bp6-progress-meter {
background-color: #238551;
}
.bp6-progress-bar.bp6-intent-warning .bp6-progress-meter {
background-color: #c87619;
}
.bp6-progress-bar.bp6-intent-danger .bp6-progress-meter {
background-color: #cd4246;
}
packages/ui-default/theme/dark.styl
-16
View File
@@ -212,10 +212,6 @@ $hover-background-color = #424242
.menu__link.highlight
background: rgb(40, 11, 20)
.bp6-tag.bp6-minimal:not([class*="bp6-intent-"])
background-color: rgba(87, 100, 117, .2)
color: #d9dfe7
.typo table thead th
background: #1e1e1e
background-color: rgb(30, 30, 30)
@@ -391,18 +387,6 @@ $hover-background-color = #424242
background-color: $main-background-color !important
border-color: #3d3d3d !important
.bp6-tab
color: #aaa
&[aria-disabled=true]
color: #555
.bp6-card,.bp6-dialog,.bp6-dialog-header,.bp6-dialog-footer
background-color: #1f1f1f !important
.bp6-input-group input
border-color: #3d3d3d!important
&.hasjs .collapsed #status:not([data-status="7"]) .compiler-text-mask
background-image: linear-gradient(to bottom, transparent, #000000 25px)
packages/ui-default/theme/default.js
+4 -1
View File
@@ -4,7 +4,9 @@ import 'pickadate/lib/themes/classic.css';
import 'pickadate/lib/themes/classic.date.css';
import 'pickadate/lib/themes/classic.time.css';
import 'katex/dist/katex.min.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import 'mantine-contextmenu/styles.css';
import '@fontsource/fira-code';
import '@fontsource/source-code-pro';
import '@fontsource/roboto-mono';
@@ -26,6 +28,7 @@ import 'vj/misc/nothing.styl';
import 'vj/components/editor/cmeditor.styl';
import 'vj/components/datepicker/datepicker.styl';
import './dark.styl';
import './bp6-compat.css';
// load all page stylesheets
const pageStyleReq = require.context('../', true, /\.page\.styl$/i);