- {this.props.header}
-
+ <>
+ {this.props.header}
+
+ {this.props.header}
+
+
)}
+
+
+ );
+};
export class ApplicationUserControlsPopup extends React.Component {
+ state = {
+ isExtensionDownloaded: false,
+ };
+
+ componentDidMount() {
+ if (document) {
+ const isExtensionDownloaded = this._checkIfExtensionIsDownloaded();
+ this.setState({ isExtensionDownloaded });
+ }
+ }
+
+ _checkIfExtensionIsDownloaded = () => {
+ const extensionElement = document.getElementById("browser_extension");
+ if (!extensionElement) return false;
+ return extensionElement.className.includes("isDownloaded");
+ };
+
+ _handleExtensionDownloadLink = () => {
+ const testUserAgent = (regex) => regex.test(window.navigator.userAgent);
+
+ const isFirefox = testUserAgent(/firefox/i);
+ const firefoxLink = Environment.EXTENSION_FIREFOX;
+ if (isFirefox && firefoxLink) return window.open(firefoxLink, "_blank");
+
+ const isSafari = testUserAgent(/safari/i);
+ const safariLink = Environment.EXTENSION_SAFARI;
+ if (isSafari && safariLink) return window.open(safariLink, "_blank");
+
+ window.open(Environment.EXTENSION_CHROME, "_blank");
+ };
+
_handleAction = (props) => {
this.props.onTogglePopup();
this.props.onAction(props);
@@ -141,153 +155,176 @@ export class ApplicationUserControlsPopup extends React.Component {
};
render() {
- if (this.props.popup === "profile") {
- const topSection = (
-
-
-
+ if (this.props.popup !== "profile") return null;
-
-
- 
+
);
}
@@ -55,7 +48,6 @@ function UploadedAvatar({ avatarCss, ...props }) {
style={{
...props.style,
backgroundImage: `url('${props.url}')`,
- cursor: "pointer",
}}
>
{props.visible ? props.popover : null}
@@ -64,7 +56,7 @@ function UploadedAvatar({ avatarCss, ...props }) {
);
}
-export default function ProfilePhoto({ size, ...props }) {
+export default function ProfilePhoto({ size, style, ...props }) {
// NOTE(amine): will calculate only when the size prop changes
const memoizedSizeProp = useMemoCompare(size, isEqual);
const STYLES_SIZE = React.useMemo(() => {
@@ -78,9 +70,9 @@ export default function ProfilePhoto({ size, ...props }) {
return (
<>
{props.user.data.photo ? (
-
+
this.setState({ index })}
/>
- {
- this.props.onAction({
- type: "SIDEBAR",
- value: "SIDEBAR_ADD_FILE_TO_BUCKET",
- });
- }}
- style={{ whiteSpace: "nowrap", marginRight: 24 }}
- >
- Upload data
-
- }
- />
- {
- let viewer = this.props.viewer;
- const res = Utilities.getPublicAndPrivateFiles({ viewer });
- return { ...viewer, library: res.publicFiles };
- };
-
render() {
let user = this.props.data;
if (!user) {
- {this.props.viewer.data.name || `@${this.props.viewer.username}`}
-
-
- {`${
- this.props.viewer.library.length
- } File${this.props.viewer.library.length === 1 ? "" : "s"}`}
- {`${this.props.viewer.slates.length} Collection${
- this.props.viewer.slates.length === 1 ? "" : "s"
- }`}
-
+ const username = this.props.viewer.data.name || `@${this.props.viewer.username}`;
+ const objectsLength = this.props.viewer.library.length;
+ const { stats } = this.props.viewer;
+
+ const topSection = (
+
+
+
- );
+
+ );
- const navigation = [
- [
- {
- text: (
+ const ExtensionButton = (
+ + {username} +
+
+
+ {objectsLength} {Strings.pluralize("Object", objectsLength)}
+
+
+ {Strings.bytesToSize(stats.bytes, 0)} of {Strings.bytesToSize(stats.maximumBytes, 0)}{" "}
+ Stored
+
+
+
+ Install Slate browser extension
+
+
+ );
+
+ const navigation = [
+ [
+ {
+ text: (
+
Profile
- ),
- },
- {
- text: (
+
+ ),
+ },
+ {
+ text: (
+
Directory
- ),
- },
- ],
- [
- {
- text: (
+
+ ),
+ },
+ ],
+ [
+ {
+ text: (
+
Filecoin
- ),
- },
- {
- text: (
+
+ ),
+ },
+ {
+ text: (
+
Storage deal
- ),
- },
- {
- text: (
+
+ ),
+ },
+ {
+ text: (
+
API
- ),
- },
- ],
- [
- {
- text: (
+
+ ),
+ },
+ ],
+ [
+ {
+ text: (
+
Settings
- ),
+
+ ),
+ },
+ {
+ text: Sign out
,
+ onClick: (e) => {
+ this._handleSignOut(e);
},
- ],
- [
- // {
- // text: (
- //
- this.props.onTogglePopup()}
- >
-
-
-
- this.props.onTogglePopup()}
- >
-
-
-
- );
- }
- return null;
+ return (
+ <>
+
+ this.props.onTogglePopup()}
+ >
+
+
+
+ this.props.onTogglePopup()}
+ >
+
+
+
+ );
}
}
@@ -296,14 +333,14 @@ export class ApplicationUserControls extends React.Component {
let tooltip =
-
);
}
diff --git a/components/core/ProfilePhoto.js b/components/core/ProfilePhoto.js
index 805dbab1..20ddb4a5 100644
--- a/components/core/ProfilePhoto.js
+++ b/components/core/ProfilePhoto.js
@@ -34,14 +34,7 @@ function BoringAvatar({ avatarCss, ...props }) {
let avatarUrl = `https://source.boringavatars.com/marble/${props.size}/${props.userId}?square&colors=${colors}`;
return (
this.props.onTogglePopup("profile")}
style={{ position: "relative", cursor: "pointer" }}
>
-
+
+export const ScenePage = ({ css, ...props }) => (
+
);
diff --git a/components/core/SearchModal.js b/components/core/SearchModal.js
index 599f43d0..6c98654a 100644
--- a/components/core/SearchModal.js
+++ b/components/core/SearchModal.js
@@ -477,8 +477,8 @@ export class SearchModal extends React.Component {
this._handleHide();
};
- _handleShow = async () => {
- this.setState({ modal: true });
+ _handleShow = async (e) => {
+ this.setState({ modal: true, inputValue: e.detail.initialValue });
await this.fillLocalDirectory();
this.setState({ loading: false });
if (!this.initialized) {
diff --git a/components/system/components/PopoverNavigation.js b/components/system/components/PopoverNavigation.js
index 3bb0a6ce..8ed5d024 100644
--- a/components/system/components/PopoverNavigation.js
+++ b/components/system/components/PopoverNavigation.js
@@ -1,8 +1,8 @@
import * as React from "react";
import * as Constants from "~/common/constants";
-import * as Styles from "~/common/styles";
import { css } from "@emotion/react";
+import { P2 } from "~/components/system/components/Typography";
const STYLES_POPOVER = css`
z-index: ${Constants.zindex.tooltip};
@@ -19,8 +19,8 @@ const STYLES_POPOVER = css`
border: 1px solid ${Constants.semantic.borderGrayLight};
`;
-const STYLES_POPOVER_SECTION = css`
- border-bottom: 1px solid ${Constants.semantic.borderGrayLight};
+const STYLES_POPOVER_SECTION = (theme) => css`
+ border-bottom: 1px solid ${theme.semantic.borderGrayLight};
padding-bottom: 6px;
margin-bottom: 6px;
@@ -44,33 +44,42 @@ const STYLES_POPOVER_ITEM = css`
}
`;
-export class PopoverNavigation extends React.Component {
- render() {
- return (
-
+
+ {/** NOTE(amine): used to communicate with the extension via classNames.
+ * e.g. if the extension is installed on the user's browser, it will add 'isDownloaded' to className*/}
+
+
+ {props.children}
{
- e.stopPropagation();
- e.preventDefault();
- }}
- >
- {this.props.topSection ? this.props.topSection : null}
- {this.props.navigation.map((section, i) => (
-
- );
- }
+export function PopoverNavigation({
+ containerCss,
+ sectionCss,
+ sectionItemCss,
+ css,
+ topSection = null,
+ navigation,
+ itemStyle,
+ ...props
+}) {
+ return (
+
- {section.map((each, j) => (
-
- ))}
-
-
- ))}
- {each.text}
- {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ {...props}
+ >
+ {topSection}
+ {navigation.map((section, i) => (
+
+ );
}
diff --git a/components/utility/Show.js b/components/utility/Show.js
new file mode 100644
index 00000000..bcb70305
--- /dev/null
+++ b/components/utility/Show.js
@@ -0,0 +1 @@
+export const Show = ({ children, when, fallback = null }) => (when ? children : fallback);
diff --git a/components/utility/Switch.js b/components/utility/Switch.js
new file mode 100644
index 00000000..a22c8844
--- /dev/null
+++ b/components/utility/Switch.js
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export const Match = React.memo(({ children /** when */ }) => {
+ return children;
+});
+// NOTE(amine): displayName is used to assert that direct children of Switch are the Match components
+Match.displayName = "$";
+
+export const Switch = React.memo(({ children, fallback = null }) => {
+ if (Array.isArray(children)) {
+ for (let element of children) {
+ if (element.type.displayName !== "$")
+ console.error("Switch component requires Match component as its children");
+
+ if (element.props.when) return element;
+ }
+
+ return fallback;
+ }
+
+ if (children?.props?.when) return children;
+
+ return fallback;
+});
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 00000000..7638d279
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,25 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+ static async getInitialProps(ctx) {
+ const initialProps = await Document.getInitialProps(ctx);
+ return { ...initialProps };
+ }
+
+ render() {
+ return (
+
+
+ {section.map((each, j) => (
+
+ ))}
+
+
+ {each.text}
+
+
+ ))}
+
-
{files.length ? (
-
- this.setState({ keyboardTooltip: false })}
- >
- this.setState({ keyboardTooltip: true })}
- >
-
-
-
- ) : null}
-
-
- - Keyboard shortcuts -
-
-
- shift + click
-- select a range of items between two selections -
-
-
- shift + drag
-- select items by draging over them -
-
-
- alt + drag
-- deselect items by draging over them -
-
-
-
-
-
- {this.state.filterTooltip ? (
- {
- this.setState({ filterTooltip: false });
- }}
- >
-
- ) : null}
-
-
-
-
-
-
- this._handleFiletypeFilter("image")}
- boxStyle={{ height: 20, width: 20 }}
- >
- Image
-
-
-
- this._handleFiletypeFilter("audio")}
- boxStyle={{ height: 20, width: 20 }}
- >
- Audio
-
-
-
- this._handleFiletypeFilter("video")}
- boxStyle={{ height: 20, width: 20 }}
- >
- Video
-
-
-
- this._handleFiletypeFilter("epub")}
- boxStyle={{ height: 20, width: 20 }}
- >
- Epub
-
-
-
- this._handleFiletypeFilter("pdf")}
- boxStyle={{ height: 20, width: 20 }}
- >
- Pdf
-
-
-
-
- this._handlePrivacyFilter("ALL")}
- >
- All
-
- this._handlePrivacyFilter("PRIVATE")}
- >
- Private
-
- this._handlePrivacyFilter("PUBLIC")}
- >
- Public
-
-