mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-14 08:34:25 +03:00
publish: add scaffolding for all expected components with todos
This commit is contained in:
parent
df5d6c76d1
commit
f0c4a63f99
File diff suppressed because one or more lines are too long
@ -48887,6 +48887,13 @@
|
||||
|
||||
const _jsxFileName$3 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/lib/sidebar.js";
|
||||
class Sidebar extends react_1 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sort: "oldest"
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let activeClasses = (this.props.active === "sidebar") ? " " : "dn-s ";
|
||||
@ -48899,23 +48906,39 @@
|
||||
hiddenClasses = this.props.sidebarShown;
|
||||
}
|
||||
//TODO render notebook list from state
|
||||
// (make a new array of all notebooks from {author: {notebook}}
|
||||
// prop.notebook obj, case-switch the sorting from this.state.sort, and map it)
|
||||
//TODO allow for user sorting of notebook list
|
||||
//
|
||||
//(reactive dropdown -> amends state -> sort by state prop)
|
||||
let notebooks = react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$3, lineNumber: 21}});
|
||||
//
|
||||
let notebooks = react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$3, lineNumber: 33}});
|
||||
|
||||
return (
|
||||
react.createElement('div', { className: `bn br-m br-l br-xl b--gray4 b--gray2-d lh-copy h-100
|
||||
flex-shrink-0 mw5-m mw5-l mw5-xl pt3 pt0-m pt0-l pt0-xl
|
||||
flex-shrink-0 mw-300-ns pt3 pt0-m pt0-l pt0-xl
|
||||
relative ` + activeClasses + ((hiddenClasses)
|
||||
? "flex-basis-100-s flex-basis-30-ns"
|
||||
: "dn"), __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 24}}
|
||||
, react.createElement('a', { className: "db dn-m dn-l dn-xl f8 pb3 pl3" , href: "/", __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 29}}, "⟵ Landscape" )
|
||||
/*TODO New / Join go here */
|
||||
, react.createElement('div', { className: "overflow-y-scroll h-100" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 31}}
|
||||
, react.createElement('h2', { className: `f8 pt1 pr4 pb3 pl3 black c-default bb b--gray4 mb2
|
||||
dn-m dn-l dn-xl`, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 32}}, "Your Notebooks"
|
||||
: "dn"), __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 36}}
|
||||
, react.createElement('a', { className: "db dn-m dn-l dn-xl f8 pb3 pl3" , href: "/", __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 41}}, "⟵ Landscape" )
|
||||
, react.createElement('div', { className: "w-100 pa4" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 42}}
|
||||
, react.createElement(Link, {
|
||||
to: "/~publish/new",
|
||||
className: "green2 mr4 f9" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 43}}, "New"
|
||||
|
||||
)
|
||||
)
|
||||
, react.createElement(Link, {
|
||||
to: "/~publish/join",
|
||||
className: "f9 gray2" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 48}}, "Join"
|
||||
|
||||
)
|
||||
)
|
||||
, react.createElement('div', { className: "overflow-y-scroll h-100" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 54}}
|
||||
, react.createElement('h2', { className: `f8 pt1 pr4 pb3 pl3 black c-default bb b--gray4 mb2
|
||||
dn-m dn-l dn-xl`, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 55}}, "Your Notebooks"
|
||||
|
||||
)
|
||||
/*TODO Dropdown attached to this.state.sort */
|
||||
, notebooks
|
||||
)
|
||||
)
|
||||
@ -48926,13 +48949,14 @@
|
||||
const _jsxFileName$4 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/skeleton.js";
|
||||
class Skeleton extends react_1 {
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
let rightPanelHide = this.props.rightPanelHide
|
||||
let rightPanelHide = props.rightPanelHide
|
||||
? "dn-s"
|
||||
: "";
|
||||
|
||||
let popout = !!this.props.popout
|
||||
? this.props.popout
|
||||
let popout = !!props.popout
|
||||
? props.popout
|
||||
: false;
|
||||
|
||||
let popoutWindow = (popout)
|
||||
@ -48944,17 +48968,18 @@
|
||||
: "ba-m ba-l ba-xl b--gray2 br1";
|
||||
|
||||
return (
|
||||
react.createElement('div', { className: "h-100 w-100 " + popoutWindow, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 24}}
|
||||
, react.createElement('div', { className: `cf w-100 h-100 flex ` + popoutBorder, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 25}}
|
||||
react.createElement('div', { className: "h-100 w-100 " + popoutWindow, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 25}}
|
||||
, react.createElement('div', { className: `cf w-100 h-100 flex ` + popoutBorder, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 26}}
|
||||
, react.createElement(Sidebar, {
|
||||
popout: popout,
|
||||
sidebarShown: this.props.sidebarShown,
|
||||
active: this.props.active, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 26}}
|
||||
sidebarShown: props.sidebarShown,
|
||||
active: props.active,
|
||||
notebooks: props.notebooks, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 27}}
|
||||
)
|
||||
, react.createElement('div', { className: "h-100 w-100 " + rightPanelHide, style: {
|
||||
flexGrow: 1,
|
||||
}, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 31}}
|
||||
, this.props.children
|
||||
}, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 33}}
|
||||
, props.children
|
||||
)
|
||||
)
|
||||
)
|
||||
@ -48962,7 +48987,84 @@
|
||||
}
|
||||
}
|
||||
|
||||
const _jsxFileName$5 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/root.js";
|
||||
const _jsxFileName$5 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/lib/new.js";
|
||||
//TODO textarea fields for title/description
|
||||
//TODO add component for ship / group search using props.groups
|
||||
// (integrate props.contacts as well once contact-view is bound)
|
||||
class NewScreen extends react_1 {
|
||||
render() {
|
||||
return (
|
||||
react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$5, lineNumber: 9}}
|
||||
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const _jsxFileName$6 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/lib/join.js";
|
||||
//TODO textarea + join button to make an api call
|
||||
class JoinScreen extends react_1 {
|
||||
render() {
|
||||
return (
|
||||
react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$6, lineNumber: 7}}
|
||||
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const _jsxFileName$7 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/lib/notebook.js";
|
||||
//TODO subcomponents for posts, subscribers, settings
|
||||
//
|
||||
//TODO props.view switch for which component to render
|
||||
//pass props.notebook, contacts to each component
|
||||
|
||||
//TODO ask for notebook if we don't have it
|
||||
//
|
||||
//TODO initialise notebook obj if no props.notebook
|
||||
|
||||
//TODO component bar above the rendered component
|
||||
//don't render settings if it's ours
|
||||
//current component is black, others gray2 (see Chat's tab bar for an example)
|
||||
|
||||
class Notebook extends react_1 {
|
||||
render() {
|
||||
return (
|
||||
react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$7, lineNumber: 23}}
|
||||
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const _jsxFileName$8 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/lib/comments.js";
|
||||
//TODO map comments into comment-items;
|
||||
class Comments extends react_1 {
|
||||
render() {
|
||||
return (
|
||||
react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$8, lineNumber: 8}}
|
||||
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const _jsxFileName$9 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/lib/note.js";
|
||||
//TODO ask for note if we don't have it
|
||||
//TODO initialise note if no state
|
||||
|
||||
//TODO if comments are disabled on the notebook, don't render comments
|
||||
class Note extends react_1 {
|
||||
render() {
|
||||
return (
|
||||
react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$9, lineNumber: 11}}
|
||||
, react.createElement(Comments, {__self: this, __source: {fileName: _jsxFileName$9, lineNumber: 12}})
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const _jsxFileName$a = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/js/components/root.js";
|
||||
|
||||
class Root extends react_1 {
|
||||
constructor(props) {
|
||||
@ -48973,9 +49075,10 @@
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
return (
|
||||
react.createElement(BrowserRouter, {__self: this, __source: {fileName: _jsxFileName$5, lineNumber: 19}}
|
||||
react.createElement(BrowserRouter, {__self: this, __source: {fileName: _jsxFileName$a, lineNumber: 23}}
|
||||
, react.createElement(Route, { exact: true, path: "/~publish",
|
||||
render: (props) => {
|
||||
return (
|
||||
@ -48983,20 +49086,81 @@
|
||||
popout: false,
|
||||
active: "sidebar",
|
||||
rightPanelHide: true,
|
||||
sidebarShown: true, __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 23}}
|
||||
, react.createElement('div', { className: "h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d dn db-ns" , __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 28}}
|
||||
, react.createElement('div', { className: "pl3 pr3 pt2 dt pb3 w-100 h-100" , __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 29}}
|
||||
, react.createElement('p', { className: "f9 pt3 gray2 w-100 h-100 dtc v-mid tc" , __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 30}}, "Select or create a notebook to begin."
|
||||
sidebarShown: true,
|
||||
notebooks: state.notebooks, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 27}}
|
||||
, react.createElement('div', { className: `h-100 w-100 overflow-x-hidden flex flex-column
|
||||
bg-white bg-gray0-d dn db-ns`, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 33}}
|
||||
, react.createElement('div', { className: "pl3 pr3 pt2 dt pb3 w-100 h-100" , __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 35}}
|
||||
, react.createElement('p', { className: "f9 pt3 gray2 w-100 h-100 dtc v-mid tc" , __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 36}}, "Select or create a notebook to begin."
|
||||
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
}, __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 20}}
|
||||
}, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 24}}
|
||||
)
|
||||
, react.createElement(Route, { exact: true, path: "/~publish/(popout)?/:ship/:notebook", __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 39}})
|
||||
, react.createElement(Route, { exact: true, path: "/~publish/(popout)?/:ship/:notebook/:note", __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 40}})
|
||||
, react.createElement(Route, { exact: true, path: "/~publish/new",
|
||||
render: (props) => {
|
||||
return (
|
||||
react.createElement(Skeleton, {
|
||||
popout: false,
|
||||
active: "rightPanel",
|
||||
rightPanelHide: false,
|
||||
sidebarShown: true,
|
||||
notebooks: state.notebooks, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 48}}
|
||||
, react.createElement(NewScreen, {
|
||||
groups: state.groups, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 54}})
|
||||
)
|
||||
)
|
||||
}, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 45}})
|
||||
, react.createElement(Route, { exact: true, path: "/~publish/join",
|
||||
render: (props) => {
|
||||
return (
|
||||
react.createElement(Skeleton, {
|
||||
popout: false,
|
||||
active: "rightPanel",
|
||||
rightPanelHide: false,
|
||||
sidebarShown: true,
|
||||
notebooks: state.notebooks, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 62}}
|
||||
, react.createElement(JoinScreen, {__self: this, __source: {fileName: _jsxFileName$a, lineNumber: 68}})
|
||||
)
|
||||
)
|
||||
}, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 59}})
|
||||
, react.createElement(Route, { exact: true, path: "/~publish/(popout)?/:ship/:notebook/:view?",
|
||||
render: (props) => {
|
||||
let view = (props.match.params.view)
|
||||
? props.match.params.view
|
||||
: "posts";
|
||||
|
||||
return (
|
||||
react.createElement(Skeleton, {
|
||||
popout: false,
|
||||
active: "rightPanel",
|
||||
rightPanelHide: false,
|
||||
sidebarShown: true,
|
||||
notebooks: state.notebooks, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 79}}
|
||||
, react.createElement(Notebook, {
|
||||
notebooks: state.notebooks,
|
||||
view: view, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 85}})
|
||||
)
|
||||
)
|
||||
}, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 72}})
|
||||
, react.createElement(Route, { exact: true, path: "/~publish/(popout)?/:ship/:notebook/:note",
|
||||
render: (props) => {
|
||||
|
||||
return (
|
||||
react.createElement(Skeleton, {
|
||||
popout: false,
|
||||
active: "rightPanel",
|
||||
rightPanelHide: false,
|
||||
sidebarShown: true,
|
||||
notebooks: state.notebooks, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 95}}
|
||||
, react.createElement(Note, {
|
||||
notebooks: state.notebooks, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 101}})
|
||||
)
|
||||
)
|
||||
}, __self: this, __source: {fileName: _jsxFileName$a, lineNumber: 91}})
|
||||
)
|
||||
)
|
||||
}
|
||||
@ -49166,7 +49330,7 @@
|
||||
|
||||
let subscription = new Subscription();
|
||||
|
||||
const _jsxFileName$6 = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/index.js";
|
||||
const _jsxFileName$b = "/Users/matilde/git/tlon/urbit/pkg/interface/publish/src/index.js";
|
||||
api.setAuthTokens({
|
||||
ship: window.ship
|
||||
});
|
||||
@ -49174,11 +49338,11 @@
|
||||
subscription.start();
|
||||
|
||||
reactDom.render((
|
||||
react.createElement(HeaderBar, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 16}} )
|
||||
react.createElement(HeaderBar, {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 16}} )
|
||||
), document.getElementById("header"));
|
||||
|
||||
reactDom.render((
|
||||
react.createElement(Root, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 20}} )
|
||||
react.createElement(Root, {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 20}} )
|
||||
), document.querySelectorAll("#root")[0]);
|
||||
|
||||
}));
|
||||
|
@ -3,6 +3,7 @@ html, body {
|
||||
width: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
|
||||
@ -63,4 +64,7 @@ a {
|
||||
.h-100-m-40-ns {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.mw-300-ns {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
16
pkg/interface/publish/src/js/components/lib/about.js
Normal file
16
pkg/interface/publish/src/js/components/lib/about.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
//TODO "About" subcomponent of Notebook.js
|
||||
//Fill in with "description" from props.notebook
|
||||
|
||||
export class About extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default About
|
14
pkg/interface/publish/src/js/components/lib/comment-item.js
Normal file
14
pkg/interface/publish/src/js/components/lib/comment-item.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
//TODO take props and render div
|
||||
export class CommentItem extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CommentItem
|
15
pkg/interface/publish/src/js/components/lib/comments.js
Normal file
15
pkg/interface/publish/src/js/components/lib/comments.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React, { Component } from 'react'
|
||||
import { CommentItem } from './comment-item';
|
||||
|
||||
//TODO map comments into comment-items;
|
||||
export class Comments extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Comments
|
14
pkg/interface/publish/src/js/components/lib/join.js
Normal file
14
pkg/interface/publish/src/js/components/lib/join.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
//TODO textarea + join button to make an api call
|
||||
export class JoinScreen extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default JoinScreen
|
16
pkg/interface/publish/src/js/components/lib/new.js
Normal file
16
pkg/interface/publish/src/js/components/lib/new.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
//TODO textarea fields for title/description
|
||||
//TODO add component for ship / group search using props.groups
|
||||
// (integrate props.contacts as well once contact-view is bound)
|
||||
export class NewScreen extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default NewScreen
|
16
pkg/interface/publish/src/js/components/lib/note-item.js
Normal file
16
pkg/interface/publish/src/js/components/lib/note-item.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
//TODO render props from notebook.js as a div of individual notes in the
|
||||
//notebook
|
||||
|
||||
export class NoteItem extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default NoteItem
|
15
pkg/interface/publish/src/js/components/lib/note-list.js
Normal file
15
pkg/interface/publish/src/js/components/lib/note-list.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React, { Component } from 'react';
|
||||
import { NoteItem } from './note-item';
|
||||
|
||||
//TODO map a list of NoteItems
|
||||
export class NoteList extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default NoteList
|
18
pkg/interface/publish/src/js/components/lib/note.js
Normal file
18
pkg/interface/publish/src/js/components/lib/note.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Comments } from './comments';
|
||||
|
||||
//TODO ask for note if we don't have it
|
||||
//TODO initialise note if no state
|
||||
|
||||
//TODO if comments are disabled on the notebook, don't render comments
|
||||
export class Note extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Comments/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Note
|
14
pkg/interface/publish/src/js/components/lib/notebook-item.js
Normal file
14
pkg/interface/publish/src/js/components/lib/notebook-item.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
//TODO take props and render entry in sidebar
|
||||
export class NotebookItem extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default NotebookItem
|
30
pkg/interface/publish/src/js/components/lib/notebook.js
Normal file
30
pkg/interface/publish/src/js/components/lib/notebook.js
Normal file
@ -0,0 +1,30 @@
|
||||
import React, { Component } from 'react';
|
||||
import { NoteList } from './note-list';
|
||||
import { About } from './about';
|
||||
import { Subscribers } from './subscribers';
|
||||
import { Settings } from './settings';
|
||||
|
||||
//TODO subcomponents for posts, subscribers, settings
|
||||
//
|
||||
//TODO props.view switch for which component to render
|
||||
//pass props.notebook, contacts to each component
|
||||
|
||||
//TODO ask for notebook if we don't have it
|
||||
//
|
||||
//TODO initialise notebook obj if no props.notebook
|
||||
|
||||
//TODO component bar above the rendered component
|
||||
//don't render settings if it's ours
|
||||
//current component is black, others gray2 (see Chat's tab bar for an example)
|
||||
|
||||
export class Notebook extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Notebook
|
14
pkg/interface/publish/src/js/components/lib/settings.js
Normal file
14
pkg/interface/publish/src/js/components/lib/settings.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
//TODO Settings for owned notebooks
|
||||
export class Settings extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Settings
|
@ -1,7 +1,15 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Route, Link } from 'react-router-dom';
|
||||
import { NotebookItem } from './notebook-item';
|
||||
|
||||
export class Sidebar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sort: "oldest"
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
@ -16,23 +24,39 @@ export class Sidebar extends Component {
|
||||
};
|
||||
|
||||
//TODO render notebook list from state
|
||||
// (make a new array of all notebooks from {author: {notebook}}
|
||||
// prop.notebook obj, case-switch the sorting from this.state.sort, and map it)
|
||||
//TODO allow for user sorting of notebook list
|
||||
//
|
||||
//(reactive dropdown -> amends state -> sort by state prop)
|
||||
//
|
||||
let notebooks = <div></div>
|
||||
|
||||
return (
|
||||
<div className={`bn br-m br-l br-xl b--gray4 b--gray2-d lh-copy h-100
|
||||
flex-shrink-0 mw5-m mw5-l mw5-xl pt3 pt0-m pt0-l pt0-xl
|
||||
flex-shrink-0 mw-300-ns pt3 pt0-m pt0-l pt0-xl
|
||||
relative ` + activeClasses + ((hiddenClasses)
|
||||
? "flex-basis-100-s flex-basis-30-ns"
|
||||
: "dn")}>
|
||||
<a className="db dn-m dn-l dn-xl f8 pb3 pl3" href="/">⟵ Landscape</a>
|
||||
{/*TODO New / Join go here */}
|
||||
<div className="w-100 pa4">
|
||||
<Link
|
||||
to="/~publish/new"
|
||||
className="green2 mr4 f9">
|
||||
New
|
||||
</Link>
|
||||
<Link
|
||||
to="/~publish/join"
|
||||
className="f9 gray2">
|
||||
Join
|
||||
</Link>
|
||||
</div>
|
||||
<div className="overflow-y-scroll h-100">
|
||||
<h2 className={`f8 pt1 pr4 pb3 pl3 black c-default bb b--gray4 mb2
|
||||
dn-m dn-l dn-xl`}>
|
||||
dn-m dn-l dn-xl`}>
|
||||
Your Notebooks
|
||||
</h2>
|
||||
</h2>
|
||||
{/*TODO Dropdown attached to this.state.sort */}
|
||||
{notebooks}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -0,0 +1,15 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
//TODO fill sigil/avatar + name from props
|
||||
|
||||
export class SubscriberItem extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SubscriberItem
|
16
pkg/interface/publish/src/js/components/lib/subscribers.js
Normal file
16
pkg/interface/publish/src/js/components/lib/subscribers.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
import { SubscriberItem } from './subscriber-item';
|
||||
|
||||
//TODO map list of subscriber-items from props
|
||||
|
||||
export class Subscribers extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Subscribers
|
@ -2,6 +2,10 @@ import React, { Component } from 'react';
|
||||
import { BrowserRouter, Route, Link } from "react-router-dom";
|
||||
import { store } from '/store';
|
||||
import { Skeleton } from '/components/skeleton';
|
||||
import { NewScreen } from '/components/lib/new';
|
||||
import { JoinScreen } from '/components/lib/join';
|
||||
import { Notebook } from '/components/lib/notebook';
|
||||
import { Note } from '/components/lib/note';
|
||||
|
||||
|
||||
export class Root extends Component {
|
||||
@ -24,8 +28,10 @@ export class Root extends Component {
|
||||
popout={false}
|
||||
active={"sidebar"}
|
||||
rightPanelHide={true}
|
||||
sidebarShown={true}>
|
||||
<div className="h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d dn db-ns">
|
||||
sidebarShown={true}
|
||||
notebooks={state.notebooks}>
|
||||
<div className={`h-100 w-100 overflow-x-hidden flex flex-column
|
||||
bg-white bg-gray0-d dn db-ns`}>
|
||||
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
|
||||
<p className="f9 pt3 gray2 w-100 h-100 dtc v-mid tc">
|
||||
Select or create a notebook to begin.
|
||||
@ -36,8 +42,67 @@ export class Root extends Component {
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Route exact path="/~publish/(popout)?/:ship/:notebook"/>
|
||||
<Route exact path="/~publish/(popout)?/:ship/:notebook/:note"/>
|
||||
<Route exact path="/~publish/new"
|
||||
render={ (props) => {
|
||||
return (
|
||||
<Skeleton
|
||||
popout={false}
|
||||
active={"rightPanel"}
|
||||
rightPanelHide={false}
|
||||
sidebarShown={true}
|
||||
notebooks={state.notebooks}>
|
||||
<NewScreen
|
||||
groups={state.groups}/>
|
||||
</Skeleton>
|
||||
)
|
||||
}}/>
|
||||
<Route exact path="/~publish/join"
|
||||
render={ (props) => {
|
||||
return (
|
||||
<Skeleton
|
||||
popout={false}
|
||||
active={"rightPanel"}
|
||||
rightPanelHide={false}
|
||||
sidebarShown={true}
|
||||
notebooks={state.notebooks}>
|
||||
<JoinScreen/>
|
||||
</Skeleton>
|
||||
)
|
||||
}}/>
|
||||
<Route exact path="/~publish/(popout)?/:ship/:notebook/:view?"
|
||||
render={ (props) => {
|
||||
let view = (props.match.params.view)
|
||||
? props.match.params.view
|
||||
: "posts";
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
popout={false}
|
||||
active={"rightPanel"}
|
||||
rightPanelHide={false}
|
||||
sidebarShown={true}
|
||||
notebooks={state.notebooks}>
|
||||
<Notebook
|
||||
notebooks={state.notebooks}
|
||||
view={view}/>
|
||||
</Skeleton>
|
||||
)
|
||||
}}/>
|
||||
<Route exact path="/~publish/(popout)?/:ship/:notebook/:note"
|
||||
render={ (props) => {
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
popout={false}
|
||||
active={"rightPanel"}
|
||||
rightPanelHide={false}
|
||||
sidebarShown={true}
|
||||
notebooks={state.notebooks}>
|
||||
<Note
|
||||
notebooks={state.notebooks}/>
|
||||
</Skeleton>
|
||||
)
|
||||
}}/>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
@ -3,13 +3,14 @@ import { Sidebar } from './lib/sidebar';
|
||||
|
||||
export class Skeleton extends Component {
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
let rightPanelHide = this.props.rightPanelHide
|
||||
let rightPanelHide = props.rightPanelHide
|
||||
? "dn-s"
|
||||
: "";
|
||||
|
||||
let popout = !!this.props.popout
|
||||
? this.props.popout
|
||||
let popout = !!props.popout
|
||||
? props.popout
|
||||
: false;
|
||||
|
||||
let popoutWindow = (popout)
|
||||
@ -25,13 +26,14 @@ export class Skeleton extends Component {
|
||||
<div className={`cf w-100 h-100 flex ` + popoutBorder}>
|
||||
<Sidebar
|
||||
popout={popout}
|
||||
sidebarShown={this.props.sidebarShown}
|
||||
active={this.props.active}
|
||||
sidebarShown={props.sidebarShown}
|
||||
active={props.active}
|
||||
notebooks={props.notebooks}
|
||||
/>
|
||||
<div className={"h-100 w-100 " + rightPanelHide} style={{
|
||||
flexGrow: 1,
|
||||
}}>
|
||||
{this.props.children}
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user