ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-15 10:02:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

leap: use indigo-react icons

Browse Source
This commit is contained in:
Matilde Park 2020-09-28 21:05:09 -04:00
parent 1e86da80fb
commit 7498923df2
2 changed files with 41 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,7 +68,7 @@ const appIndex = function (apps) {
}); });
// add groups separately // add groups separately
applications.push( applications.push(
result('Groups', '/~groups', 'groups', null) result('Groups', '/~groups', 'Groups', null)
); );
return applications; return applications;
}; };

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

@ -26,43 +26,20 @@ export class OmniboxResult extends Component {
} }
getIcon(icon, dark, selected, link) { getIcon(icon, dark, selected, link) {
// graphicStyle is only necessary for pngs const iconFill = (this.state.hovered || (selected === link)) ? 'white' : 'black';
// const sigilFill = (this.state.hovered || (selected === link)) ? '#3a8ff7' : '#ffffff';
//TODO can be removed after indigo-react 1.2
//which includes icons for apps
let graphicStyle = {};
if (icon.toLowerCase() !== 'dojo') {
graphicStyle = (!dark && this.state.hovered) ||
selected === link ||
(dark && !(this.state.hovered || selected === link))
? { filter: 'invert(1)' }
: { filter: 'invert(0)' };
} else {
graphicStyle =
(!dark && this.state.hovered) ||
selected === link ||
(dark && !(this.state.hovered || selected === link))
? { filter: 'invert(0)' }
: { filter: 'invert(1)' };
}
const iconFill = this.state.hovered || selected === link ? 'white' : 'black';
const sigilFill = this.state.hovered || selected === link ? '#3a8ff7' : '#ffffff';
let graphic = <div />; let graphic = <div />;
if (defaultApps.includes(icon.toLowerCase()) || icon.toLowerCase() === 'links') { if (defaultApps.includes(icon.toLowerCase()) || icon.toLowerCase() === 'links') {
graphic = icon = (icon === 'Dojo') ? 'ChevronEast' : icon;
<img className="mr2 v-mid dib" height="16" icon = (icon === 'Link') ? 'Links' : icon;
width="16" src={`/~landscape/img/${icon.toLowerCase()}.png`} graphic = <Icon display="inline-block" verticalAlign="middle" icon={icon} mr='2' size='16px' color={iconFill} />;
style={graphicStyle}
/>;
} else if (icon === 'logout') { } else if (icon === 'logout') {
graphic = <Icon display="inline-block" verticalAlign="middle" icon='ArrowWest' mr='2' size='16px' fill={iconFill} />; graphic = <Icon display="inline-block" verticalAlign="middle" icon='ArrowWest' mr='2' size='16px' color={iconFill} />;
} else if (icon === 'profile') { } else if (icon === 'profile') {
graphic = <Sigil color={sigilFill} classes='dib v-mid mr2' ship={window.ship} size={16} />; graphic = <Sigil color={sigilFill} classes='dib v-mid mr2' ship={window.ship} size={16} />;
} else { } else {
graphic = <Icon verticalAlign="middle" mr='2' size="16px" fill={iconFill} />; graphic = <Icon verticalAlign="middle" mr='2' size="16px" color={iconFill} />;
} }
return graphic; return graphic;
@ -78,68 +55,40 @@ export class OmniboxResult extends Component {
const graphic = this.getIcon(icon, dark, selected, link); const graphic = this.getIcon(icon, dark, selected, link);
return ( return (
<Row <Row
py='2' py='2'
px='2' px='2'
display='flex' cursor='pointer'
flexDirection='row' onMouseEnter={() => this.setHover(true)}
style={{ cursor: 'pointer' }} onMouseLeave={() => this.setHover(false)}
onMouseEnter={() => this.setHover(true)} backgroundColor={
onMouseLeave={() => this.setHover(false)} this.state.hovered || selected === link ? 'blue' : 'white'
backgroundColor={ }
this.state.hovered || selected === link ? 'blue' : 'white' onClick={navigate}
} width="100%"
onClick={navigate} ref={this.result}
width="100%" >
ref={this.result} {graphic}
<Text
display="inline-block"
verticalAlign="middle"
color={this.state.hovered || selected === link ? 'white' : 'black'}
maxWidth="60%"
style={{ flexShrink: 0 }}
mr='1'
> >
{this.state.hovered || selected === link ? ( {text}
<> </Text>
{graphic} <Text pr='2'
<Text display="inline-block"
display="inline-block" verticalAlign="middle"
verticalAlign="middle" color={this.state.hovered || selected === link ? 'white' : 'black'}
color='white' width='100%'
maxWidth="60%" textAlign='right'
style={{ flexShrink: 0 }} >
mr='1'> {subtext}
{text} </Text>
</Text> </Row>
<Text pr='2'
display="inline-block"
verticalAlign="middle"
color='white'
width='100%'
textAlign='right'
>
{subtext}
</Text>
</>
) : (
<>
{graphic}
<Text
mr='1'
display="inline-block"
verticalAlign="middle"
maxWidth="60%"
style={{ flexShrink: 0 }}
>
{text}
</Text>
<Text
pr='2'
display="inline-block"
verticalAlign="middle"
gray
width='100%'
textAlign='right'
>
{subtext}
</Text>
</>
)}
</Row>
); );
} }
} }