mirror of https://github.com/lissy93/dashy
⏩ Rebased from master
This commit is contained in:
Alicia Sykes
commit
eae8dc476c
|
|
@ -1,26 +1,27 @@
|
|||
Alicia <liss-bot@d0h.co> - 1 commits
|
||||
Alicia <o> - 1 commits
|
||||
Begin <support@begin.com> - 1 commits
|
||||
DeepSource <o> - 1 commits
|
||||
Devin <uh> - 1 commits
|
||||
FormatToday <616099456@qq.com> - 1 commits
|
||||
Ryan <urne> - 1 commits
|
||||
deepsource-io[bot] <deepsource-io[bot]@users.noreply.github.com> - 1 commits
|
||||
liss-bot <87835202+liss-bot@users.noreply.github.com> - 1 commits
|
||||
Dan <ilber> - 2 commits
|
||||
ᗪєνιη <υн> - 2 commits
|
||||
Alicia <o> - 3 commits
|
||||
UrekD <urek.denis@gmail.com> - 3 commits
|
||||
Niklas <abe> - 4 commits
|
||||
repo-visualizer <repo-visualizer@users.noreply.github.com> - 5 commits
|
||||
snyk-bot <snyk-bot@snyk.io> - 5 commits
|
||||
Erik <roo> - 6 commits
|
||||
liss-bot <liss-bot@users.noreply.github.com> - 6 commits
|
||||
repo-visualizer <repo-visualizer@users.noreply.github.com> - 6 commits
|
||||
snyk-bot <snyk-bot@snyk.io> - 8 commits
|
||||
Alicia <yke> - 10 commits
|
||||
snyk-bot <snyk-bot@users.noreply.github.com> - 10 commits
|
||||
snyk-bot <snyk-bot@users.noreply.github.com> - 13 commits
|
||||
EVOTk <45015615+EVOTk@users.noreply.github.com> - 14 commits
|
||||
github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> - 16 commits
|
||||
liss-bot <liss-bot@d0h.co> - 16 commits
|
||||
liss-bot <liss-bot@d0h.co> - 17 commits
|
||||
Alicia <yke> - 25 commits
|
||||
Lissy93 <gh@d0h.co> - 64 commits
|
||||
Lissy93 <Lissy93@users.noreply.github.com> - 169 commits
|
||||
Alicia <yke> - 236 commits
|
||||
Alicia <yke> - 932 commits
|
||||
Lissy93 <gh@d0h.co> - 67 commits
|
||||
Lissy93 <Lissy93@users.noreply.github.com> - 172 commits
|
||||
Alicia <yke> - 242 commits
|
||||
Alicia <yke> - 954 commits
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
🐛 Bug: ✅ Fixed
|
||||
🦄 Feature Request: ✅ Implemented
|
||||
🤷♂️ Question: ✅ Answered
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# When a PR is merged, any associated issues will have a Done label applied
|
||||
# The label will depend on the issue type, see: ./github/close-label.yml
|
||||
name: 💡 Apply Done Label
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, merged, closed]
|
||||
jobs:
|
||||
triage:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: logerfo/close-label@0.0.4
|
||||
with:
|
||||
repo-token: ${{ secrets.BOT_GITHUB_TOKEN }}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# Detect and label pull requests that have merge conflicts
|
||||
name: 🏗️ Check Merge Conflicts
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
jobs:
|
||||
check-conflicts:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: mschilde/auto-label-merge-conflicts@master
|
||||
with:
|
||||
CONFLICT_LABEL_NAME: "🚫 Merge Conflicts"
|
||||
GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
|
||||
MAX_RETRIES: 5
|
||||
WAIT_MS: 5000
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# Applies the 'Top Issue' label to tickets with most user reactions
|
||||
name: 🎯 Label Top Issues
|
||||
on:
|
||||
workflow_dispatch:
|
||||
schedule:
|
||||
- cron: '0 1 * * *' # Run at 01:00 each day
|
||||
jobs:
|
||||
labelTopIssues:
|
||||
name: Label Top Issues
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Label Issues
|
||||
uses: adamzolyak/top-issues-action@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
|
||||
TOP_NUMBER_OF_ISSUES: 10
|
||||
TOP_LABEL_NAME: "👍 Top 10 Issue!"
|
||||
TOP_LABEL_COLOR: FBCA04
|
||||
|
|
@ -539,13 +539,6 @@ Huge thanks to the sponsors helping to support Dashy's development!
|
|||
<br />
|
||||
<sub><b>Robert Ernst</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/swcarlosrj">
|
||||
<img src="https://avatars.githubusercontent.com/u/9881700?u=c92e4a0ccc0bff241e50582bce914b179b6d89b6&v=4" width="80;" alt="swcarlosrj"/>
|
||||
<br />
|
||||
<sub><b>Carlos Rufo</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
</table>
|
||||
<!-- readme: sponsors -end -->
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 67 KiB |
|
|
@ -10,13 +10,6 @@
|
|||
<br />
|
||||
<sub><b>Robert Ernst</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/swcarlosrj">
|
||||
<img src="https://avatars.githubusercontent.com/u/9881700?u=c92e4a0ccc0bff241e50582bce914b179b6d89b6&v=4" width="80;" alt="swcarlosrj"/>
|
||||
<br />
|
||||
<sub><b>Carlos Rufo</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
</table>
|
||||
<!-- readme: sponsors -end -->
|
||||
|
|
@ -53,21 +46,28 @@
|
|||
<sub><b>Snyk Bot</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/liss-bot">
|
||||
<img src="https://avatars.githubusercontent.com/u/87835202?v=4" width="80;" alt="liss-bot"/>
|
||||
<br />
|
||||
<sub><b>Alicia Bot</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/UrekD">
|
||||
<img src="https://avatars.githubusercontent.com/u/38784343?v=4" width="80;" alt="UrekD"/>
|
||||
<br />
|
||||
<sub><b>UrekD</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
</td></tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/onedr0p">
|
||||
<img src="https://avatars.githubusercontent.com/u/213795?v=4" width="80;" alt="onedr0p"/>
|
||||
<br />
|
||||
<sub><b>ᗪєνιη ᗷυнʟ</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
<tr>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/daentech">
|
||||
<img src="https://avatars.githubusercontent.com/u/358678?v=4" width="80;" alt="daentech"/>
|
||||
|
|
@ -75,13 +75,6 @@
|
|||
<sub><b>Dan Gilbert</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/liss-bot">
|
||||
<img src="https://avatars.githubusercontent.com/u/87835202?v=4" width="80;" alt="liss-bot"/>
|
||||
<br />
|
||||
<sub><b>Alicia Bot</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/BeginCI">
|
||||
<img src="https://avatars.githubusercontent.com/u/57495754?v=4" width="80;" alt="BeginCI"/>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<template>
|
||||
<div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
|
||||
<div
|
||||
:class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
|
||||
:style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
|
||||
>
|
||||
<input
|
||||
:id="`collapsible-${uniqueKey}`"
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
:checked="getCollapseState()"
|
||||
@change="collapseChanged"
|
||||
tabIndex="-1"
|
||||
:id="`collapsible-${uniqueKey}`"
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
:checked="getCollapseState()"
|
||||
@change="collapseChanged"
|
||||
tabIndex="-1"
|
||||
>
|
||||
<label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="-1">
|
||||
<Icon v-if="icon" :icon="icon" size="small" :url="title" class="section-icon" />
|
||||
|
|
@ -30,14 +31,14 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
|
|||
export default {
|
||||
name: 'CollapsableContainer',
|
||||
props: {
|
||||
uniqueKey: String,
|
||||
title: String,
|
||||
icon: String,
|
||||
collapsed: Boolean,
|
||||
cols: Number,
|
||||
rows: Number,
|
||||
color: String,
|
||||
customStyles: String,
|
||||
uniqueKey: String, // Generated unique ID
|
||||
title: String, // The section title
|
||||
icon: String, // An optional section icon
|
||||
collapsed: Boolean, // Optional override collapse state
|
||||
cols: Number, // Set section horizontal col span / width
|
||||
rows: Number, // Set section vertical row span / height
|
||||
color: String, // Optional color override
|
||||
customStyles: String, // Optional custom stylings
|
||||
},
|
||||
components: {
|
||||
Icon,
|
||||
|
|
@ -45,7 +46,7 @@ export default {
|
|||
methods: {
|
||||
/* Check that row & column span is valid, and not over the max */
|
||||
checkSpanNum(span, classPrefix) {
|
||||
const maxSpan = 4;
|
||||
const maxSpan = 5;
|
||||
let numSpan = /^\d*$/.test(span) ? parseInt(span, 10) : 1;
|
||||
numSpan = (numSpan > maxSpan) ? maxSpan : numSpan;
|
||||
return `${classPrefix}-${numSpan}`;
|
||||
|
|
@ -68,7 +69,9 @@ export default {
|
|||
}
|
||||
return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
|
||||
},
|
||||
/* If not specified by user, get last state from local storage */
|
||||
getCollapseState() {
|
||||
if (this.collapsed !== undefined) return !this.collapsed;
|
||||
const collapseStateObject = this.initialiseStorage();
|
||||
let collapseState = !this.collapsed;
|
||||
if (collapseStateObject[this.uniqueKey] !== undefined) {
|
||||
|
|
@ -76,6 +79,7 @@ export default {
|
|||
}
|
||||
return collapseState;
|
||||
},
|
||||
/* When section collapsed, update local storage, to remember for next time */
|
||||
setCollapseState(id, newState) {
|
||||
// Get the current localstorage collapse state object
|
||||
const collapseState = JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
|
||||
|
|
@ -84,9 +88,12 @@ export default {
|
|||
// Stringify, and set the new object into local storage
|
||||
localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
|
||||
},
|
||||
/* Called when collapse state changes, trigger local storage update if needed */
|
||||
collapseChanged(whatChanged) {
|
||||
this.initialiseStorage();
|
||||
this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
|
||||
if (this.collapseState === undefined) { // Only run, if user hasn't manually set prop
|
||||
this.initialiseStorage();
|
||||
this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -110,22 +117,26 @@ export default {
|
|||
&.row-2 { grid-row-start: span 2; }
|
||||
&.row-3 { grid-row-start: span 3; }
|
||||
&.row-4 { grid-row-start: span 4; }
|
||||
&.row-5 { grid-row-start: span 5; }
|
||||
|
||||
grid-column-start: span 1;
|
||||
@include tablet-up {
|
||||
&.col-2 { grid-column-start: span 2; }
|
||||
&.col-3 { grid-column-start: span 2; }
|
||||
&.col-4 { grid-column-start: span 2; }
|
||||
&.col-5 { grid-column-start: span 2; }
|
||||
}
|
||||
@include laptop-up {
|
||||
&.col-2 { grid-column-start: span 2; }
|
||||
&.col-3 { grid-column-start: span 3; }
|
||||
&.col-4 { grid-column-start: span 3; }
|
||||
&.col-5 { grid-column-start: span 3; }
|
||||
}
|
||||
@include monitor-up {
|
||||
&.col-2 { grid-column-start: span 2; }
|
||||
&.col-3 { grid-column-start: span 3; }
|
||||
&.col-4 { grid-column-start: span 4; }
|
||||
&.col-5 { grid-column-start: span 5; }
|
||||
}
|
||||
|
||||
.wrap-collabsible {
|
||||
|
|
@ -144,7 +155,7 @@ export default {
|
|||
border-radius: var(--curve-factor);
|
||||
transition: all 0.25s ease-out;
|
||||
text-align: left;
|
||||
color: var(--item-group-heading-text-color); //var(--item-group-background);
|
||||
color: var(--item-group-heading-text-color);
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,48 +1,26 @@
|
|||
<template>
|
||||
<form @submit.prevent="searchSubmitted">
|
||||
<div class="minimal-search-wrap">
|
||||
<input
|
||||
id="filter-tiles"
|
||||
v-model="input"
|
||||
ref="filter"
|
||||
class="minimal-search"
|
||||
:placeholder="$t('search.search-placeholder')"
|
||||
v-on:input="userIsTypingSomething"
|
||||
@keydown.esc="clearFilterInput"
|
||||
/>
|
||||
<p v-if="webSearchEnabled && input.length > 0" class="web-search-note">
|
||||
{{ $t('search.enter-to-search-web') }}
|
||||
</p>
|
||||
</div>
|
||||
<i v-if="input.length > 0"
|
||||
class="clear-search"
|
||||
:title="$t('search.clear-search-tooltip')"
|
||||
@click="clearFilterInput">x</i>
|
||||
</form>
|
||||
<SearchBar
|
||||
ref="MinimalSearchBar"
|
||||
@user-is-searchin="userIsTypingSomething"
|
||||
:active="true"
|
||||
:minimalSearch="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import router from '@/router';
|
||||
import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
|
||||
import ErrorHandler from '@/utils/ErrorHandler';
|
||||
import { getCustomKeyShortcuts } from '@/utils/ConfigHelpers';
|
||||
import {
|
||||
searchEngineUrls,
|
||||
defaultSearchEngine,
|
||||
defaultSearchOpeningMethod,
|
||||
} from '@/utils/defaults';
|
||||
import SearchBar from '@/components/Settings/SearchBar';
|
||||
|
||||
export default {
|
||||
name: 'MinimalSearch',
|
||||
components: {
|
||||
SearchBar,
|
||||
},
|
||||
props: {
|
||||
active: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '', // Users current search term
|
||||
akn: new ArrowKeyNavigation(), // Class that manages arrow key naviagtion
|
||||
getCustomKeyShortcuts,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -58,80 +36,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
/* Emmits users's search term up to parent */
|
||||
userIsTypingSomething() {
|
||||
this.$emit('user-is-searchin', this.input);
|
||||
},
|
||||
/* Resets everything to initial state, when user is finished */
|
||||
clearFilterInput() {
|
||||
this.input = ''; // Clear input model
|
||||
this.userIsTypingSomething(); // Emmit new empty value
|
||||
document.activeElement.blur(); // Remove focus
|
||||
this.akn.resetIndex(); // Reset current element index
|
||||
},
|
||||
/* Launches a given app when hotkey pressed */
|
||||
handleHotKey(key) {
|
||||
const usersHotKeys = this.getCustomKeyShortcuts();
|
||||
usersHotKeys.forEach((hotkey) => {
|
||||
if (hotkey.hotkey === parseInt(key, 10)) {
|
||||
if (hotkey.url) window.open(hotkey.url, '_blank');
|
||||
}
|
||||
});
|
||||
},
|
||||
/* Filter results as user types */
|
||||
startFiltering(event) {
|
||||
const currentElem = document.activeElement.id;
|
||||
const { key, keyCode } = event;
|
||||
/* If a modal is open, then do nothing */
|
||||
if (!this.active) return;
|
||||
if (/^[a-zA-Z]$/.test(key) && currentElem !== 'filter-tiles') {
|
||||
/* Letter key pressed - start searching */
|
||||
if (this.$refs.filter) this.$refs.filter.focus();
|
||||
this.userIsTypingSomething();
|
||||
} else if (/^[0-9]$/.test(key)) {
|
||||
/* Number key pressed, check if user has a custom binding */
|
||||
this.handleHotKey(key);
|
||||
} else if (keyCode >= 37 && keyCode <= 40) {
|
||||
/* Arrow key pressed - start navigation */
|
||||
this.akn.arrowNavigation(keyCode);
|
||||
} else if (keyCode === 27) {
|
||||
/* Esc key pressed - reset form */
|
||||
this.clearFilterInput();
|
||||
}
|
||||
},
|
||||
/* Open web search results in users desired method */
|
||||
launchWebSearch(url, method) {
|
||||
switch (method) {
|
||||
case 'newtab':
|
||||
window.open(url, '_blank');
|
||||
break;
|
||||
case 'sametab':
|
||||
window.open(url, '_self');
|
||||
break;
|
||||
case 'workspace':
|
||||
router.push({ name: 'workspace', query: { url } });
|
||||
break;
|
||||
default:
|
||||
ErrorHandler(`Unknown opening method: ${method}`);
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
},
|
||||
/* If web search enabled, then launch search results when enter is pressed */
|
||||
searchSubmitted() {
|
||||
// Get search preferences from appConfig
|
||||
const searchPrefs = this.appConfig.webSearch || {};
|
||||
if (this.webSearchEnabled) { // Only proceed if user hasn't disabled web search
|
||||
const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
|
||||
// Get search engine, and make URL
|
||||
const searchEngine = searchPrefs.searchEngine || defaultSearchEngine;
|
||||
let searchUrl = searchEngineUrls[searchEngine];
|
||||
if (!searchUrl) ErrorHandler(`Search engine not found - ${searchEngine}`);
|
||||
if (searchEngine === 'custom' && searchPrefs.customSearchEngine) {
|
||||
searchUrl = searchPrefs.customSearchEngine;
|
||||
}
|
||||
// Append users encoded query onto search URL, and launch
|
||||
searchUrl += encodeURIComponent(this.input);
|
||||
this.launchWebSearch(searchUrl, openingMethod);
|
||||
}
|
||||
userIsTypingSomething(searchValue) {
|
||||
this.input = searchValue;
|
||||
this.$emit('user-is-searchin', searchValue);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -142,61 +49,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@import '@/styles/media-queries.scss';
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.minimal-search-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
p.web-search-note {
|
||||
margin: 0;
|
||||
color: var(--minimal-view-search-color);
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
font-size: 1.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 1rem auto;
|
||||
outline: none;
|
||||
border: 1px solid var(--outline-color);
|
||||
border-radius: var(--curve-factor);
|
||||
background: var(--minimal-view-search-background);
|
||||
color: var(--minimal-view-search-color);
|
||||
&:focus {
|
||||
border-color: var(--minimal-view-search-color);
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
}
|
||||
.clear-search {
|
||||
color: var(--minimal-view-search-color);
|
||||
padding: 0.15rem 0.5rem 0.2rem 0.5rem;
|
||||
font-style: normal;
|
||||
font-size: 1rem;
|
||||
opacity: var(--dimming-factor);
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
right: 0.5rem;
|
||||
top: 1rem;
|
||||
border: 1px solid var(--minimal-view-search-color);
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--minimal-view-search-background);
|
||||
background: var(--minimal-view-search-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<form @submit.prevent="searchSubmitted">
|
||||
<form @submit.prevent="searchSubmitted" :class="minimalSearch ? 'minimal' : 'normal'">
|
||||
<label for="filter-tiles">{{ $t('search.search-label') }}</label>
|
||||
<div class="search-wrap">
|
||||
<input
|
||||
|
|
@ -35,6 +35,9 @@ import {
|
|||
|
||||
export default {
|
||||
name: 'FilterTile',
|
||||
props: {
|
||||
minimalSearch: Boolean, // If true, then keep it simple
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '', // Users current search term
|
||||
|
|
@ -128,7 +131,10 @@ export default {
|
|||
const searchEngine = searchPrefs.searchEngine || defaultSearchEngine;
|
||||
// Use either search bang, or preffered search engine
|
||||
const desiredSearchEngine = searchBang || searchEngine;
|
||||
let searchUrl = findUrlForSearchEngine(desiredSearchEngine, searchEngineUrls);
|
||||
const isCustomSearch = (searchPrefs.searchEngine === 'custom' && searchPrefs.customSearchEngine);
|
||||
let searchUrl = isCustomSearch
|
||||
? searchPrefs.customSearchEngine
|
||||
: findUrlForSearchEngine(desiredSearchEngine, searchEngineUrls);
|
||||
if (searchUrl) { // Append search query to URL, and launch
|
||||
searchUrl += encodeURIComponent(stripBangs(this.input, bangList));
|
||||
this.launchWebSearch(searchUrl, openingMethod);
|
||||
|
|
@ -144,13 +150,7 @@ export default {
|
|||
|
||||
@import '@/styles/media-queries.scss';
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
|
||||
}
|
||||
form {
|
||||
form.normal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0 0 var(--curve-factor-navbar) 0;
|
||||
|
|
@ -191,7 +191,6 @@ export default {
|
|||
}
|
||||
}
|
||||
.clear-search {
|
||||
//position: absolute;
|
||||
color: var(--settings-text-color);
|
||||
padding: 0 0.3rem 0.1rem 0.3rem;
|
||||
font-style: normal;
|
||||
|
|
@ -202,7 +201,6 @@ export default {
|
|||
right: 0.5rem;
|
||||
top: 1rem;
|
||||
border: 1px solid var(--settings-text-color);
|
||||
font-size: 1rem;
|
||||
margin: 0.25rem;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
@ -212,13 +210,13 @@ export default {
|
|||
}
|
||||
|
||||
@include tablet {
|
||||
form {
|
||||
form.normal {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@include phone {
|
||||
form {
|
||||
form.nomral {
|
||||
flex: 1;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
|
@ -226,4 +224,56 @@ export default {
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
form.minimal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
label { display: none; }
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
p.web-search-note {
|
||||
margin: 0;
|
||||
color: var(--minimal-view-search-color);
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
font-size: 1.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 1rem auto;
|
||||
outline: none;
|
||||
border: 1px solid var(--outline-color);
|
||||
border-radius: var(--curve-factor);
|
||||
background: var(--minimal-view-search-background);
|
||||
color: var(--minimal-view-search-color);
|
||||
&:focus {
|
||||
border-color: var(--minimal-view-search-color);
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
}
|
||||
.clear-search {
|
||||
color: var(--minimal-view-search-color);
|
||||
padding: 0.15rem 0.5rem 0.2rem 0.5rem;
|
||||
font-style: normal;
|
||||
font-size: 1rem;
|
||||
opacity: var(--dimming-factor);
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
right: 0.5rem;
|
||||
top: 1rem;
|
||||
border: 1px solid var(--minimal-view-search-color);
|
||||
margin: 0.5rem;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--minimal-view-search-background);
|
||||
background: var(--minimal-view-search-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const getDomainFromUrl = (url) => {
|
|||
*/
|
||||
const filterHelper = (compareStr, searchStr) => {
|
||||
if (!compareStr) return false;
|
||||
const process = (input) => input.toString().toLowerCase().replace(/[^\w\s]/gi, '');
|
||||
const process = (input) => input && input.toString().toLowerCase().replace(/[^\w\s]/gi, '');
|
||||
return process(compareStr).includes(process(searchStr));
|
||||
};
|
||||
|
||||
|
|
@ -37,6 +37,7 @@ const filterHelper = (compareStr, searchStr) => {
|
|||
* @returns A filtered array of tiles
|
||||
*/
|
||||
export const searchTiles = (allTiles, searchTerm) => {
|
||||
if (!searchTerm) return allTiles; // If no search term, then return all
|
||||
if (!allTiles) return []; // If no data, then skip
|
||||
return allTiles.filter((tile) => {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
<router-link to="/">
|
||||
<h1>{{ pageInfo.title }}</h1>
|
||||
</router-link>
|
||||
<MinimalSearch @user-is-searchin="(s) => { this.searchValue = s; }" :active="!modalOpen" />
|
||||
<MinimalSearch
|
||||
@user-is-searchin="(s) => { this.searchValue = s; }"
|
||||
:active="!modalOpen" ref="filterComp" />
|
||||
</div>
|
||||
<div v-if="checkTheresData(sections)"
|
||||
:class="`item-group-container ${!tabbedView ? 'showing-all' : ''}`">
|
||||
|
|
@ -87,7 +89,7 @@ export default {
|
|||
watch: {
|
||||
/* When the theme changes, then call the update method */
|
||||
searchValue() {
|
||||
this.tabbedView = !(this.searchValue.length > 0);
|
||||
this.tabbedView = !this.searchValue || this.searchValue.length === 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -116,7 +118,7 @@ export default {
|
|||
},
|
||||
/* Clears input field, once a searched item is opened */
|
||||
finishedSearching() {
|
||||
this.$refs.filterComp.clearFilterInput();
|
||||
this.$refs.filterComp.clearMinFilterInput();
|
||||
},
|
||||
/* Extracts the site name from domain, used for the searching functionality */
|
||||
getDomainFromUrl(url) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue