urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2025-01-02 01:25:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

leap: add contacts searching

Browse Source
This commit is contained in:
Matilde Park 2021-01-26 18:42:54 -05:00
parent 95d2d6eb08
commit d852140403
4 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pkg/interface/src/logic/lib/omnibox.js
View File

@ -1,6 +1,7 @@
import { cite } from '~/logic/lib/util';
const indexes = new Map([
['ships', []],
['commands', []],
['subscriptions', []],
['groups', []],
@ -18,6 +19,14 @@ const result = function(title, link, app, host) {
};
};
const shipIndex = function(contacts) {
const ships = [];
Object.keys(contacts).map((e) => {
return ships.push(result(e, `/~profile/${e}`, 'profile', contacts[e]?.status));
});
return ships;
};
const commandIndex = function (currentGroup) {
// commands are special cased for default suite
const commands = [];
@ -62,7 +71,8 @@ const otherIndex = function() {
return other;
};
export default function index(associations, apps, currentGroup, groups) {
export default function index(contacts, associations, apps, currentGroup, groups) {
indexes.set('ships', shipIndex(contacts));
// all metadata from all apps is indexed
// into subscriptions and landscape
const subscriptions = [];

4
pkg/interface/src/views/App.js
View File

@ -139,9 +139,6 @@ class App extends React.Component {
const doNotDisturb = state.doNotDisturb || false;
const ourContact = this.state.contacts[this.ship] || null;
const showBanner = localStorage.getItem("2020BreachBanner") || "flex";
let banner = null;
return (
<ThemeProvider theme={theme}>
<Helmet>
@ -170,6 +167,7 @@ class App extends React.Component {
associations={state.associations}
apps={state.launch}
api={this.api}
contacts={state.contacts}
notifications={state.notificationsCount}
invites={state.invites}
groups={state.groups}

5
pkg/interface/src/views/components/leap/Omnibox.js
View File

@ -32,7 +32,7 @@ export class Omnibox extends Component {
const { pathname } = this.props.location;
const selectedGroup = pathname.startsWith('/~landscape/ship/') ? '/' + pathname.split('/').slice(2,5).join('/') : null;
this.setState({ index: index(this.props.associations, this.props.apps.tiles, selectedGroup, this.props.groups) });
this.setState({ index: index(this.props.contacts, this.props.associations, this.props.apps.tiles, selectedGroup, this.props.groups) });
}
if (prevProps && (prevProps.apps !== this.props.apps) && (this.state.query === '')) {
@ -56,7 +56,7 @@ export class Omnibox extends Component {
}
getSearchedCategories() {
return ['other', 'commands', 'groups', 'subscriptions', 'apps'];
return ['ships', 'other', 'commands', 'groups', 'subscriptions', 'apps'];
}
control(evt) {
@ -249,6 +249,7 @@ export class Omnibox extends Component {
selected={selected}
invites={props.invites}
notifications={props.notifications}
contacts={props.contacts}
/>
))}
</Box>

22
pkg/interface/src/views/components/leap/OmniboxResult.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Box, Row, Icon, Text } from '@tlon/indigo-react';
import defaultApps from '~/logic/lib/default-apps';
import Sigil from '~/logic/lib/sigil';
import { uxToHex } from '~/logic/lib/util';
export class OmniboxResult extends Component {
constructor(props) {
@ -25,9 +26,8 @@ export class OmniboxResult extends Component {
}
}
getIcon(icon, selected, link, invites, notifications) {
getIcon(icon, selected, link, invites, notifications, text, color) {
const iconFill = (this.state.hovered || (selected === link)) ? 'white' : 'black';
const sigilFill = (this.state.hovered || (selected === link)) ? '#3a8ff7' : '#ffffff';
const bulletFill = (this.state.hovered || (selected === link)) ? 'white' : 'blue';
const inviteCount = [].concat(...Object.values(invites).map(obj => Object.values(obj)));
@ -39,22 +39,23 @@ export class OmniboxResult extends Component {
{
icon = (icon === 'Link') ? 'Collection' :
(icon === 'Terminal') ? 'Dojo' : icon;
graphic = <Icon display="inline-block" verticalAlign="middle" icon={icon} mr='2' size='16px' color={iconFill} />;
graphic = <Icon display="inline-block" verticalAlign="middle" icon={icon} mr='2' size='18px' color={iconFill} />;
} else if (icon === 'inbox') {
graphic = <Box display='flex' verticalAlign='middle' position="relative">
<Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='16px' color={iconFill} />
<Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='18px' color={iconFill} />
{(notifications > 0 || inviteCount.length > 0) && (
<Icon display='inline-block' icon='Bullet' style={{ position: 'absolute', top: -5, left: 5 }} color={bulletFill} />
)}
</Box>;
} else if (icon === 'logout') {
graphic = <Icon display="inline-block" verticalAlign="middle" icon='SignOut' mr='2' size='16px' color={iconFill} />;
graphic = <Icon display="inline-block" verticalAlign="middle" icon='SignOut' mr='2' size='18px' color={iconFill} />;
} else if (icon === 'profile') {
graphic = <Sigil color={sigilFill} classes='dib flex-shrink-0 v-mid mr2' ship={window.ship} size={16} icon padded />;
text = text.startsWith('Profile') ? window.ship : text;
graphic = <Sigil color={color} classes='dib flex-shrink-0 v-mid mr2' ship={text} size={18} icon padded />;
} else if (icon === 'home') {
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Mail' mr='2' size='16px' color={iconFill} />;
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Mail' mr='2' size='18px' color={iconFill} />;
} else if (icon === 'notifications') {
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='16px' color={iconFill} />;
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Inbox' mr='2' size='18px' color={iconFill} />;
} else {
graphic = <Icon display='inline-block' icon='NullIcon' verticalAlign="middle" mr='2' size="16px" color={iconFill} />;
}
@ -67,9 +68,10 @@ export class OmniboxResult extends Component {
}
render() {
const { icon, text, subtext, link, navigate, selected, invites, notifications } = this.props;
const { icon, text, subtext, link, navigate, selected, invites, notifications, contacts } = this.props;
const graphic = this.getIcon(icon, selected, link, invites, notifications);
const color = contacts?.[text] ? `#${uxToHex(contacts[text].color)}` : "#000000";
const graphic = this.getIcon(icon, selected, link, invites, notifications, text, color);
return (
<Row