diff --git a/README.md b/README.md index 02d996b..ad0e6fd 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,9 @@ Based on [Cade Scroggins](https://github.com/cadejscroggins)'s [Tilde](https://g Most of the features are carried over from the original source. Few of the added features are: -- Added a "Quick Launch" functionality, which launches all the sites with `quickLaunch` -property set to true upon hitting `!` key. -- Clicking on the clock brings up pre-defined sites. -- Available sites show their icons instead of their corresponding keys. -- Added the option to invert colour theme. You can either edit config or use `invert!` command. -- Other small changes on grids. - +- Added a "Quick Launch" functionality, which launches all the sites with `quickLaunch` property set to `true` upon hitting `!` key. +- Color theme can now be inverted easily by either editing config or using `invert!` command. +- Added an option to show launch keys instead of icons again. Either edit config or type `keys!`. ## Usage @@ -82,8 +78,8 @@ This allows you to invoke Tilde with your native browser search bar. ## Configuration -Open up the [script.js](assets/script.js) file and read through the `CONFIG`! +Open up the [script.js](js/script.js) file and read through the `CONFIG`! ## License -Feel free to [use this and modify it however you like](https://github.com/Ozencb/tilde-enhanced/blob/master/LICENSE). +Feel free to [use this and modify it however you like](https://github.com/Ozencb/tilde-enhanced/blob/master/LICENSE). \ No newline at end of file diff --git a/assets/screenshot.png b/assets/screenshot.png index 2623faf..47df0e6 100644 Binary files a/assets/screenshot.png and b/assets/screenshot.png differ diff --git a/style/style.css b/css/style.css similarity index 98% rename from style/style.css rename to css/style.css index 0c8c68a..2925802 100644 --- a/style/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ :root { /* colors */ - --background: #000000; - --foreground: #FFFFFF; + --background: #0E0E0E; + --foreground: #F1F1F1; /* fonts */ --font-family: 'Open Sans', sans-serif; @@ -215,7 +215,8 @@ body.suggestions .search-suggestions { border-radius: 50%; background: transparent; color: var(--background); - font-size: 0.75rem; + font-size: 0.65rem; + font-weight: 800; line-height: 2rem; text-align: center; } diff --git a/index.html b/index.html index 90e0b22..61d4cf3 100644 --- a/index.html +++ b/index.html @@ -4,22 +4,21 @@ - - + + Home
-
- - + + \ No newline at end of file diff --git a/script/script.js b/js/script.js similarity index 89% rename from script/script.js rename to js/script.js index 3e563ee..ac90f8e 100644 --- a/script/script.js +++ b/js/script.js @@ -1,14 +1,4 @@ -let invertColorCookie; - -if (localStorage.getItem('invertColorCookie') === null){ - invertColorCookie = false; -} - -else { - invertColorCookie = JSON.parse(localStorage.getItem('invertColorCookie')); -} - -const CONFIG = { +let CONFIG = { /** * The category, name, key, url, search path, color, icon, and quicklaunch properties for your commands. * Icons must be added to "icons" folder and their values/names must be updated. @@ -106,7 +96,7 @@ const CONFIG = { { category: 'Fun', name: 'Twitch', - key: 't', + key: 'tw', url: 'https://www.twitch.tv', search: '/directory/game/{}', color: 'linear-gradient(135deg, #6441a5, #4b367c)', @@ -126,9 +116,10 @@ const CONFIG = { { category: 'Other', name: 'Twitter', - key: 'o', + key: 't', url: 'https://twitter.com', - color: 'linear-gradient(135deg, #C0A886, #E2DBC8)', + search: '/search?q={}&src=typed_query', + color: 'linear-gradient(135deg, #1DA1F2, #19608F)', icon: 'twitter', quickLaunch: true, }, @@ -191,7 +182,12 @@ const CONFIG = { /** * Invert color theme */ - invertedColors: invertColorCookie, + invertedColors: false, + + /** + * Show keys instead of icons + */ + showKeys: true, /** * The delimiter between a command key and your search query. For example, @@ -216,6 +212,15 @@ const CONFIG = { twentyFourHourClock: true, }; +// Get invertedColors preference from cookies +CONFIG.invertedColors = localStorage.getItem('invertColorCookie') + ? JSON.parse(localStorage.getItem('invertColorCookie')) + : CONFIG.invertedColors; + +// Get showKeys preference from cookies +CONFIG.showKeys = localStorage.getItem('showKeysCookie') + ? JSON.parse(localStorage.getItem('showKeysCookie')) + : CONFIG.showKeys; const $ = { bodyClassAdd: c => $.el('body').classList.add(c), @@ -354,7 +359,7 @@ class Help { } } - _buildAndAppendLists() { + _buildAndAppendLists(mode) { const lists = document.createElement('ul'); lists.classList.add('categories'); @@ -363,7 +368,7 @@ class Help { 'beforeend', `

  • ${category}

    - +
    • ` ); }); @@ -371,16 +376,22 @@ class Help { this._el.appendChild(lists); } - _buildListCommands(currentCategory) { - this._invertValue = this._invertColors ? 1: 0; + _buildListCommands(currentCategory, mode) { + let invertValue = this._invertColors ? 1: 0; - return this._commands + const bgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--foreground') + : getComputedStyle(document.documentElement).getPropertyValue('--background'); + + const fgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--background') + : getComputedStyle(document.documentElement).getPropertyValue('--foreground'); + + const commandListWithIcons = this._commands .map(({ category, name, key, url, icon }) => { if (category === currentCategory) { return `
  • - + ${name}
    • @@ -388,6 +399,30 @@ class Help { } }) .join(''); + + const commandListWithKeys = this._commands + .map(({ category, name, key, url }, i) => { + if (category === currentCategory) { + return ` +
  • + + + ${key} + ${name} + +
    • + `; + } + }) + .join(''); + + return CONFIG.showKeys ? commandListWithKeys : commandListWithIcons; } _getCategories() { @@ -824,13 +859,21 @@ class Form { const bgcolor = getComputedStyle(document.documentElement).getPropertyValue('--background'); const fgcolor = getComputedStyle(document.documentElement).getPropertyValue('--foreground'); document.documentElement.style.setProperty('--background', fgcolor); - document.documentElement.style.setProperty('--foreground', bgcolor); } + document.documentElement.style.setProperty('--foreground', bgcolor); + } } _invertConfig() { - invertColorCookie = !invertColorCookie; - localStorage.clear(); - localStorage.setItem('invertColorCookie', JSON.stringify(invertColorCookie)); + let isInverted = !CONFIG.invertedColors; + localStorage.removeItem('invertColorCookie'); + localStorage.setItem('invertColorCookie', JSON.stringify(isInverted)); + location.reload(); + } + + _showKeysConfig() { + let isShowKeys = !CONFIG.showKeys; + localStorage.removeItem('showKeysCookie'); + localStorage.setItem('showKeysCookie', JSON.stringify(isShowKeys)); location.reload(); } @@ -844,6 +887,7 @@ class Form { const isHelp = newQuery === '?'; const isLaunch = newQuery === '!'; const isInvert = newQuery === 'invert!'; + const isShowKeys = newQuery === 'keys!'; const { isKey } = this._parseQuery(newQuery); this._inputElVal = newQuery; this._suggester.suggest(newQuery); @@ -852,6 +896,7 @@ class Form { if (isHelp) this._toggleHelp(); if (isLaunch) this._quickLaunch(); if (isInvert) this._invertConfig(); + if (isShowKeys) this._showKeysConfig(); if (this._instantRedirect && isKey) this._submitWithValue(newQuery); } @@ -948,6 +993,7 @@ const help = new Help({ newTab: CONFIG.newTab, suggester, invertedColors: CONFIG.invertedColors, + showKeys: CONFIG.showKeys }); const form = new Form({ @@ -959,6 +1005,7 @@ const form = new Form({ toggleHelp: help.toggle, quickLaunch: help.launch, invertedColors: CONFIG.invertedColors, + showKeys: CONFIG.showKeys }); new Clock({