Skip to content

Commit 0097347

Browse files
travistravis
authored
Merge pull request #102 from mysilio-co/staging
Release v0.0.1
2 parents 779e1d3 + ec04e8d commit 0097347

35 files changed

Lines changed: 611 additions & 818 deletions

‎components/ConceptBody.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function ConceptBody({
4848
</Transition>
4949

5050
<div className="flex flex-row w-full">
51-
<div className={`flex-grow py-6 bg-white ${panelOpen ? 'pl-18 pr-9' : 'px-44'}`}>
51+
<div className={`flex-grow py-6 bg-white p-18 ${panelOpen ? 'pr-9' : 'pr-18'}`}>
5252
{note ? (
5353
<NoteEditor myNote={myNote} editorId={editorId} note={note} onNoteBodyChange={onNoteBodyChange} conceptNames={conceptNames} />
5454
) : (noteError ? (

‎components/ConnectionsPanel.jsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,23 @@ import { notePath, urlSafeIdToConceptName } from "../utils/uris";
1212
import { Close as CloseIcon } from "./icons"
1313
import ConnectionsTabs from './ConnectionsTabs'
1414

15-
function TagsSection({ concept, tagPrefix }) {
15+
function TagsSection({ concept, tagPrefix, workspaceSlug }) {
1616
const tags = getTags(concept)
1717
return (
1818
<div className="p-6">
19-
{tags && tags.map(tag => (
20-
<div>{tagUrlToTagName(tag, tagPrefix)}</div>
21-
))}
19+
{tags && tags.map(tag => {
20+
const tagName = tagUrlToTagName(tag, tagPrefix)
21+
return (
22+
<div>
23+
<Link href={`/tags/${workspaceSlug}/${tagName}`}>
24+
<a className="text-lagoon">
25+
#{tagName}
26+
</a>
27+
</Link>
28+
</div>
29+
)
30+
}
31+
)}
2232
</div>
2333
)
2434
}
@@ -79,7 +89,7 @@ function ConnectionsSection({ subSection, concept, conceptName, tagPrefix, conce
7989
)
8090
case 'tags':
8191
return (
82-
<TagsSection concept={concept} conceptName={conceptName} tagPrefix={tagPrefix}>
92+
<TagsSection concept={concept} conceptName={conceptName} tagPrefix={tagPrefix} workspaceSlug={workspaceSlug}>
8393
Tags
8494
</TagsSection>
8595
)

‎components/ConnectionsTabs.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function ConnectionsTabs({ onChange, active }) {
2828
</select>
2929
</div>
3030
<div className="hidden sm:block">
31-
<nav className="flex space-x-4 bg-gray-200 p-1" aria-label="Tabs">
31+
<nav className="flex space-x-4 bg-gray-300 p-1" aria-label="Tabs">
3232
{tabs.map((tab) => (
3333
<button
3434
key={tab.name}

‎components/Dashboard.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { useState } from 'react'
22
import { useWebId } from 'swrlit'
3+
34
import WebMonetization from '../components/WebMonetization'
45
import HeaderWithData from '../components/HeaderWithData'
56
import { WorkspaceProvider } from '../contexts/WorkspaceContext'
67
import { useFilteredGarden } from '../hooks/concepts';
78
import Cards from '../components/Cards';
9+
import ProfileDrawerWithData from './ProfileDrawerWithData'
810

911
export default function Dashboard() {
1012
const webId = useWebId();
1113
const workspaceSlug = 'default';
1214
const [search, setSearch] = useState('');
1315
const { garden } = useFilteredGarden(webId, workspaceSlug, search);
14-
16+
const [profileDrawerOpen, setProfileDrawerOpen] = useState(false)
1517
return (
1618
<>
1719
<WebMonetization webId={webId} />
@@ -20,12 +22,15 @@ export default function Dashboard() {
2022
onSearch={(s) => {
2123
setSearch(s);
2224
}}
25+
setDrawerOpen={setProfileDrawerOpen}
26+
drawerOpen={profileDrawerOpen}
2327
/>
2428
<div className="py-6 px-18">
2529
<WorkspaceProvider webId={webId} slug={workspaceSlug}>
2630
<Cards webId={webId} garden={garden} workspaceSlug={workspaceSlug} />
31+
<ProfileDrawerWithData isOpen={profileDrawerOpen} setIsOpen={setProfileDrawerOpen} webId={webId}/>
2732
</WorkspaceProvider>
2833
</div>
2934
</>
3035
);
31-
}
36+
}

‎components/Header.jsx‎

Lines changed: 15 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Formik } from 'formik';
33
import { getUrl } from '@inrupt/solid-client'
44
import { FOAF } from '@inrupt/vocab-common-rdf';
55
import Link from 'next/link';
6-
import { Popover } from '@headlessui/react'
76

87
import { classNames } from '../utils/html';
98
import { Search as SearchIcon } from './icons';
@@ -16,20 +15,22 @@ import NewBookmarkModal from './modals/NewBookmark';
1615
import NewImageModal from './modals/NewImage';
1716
import NewFileModal from './modals/NewFile';
1817
import NewNewsletterModal from './modals/NewNewsletter';
19-
import { isPreviewEnv } from '../model/flags';
18+
import { IsPreviewEnv } from '../model/flags';
2019

21-
const ActiveModalTitles = isPreviewEnv()
20+
const ActiveModalTitles = IsPreviewEnv
2221
? ['Note', 'Bookmark', 'Image', 'File', 'Newsletter']
2322
: ['Note', 'Bookmark', 'Image', 'File'];
2423

25-
function ActiveModal({ title, open, onClose, conceptNames }) {
24+
function ActiveModal({ title, open, onClose }) {
25+
const [name, setName] = useState('');
2626
switch (title) {
2727
case 'Note':
2828
return (
2929
<NewNoteModal
3030
open={open}
3131
onClose={onClose}
32-
conceptNames={conceptNames}
32+
name={name}
33+
setName={setName}
3334
/>
3435
);
3536
case 'Bookmark':
@@ -54,14 +55,16 @@ export default function Header({
5455
conceptNames,
5556
type,
5657
onSearch,
58+
drawerOpen,
59+
setDrawerOpen
5760
}) {
5861
const avatarImgSrc = profile && getUrl(profile, FOAF.img);
5962
const [activeModal, setActiveModal] = useState(undefined);
6063
const bg = (type == 'dashboard') ? 'bg-header-gradient' : 'bg-my-green';
6164

6265
return (
6366
<nav
64-
className={`${bg} rounded-b-2xl flex flex-row justify-between h-18 items-center`}
67+
className={`${bg} rounded-b-2xl flex flex-row justify-between h-18 items-center relative z-30`}
6568
>
6669
<div className="flex flex-row items-center">
6770
<div className="w-18 flex flex-col justify-center items-center">
@@ -118,45 +121,14 @@ export default function Header({
118121
title={activeModal}
119122
open={!!activeModal}
120123
onClose={() => setActiveModal(undefined)}
121-
conceptNames={conceptNames}
122124
/>
123-
<Popover>
124-
<Popover.Button className="outline-none focus:outline-none">
125-
<Avatar
126-
src={avatarImgSrc}
127-
className="mx-12 w-12 h-12 cursor-pointer"
128-
/>
129-
</Popover.Button>
130125

131-
<Popover.Panel className="absolute origin-top-right right-4 z-40 rounded-md overflow-hidden shadow-lg bg-white ring-1 ring-black ring-opacity-5">
132-
{loggedIn && (
133-
<>
134-
<Link href="/profile">
135-
<a className="menu-item">edit profile</a>
136-
</Link>
137-
<Link href="/settings">
138-
<a className="menu-item">settings</a>
139-
</Link>
140-
</>
141-
)}
142-
<a href="/privacy" className="menu-item" role="menuitem">
143-
privacy
144-
</a>
145-
<a href="/tos" className="menu-item" role="menuitem">
146-
terms of service
147-
</a>
148-
{loggedIn && (
149-
<button
150-
type="submit"
151-
className="menu-item"
152-
role="menuitem"
153-
onClick={logout}
154-
>
155-
log out
156-
</button>
157-
)}
158-
</Popover.Panel>
159-
</Popover>
126+
<Avatar
127+
src={avatarImgSrc}
128+
className="mx-12 w-12 h-12 cursor-pointer object-cover"
129+
onClick={() => setDrawerOpen(!drawerOpen)}
130+
/>
131+
160132
</div>
161133
</nav>
162134
);

‎components/Modal.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ export default function Modal({ children, open, onClose }) {
55
return (
66
<Transition.Root show={open} as={Fragment}>
77

8-
<Dialog as="div" onClose={onClose} className="fixed z-10 inset-0 overflow-y-auto">
9-
<div className="flex items-end justify-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
8+
<Dialog as="div" onClose={onClose} className="fixed z-50 inset-0 overflow-y-auto">
9+
<div className="flex flex-col items-center justify-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
1010
<Transition.Child
1111
as={Fragment}
1212
enter="ease-out duration-300"

‎components/Plate/Editor.jsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { autoformatRules } from './autoformat/autoformatRules'
2020
import {
2121
ToolbarButtonsList,
2222
ToolbarButtonsBasicElements,
23-
BallonToolbarMarks,
23+
ToolbarButtonsBasicMarks,
2424
} from "./Toolbars";
2525
import ToolbarImageButton from "./ToolbarImageButton"
2626

@@ -37,9 +37,13 @@ const ConceptElement = ({ attributes, element, children }) => {
3737
};
3838

3939
const TagElement = (m) => {
40+
const { slug: workspaceSlug } = useWorkspaceContext();
4041
const tag = fromMentionable(m);
41-
42-
return <span className="text-lagoon">#{tag}</span>;
42+
return (
43+
<Link href={`/tags/${workspaceSlug}/${tag}`}>
44+
<a className="text-lagoon">#{tag}</a>
45+
</Link>
46+
)
4347
};
4448

4549
const MentionElement = (m) => {
@@ -274,12 +278,6 @@ const defaultPlugins = [
274278
options: {
275279
rules: [
276280
{ hotkey: "shift+enter" },
277-
{
278-
hotkey: "enter",
279-
query: {
280-
allow: [P.ELEMENT_CODE_BLOCK, P.ELEMENT_BLOCKQUOTE, P.ELEMENT_TD],
281-
},
282-
},
283281
],
284282
}
285283
}),
@@ -301,9 +299,16 @@ const defaultPlugins = [
301299
allow: P.KEYS_HEADING,
302300
},
303301
},
302+
{
303+
hotkey: "enter",
304+
query: {
305+
allow: [P.ELEMENT_CODE_BLOCK, P.ELEMENT_BLOCKQUOTE],
306+
},
307+
},
304308
],
305309
}
306310
}),
311+
P.createInsertDataPlugin(),
307312
P.createSelectOnBackspacePlugin({ options: { query: { allow: P.ELEMENT_IMAGE } } }),
308313
];
309314

@@ -407,11 +412,12 @@ export default function Editor({
407412
>
408413
{!readOnly && (
409414
<>
410-
<div className="flex flex-row border-b pb-1 mb-1 border-grey-700">
415+
<div className="flex flex-row border-b pt-4 pb-1 mb-1 border-grey-700 bg-white sticky top-0 z-10">
411416
<ToolbarButtonsBasicElements />
412417
<ToolbarButtonsList />
413418
<P.LinkToolbarButton icon={<LinkIcon />} />
414419
<ToolbarImageButton getImageUrl={imageUrlGetter} editorId={editorId} />
420+
<ToolbarButtonsBasicMarks />
415421
</div>
416422

417423
<Modal open={imageUploaderOpen} onClose={() => { setImageUploaderOpen(false) }}>
@@ -424,7 +430,7 @@ export default function Editor({
424430
</div>
425431
</Modal>
426432

427-
<BallonToolbarMarks />
433+
428434

429435
<P.MentionCombobox items={mentionItems} pluginKey="mention" component={MentionComboboxComponent} />
430436
<P.MentionCombobox items={tagItems} pluginKey="tag" component={TagComboboxComponent} />

‎components/Plate/Toolbars.jsx‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -82,30 +82,41 @@ export const ToolbarButtonsList = () => {
8282

8383
export const ToolbarButtonsBasicMarks = () => {
8484
const editor = P.usePlateEditorRef(P.useEventEditorSelectors.focus());
85-
85+
const tooltip = {
86+
arrow: true,
87+
delay: 0,
88+
duration: [200, 0],
89+
hideOnClick: false,
90+
offset: [0, 17],
91+
placement: 'top',
92+
};
8693
return (
8794
<>
88-
<P.MarkToolbarButton
89-
type={P.getPluginType(editor, P.MARK_BOLD)}
90-
icon={<FormatBold />}
91-
/>
92-
<P.MarkToolbarButton
93-
type={P.getPluginType(editor, P.MARK_ITALIC)}
94-
icon={<FormatItalic />}
95-
/>
96-
<P.MarkToolbarButton
97-
type={P.getPluginType(editor, P.MARK_UNDERLINE)}
98-
icon={<FormatUnderlined />}
99-
/>
100-
<P.MarkToolbarButton
101-
type={P.getPluginType(editor, P.MARK_CODE)}
102-
icon={<CodeAlt />}
103-
/>
104-
<P.MarkToolbarButton
105-
type={P.getPluginType(editor, P.MARK_HIGHLIGHT)}
106-
icon={<Highlight />}
107-
tooltip={{ content: 'Highlight', ...tooltip }}
108-
/>
95+
<P.MarkToolbarButton
96+
type={P.getPluginType(editor, P.MARK_BOLD)}
97+
icon={<FormatBold />}
98+
tooltip={{ content: 'Bold (⌘B)', ...tooltip }}
99+
/>
100+
<P.MarkToolbarButton
101+
type={P.getPluginType(editor, P.MARK_ITALIC)}
102+
icon={<FormatItalic />}
103+
tooltip={{ content: 'Italic (⌘I)', ...tooltip }}
104+
/>
105+
<P.MarkToolbarButton
106+
type={P.getPluginType(editor, P.MARK_UNDERLINE)}
107+
icon={<FormatUnderlined />}
108+
tooltip={{ content: 'Underline (⌘U)', ...tooltip }}
109+
/>
110+
<P.MarkToolbarButton
111+
type={P.getPluginType(editor, P.MARK_CODE)}
112+
icon={<CodeAlt />}
113+
tooltip={{ content: 'Code', ...tooltip }}
114+
/>
115+
<P.MarkToolbarButton
116+
type={P.getPluginType(editor, P.MARK_HIGHLIGHT)}
117+
icon={<Highlight />}
118+
tooltip={{ content: 'Highlight', ...tooltip }}
119+
/>
109120
</>
110121
);
111122
};

0 commit comments

Comments
 (0)