Skip to content

Commit

Permalink
feat: show result path & refactor result component (#38)
Browse files Browse the repository at this point in the history
  • Loading branch information
ParthJadhav authored Jan 19, 2023
1 parent e7ee512 commit 8d1352d
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 101 deletions.
12 changes: 1 addition & 11 deletions src/routes/App/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,6 @@
appState.settings = false;
};
const searchResultClicked = async (event: any) => {
await invoke('open_command', { path: event.target.id });
const searchBarInput = document.getElementById(
'searchBarInput'
) as HTMLInputElement;
results = [];
searchBarInput.value = '';
await appWindow.hide();
};
const search = async (searchPrompt: string) => {
footerText = 'Loading...';
[results, executionTime, resultType] = await invoke('handle_input', {
Expand Down Expand Up @@ -85,7 +75,7 @@
<!-- svelte-ignore empty-block -->
{#await appWindow.setSize(new LogicalSize(750, 100))}{/await}
<SearchBar on:input={handleInput} />
<SearchResult bind:results {resultType} on:click={searchResultClicked} />
<SearchResult bind:results {resultType} />
<Footer {footerText} />
{/if}
{#if appState.settings}
Expand Down
105 changes: 105 additions & 0 deletions src/routes/App/lib/FileSearchResult.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<script lang="ts">
import { getFileName, getTruncatedFilePath } from '../../../utils/path';
import { getIcon } from '../../../utils/icon';
export let filePath;
export let resultType: number;
</script>

<button on:click class="searchResult" id={filePath}>
<div class="resultContent">
{#await getIcon(getFileName(filePath).replace(/.app$/, ''))}
<span class="icon" />
{:then { icon, fallbackIcon }}
<img
class="icon"
src={icon}
alt=""
on:error={event => {
// @ts-ignore
event.target.src = fallbackIcon;
}}
/>
{/await}
<p class="fileName">
{getFileName(filePath).replace(/.app$/, '')}
</p>
</div>
{#if resultType == 2}
<div class="resultPathDiv">
<p class="resultPathText">
{getTruncatedFilePath(filePath)}
</p>
</div>
{/if}
</button>

<style>
.resultPathDiv {
position: relative;
right: 0%;
}
.resultPathText {
font-family: Helvetica;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
margin: 0;
color: var(--secondary-text-color);
width: 250px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.searchResult {
margin-top: 7px;
margin-left: 12px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 12px;
width: 726px;
height: 43px;
background: transparent;
border: none;
border-radius: 8px;
flex: none;
order: 1;
flex-grow: 0;
}
.resultContent {
display: flex;
flex-direction: row;
align-items: center;
flex: none;
order: 0;
flex-grow: 0;
margin-right: auto;
}
.icon {
display: inline-flex;
width: 24px;
height: 24px;
margin-right: 8px;
}
.fileName {
font-family: Helvetica;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin: 0;
color: var(--primary-text-color);
text-align: left;
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
106 changes: 16 additions & 90 deletions src/routes/App/lib/SearchResult.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
export let results: string[];
export let resultType: number;
import { appDataDir, join, resolveResource } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';
import { appWindow, LogicalSize } from '@tauri-apps/api/window';
import { invoke } from '@tauri-apps/api/tauri';
import { afterUpdate } from 'svelte';
import { FALLBACK_ICON_SYMBOL, icons } from '../../../cache';
import CalculationResult from './CalculationResult.svelte';
import FileSearchResult from './FileSearchResult.svelte';
afterUpdate(async () => {
const height = document.getElementsByClassName('container')[0].clientHeight;
Expand All @@ -19,42 +18,15 @@
}
});
async function getIcon(app_name: string) {
let icon = icons.get(app_name);
let fallbackIcon = icons.get(FALLBACK_ICON_SYMBOL);
if (icon && fallbackIcon) {
return { icon, fallbackIcon };
}
if (!fallbackIcon) {
fallbackIcon = convertFileSrc(
await resolveResource('assets/default.svg')
);
icons.set(FALLBACK_ICON_SYMBOL, fallbackIcon);
}
let iconPath: string;
if (
[
'Migration Assistant',
'System Information',
'Calendar',
'System Settings',
'Photo Booth',
'AirPort Utility',
].includes(app_name)
) {
iconPath = await resolveResource(`assets/appIcons/${app_name}.app.png`);
} else {
const appDataDirPath = await appDataDir();
iconPath = await join(appDataDirPath, `appIcons/${app_name}.app.png`);
}
icon = convertFileSrc(iconPath);
icons.set(app_name, icon);
return { icon, fallbackIcon };
}
const searchResultClicked = async (event: any) => {
await invoke('open_command', { path: event.target.id });
const searchBarInput = document.getElementById(
'searchBarInput'
) as HTMLInputElement;
results = [];
searchBarInput.value = '';
await appWindow.hide();
};
async function handleKeydown(event) {
if (event.keyCode == 38 || event.keyCode == 40) {
Expand Down Expand Up @@ -98,22 +70,11 @@
{#if results.length > 0 && results[0] !== ' '}
{#if resultType !== 3}
{#each results.slice(0, 5) as result}
<button on:click class="searchResult" id={result}>
{#await getIcon(result.split('/').pop().replace(/.app$/, ''))}
<span class="appIcon" />
{:then { icon, fallbackIcon }}
<img
class="appIcon"
src={icon}
alt=""
on:error={event => {
// @ts-ignore
event.target.src = fallbackIcon;
}}
/>
{/await}
<p class="appName">{result.split('/').pop().replace(/.app$/, '')}</p>
</button>
<FileSearchResult
filePath={result}
on:click={searchResultClicked}
{resultType}
/>
{/each}
{:else}
<CalculationResult bind:results />
Expand All @@ -122,44 +83,9 @@
</div>

<style>
.searchResult {
margin-top: 7px;
margin-left: 12px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 12px;
width: 726px;
height: 43px;
background: transparent;
border: none;
border-radius: 8px;
flex: none;
order: 1;
flex-grow: 0;
}
:global(.searchResultFocused) {
background: var(--highlight-overlay) !important;
outline: 0 !important;
border-radius: 8px;
}
.appIcon {
display: inline-flex;
width: 24px;
height: 24px;
margin-right: 8px;
}
.appName {
font-family: Helvetica;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin: 0;
color: var(--primary-text-color);
}
</style>
38 changes: 38 additions & 0 deletions src/utils/icon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { resolveResource, appDataDir, join } from '@tauri-apps/api/path';
import { FALLBACK_ICON_SYMBOL, icons } from '../cache';
import { convertFileSrc } from '@tauri-apps/api/tauri';

export const getIcon = async (app_name: string) => {
let icon = icons.get(app_name);
let fallbackIcon = icons.get(FALLBACK_ICON_SYMBOL);

if (icon && fallbackIcon) {
return { icon, fallbackIcon };
}

if (!fallbackIcon) {
fallbackIcon = convertFileSrc(await resolveResource('assets/default.svg'));
icons.set(FALLBACK_ICON_SYMBOL, fallbackIcon);
}

let iconPath: string;
if (
[
'Migration Assistant',
'System Information',
'Calendar',
'System Settings',
'Photo Booth',
'AirPort Utility',
].includes(app_name)
) {
iconPath = await resolveResource(`assets/appIcons/${app_name}.app.png`);
} else {
const appDataDirPath = await appDataDir();
iconPath = await join(appDataDirPath, `appIcons/${app_name}.app.png`);
}

icon = convertFileSrc(iconPath);
icons.set(app_name, icon);
return { icon, fallbackIcon };
};
13 changes: 13 additions & 0 deletions src/utils/path.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const getFileName = (path: string) => {
return path.split('/').pop();
};

const getTruncatedFilePath = (path: string) => {
const pathArray = path.split('/');
const fileName = pathArray.pop();
const fileDir = pathArray.pop();
const fileParentDir = pathArray.pop();
return `${fileParentDir}/${fileDir}/${fileName}`;
};

export { getFileName, getTruncatedFilePath };

0 comments on commit 8d1352d

Please sign in to comment.