Skip to content

Commit

Permalink
fix: favorite icon and overlapping app title (argoproj#9130)
Browse files Browse the repository at this point in the history 
Signed-off-by: saumeya <[email protected]>
  • Loading branch information
@saumeya
saumeya authored May 15, 2022
1 parent 416245f commit 727c59f
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 27 deletions.
7 changes: 4 additions & 3 deletions ui/src/app/applications/components/application-pod-view/pod-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,14 +145,15 @@ $num-stats: 2;
background-color: $argo-color-gray-6;
}
}
&__star-icon {
&__new-pod-icon {
background: none;
color: #ffce25;
color: #FFCE25;
display: block;
left: 20px;
margin: 0px;
position: absolute;
top: -5px;
top: -4px;
font-size: 10px;
}
&__stat-tooltip {
text-align: left;
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/applications/components/application-pod-view/pod-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export class PodView extends React.Component<PodViewProps> {
key={pod.metadata.name}>
<div style={{position: 'relative'}}>
{isYoungerThanXMinutes(pod, 30) && (
<i className='fas fa-star pod-view__node__pod pod-view__node__pod__star-icon' />
<i className='fas fa-circle pod-view__node__pod pod-view__node__pod__new-pod-icon' />
)}
<div className={`pod-view__node__pod pod-view__node__pod--${pod.health.toLowerCase()}`}>
<PodHealthIcon state={{status: pod.health, message: ''}} />
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/applications/components/applications-list/applications-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,11 @@ export const ApplicationsTable = (props: {
services.viewPreferences.updatePreferences({appList: {...pref.appList, favoritesAppList: favList}});
}}>
<i
className={'fas fa-star'}
className={favList?.includes(app.metadata.name) ? 'fas fa-star' : 'far fa-star'}
style={{
cursor: 'pointer',
marginRight: '7px',
color: favList?.includes(app.metadata.name) ? '#1FBDD0' : 'grey'
color: favList?.includes(app.metadata.name) ? '#FFCE25' : '#8fa4b1'
}}
/>
</button>
Expand Down
64 changes: 43 additions & 21 deletions ui/src/app/applications/components/applications-list/applications-tiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,29 +117,51 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
}`}>
<div className='row' onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {view: pref.appDetails.view}, {event: e})}>
<div className={`columns small-12 applications-list__info qe-applications-list-${app.metadata.name}`}>
<div className='applications-list__external-link'>
<ApplicationURLs urls={AppUtils.getExternalUrls(app.metadata.annotations, app.status.summary.externalURLs)} />
<Tooltip content={favList?.includes(app.metadata.name) ? 'Remove Favorite' : 'Add Favorite'}>
<button
className='large-text-height'
onClick={e => {
e.stopPropagation();
favList?.includes(app.metadata.name)
? favList.splice(favList.indexOf(app.metadata.name), 1)
: favList.push(app.metadata.name);
services.viewPreferences.updatePreferences({appList: {...pref.appList, favoritesAppList: favList}});
}}>
<i
className={'fas fa-star fa-lg'}
style={{cursor: 'pointer', marginLeft: '7px', color: favList?.includes(app.metadata.name) ? '#1FBDD0' : 'grey'}}
/>
</button>
</Tooltip>
</div>
<div className='row'>
<div className='columns small-12'>
<div
className={
AppUtils.getExternalUrls(app.metadata.annotations, app.status.summary.externalURLs)?.length > 0
? 'columns small-10'
: 'columns small-11'
}>
<i className={'icon argo-icon-' + (app.spec.source.chart != null ? 'helm' : 'git')} />
<span className='applications-list__title'>{app.metadata.name}</span>
{app.metadata.name.length > 30 ? (
<Tooltip content={app.metadata.name}>
<span className='applications-list__title'>{app.metadata.name}</span>
</Tooltip>
) : (
<span className='applications-list__title'>{app.metadata.name}</span>
)}
</div>
<div
className={
AppUtils.getExternalUrls(app.metadata.annotations, app.status.summary.externalURLs)?.length > 0
? 'columns small-2'
: 'columns small-1'
}>
<div className='applications-list__external-link'>
<ApplicationURLs urls={AppUtils.getExternalUrls(app.metadata.annotations, app.status.summary.externalURLs)} />
<Tooltip content={favList?.includes(app.metadata.name) ? 'Remove Favorite' : 'Add Favorite'}>
<button
className='large-text-height'
onClick={e => {
e.stopPropagation();
favList?.includes(app.metadata.name)
? favList.splice(favList.indexOf(app.metadata.name), 1)
: favList.push(app.metadata.name);
services.viewPreferences.updatePreferences({appList: {...pref.appList, favoritesAppList: favList}});
}}>
<i
className={favList?.includes(app.metadata.name) ? 'fas fa-star fa-lg' : 'far fa-star fa-lg'}
style={{
cursor: 'pointer',
marginLeft: '7px',
color: favList?.includes(app.metadata.name) ? '#FFCE25' : '#8fa4b1'
}}
/>
</button>
</Tooltip>
</div>
</div>
</div>
<div className='row'>
Expand Down

0 comments on commit 727c59f

Please sign in to comment.