urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-01 06:35:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3613 from urbit/mp/leap/indigo-react

Browse Source 
leap: use indigo-react icons
This commit is contained in:
matildepark 2020-09-28 21:30:45 -04:00 committed by GitHub
commit 429c694e7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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
applications.push(
result('Groups', '/~groups', 'groups', null)
result('Groups', '/~groups', 'Groups', null)
);
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) {
// graphicStyle is only necessary for pngs
//
//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';
const iconFill = (this.state.hovered || (selected === link)) ? 'white' : 'black';
const sigilFill = (this.state.hovered || (selected === link)) ? '#3a8ff7' : '#ffffff';
let graphic = <div />;
if (defaultApps.includes(icon.toLowerCase()) || icon.toLowerCase() === 'links') {
graphic =
<img className="mr2 v-mid dib" height="16"
width="16" src={`/~landscape/img/${icon.toLowerCase()}.png`}
style={graphicStyle}
/>;
icon = (icon === 'Dojo') ? 'ChevronEast' : icon;
icon = (icon === 'Link') ? 'Links' : icon;
graphic = <Icon display="inline-block" verticalAlign="middle" icon={icon} mr='2' size='16px' color='transparent' stroke={iconFill} />;
} 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') {
graphic = <Sigil color={sigilFill} classes='dib v-mid mr2' ship={window.ship} size={16} />;
} else {
graphic = <Icon verticalAlign="middle" mr='2' size="16px" fill={iconFill} />;
graphic = <Icon verticalAlign="middle" mr='2' size="16px" color={iconFill} />;
}
return graphic;
@ -78,68 +55,40 @@ export class OmniboxResult extends Component {
const graphic = this.getIcon(icon, dark, selected, link);
return (
<Row
py='2'
px='2'
display='flex'
flexDirection='row'
style={{ cursor: 'pointer' }}
onMouseEnter={() => this.setHover(true)}
onMouseLeave={() => this.setHover(false)}
backgroundColor={
this.state.hovered || selected === link ? 'blue' : 'white'
}
onClick={navigate}
width="100%"
ref={this.result}
<Row
py='2'
px='2'
cursor='pointer'
onMouseEnter={() => this.setHover(true)}
onMouseLeave={() => this.setHover(false)}
backgroundColor={
this.state.hovered || selected === link ? 'blue' : 'white'
}
onClick={navigate}
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 ? (
<>
{graphic}
<Text
display="inline-block"
verticalAlign="middle"
color='white'
maxWidth="60%"
style={{ flexShrink: 0 }}
mr='1'>
{text}
</Text>
<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>
{text}
</Text>
<Text pr='2'
display="inline-block"
verticalAlign="middle"
color={this.state.hovered || selected === link ? 'white' : 'black'}
width='100%'
textAlign='right'
>
{subtext}
</Text>
</Row>
);
}
}