Skip to content

Commit

Permalink
Added smoothScrolling to appearance options and removed css transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
oliverschwendener committed Feb 7, 2019
1 parent fbc625c commit 8299dfc
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 7 deletions.
3 changes: 2 additions & 1 deletion src/common/config/appearance-options.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
export interface AppearanceOptions {
windowWidth: number;
maxSearchResultsPerPage: number;
searchResultHeight: number;
showDescriptionOnAllSearchResults: boolean;
smoothScrolling: boolean;
userInputHeight: number;
windowWidth: number;
}
1 change: 1 addition & 0 deletions src/common/config/default-appearance-options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const defaultAppearanceOptions: AppearanceOptions = {
maxSearchResultsPerPage: 8,
searchResultHeight: 50,
showDescriptionOnAllSearchResults: true,
smoothScrolling: true,
userInputHeight: 60,
windowWidth: 600,
};
24 changes: 24 additions & 0 deletions src/renderer/appearance-settings-component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ export const appearanceSettingsComponent = Vue.extend({
config.appearanceOptions.showDescriptionOnAllSearchResults = defaultAppearanceOptions.showDescriptionOnAllSearchResults;
this.updateConfig();
},
resetUseSmoothScrolling() {
const config: UserConfigOptions = this.config;
config.appearanceOptions.smoothScrolling = defaultAppearanceOptions.smoothScrolling;
this.updateConfig();
},
resetUserInputHeight() {
const config: UserConfigOptions = this.config;
config.appearanceOptions.userInputHeight = defaultAppearanceOptions.userInputHeight;
Expand Down Expand Up @@ -127,6 +132,25 @@ export const appearanceSettingsComponent = Vue.extend({
</div>
</div>
</div>
<div class="settings__setting-content-item box">
<div class="settings__setting-content-item-title">
<div class="title is-5">Smooth scrolling</div>
<button class="button" @click="resetUseSmoothScrolling">
<span class="icon"><i class="fas fa-undo-alt"></i></span>
</button>
</div>
<div class="columns">
<div class="column field has-addons">
<div class="control is-expanded">
<input class="is-checkradio" id="smoothScrollingCheckBox" type="checkbox" name="smoothScrollingCheckBox" v-model="config.appearanceOptions.smoothScrolling" @change="updateConfig">
<label for="smoothScrollingCheckBox"></label>
<div class="field">
<input class="is-checkradio is-block is-success" id="smoothScrollingCheckBox" type="checkbox" name="smoothScrollingCheckBox" checked="checked">
</div>
</div>
</div>
</div>
</div>
<div class="settings__setting-content-item box">
<div class="settings__setting-content-item-title">
<div class="title is-5">User Input Height (in Pixels)</div>
Expand Down
6 changes: 4 additions & 2 deletions src/renderer/search-results-component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@ export const searchResultsComponent = Vue.extend({
this.scrollIntoView(this.searchResults[nextActiveIndex].id);
},
scrollIntoView(index: string) {
const appearanceOptions: AppearanceOptions = this.appearance;
const scrollBehavior = appearanceOptions.smoothScrolling ? "smooth" : "auto";
const userInput = document.getElementById("user-input");
if (userInput !== undefined && userInput) {
const htmlElement = document.getElementById(index);
Expand All @@ -84,13 +86,13 @@ export const searchResultsComponent = Vue.extend({
const elementIsOutOfViewTop = htmlElement.offsetTop - userInput.clientHeight < outputContainer.scrollTop;
if (elementIsOutOfViewBottom) {
const scrollTo = htmlElement.offsetTop - userInput.clientHeight;
outputContainer.scrollTo({ top: scrollTo, behavior: "smooth" });
outputContainer.scrollTo({ top: scrollTo, behavior: scrollBehavior });
} else if (elementIsOutOfViewTop) {
let scrollTo = htmlElement.offsetTop - outputContainer.clientHeight - 20; // I have no idea why 20
if (scrollTo < 0) {
scrollTo = 0;
}
outputContainer.scrollTo({ top: scrollTo, behavior: "smooth" });
outputContainer.scrollTo({ top: scrollTo, behavior: scrollBehavior });
}
}
}
Expand Down
4 changes: 0 additions & 4 deletions styles/app.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
:root {
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--transition-speed: 250ms;

--user-input--font-size: 24px;
--user-input--font-weight: 200;
Expand Down Expand Up @@ -86,7 +85,6 @@ body {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all var(--transition-speed) ease-in-out;
user-select: none;
}

Expand Down Expand Up @@ -128,7 +126,6 @@ body {
height: 100%;
top: 0;
left: 0;
transition: all var(--transition-speed) ease-in-out;
}

.search-results__item-icon-overlay.active {
Expand All @@ -154,7 +151,6 @@ body {

.search-results__item-name {
color: var(--search-results--item-name-text-color);
transition: all var(--transition-speed) ease-in-out;
font-weight: var(--search-results--item-name-font-weight);
padding: var(--search-results--item-name-padding);
}
Expand Down

0 comments on commit 8299dfc

Please sign in to comment.