UBERF-60: updated Rich editor and Activity styles. (#3661)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-09-06 09:44:54 +03:00 committed by GitHub
parent b73e5340f7
commit 07cb85acd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 33 deletions

View File

@ -73,9 +73,9 @@
{:else if node.nodeName === 'BLOCKQUOTE'} {:else if node.nodeName === 'BLOCKQUOTE'}
<blockquote><svelte:self nodes={node.childNodes} /></blockquote> <blockquote><svelte:self nodes={node.childNodes} /></blockquote>
{:else if node.nodeName === 'CODE'} {:else if node.nodeName === 'CODE'}
<code><svelte:self nodes={node.childNodes} /></code> <code class="proseCode"><svelte:self nodes={node.childNodes} /></code>
{:else if node.nodeName === 'PRE'} {:else if node.nodeName === 'PRE'}
<pre><svelte:self nodes={node.childNodes} /></pre> <pre class="proseCodeBlock"><svelte:self nodes={node.childNodes} /></pre>
{:else if node.nodeName === 'BR'} {:else if node.nodeName === 'BR'}
{@const pName = prevName(ni, nodes)} {@const pName = prevName(ni, nodes)}
{#if pName !== 'P' && pName !== 'BR' && pName !== undefined} {#if pName !== 'P' && pName !== 'BR' && pName !== undefined}
@ -118,8 +118,6 @@
</div> </div>
{/if} {/if}
{:else if node.nodeName === 'SPAN'} {:else if node.nodeName === 'SPAN'}
<span style:margin={'0 .25rem'} style={node.getAttribute('style')}>
<!-- <svelte:self nodes={node.childNodes} /> -->
{#if node.getAttribute('data-objectclass') !== undefined && node.getAttribute('data-id') !== undefined} {#if node.getAttribute('data-objectclass') !== undefined && node.getAttribute('data-id') !== undefined}
<Component <Component
is={view.component.ObjectPresenter} is={view.component.ObjectPresenter}
@ -134,7 +132,6 @@
{:else} {:else}
<svelte:self nodes={node.childNodes} /> <svelte:self nodes={node.childNodes} />
{/if} {/if}
</span>
{:else if node.nodeName === 'TABLE'} {:else if node.nodeName === 'TABLE'}
<table class={node.className}><svelte:self nodes={node.childNodes} /></table> <table class={node.className}><svelte:self nodes={node.childNodes} /></table>
{:else if node.nodeName === 'TBODY'} {:else if node.nodeName === 'TBODY'}
@ -183,12 +180,4 @@
s { s {
color: var(--theme-accent-color); color: var(--theme-accent-color);
} }
code {
padding: 0 0.25rem;
font-family: var(--mono-font);
color: var(--theme-content-color);
background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;
}
</style> </style>

View File

@ -275,7 +275,7 @@
.textInput { .textInput {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-end;
min-height: 2.75rem; min-height: 2.75rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background-color: var(--theme-refinput-color); background-color: var(--theme-refinput-color);

View File

@ -60,7 +60,10 @@ export const defaultExtensions: AnyExtension[] = [
} }
}, },
heading: { heading: {
levels: supportedHeadingLevels levels: supportedHeadingLevels,
HTMLAttributes: {
class: 'proseHeading'
}
} }
}), }),
Highlight.configure({ Highlight.configure({

View File

@ -98,8 +98,8 @@ table {
} }
li { li {
color: var(--dark-color); color: var(--theme-content-color);
p { color: var(--accent-color); } p { color: var(--theme-content-color); }
} }
/* Common */ /* Common */

View File

@ -2,3 +2,26 @@
cursor: pointer; cursor: pointer;
object-fit: contain; object-fit: contain;
} }
.proseH1 {
margin-block-start: 1.25rem;
margin-block-end: 1.25rem;
font-weight: 700;
font-size: 1.75rem;
// line-height: 1.75rem;
color: red;
}
.proseH2 {
margin-block-start: 1rem;
margin-block-end: 1.125rem;
font-weight: 700;
font-size: 1.25rem;
// line-height: 1.75rem;
color: green;
}
// need to override editor's bubble max-width
// due to https://github.com/atomiks/tippyjs/issues/451
// .tippy-box {
// max-width: 30rem !important;
// }

View File

@ -61,5 +61,17 @@ table.proseTable {
background-color: var(--theme-button-default); background-color: var(--theme-button-default);
border: 1px solid var(--theme-button-border); border: 1px solid var(--theme-button-border);
border-radius: .25rem; border-radius: .25rem;
padding: 0.5rem; padding: .5rem;
code { white-space: normal; }
} }
// Fixes for MessageViewer
pre.proseCodeBlock > code.proseCode {
padding: 0;
background-color: transparent;
border: none;
border-radius: 0;
}
.proseHeading { line-height: 110%; }