Skip to content

Commit

Permalink
Added final touches to user confirmation dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliverschwendener
oliverschwendener committed Dec 4, 2018
1 parent 8c0cbf4 commit 4e19eff
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 34 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ To open the settings press `Ctrl+i` or search for `Ueli settings`.
* `executionArgument` String - Represents the execution argument for the shortcut.
* `name` String - Represents the displayed name for the shortcut.
* `icon` String - (Optional) Represents the svg icon for the shortcut. If no icon is set default icon is used.
* `showConfirmationDialog` Boolean - If a confirmation dialog should pop up when trying to execute "dangerous stuff" like operating system shutdown etc.
* `showSearchResultNumber` Boolean - If the search result number should be shown on the GUI.
* `showTrayIcon` Boolean - If the icon should appear in the system tray.
* `smoothScrolling` Boolean - If page scrolling for search results should be smooth or instant.
Expand Down
25 changes: 18 additions & 7 deletions main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,18 @@
#{{ searchResult.index }}
</div>
<div class="search-result-confirmation-dialog" :id="'search-result-confirmation-dialog-' + searchResult.id">
<svg class="search-result-confirmation-dialog-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" version="1.1">
<g id="surface1">
<path class="outside" d="M 21.199219 44.800781 L 3.199219 26.800781 C 1.601563 25.199219 1.601563 22.699219 3.199219 21.101563 L 21.199219 3.101563 C 22.800781 1.5 25.300781 1.5 26.898438 3.101563 L 44.898438 21.101563 C 46.5 22.699219 46.5 25.199219 44.898438 26.800781 L 26.898438 44.800781 C 25.300781 46.398438 22.699219 46.398438 21.199219 44.800781 Z "></path>
<path class="inside" d="M 21.601563 32.699219 C 21.601563 32.398438 21.699219 32.101563 21.800781 31.800781 C 21.898438 31.5 22.101563 31.300781 22.300781 31.101563 C 22.5 30.898438 22.800781 30.699219 23.101563 30.601563 C 23.398438 30.5 23.699219 30.398438 24.101563 30.398438 C 24.5 30.398438 24.800781 30.5 25.101563 30.601563 C 25.398438 30.699219 25.699219 30.898438 25.898438 31.101563 C 26.101563 31.300781 26.300781 31.5 26.398438 31.800781 C 26.5 32.101563 26.601563 32.398438 26.601563 32.699219 C 26.601563 33 26.5 33.300781 26.398438 33.601563 C 26.300781 33.898438 26.101563 34.101563 25.898438 34.300781 C 25.699219 34.5 25.398438 34.699219 25.101563 34.800781 C 24.800781 34.898438 24.5 35 24.101563 35 C 23.699219 35 23.398438 34.898438 23.101563 34.800781 C 22.800781 34.699219 22.601563 34.5 22.300781 34.300781 C 22.101563 34.101563 21.898438 33.898438 21.800781 33.601563 C 21.699219 33.300781 21.601563 33.101563 21.601563 32.699219 Z M 25.800781 28.101563 L 22.199219 28.101563 L 21.699219 13 L 26.300781 13 Z "></path>
</g>
</svg>
Proceed ? <span class="search-result-confirmation-dialog-badge">ENTER</span> / <span class="search-result-confirmation-dialog-badge">ESC</span>
<div class="search-result-confirmation-dialog-message-container">
<div class="search-result-confirmation-dialog-message">Proceed with <span class="search-result-confirmation-dialog-badge">Enter</span></div>
<div class="search-result-confirmation-dialog-message">Cancel with <span class="search-result-confirmation-dialog-badge">Esc</span></div>
</div>
<div class="search-result-confirmation-dialog-icon-container">
<svg class="search-result-confirmation-dialog-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" version="1.1">
<g id="surface1">
<path class="outside" d="M 21.199219 44.800781 L 3.199219 26.800781 C 1.601563 25.199219 1.601563 22.699219 3.199219 21.101563 L 21.199219 3.101563 C 22.800781 1.5 25.300781 1.5 26.898438 3.101563 L 44.898438 21.101563 C 46.5 22.699219 46.5 25.199219 44.898438 26.800781 L 26.898438 44.800781 C 25.300781 46.398438 22.699219 46.398438 21.199219 44.800781 Z "></path>
<path class="inside" d="M 21.601563 32.699219 C 21.601563 32.398438 21.699219 32.101563 21.800781 31.800781 C 21.898438 31.5 22.101563 31.300781 22.300781 31.101563 C 22.5 30.898438 22.800781 30.699219 23.101563 30.601563 C 23.398438 30.5 23.699219 30.398438 24.101563 30.398438 C 24.5 30.398438 24.800781 30.5 25.101563 30.601563 C 25.398438 30.699219 25.699219 30.898438 25.898438 31.101563 C 26.101563 31.300781 26.300781 31.5 26.398438 31.800781 C 26.5 32.101563 26.601563 32.398438 26.601563 32.699219 C 26.601563 33 26.5 33.300781 26.398438 33.601563 C 26.300781 33.898438 26.101563 34.101563 25.898438 34.300781 C 25.699219 34.5 25.398438 34.699219 25.101563 34.800781 C 24.800781 34.898438 24.5 35 24.101563 35 C 23.699219 35 23.398438 34.898438 23.101563 34.800781 C 22.800781 34.699219 22.601563 34.5 22.300781 34.300781 C 22.101563 34.101563 21.898438 33.898438 21.800781 33.601563 C 21.699219 33.300781 21.601563 33.101563 21.601563 32.699219 Z M 25.800781 28.101563 L 22.199219 28.101563 L 21.699219 13 L 26.300781 13 Z "></path>
</g>
</svg>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -537,6 +542,12 @@ <h1 class="setting-section-title">User Settings</h1>
</table>
</div>
</div>
<div class="setting-group">
<div class="setting-title">Show confirmation dialog (when executing dangerous stuff)</div>
<div class="setting">
<input type="checkbox" v-model="config.showConfirmationDialog" v-on:change="updateUserConfig">
</div>
</div>
<div class="setting-group">
<div class="setting-title">Show search result number</div>
<div class="setting">
Expand Down
30 changes: 17 additions & 13 deletions src/ts/renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,15 +428,7 @@ function handleEnterPress(): void {
const activeItem = getActiveItem();

if (activeItem !== undefined) {
if (activeItem.needsUserConfirmationBeforeExecution) {
if (userConfirmationDialogIsVisible()) {
execute(activeItem.executionArgument, vue.userInput);
} else {
askUserForConfirmation(activeItem);
}
} else {
execute(activeItem.executionArgument, vue.userInput);
}
execute(activeItem, vue.userInput);
}
}

