mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 13:00:39 +03:00
UI fixes
This commit is contained in:
IRBorisov
parent
c4944b4d6a
commit
cb717cf492
|
|
@ -10,7 +10,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Geologica:wght@100..900&family=Fira+Code:wght@300..700&family=Noto+Sans+Math&family=Noto+Sans+Symbols+2"
|
||||
href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Code:wght@300..700&family=Noto+Sans+Math&family=Noto+Sans+Symbols+2&family=Alegreya+Sans+SC:wght@100;300;400;500;700;800;900"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ function Navigation() {
|
|||
className={clsx(
|
||||
'z-navigation', // prettier: split lines
|
||||
'sticky top-0 left-0 right-0',
|
||||
'w-full',
|
||||
'clr-app',
|
||||
'select-none'
|
||||
)}
|
||||
|
|
@ -35,9 +36,9 @@ function Navigation() {
|
|||
<ToggleNavigationButton />
|
||||
<motion.div
|
||||
className={clsx(
|
||||
'pl-2 pr-[0.9rem] h-[3rem]', // prettier: split lines
|
||||
'pl-2 pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
|
||||
'flex justify-between',
|
||||
'shadow-border'
|
||||
'cc-shadow-border'
|
||||
)}
|
||||
initial={false}
|
||||
animate={!noNavigationAnimation ? 'open' : 'closed'}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ function TableHeader<TData>({
|
|||
}: TableHeaderProps<TData>) {
|
||||
return (
|
||||
<thead
|
||||
className='clr-app shadow-border'
|
||||
className='clr-app cc-shadow-border'
|
||||
style={{
|
||||
top: headPosition,
|
||||
position: 'sticky'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import LinkTopic from '@/components/ui/LinkTopic';
|
||||
import { useConceptOptions } from '@/context/OptionsContext';
|
||||
import { HelpTopic } from '@/models/miscellaneous';
|
||||
|
||||
import {
|
||||
IconControls,
|
||||
|
|
@ -12,32 +14,59 @@ import {
|
|||
|
||||
function HelpCstEditor() {
|
||||
const { colors } = useConceptOptions();
|
||||
// prettier-ignore
|
||||
return (
|
||||
<div className='dense'>
|
||||
<h1>Редактор конституенты</h1>
|
||||
<li><IconSave className='inline-icon'/> сохранить изменения: Ctrl + S</li>
|
||||
<li><IconEdit className='inline-icon'/> кнопка переименования справа от Имени</li>
|
||||
<div className='dense'>
|
||||
<h1>Редактор конституенты</h1>
|
||||
<li>
|
||||
<IconSave className='inline-icon' /> сохранить изменения: Ctrl + S
|
||||
</li>
|
||||
<li>
|
||||
<IconEdit className='inline-icon' /> кнопка переименования справа от{' '}
|
||||
<LinkTopic text='Имени' topic={HelpTopic.CC_CONSTITUENTA} />
|
||||
</li>
|
||||
|
||||
<h2>Термин и Текстовое определение</h2>
|
||||
<li><IconEdit className='inline-icon'/> кнопка редактирования словоформ справа от Термина</li>
|
||||
<li>Ctrl + Пробел открывает редактирование отсылок</li>
|
||||
<h2>Термин и Текстовое определение</h2>
|
||||
<li>
|
||||
<IconEdit className='inline-icon' /> кнопка редактирования словоформ справа от{' '}
|
||||
<LinkTopic text='Термина' topic={HelpTopic.CC_CONSTITUENTA} />
|
||||
</li>
|
||||
<li>Ctrl + Пробел открывает редактирование отсылок</li>
|
||||
|
||||
<h2>Определение понятия</h2>
|
||||
<li><IconStatusOK className='inline-icon'/> индикатор статуса определения сверху</li>
|
||||
<li><IconText className='inline-icon'/> переключение шрифта</li>
|
||||
<li><IconControls className='inline-icon'/> специальная клавиатура и горячие клавиши</li>
|
||||
<li><IconList className='inline-icon'/> отображение списка конституент</li>
|
||||
<li><IconTree className='inline-icon'/> отображение дерева разбора</li>
|
||||
<li>Ctrl + Пробел дополняет до незанятого имени</li>
|
||||
<h2>Определение понятия</h2>
|
||||
<li>
|
||||
<IconStatusOK className='inline-icon' /> индикатор статуса определения сверху
|
||||
</li>
|
||||
<li>
|
||||
<IconText className='inline-icon' /> переключение шрифта
|
||||
</li>
|
||||
<li>
|
||||
<IconControls className='inline-icon' /> специальная клавиатура и горячие клавиши
|
||||
</li>
|
||||
<li>
|
||||
<IconList className='inline-icon' /> отображение списка конституент
|
||||
</li>
|
||||
<li>
|
||||
<IconTree className='inline-icon' /> отображение{' '}
|
||||
<LinkTopic text='дерева разбора' topic={HelpTopic.UI_FORMULA_TREE} />
|
||||
</li>
|
||||
<li>Ctrl + Пробел дополняет до незанятого имени</li>
|
||||
|
||||
<h2>Список конституент</h2>
|
||||
<li>фильтрация в верхней части</li>
|
||||
<li>при наведении на имя конституенты отображаются атрибуты</li>
|
||||
<li><span style={{backgroundColor: colors.bgSelected}}>цветом фона</span> выделена текущая конституента</li>
|
||||
<li><span style={{backgroundColor: colors.bgGreen50}}>цветом фона</span> выделена основа текущей</li>
|
||||
<li><span style={{backgroundColor: colors.bgOrange50}}>цветом фона</span> выделены порожденные текущей</li>
|
||||
</div>);
|
||||
<h2>Список конституент</h2>
|
||||
<li>фильтрация в верхней части</li>
|
||||
<li>при наведении на имя конституенты отображаются атрибуты</li>
|
||||
<li>
|
||||
<span style={{ backgroundColor: colors.bgSelected }}>цветом фона</span> выделена текущая конституента
|
||||
</li>
|
||||
<li>
|
||||
<span style={{ backgroundColor: colors.bgGreen50 }}>цветом фона</span> выделена{' '}
|
||||
<LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
|
||||
</li>
|
||||
<li>
|
||||
<span style={{ backgroundColor: colors.bgOrange50 }}>цветом фона</span> выделены{' '}
|
||||
<LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
|
||||
</li>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HelpCstEditor;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
/* prettier-ignore */
|
||||
:root {
|
||||
--font-ui: 'Geologica', 'Fira Code', 'Segoe UI Symbol', sans-serif;
|
||||
--font-ui: 'Alegreya Sans SC', 'Rubik', 'Segoe UI Symbol', sans-serif;
|
||||
--font-main: 'Rubik', 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
|
||||
--font-math: 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Segoe UI Symbol', sans-serif;
|
||||
--font-math2: 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Segoe UI Symbol', sans-serif;
|
||||
|
|
|
|||
|
|
@ -139,8 +139,4 @@ div:not(.dense) > p {
|
|||
.border {
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
.shadow-border {
|
||||
@apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,6 @@
|
|||
.font-controls {
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 600;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
@supports (-moz-appearance: none) {
|
||||
.font-controls {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
.font-math {
|
||||
font-family: var(--font-math);
|
||||
|
|
@ -245,4 +239,8 @@
|
|||
.cc-blur {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.cc-shadow-border {
|
||||
@apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user