Skip to content

Commit

Permalink
fix: add basic styles for editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@phodal
phodal committed Dec 11, 2023
1 parent 1141fd8 commit 03d72c1
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 33 deletions.
30 changes: 15 additions & 15 deletions web/core/lib/editor/components/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ export const Sidebar: React.FC<any> = ({ editor }) => {

return <aside className={'z-40 w-96 h-screen'} aria-label="Sidebar">
<div className={'h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800'}>
<Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['similar', 'bg-context']}>
<Accordion.Item className={'AccordionItem'} value="item-6">
<Accordion.Root className={'accordion-root'} type="multiple" defaultValue={['similar', 'bg-context']}>
<Accordion.Item className={'accordion-item'} value="item-6">
<AccordionTrigger>{t('Custom Related Resource Link')}</AccordionTrigger>
<AccordionContent>
<input className={'w-full bg-white'}/>
</AccordionContent>
</Accordion.Item>

<Accordion.Item className={'AccordionItem'} value="bg-context">
<Accordion.Item className={'accordion-item'} value="bg-context">
<AccordionTrigger>{t('Article Context')}</AccordionTrigger>
<AccordionContent>
<textarea
Expand All @@ -44,41 +44,41 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
</AccordionContent>
</Accordion.Item>

<Accordion.Item className={'AccordionItem'} value="item-1">
<Accordion.Item className={'accordion-item'} value="item-1">
<AccordionTrigger>{t('Grammarly')}</AccordionTrigger>
<AccordionContent>
TODO: use some model to check grammar
</AccordionContent>
</Accordion.Item>

<Accordion.Item className={'AccordionItem'} value="item-2">
<Accordion.Item className={'accordion-item'} value="item-2">
<AccordionTrigger>{t('Text Prediction')}</AccordionTrigger>
<AccordionContent>
TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to predict text
</AccordionContent>
</Accordion.Item>

<Accordion.Item className={'AccordionItem'} value="similar">
<Accordion.Item className={'accordion-item'} value="similar">
<AccordionTrigger>{t('Text Similarity')}</AccordionTrigger>
<Accordion.Content className={'AccordionContent'}>
<Accordion.Content className={'accordion-content'}>
<div className={'AccordionContentText'}>
TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to calculate similarity
</div>
</Accordion.Content>
</Accordion.Item>

<Accordion.Item className={'AccordionItem'} value="item-4">
<Accordion.Item className={'accordion-item'} value="item-4">
<AccordionTrigger>{t('Web Search')}</AccordionTrigger>
<Accordion.Content className={'AccordionContent'}>
<Accordion.Content className={'accordion-content'}>
<div className={'AccordionContentText'}>
TODO
</div>
</Accordion.Content>
</Accordion.Item>

<Accordion.Item className={'AccordionItem'} value="model-setting">
<Accordion.Item className={'accordion-item'} value="model-setting">
<AccordionTrigger>{t('Model Setting')}</AccordionTrigger>
<Accordion.Content className={'AccordionContent'}>
<Accordion.Content className={'accordion-content'}>
<div className="py-4 px-5">
<div className="grid gap-2 pt-2">
<div className="flex items-center justify-between">
Expand Down Expand Up @@ -206,21 +206,21 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
}

const AccordionTrigger: React.FC<any> = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
<Accordion.Header className="AccordionHeader">
<Accordion.Header className="accordion-header">
<Accordion.Trigger
className={'AccordionTrigger'}
className={'accordion-trigger'}
{...props}
ref={forwardedRef}
>
{children}
<ChevronDownIcon className="AccordionChevron" aria-hidden/>
<ChevronDownIcon className="accordion-chevron" aria-hidden/>
</Accordion.Trigger>
</Accordion.Header>
))

const AccordionContent: React.FC<any> = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
<Accordion.Content
className={'AccordionContent'}
className={'accordion-content'}
{...props}
ref={forwardedRef}
>
Expand Down
150 changes: 150 additions & 0 deletions web/core/lib/editor/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,156 @@

.tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4, .tiptap h5, .tiptap h6 {
line-height: 1.1;
font-weight: 300;
margin-bottom: 2.0rem;
margin-top: 0;
}

.tiptap h1 {
font-size: 2.0rem;
line-height: 1.2;
}

.tiptap h2 {
font-size: 1.8rem;
line-height: 1.25;
}

.tiptap h3 {
font-size: 1.6rem;
line-height: 1.3;
}

.tiptap h4 {
font-size: 1.4rem;
line-height: 1.35;
}

.tiptap h5 {
font-size: 1.2rem;
line-height: 1.5;
}

.tiptap h6 {
font-size: 1.6rem;
line-height: 1.4;
}

.tiptap {
a {
color: #1abc9c;
text-decoration: none;
}

a:focus, a:hover {
color: #23B7F3;
}

dl,
ol,
ul {
list-style: none;
margin-top: 0;
padding-left: 0;
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
font-size: 90%;
margin: 1.5rem 0 1.5rem 3.0rem;
}

ol {
list-style: decimal;
padding: 0.3rem;
}

ul {
list-style: circle;
padding: 0.3rem;
}

li {
color: #384452;
}

.button,
button,
dd,
dt {
margin-bottom: 1.0rem;
}

fieldset,
input,
select,
textarea {
margin-bottom: 1.5rem;
}

blockquote,
dl,
figure,
form,
pre,
table {
margin-bottom: 2.5rem;
}

table {
border-spacing: 0;
width: 100%;
}

table thead th,
thead th {
border-top: 0.1rem solid #d1d8df;
background: #fdfdfd;
}

tbody tr:nth-child(even) {
background: #fdfdfd;
}

tbody tr:nth-child(odd) {
background: #eef1f5;
}

td,
th {
border-bottom: 0.1rem solid #d1d8df;
padding: 1.2rem 1.5rem;
text-align: left;
}

u {
text-decoration: none;
border-bottom: 1px dashed;
}

a {
text-decoration: none;
}

u {
background: #ffff3a;
}

b,
strong {
font-weight: bold;
}

p {
margin-top: 0;
}
}

.tiptap code {
Expand Down
36 changes: 18 additions & 18 deletions web/studio/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,41 +142,40 @@ input {
fill: white;
}

.AccordionRoot {
.accordion-root {
border-radius: 6px;
background-color: var(--mauve-6);
box-shadow: 0 2px 10px var(--black-a4);
}

.AccordionItem {
.accordion-item {
overflow: hidden;
margin-top: 1px;
background-color: white;
}

.AccordionItem:first-child {
.accordion-item:first-child {
margin-top: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

.AccordionItem:last-child {
.accordion-item:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

.AccordionItem:focus-within {
.accordion-item:focus-within {
position: relative;
z-index: 1;
box-shadow: 0 0 0 2px var(--mauve-12);
box-shadow: 0 0 0 1px #da4167;
}

.AccordionHeader {
.accordion-header {
display: flex;
}

.AccordionTrigger {
.accordion-trigger {
font-family: inherit;
background-color: transparent;
padding: 0 20px;
height: 45px;
flex: 1;
Expand All @@ -190,35 +189,36 @@ input {
background-color: white;
}

.AccordionTrigger:hover {
background-color: var(--mauve-2);
.accordion-trigger:hover {
background-color: #03467d;
color: white;
}

.AccordionContent {
.accordion-content {
overflow: hidden;
font-size: 15px;
color: var(--mauve-11);
background-color: var(--mauve-2);
}

.AccordionContent[data-state='open'] {
.accordion-content[data-state='open'] {
animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.AccordionContent[data-state='closed'] {
.accordion-content[data-state='closed'] {
animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.AccordionContentText {
padding: 15px 20px;
}

.AccordionChevron {
color: var(--violet-10);
.accordion-chevron {
color: #d13167;
transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.AccordionTrigger[data-state='open'] > .AccordionChevron {
.accordion-trigger[data-state='open'] > .accordion-chevron {
transform: rotate(180deg);
}

Expand Down

0 comments on commit 03d72c1

Please sign in to comment.