discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

editor styles isolated, editor sidebar esc and outside click handling

Browse Source
This commit is contained in:
Igor Lobanov 2022-11-01 23:05:08 +01:00
parent b2387543fc
commit 0f0b2645aa
20 changed files with 462 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Editor/components/Editor.module.scss
View File

@ -1,3 +1,61 @@
.editor {
flex: 1;
padding-top: 1em;
a {
color: rgb(0 100 200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0 80 160);
}
label {
display: block;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
}
.error {
display: none;
}
@ -5,3 +63,11 @@
.markdown {
white-space: pre-wrap;
}
.tooltip {
background: #fff;
box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
color: #000;
display: flex;
position: absolute;
}

3
src/components/Editor/components/Editor.tsx
View File

@ -2,7 +2,6 @@ import type { EditorView } from 'prosemirror-view'
import type { EditorState } from 'prosemirror-state'
import { useState } from '../store/context'
import { ProseMirror } from './ProseMirror'
import '../styles/Editor.scss'
import styles from './Editor.module.scss'
import { clsx } from 'clsx'
@ -14,7 +13,7 @@ export const Editor = () => {
return (
<ProseMirror
cssClass={clsx('editor', 'col-md-6', 'shift-content', {
cssClass={clsx(styles.editor, 'col-md-6', 'shift-content', {
[styles.error]: store.error,
[styles.markdown]: store.markdown
})}

52
src/components/Editor/components/Error.module.scss Normal file
View File

@ -0,0 +1,52 @@
.error {
width: 100%;
overflow: auto;
padding: 50px;
display: flex;
justify-content: center;
::-webkit-scrollbar {
display: none;
}
button {
height: 50px;
padding: 0 20px;
font-size: 18px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
text-decoration: none;
background: none;
font-family: inherit;
color: var(--foreground);
border: 1px solid var(--foreground);
&.primary {
color: var(--primary-foreground);
border: 0;
background: var(--primary-background);
}
&:hover {
opacity: 0.8;
}
}
.container {
max-width: 800px;
width: 100%;
height: fit-content;
}
pre {
background: var(--foreground);
border: 1px solid var(--foreground);
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 2px;
padding: 10px;
}
}

14
src/components/Editor/components/Error.tsx
View File

@ -1,6 +1,6 @@
import { Switch, Match } from 'solid-js'
import { useState } from '../store/context'
import '../styles/Button.scss'
import styles from './Error.module.scss'
export default () => {
const [store] = useState()
@ -24,8 +24,8 @@ const InvalidState = (props: { title: string }) => {
const onClick = () => ctrl.clean()
return (
<div class="error">
<div class="container">
<div class={styles.error}>
<div class={styles.container}>
<h1>{props.title}</h1>
<p>
There is an error with the editor state. This is probably due to an old version in which the data
@ -35,7 +35,7 @@ const InvalidState = (props: { title: string }) => {
<pre>
<code>{JSON.stringify(store.error.props)}</code>
</pre>
<button class="primary" onClick={onClick}>
<button class={styles.primary} onClick={onClick}>
Clean
</button>
</div>
@ -53,13 +53,13 @@ const Other = () => {
}
return (
<div class="error">
<div class="container">
<div class={styles.error}>
<div class={styles.container}>
<h1>An error occurred.</h1>
<pre>
<code>{getMessage()}</code>
</pre>
<button class="primary" onClick={onClick}>
<button class={styles.primary} onClick={onClick}>
Close
</button>
</div>

2
src/components/Editor/styles/Layout.scss → src/components/Editor/components/Layout.module.scss
View File

@ -6,7 +6,7 @@
border-color: var(--background);
min-height: 100vh;
&.dark {
.dark & {
background: var(--foreground);
color: var(--background);
border-color: var(--foreground);

9
src/components/Editor/components/Layout.tsx
View File

@ -1,6 +1,7 @@
import type { JSX } from 'solid-js/jsx-runtime'
import type { Config } from '../store/context'
import '../styles/Layout.scss'
import { clsx } from 'clsx'
import styles from './Layout.module.scss'
export type Styled = {
children: JSX.Element
@ -12,7 +13,11 @@ export type Styled = {
export const Layout = (props: Styled) => {
return (
<div onMouseEnter={props.onMouseEnter} class="layout container" data-testid={props['data-testid']}>
<div
onMouseEnter={props.onMouseEnter}
class={clsx(styles.layout, 'container')}
data-testid={props['data-testid']}
>
{props.children}
</div>
)

1
src/components/Editor/components/ProseMirror.tsx
View File

@ -4,6 +4,7 @@ import { EditorState, EditorStateConfig, Transaction } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema } from 'prosemirror-model'
import type { NodeViewFn, ProseMirrorExtension, ProseMirrorState } from '../prosemirror/helpers'
import '../styles/ProseMirror.scss'
interface ProseMirrorProps {
cssClass?: string

222
src/components/Editor/components/Sidebar.module.scss
View File

@ -1,3 +1,221 @@
.withMargin {
margin-bottom: 10px;
.sidebarContainer {
color: rgb(255 255 255 / 50%);
@include font-size(1.6rem);
overflow: hidden;
position: relative;
top: 0;
p {
color: var(--foreground);
}
h4 {
@include font-size(120%);
margin-left: 1rem;
}
button {
height: auto;
min-height: 50px;
padding: 0 1rem;
width: 100%;
}
}
.sidebarOff {
background: #1f1f1f;
height: 100%;
min-height: 100vh;
padding: 40px 20px 20px;
top: 0;
transform: translateX(0);
transition: transform 0.3s;
overflow-y: auto;
scrollbar-width: none;
width: 350px;
.sidebarContainerHidden & {
transform: translateX(100%);
}
::-webkit-scrollbar {
display: none;
}
}
.sidebarOpener {
color: #000;
cursor: pointer;
opacity: 1;
position: absolute;
top: 1em;
transition: opacity 0.3s;
&:hover {
opacity: 0.5;
}
&::after {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1090_23825' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='4' height='4'%3E%3Crect y='14.8237' width='3.17647' height='3.17647' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1090_23825)'%3E%3Cpath d='M16.0941 1.05908H0.847027C0.379194 1.05908 0 1.43828 0 1.90611V18.0003L3.38824 14.612H16.0942C16.562 14.612 16.9412 14.2328 16.9412 13.765V1.90614C16.9412 1.43831 16.562 1.05912 16.0942 1.05912L16.0941 1.05908ZM15.2471 12.9179H1.69412V2.7532H15.2471V12.9179Z' fill='black'/%3E%3C/g%3E%3Crect x='1' y='1' width='16' height='12.8235' stroke='black' stroke-width='2'/%3E%3Crect x='4.23535' y='3.17627' width='9.52941' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='9.5293' width='7.41176' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='6.35303' width='5.29412' height='2.11765' fill='black'/%3E%3C/svg%3E");
content: '';
height: 18px;
left: 100%;
margin-left: 0.3em;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px;
}
}
.sidebarCloser {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1517 0.423857L0.42375 13.1518L2.84812 15.5761L15.576 2.84822L13.1517 0.423857Z M15.576 13.1518L2.84812 0.423855L0.423751 2.84822L13.1517 15.5761L15.576 13.1518Z' fill='white'/%3E%3C/svg%3E%0A");
cursor: pointer;
height: 16px;
opacity: 1;
position: absolute;
transition: opacity 0.3s;
top: 20px;
width: 16px;
&:hover {
opacity: 0.5;
}
}
.sidebarLabel {
color: var(--foreground);
> i {
text-transform: none;
}
}
.sidebarContainer button,
.sidebarContainer a,
.sidebarItem {
margin: 0;
outline: none;
display: flex;
align-items: center;
line-height: 24px;
text-align: left;
}
.sidebarContainer a,
.sidebarItem {
font-size: 18px;
padding: 2px 0;
width: 100%;
}
.sidebarLink {
background: none;
border: 0;
color: inherit;
cursor: pointer;
font-size: inherit;
justify-content: flex-start;
&:hover {
color: #fff !important;
}
&:active {
> span i {
position: relative;
box-shadow: none;
top: 1px;
}
}
&[disabled] {
color: var(--foreground);
cursor: not-allowed;
}
&.draft {
color: rgb(255 255 255 / 50%);
line-height: 1.4;
margin: 0 0 1em 1.5em;
width: calc(100% - 2rem);
&:hover {
background: none;
}
}
> span {
justify-self: flex-end;
margin-left: auto;
> i {
border: 1px solid;
border-bottom-width: 2px;
border-radius: 0.2rem;
display: inline-block;
color: inherit;
font-size: 13px;
line-height: 1.4;
margin: 0 0.5em 0 0;
padding: 1px 4px;
&:last-child {
text-transform: uppercase;
}
}
}
}
.themeSwitcher {
border-bottom: 1px solid rgb(255 255 255 / 30%);
border-top: 1px solid rgb(255 255 255 / 30%);
display: flex;
justify-content: space-between;
margin: 1rem;
padding: 1em 0;
input[type='checkbox'] {
opacity: 0;
position: absolute;
+ label {
background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z' fill='white'/%3E%3C/svg%3E%0A")
no-repeat 30px 9px,
url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.41196 0H5.58811V2.43024H6.41196V0ZM5.99988 8.96576C4.36601 8.96576 3.03419 7.63397 3.03419 6.00007C3.04792 4.3662 4.36598 3.04818 5.99988 3.03439C7.63375 3.03439 8.96557 4.3662 8.96557 6.00007C8.96557 7.63395 7.63375 8.96576 5.99988 8.96576ZM5.58811 9.56977H6.41196V12H5.58811V9.56977ZM12.0002 5.58811H9.56996V6.41196H12.0002V5.58811ZM0 5.58811H2.43024V6.41196H0V5.58811ZM8.81339 3.76727L10.5318 2.04891L9.94925 1.46641L8.23089 3.18477L8.81339 3.76727ZM3.7745 8.8129L2.05614 10.5313L1.47364 9.94877L3.192 8.2304L3.7745 8.8129ZM9.95043 10.5269L10.5329 9.94437L8.81456 8.22601L8.23207 8.80851L9.95043 10.5269ZM3.76864 3.18731L3.18614 3.76981L1.46778 2.05145L2.05028 1.46895L3.76864 3.18731Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A")
#000 no-repeat 8px 8px;
border-radius: 14px;
cursor: pointer;
display: block;
height: 28px;
line-height: 10em;
overflow: hidden;
position: relative;
transition: background-color 0.3s;
width: 46px;
&::before {
background-color: #fff;
border-radius: 100%;
content: '';
height: 16px;
left: 6px;
position: absolute;
top: 6px;
transition: left 0.3s, color 0.3s;
width: 16px;
}
}
&:checked + label {
background-color: #fff;
&::before {
background-color: #1f1f1f;
left: 24px;
}
}
}
}

47
src/components/Editor/components/Sidebar.tsx
View File

@ -5,20 +5,21 @@ import { Draft, useState } from '../store/context'
import * as remote from '../remote'
import { isEmpty } from '../prosemirror/helpers'
import type { Styled } from './Layout'
import '../styles/Sidebar.scss'
import { clsx } from 'clsx'
import styles from './Sidebar.module.scss'
import { isServer } from 'solid-js/web'
import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
import { hideModal } from '../../../stores/ui'
const Off = (props) => <div class="sidebar-off">{props.children}</div>
const Off = (props) => <div class={styles.sidebarOff}>{props.children}</div>
const Label = (props: Styled) => <h3 class="sidebar-label">{props.children}</h3>
const Label = (props: Styled) => <h3 class={styles.sidebarLabel}>{props.children}</h3>
const Link = (
props: Styled & { withMargin?: boolean; disabled?: boolean; title?: string; className?: string }
) => (
<button
class={clsx('sidebar-link', props.className, {
class={clsx(styles.sidebarLink, props.className, {
[styles.withMargin]: props.withMargin
})}
onClick={props.onClick}
@ -33,10 +34,12 @@ const Link = (
export const Sidebar = () => {
const [store, ctrl] = useState()
const [lastAction, setLastAction] = createSignal<string | undefined>()
const toggleTheme = () => {
document.body.classList.toggle('dark')
ctrl.updateConfig({ theme: document.body.className })
}
const collabText = () => {
if (store.collab?.started) {
return 'Stop'
@ -70,14 +73,12 @@ export const Sidebar = () => {
const onCopyAllAsMd = () =>
remote.copyAllAsMarkdown(editorView().state).then(() => setLastAction('copy-md'))
const onDiscard = () => ctrl.discard()
const [isHidden, setIsHidden] = createSignal<boolean | false>()
const [isHidden, setIsHidden] = createSignal(true)
const toggleSidebar = () => {
setIsHidden(!isHidden())
setIsHidden((oldIsHidden) => !oldIsHidden)
}
toggleSidebar()
const onCollab = () => {
const state = unwrap(store)
store.collab?.started ? ctrl.stopCollab(state) : ctrl.startCollab(state)
@ -117,7 +118,7 @@ export const Sidebar = () => {
return (
// eslint-disable-next-line solid/no-react-specific-props
<Link className="draft" onClick={() => onOpenDraft(p.draft)} data-testid="open">
<Link className={styles.draft} onClick={() => onOpenDraft(p.draft)} data-testid="open">
{text()} {p.draft.path && '📎'}
</Link>
)
@ -131,7 +132,7 @@ export const Sidebar = () => {
createEffect(() => {
setLastAction()
}, store.lastModified)
})
createEffect(() => {
if (!lastAction()) return
@ -147,14 +148,30 @@ export const Sidebar = () => {
setMod(navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl')
})
const containerRef: { current: HTMLElement } = {
current: null
}
useEscKeyDownHandler(() => setIsHidden(true))
useOutsideClickHandler({
containerRef,
predicate: () => !isHidden(),
handler: () => setIsHidden(true)
})
return (
<div class={'sidebar-container' + (isHidden() ? ' sidebar-container--hidden' : '')}>
<span class="sidebar-opener" onClick={toggleSidebar}>
<div
class={clsx(styles.sidebarContainer, {
[styles.sidebarContainerHidden]: isHidden()
})}
ref={(el) => (containerRef.current = el)}
>
<span class={styles.sidebarOpener} onClick={toggleSidebar}>
Советы и&nbsp;предложения
</span>
<Off onClick={() => editorView().focus()}>
<div class="sidebar-closer" onClick={toggleSidebar} />
<div class={styles.sidebarCloser} onClick={toggleSidebar} />
<div>
{store.path && (
@ -166,7 +183,7 @@ export const Sidebar = () => {
<Link>Настройки публикации</Link>
<Link>История правок</Link>
<div class="theme-switcher">
<div class={styles.themeSwitcher}>
Ночная тема
<input type="checkbox" name="theme" id="theme" onClick={toggleTheme} />
<label for="theme">Ночная тема</label>

4
src/components/Editor/prosemirror/extension/base.ts
View File

@ -9,6 +9,8 @@ import { keymap } from 'prosemirror-keymap'
import type { ProseMirrorExtension } from '../helpers'
import type OrderedMap from 'orderedmap'
import layoutStyles from '../../components/Layout.module.scss'
const plainSchema = new Schema({
nodes: {
doc: {
@ -53,6 +55,6 @@ export default (plain = false): ProseMirrorExtension => ({
keymap(buildKeymap(schema)),
keymap(baseKeymap),
history(),
dropCursor({ class: 'drop-cursor' })
dropCursor({ class: layoutStyles.dropCursor })
]
})

3
src/components/Editor/prosemirror/extension/selection.ts
View File

@ -2,13 +2,14 @@ import { renderGrouped } from 'prosemirror-menu'
import { Plugin } from 'prosemirror-state'
import type { ProseMirrorExtension } from '../helpers'
import { buildMenuItems } from './menu'
import editorStyles from '../../components/Editor.module.scss'
export class SelectionTooltip {
tooltip: any
constructor(view: any, schema: any) {
this.tooltip = document.createElement('div')
this.tooltip.className = 'tooltip'
this.tooltip.className = editorStyles.tooltip
view.dom.parentNode.appendChild(this.tooltip)
const { dom } = renderGrouped(view, buildMenuItems(schema).fullMenu as any)
this.tooltip.appendChild(dom)

25
src/components/Editor/styles/Button.scss
View File

@ -1,25 +0,0 @@
button {
height: 50px;
padding: 0 20px;
font-size: 18px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
text-decoration: none;
background: none;
font-family: inherit;
color: var(--foreground);
border: 1px solid var(--foreground);
&:hover {
opacity: 0.8;
}
}
button.primary {
color: var(--primary-foreground);
border: 0;
background: var(--primary-background);
}

26
src/components/Editor/styles/Error.scss
View File

@ -1,26 +0,0 @@
.error {
width: 100%;
overflow: y-auto;
padding: 50px;
display: flex;
justify-content: center;
::-webkit-scrollbar {
display: none;
}
}
.error .container {
max-width: 800px;
width: 100%;
height: fit-content;
}
.error pre {
background: var(--foreground);
border: 1px solid var(--foreground);
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 2px;
padding: 10px;
}

66
src/components/Editor/styles/Editor.scss → src/components/Editor/styles/ProseMirror.scss
View File

@ -1,61 +1,3 @@
.editor {
flex: 1;
padding-top: 1em;
a {
color: rgb(0 100 200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0 80 160);
}
}
label {
display: block;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
.ProseMirror {
color: var(--foreground);
background-color: var(--background);
@ -385,11 +327,3 @@ li.ProseMirror-selectednode::after {
background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1512 0.423856L0.423263 13.1518L2.84763 15.5761L15.5756 2.84822L13.1512 0.423856Z M15.5755 13.1518L2.84763 0.423855L0.423263 2.84822L13.1512 15.5761L15.5755 13.1518Z' fill='%23393840'/%3E%3C/svg%3E%0A")
center no-repeat;
}
.tooltip {
background: #fff;
box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
color: #000;
display: flex;
position: absolute;
}

226
src/components/Editor/styles/Sidebar.scss
View File

@ -1,226 +0,0 @@
.sidebar-container {
color: rgb(255 255 255 / 50%);
@include font-size(1.6rem);
overflow: hidden;
position: relative;
top: 0;
p {
color: var(--foreground);
}
h4 {
@include font-size(120%);
margin-left: 1rem;
}
button {
height: auto;
min-height: 50px;
padding: 0 1rem;
width: 100%;
}
}
.sidebar-off {
background: #1f1f1f;
height: 100%;
min-height: 100vh;
padding: 40px 20px 20px;
top: 0;
transform: translateX(0);
transition: transform 0.3s;
overflow-y: auto;
scrollbar-width: none;
width: 350px;
.sidebar-container--hidden & {
transform: translateX(100%);
}
::-webkit-scrollbar {
display: none;
}
}
.sidebar-opener {
color: #000;
cursor: pointer;
opacity: 1;
position: absolute;
top: 1em;
transition: opacity 0.3s;
&:hover {
opacity: 0.5;
}
&::after {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1090_23825' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='4' height='4'%3E%3Crect y='14.8237' width='3.17647' height='3.17647' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1090_23825)'%3E%3Cpath d='M16.0941 1.05908H0.847027C0.379194 1.05908 0 1.43828 0 1.90611V18.0003L3.38824 14.612H16.0942C16.562 14.612 16.9412 14.2328 16.9412 13.765V1.90614C16.9412 1.43831 16.562 1.05912 16.0942 1.05912L16.0941 1.05908ZM15.2471 12.9179H1.69412V2.7532H15.2471V12.9179Z' fill='black'/%3E%3C/g%3E%3Crect x='1' y='1' width='16' height='12.8235' stroke='black' stroke-width='2'/%3E%3Crect x='4.23535' y='3.17627' width='9.52941' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='9.5293' width='7.41176' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='6.35303' width='5.29412' height='2.11765' fill='black'/%3E%3C/svg%3E");
content: '';
height: 18px;
left: 100%;
margin-left: 0.3em;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px;
}
}
.sidebar-closer {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1517 0.423857L0.42375 13.1518L2.84812 15.5761L15.576 2.84822L13.1517 0.423857Z M15.576 13.1518L2.84812 0.423855L0.423751 2.84822L13.1517 15.5761L15.576 13.1518Z' fill='white'/%3E%3C/svg%3E%0A");
cursor: pointer;
height: 16px;
opacity: 1;
position: absolute;
transition: opacity 0.3s;
top: 20px;
width: 16px;
&:hover {
opacity: 0.5;
}
}
.sidebar-label {
color: var(--foreground);
> i {
text-transform: none;
}
}
.sidebar-sub {
margin: 10px 0;
margin-bottom: 30px;
}
.sidebar-container button,
.sidebar-container a,
.sidebar-item {
margin: 0;
outline: none;
display: flex;
align-items: center;
line-height: 24px;
text-align: left;
}
.sidebar-container a,
.sidebar-item {
font-size: 18px;
padding: 2px 0;
width: 100%;
}
.sidebar-link {
background: none;
border: 0;
color: inherit;
cursor: pointer;
font-size: inherit;
justify-content: flex-start;
&:hover {
color: #fff !important;
}
&:active {
> span i {
position: relative;
box-shadow: none;
top: 1px;
}
}
&[disabled] {
color: var(--foreground);
cursor: not-allowed;
}
&.draft {
color: rgb(255 255 255 / 50%);
line-height: 1.4;
margin: 0 0 1em 1.5em;
width: calc(100% - 2rem);
&:hover {
background: none;
}
}
> span {
justify-self: flex-end;
margin-left: auto;
> i {
border: 1px solid;
border-bottom-width: 2px;
border-radius: 0.2rem;
display: inline-block;
color: inherit;
font-size: 13px;
line-height: 1.4;
margin: 0 0.5em 0 0;
padding: 1px 4px;
&:last-child {
text-transform: uppercase;
}
}
}
}
.theme-switcher {
border-bottom: 1px solid rgb(255 255 255 / 30%);
border-top: 1px solid rgb(255 255 255 / 30%);
display: flex;
justify-content: space-between;
margin: 1rem;
padding: 1em 0;
input[type='checkbox'] {
opacity: 0;
position: absolute;
+ label {
background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z' fill='white'/%3E%3C/svg%3E%0A")
no-repeat 30px 9px,
url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.41196 0H5.58811V2.43024H6.41196V0ZM5.99988 8.96576C4.36601 8.96576 3.03419 7.63397 3.03419 6.00007C3.04792 4.3662 4.36598 3.04818 5.99988 3.03439C7.63375 3.03439 8.96557 4.3662 8.96557 6.00007C8.96557 7.63395 7.63375 8.96576 5.99988 8.96576ZM5.58811 9.56977H6.41196V12H5.58811V9.56977ZM12.0002 5.58811H9.56996V6.41196H12.0002V5.58811ZM0 5.58811H2.43024V6.41196H0V5.58811ZM8.81339 3.76727L10.5318 2.04891L9.94925 1.46641L8.23089 3.18477L8.81339 3.76727ZM3.7745 8.8129L2.05614 10.5313L1.47364 9.94877L3.192 8.2304L3.7745 8.8129ZM9.95043 10.5269L10.5329 9.94437L8.81456 8.22601L8.23207 8.80851L9.95043 10.5269ZM3.76864 3.18731L3.18614 3.76981L1.46778 2.05145L2.05028 1.46895L3.76864 3.18731Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A")
#000 no-repeat 8px 8px;
border-radius: 14px;
cursor: pointer;
display: block;
height: 28px;
line-height: 10em;
overflow: hidden;
position: relative;
transition: background-color 0.3s;
width: 46px;
&::before {
background-color: #fff;
border-radius: 100%;
content: '';
height: 16px;
left: 6px;
position: absolute;
top: 6px;
transition: left 0.3s, color 0.3s;
width: 16px;
}
}
&:checked + label {
background-color: #fff;
&::before {
background-color: #1f1f1f;
left: 24px;
}
}
}
}

13
src/components/Nav/Modal.tsx
View File

@ -3,6 +3,7 @@ import type { JSX } from 'solid-js'
import { getLogger } from '../../utils/logger'
import './Modal.scss'
import { hideModal, useModalStore } from '../../stores/ui'
import { useEscKeyDownHandler } from '../../utils/useEscKeyDownHandler'
const log = getLogger('modal')
@ -11,10 +12,6 @@ interface ModalProps {
children: JSX.Element
}
const keydownHandler = (e: KeyboardEvent) => {
if (e.key === 'Escape') hideModal()
}
export const Modal = (props: ModalProps) => {
const { modal } = useModalStore()
@ -22,13 +19,7 @@ export const Modal = (props: ModalProps) => {
if (event.target.classList.contains('modalwrap')) hideModal()
}
onMount(() => {
window.addEventListener('keydown', keydownHandler)
onCleanup(() => {
window.removeEventListener('keydown', keydownHandler)
})
})
useEscKeyDownHandler(() => hideModal())
const [visible, setVisible] = createSignal(false)

24
src/components/Nav/Popup.tsx
View File

@ -1,6 +1,7 @@
import { createEffect, createSignal, JSX, onCleanup, onMount, Show } from 'solid-js'
import styles from './Popup.module.scss'
import { clsx } from 'clsx'
import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'
type HorizontalAnchor = 'center' | 'right'
@ -22,29 +23,18 @@ export const Popup = (props: PopupProps) => {
}
})
let container: HTMLDivElement | undefined
const containerRef: { current: HTMLElement } = { current: null }
const handleClickOutside = (event: MouseEvent & { target: Element }) => {
if (!isVisible()) {
return
}
if (event.target === container || container?.contains(event.target)) {
return
}
setIsVisible(false)
}
onMount(() => {
document.addEventListener('click', handleClickOutside, { capture: true })
onCleanup(() => document.removeEventListener('click', handleClickOutside, { capture: true }))
useOutsideClickHandler({
containerRef,
predicate: () => isVisible(),
handler: () => setIsVisible(false)
})
const toggle = () => setIsVisible((oldVisible) => !oldVisible)
return (
<span class={clsx(styles.container, props.containerCssClass)} ref={container}>
<span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>
<span onClick={toggle}>{props.trigger}</span>
<Show when={isVisible()}>
<div

8
src/components/Views/Create.tsx
View File

@ -1,4 +1,4 @@
import { Show, onCleanup, createEffect, onError, onMount, untrack } from 'solid-js'
import { Show, onCleanup, createEffect, onError, onMount, untrack, createSignal } from 'solid-js'
import { createMutable, unwrap } from 'solid-js/store'
import { State, StateContext, newState } from '../Editor/store/context'
import { createCtrl } from '../Editor/store/actions'
@ -10,6 +10,10 @@ import ErrorView from '../Editor/components/Error'
const matchDark = () => window.matchMedia('(prefers-color-scheme: dark)')
export const CreateView = () => {
const [isMounted, setIsMounted] = createSignal(false)
onMount(() => setIsMounted(true))
const onChangeTheme = () => ctrl.updateTheme()
onMount(() => {
matchDark().addEventListener('change', onChangeTheme)
@ -50,6 +54,7 @@ export const CreateView = () => {
}, store.loading)
return (
<Show when={isMounted()}>
<StateContext.Provider value={[store, ctrl]}>
<Layout
config={store.config}
@ -62,6 +67,7 @@ export const CreateView = () => {
</Show>
</Layout>
</StateContext.Provider>
</Show>
)
}

15
src/utils/useEscKeyDownHandler.ts Normal file
View File

@ -0,0 +1,15 @@
import { onCleanup, onMount } from 'solid-js'
export const useEscKeyDownHandler = (onEscKeyDown: () => void) => {
const keydownHandler = (e: KeyboardEvent) => {
if (e.key === 'Escape') onEscKeyDown()
}
onMount(() => {
window.addEventListener('keydown', keydownHandler)
onCleanup(() => {
window.removeEventListener('keydown', keydownHandler)
})
})
}

27
src/utils/useOutsideClickHandler.ts Normal file
View File

@ -0,0 +1,27 @@
import { onCleanup, onMount } from 'solid-js'
type Options = {
predicate?: () => boolean
containerRef: { current: HTMLElement }
handler: () => void
}
export const useOutsideClickHandler = (options: Options) => {
const { predicate, containerRef, handler } = options
const handleClickOutside = (event: MouseEvent & { target: Element }) => {
if (predicate && !predicate()) {
return
}
if (event.target === containerRef.current || containerRef.current?.contains(event.target)) {
return
}
options.handler()
}
onMount(() => {
document.addEventListener('click', handleClickOutside, { capture: true })
onCleanup(() => document.removeEventListener('click', handleClickOutside, { capture: true }))
})
}