Expand Down Expand Up @@ -467,7 +459,7 @@ function getAllUserConfirmationDialogs(): HTMLElement[] {
return result;
}

function askUserForConfirmation(activeItem: SearchResultItemViewModel): void {
function showUserConfirmationDialog(activeItem: SearchResultItemViewModel): void {
const confirmationDialog = document.getElementById(`search-result-confirmation-dialog-${activeItem.id}`) as HTMLElement;

if (confirmationDialog !== undefined && confirmationDialog !== null) {
Expand Down Expand Up @@ -501,12 +493,24 @@ function getActiveItem(): SearchResultItemViewModel | undefined {
}
}

function execute(executionArgument: string, userInput: string): void {
function execute(searchResultItem: SearchResultItemViewModel, userInput: string): void {
const handleExecution = (s: SearchResultItemViewModel): void => {
ipcRenderer.send(IpcChannels.execute, s.executionArgument);
};

if (userInput !== undefined && userInput.length > 0) {
userInputHistoryManager.addItem(userInput);
}

ipcRenderer.send(IpcChannels.execute, executionArgument);
if (searchResultItem.needsUserConfirmationBeforeExecution && config.showConfirmationDialog) {
if (userConfirmationDialogIsVisible()) {
handleExecution(searchResultItem);
} else {
showUserConfirmationDialog(searchResultItem);
}
} else {
handleExecution(searchResultItem);
}
}

function resetUserInput(): void {
Expand Down Expand Up @@ -559,6 +563,6 @@ function handleExecuteIndex(index: number): void {
});

if (searchResultItem !== undefined) {
execute(searchResultItem.executionArgument, vue.userInput);
execute(searchResultItem, vue.userInput);
}
}
15 changes: 9 additions & 6 deletions src/ts/search-plugins/ueli-commands-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,17 @@ export class UeliCommandsSearchPlugin implements SearchPlugin {
{
executionArgument: IpcChannels.ueliReload,
name: "Reload ueli",
needsUserConfirmationBeforeExecution: false,
} as UeliCommand,
{
executionArgument: IpcChannels.ueliExit,
name: "Exit ueli",
needsUserConfirmationBeforeExecution: true,
} as UeliCommand,
{
executionArgument: IpcChannels.showSettingsFromMain,
name: "Ueli settings",
needsUserConfirmationBeforeExecution: false,
},
];

Expand All @@ -30,15 +33,15 @@ export class UeliCommandsSearchPlugin implements SearchPlugin {
}

public getAllItems(): SearchResultItem[] {
return this.ueliCommands.map((i): SearchResultItem => {
return this.ueliCommands.map((ueliCommand): SearchResultItem => {
return {
description: "Ueli command",
executionArgument: i.executionArgument,
executionArgument: ueliCommand.executionArgument,
icon: this.icon,
name: i.name,
searchable: [i.name],
tags: [],
} as SearchResultItem;
name: ueliCommand.name,
needsUserConfirmationBeforeExecution: ueliCommand.needsUserConfirmationBeforeExecution,
searchable: [ueliCommand.name],
};
});
}
}
1 change: 1 addition & 0 deletions src/ts/ueli-command.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
class UeliCommand {
public executionArgument: string;
public needsUserConfirmationBeforeExecution: boolean;
public name: string;
}
1 change: 1 addition & 0 deletions src/ts/user-config/default-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export class DefaultUserConfigManager {
searchResultHeight: 60,
searchResultNameFontSize: 20,
shortcuts: [],
showConfirmationDialog: true,
showSearchResultNumber: true,
showTrayIcon: true,
smoothScrolling: false,
Expand Down
1 change: 1 addition & 0 deletions src/ts/user-config/user-config-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export interface UserConfigOptions {
searchResultHeight: number;
searchResultNameFontSize: number;
shortcuts: Shortcut[];
showConfirmationDialog: boolean;
showSearchResultNumber: boolean;
showTrayIcon: boolean;
smoothScrolling: boolean;
Expand Down
39 changes: 31 additions & 8 deletions styles/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
--search-result-name-active-font-weight: 600;
--search-result-description-font-weight: 200;
--settings-font-size: 0.85rem;
--confirmation-dialog-font-size: 0.85rem;
--confirmation-dialog-icon-size: 25px;
}

body {
Expand Down Expand Up @@ -134,33 +136,54 @@ div.search-result-confirmation-dialog {
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
padding: 0 15px;
padding: 0 var(--side-padding);
overflow: hidden;
background-color: var(--accent-color);
transform: translateX(100%);
transition: all var(--transition-speed) ease-in-out;
font-family: var(--font-family-mono);
font-size: 0.9rem;
font-family: var(--font-family);
font-size: var(--confirmation-dialog-font-size);
}

div.search-result-confirmation-dialog.visible {
transform: translateX(0);
}

div.search-result-confirmation-dialog-icon-container {
display: flex;
justify-content: center;
align-items: center;
}

div.search-result-confirmation-dialog-message-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 5px 0;
}

div.search-result-confirmation-dialog-message {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
color: var(--accent-text-color);
}

span.search-result-confirmation-dialog-badge {
background-color: var(--background-color);
color: var(--text-color);
margin: 0 5px;
padding: 2px 5px;
border-radius: 5px;
text-transform: capitalize;
}
svg.search-result-confirmation-dialog-icon {
width: 25px;
height: 25px;
margin: 0 8px;
width: var(--confirmation-dialog-icon-size);
height: var(--confirmation-dialog-icon-size);
margin: 0 calc(var(--side-padding) / 2) 0 var(--side-padding);
}

svg.search-result-confirmation-dialog-icon .inside {
Expand Down

0 comments on commit 4e19eff

Please sign in to comment.