diff --git a/common/search.js b/common/search.js
new file mode 100644
index 00000000..03fb8aac
--- /dev/null
+++ b/common/search.js
@@ -0,0 +1,45 @@
+createUserSearchResult = (user) => {
+ return {
+ id: user.id,
+ type: "user",
+ name: user.data.name,
+ username: user.username,
+ url: user.data.photo,
+ };
+};
+
+createSlateSearchResult = (slate) => {
+ let files;
+ if (slate.data.objects.length > 3) {
+ files = slate.data.objects.slice(0, 3);
+ } else {
+ files = slate.data.objects;
+ }
+ return {
+ id: slate.id,
+ type: "slate",
+ name: slate.slatename,
+ username: slate.user.username,
+ url: files.map((file) => {
+ return {
+ type: file.type
+ ? file.type.includes("image")
+ ? "image"
+ : "file"
+ : "file",
+ name: file.name,
+ url: file.url,
+ };
+ }),
+ };
+};
+
+createFileSearchResult = (file) => {
+ return {
+ id: file.id,
+ type: file.type ? (file.type.includes("image") ? "image" : "file") : "file",
+ name: file.name,
+ username: file.user.username,
+ url: file.url,
+ };
+};
diff --git a/common/svg.js b/common/svg.js
index 7caacfbb..f578ccc5 100644
--- a/common/svg.js
+++ b/common/svg.js
@@ -537,3 +537,91 @@ export const Logo = (props) => (
/>
);
+
+export const Slate2 = (props) => (
+
+);
+
+export const Folder2 = (props) => (
+
+);
+
+export const Tool2 = (props) => (
+
+);
+
+export const Wallet2 = (props) => (
+
+);
diff --git a/components/core/Application.js b/components/core/Application.js
index 3e361194..804396f0 100644
--- a/components/core/Application.js
+++ b/components/core/Application.js
@@ -484,6 +484,7 @@ export default class ApplicationPage extends React.Component {
pageTitle={current.target.pageTitle}
currentIndex={this.state.currentIndex}
history={this.state.history}
+ onAction={this._handleAction}
onBack={this._handleBack}
onForward={this._handleForward}
/>
@@ -543,6 +544,7 @@ export default class ApplicationPage extends React.Component {
{scene}
+
);
diff --git a/components/core/ApplicationHeader.js b/components/core/ApplicationHeader.js
index c88976e8..f2c8c423 100644
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@@ -3,6 +3,8 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
+import { SpotlightSearch } from "~/components/system/modules/SpotlightSearch";
+import { dispatchCustomEvent } from "~/common/custom-events";
const STYLES_ICON_ELEMENT = css`
height: 40px;
@@ -67,6 +69,13 @@ const STYLES_RIGHT = css`
`;
export default class ApplicationHeader extends React.Component {
+ _handleCreateSearch = (e) => {
+ dispatchCustomEvent({
+ name: "create-modal",
+ detail: { modal: },
+ });
+ };
+
render() {
const isBackDisabled =
this.props.currentIndex === 0 || this.props.history.length < 2;
@@ -107,7 +116,7 @@ export default class ApplicationHeader extends React.Component {
window.alert("TODO: SPOTLIGHT SEARCH")}
+ onClick={this._handleCreateSearch}
>
diff --git a/components/system/components/GlobalModal.js b/components/system/components/GlobalModal.js
index 50ed594f..a585de07 100644
--- a/components/system/components/GlobalModal.js
+++ b/components/system/components/GlobalModal.js
@@ -17,27 +17,19 @@ const STYLES_BACKGROUND = css`
display: flex;
align-items: center;
justify-content: center;
- background-color: rgba(45, 41, 38, 0.6);
+ background-color: rgba(0, 0, 0, 0.2);
z-index: ${Constants.zindex.modal};
`;
const STYLES_MODAL = css`
+ box-sizing: border-box;
position: relative;
- padding: 8px;
- max-width: 568px;
+ max-width: 680px;
width: 100%;
- border-radius: 4px;
+ border-radius: 16px;
background-color: ${Constants.system.white};
`;
-const STYLES_CLOSE_ICON = css`
- height: 24px;
- position: absolute;
- top: 8px;
- right: 8px;
- cursor: pointer;
-`;
-
export class GlobalModal extends React.Component {
state = {
modal: null,
@@ -92,11 +84,6 @@ export class GlobalModal extends React.Component {
isDataMenuCaptured={true}
>
-
{this.state.modal}
diff --git a/components/system/components/InputMenu.js b/components/system/components/InputMenu.js
new file mode 100644
index 00000000..aa9c5940
--- /dev/null
+++ b/components/system/components/InputMenu.js
@@ -0,0 +1,201 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as SVG from "~/common/svg";
+
+import { css } from "@emotion/react";
+
+const STYLES_DROPDOWN_CONTAINER = css`
+ box-sizing: border-box;
+ z-index: ${Constants.zindex.modal};
+`;
+
+const STYLES_DROPDOWN = css`
+ box-sizing: border-box;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ background-color: ${Constants.system.white};
+ overflow: hidden;
+ width: 100%;
+`;
+
+const STYLES_DROPDOWN_ITEM = css`
+ box-sizing: border-box;
+ padding: 8px;
+ font-size: 0.8em;
+ border-radius: 16px;
+ border: 1px solid ${Constants.system.white};
+ :hover {
+ border-color: ${Constants.system.border} !important;
+ }
+`;
+
+const STYLES_INPUT = css`
+ font-family: ${Constants.font.text};
+ -webkit-appearance: none;
+ width: 100%;
+ height: 40px;
+ background: ${Constants.system.foreground};
+ color: ${Constants.system.black};
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+ justify-content: flex-start;
+ outline: 0;
+ border: 0;
+ box-sizing: border-box;
+ transition: 200ms ease all;
+ padding: 0 24px 0 48px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ border-radius: 12px;
+ margin-bottom: 16px;
+ ::placeholder {
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: ${Constants.system.black};
+ opacity: 1; /* Firefox */
+ }
+ :-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: ${Constants.system.black};
+ }
+ ::-ms-input-placeholder {
+ /* Microsoft Edge */
+ color: ${Constants.system.black};
+ }
+`;
+
+export class InputMenu extends React.Component {
+ _input;
+ _optionRoot;
+
+ state = {
+ selectedIndex: -1,
+ };
+
+ componentDidMount = () => {
+ window.addEventListener("keydown", this._handleDocumentKeydown);
+ this._input.focus();
+ };
+
+ componentWillUnmount = () => {
+ window.removeEventListener("keydown", this._handleDocumentKeydown);
+ };
+
+ _handleInputChange = (e) => {
+ if (this.state.selectedIndex !== -1) {
+ this.setState({ selectedIndex: -1 });
+ }
+ this.props.onChange({
+ target: {
+ value: null,
+ name: this.props.name,
+ },
+ });
+ this.props.onInputChange(e);
+ };
+
+ _handleSelect = (index) => {
+ let e = {
+ target: {
+ value: this.props.options[index].value,
+ name: this.props.name,
+ },
+ };
+ this.props.onChange(e);
+ };
+
+ _handleDocumentKeydown = (e) => {
+ if (e.keyCode === 27) {
+ this._handleDelete();
+ e.preventDefault();
+ } else if (e.keyCode === 9) {
+ this._handleDelete();
+ } else if (e.keyCode === 40) {
+ if (this.state.selectedIndex < this.props.options.length - 1) {
+ let listElem = this._optionRoot.children[this.state.selectedIndex + 1];
+ let elemRect = listElem.getBoundingClientRect();
+ let rootRect = this._optionRoot.getBoundingClientRect();
+ if (elemRect.bottom > rootRect.bottom) {
+ this._optionRoot.scrollTop =
+ listElem.offsetTop +
+ listElem.offsetHeight -
+ this._optionRoot.offsetHeight;
+ }
+ this.setState({ selectedIndex: this.state.selectedIndex + 1 });
+ }
+ e.preventDefault();
+ } else if (e.keyCode === 38) {
+ if (this.state.selectedIndex > 0) {
+ let listElem = this._optionRoot.children[this.state.selectedIndex - 1];
+ let elemRect = listElem.getBoundingClientRect();
+ let rootRect = this._optionRoot.getBoundingClientRect();
+ if (elemRect.top < rootRect.top) {
+ this._optionRoot.scrollTop = listElem.offsetTop;
+ }
+ this.setState({ selectedIndex: this.state.selectedIndex - 1 });
+ }
+ e.preventDefault();
+ } else if (e.keyCode === 13) {
+ if (
+ this.props.options.length > this.state.selectedIndex &&
+ this.state.selectedIndex !== -1
+ ) {
+ this._handleSelect(this.state.selectedIndex);
+ }
+ e.preventDefault();
+ }
+ };
+
+ render() {
+ return (
+
+
+ {
+ this._input = c;
+ }}
+ />
+
+
+ {
+
{
+ this._optionRoot = c;
+ }}
+ css={STYLES_DROPDOWN}
+ style={this.props.style}
+ >
+ {(this.props.options && this.props.options.length
+ ? this.props.options
+ : this.props.defaultOptions
+ ).map((each, i) => (
+
+ {each.name}
+
+ ))}
+
+ }
+
{
+ onAction({ type: "NAVIGATE", value: 17, data: item });
+ }}
+ >
+
+
+
+ {item.url.map((each) =>
+ each.type === "image" ? (
+
+ ) : (
+
{each.name}
+ )
+ )}
+
+
+
{
+ onAction({ type: "NAVIGATE", value: 15, data: { url: item.url } });
+ }}
+ >
+
+
+
{
+ return {
+ name: (
+ this._handleAction(option.action)}
+ >
+
+ {option.icon}
+
+
{option.name}
+
+
+
+ );
+ }
+}
diff --git a/package.json b/package.json
index 0587d74a..1467cc14 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
"isomorphic-fetch": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"knex": "^0.20.10",
+ "minisearch": "^2.5.1",
"moment": "^2.27.0",
"next": "^9.4.4",
"pg": "^8.3.0",