josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

⏩ Rebased from master

Browse Source
This commit is contained in:
Alicia Sykes
2021-10-10 15:05:08 +01:00
parent 877cfdaee3 1f80d99840
commit eae8dc476c
14 changed files with 190 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/LinkItems/Collapsable.vue
View File

@@ -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;

177
src/components/MinimalView/MinimalSearch.vue
View File

@@ -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>

76
src/components/Settings/SearchBar.vue
View File

@@ -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>