neil/silverbullet
1
0
Fork 0
Code

Fixes #202

Browse Source
This commit is contained in:
Zef Hemel 2022-12-16 11:39:46 +01:00
parent 0d9966f56c
commit be83f305dd
3 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
web/components/top_bar.tsx
View File

@ -44,60 +44,62 @@ export function TopBar({
{lhs} {lhs}
<div className="main"> <div className="main">
<div className="inner"> <div className="inner">
<span <div className="wrapper">
className={`sb-current-page ${ <span
isLoading className={`sb-current-page ${
? "sb-loading" isLoading
: unsavedChanges ? "sb-loading"
? "sb-unsaved" : unsavedChanges
: "sb-saved" ? "sb-unsaved"
}`} : "sb-saved"
> }`}
<input >
type="text" <input
ref={inputRef} type="text"
value={pageName} ref={inputRef}
className="sb-edit-page-name" value={pageName}
onBlur={(e) => { className="sb-edit-page-name"
(e.target as any).value = pageName; onBlur={(e) => {
}} (e.target as any).value = pageName;
onKeyDown={(e) => { }}
e.stopPropagation(); onKeyDown={(e) => {
if (e.key === "Enter") { e.stopPropagation();
e.preventDefault(); if (e.key === "Enter") {
const newName = (e.target as any).value; e.preventDefault();
onRename(newName); const newName = (e.target as any).value;
} onRename(newName);
if (e.key === "Escape") { }
onRename(); if (e.key === "Escape") {
} onRename();
}} }
/> }}
</span> />
{notifications.length > 0 && ( </span>
<div className="sb-notifications"> {notifications.length > 0 && (
{notifications.map((notification) => ( <div className="sb-notifications">
<div {notifications.map((notification) => (
key={notification.id} <div
className={`sb-notification-${notification.type}`} key={notification.id}
className={`sb-notification-${notification.type}`}
>
{notification.message}
</div>
))}
</div>
)}
<div className="sb-actions">
{actionButtons.map((actionButton) => (
<button
onClick={(e) => {
actionButton.callback();
e.stopPropagation();
}}
title={actionButton.description}
> >
{notification.message} <actionButton.icon size={18} />
</div> </button>
))} ))}
</div> </div>
)}
<div className="sb-actions">
{actionButtons.map((actionButton) => (
<button
onClick={(e) => {
actionButton.callback();
e.stopPropagation();
}}
title={actionButton.description}
>
<actionButton.icon size={18} />
</button>
))}
</div> </div>
</div> </div>
</div> </div>

1
web/styles/editor.scss
View File

@ -7,6 +7,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: var(--max-width); max-width: var(--max-width);
padding: 5px 20px;
} }
.cm-line { .cm-line {

15
web/styles/main.scss
View File

@ -52,10 +52,16 @@
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
font-size: 28px; font-size: 28px;
padding: 10px 20px; padding: 10px 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.wrapper {
width: 100%;
padding: 0 20px;
position: relative;
}
.sb-notifications { .sb-notifications {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -64,7 +70,7 @@
font-size: 15px; font-size: 15px;
z-index: 100; z-index: 100;
> div { >div {
padding: 3px; padding: 3px;
margin-bottom: 3px; margin-bottom: 3px;
border-radius: 5px; border-radius: 5px;
@ -94,6 +100,9 @@
.sb-actions { .sb-actions {
text-align: right; text-align: right;
position: absolute;
right: 0;
top: 0;
} }
} }
@ -159,4 +168,4 @@
margin: 0; margin: 0;
} }
} }
} }