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}
<div className="main">
<div className="inner">
<span
className={`sb-current-page ${
isLoading
? "sb-loading"
: unsavedChanges
? "sb-unsaved"
: "sb-saved"
}`}
>
<input
type="text"
ref={inputRef}
value={pageName}
className="sb-edit-page-name"
onBlur={(e) => {
(e.target as any).value = pageName;
}}
onKeyDown={(e) => {
e.stopPropagation();
if (e.key === "Enter") {
e.preventDefault();
const newName = (e.target as any).value;
onRename(newName);
}
if (e.key === "Escape") {
onRename();
}
}}
/>
</span>
{notifications.length > 0 && (
<div className="sb-notifications">
{notifications.map((notification) => (
<div
key={notification.id}
className={`sb-notification-${notification.type}`}
<div className="wrapper">
<span
className={`sb-current-page ${
isLoading
? "sb-loading"
: unsavedChanges
? "sb-unsaved"
: "sb-saved"
}`}
>
<input
type="text"
ref={inputRef}
value={pageName}
className="sb-edit-page-name"
onBlur={(e) => {
(e.target as any).value = pageName;
}}
onKeyDown={(e) => {
e.stopPropagation();
if (e.key === "Enter") {
e.preventDefault();
const newName = (e.target as any).value;
onRename(newName);
}
if (e.key === "Escape") {
onRename();
}
}}
/>
</span>
{notifications.length > 0 && (
<div className="sb-notifications">
{notifications.map((notification) => (
<div
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}
</div>
<actionButton.icon size={18} />
</button>
))}
</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>

1
web/styles/editor.scss
View File

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

15
web/styles/main.scss
View File

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