From 7428becd89f18aba7785ca7bfccdded35ed49dd5 Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 22 Jan 2021 14:35:09 +0100 Subject: [PATCH 01/21] feat(css): theme classic scss --- examples/js/app.tsx | 13 +- examples/js/package.json | 2 +- .../src/getTemplates.ts | 49 +- .../src/getTemplates.ts | 46 +- .../autocomplete-theme-classic/src/theme.scss | 599 +++++++++++------- yarn.lock | 7 +- 6 files changed, 447 insertions(+), 269 deletions(-) diff --git a/examples/js/app.tsx b/examples/js/app.tsx index dcb94afbf..6247d6f17 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -9,7 +9,7 @@ import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; import { Hit } from '@algolia/client-search'; import algoliasearch from 'algoliasearch'; -import { h } from 'preact'; +import { h, Fragment } from 'preact'; import insightsClient from 'search-insights'; import '@algolia/autocomplete-theme-classic'; @@ -82,14 +82,15 @@ type ProductItemProps = { function ProductItem({ hit }: ProductItemProps) { return ( + +
+ {hit.name} +
-
- {hit.name} -
- -
+
{highlightHit({ hit, attribute: 'name' })}
+ ); } diff --git a/examples/js/package.json b/examples/js/package.json index 651867f1d..56506a44e 100644 --- a/examples/js/package.json +++ b/examples/js/package.json @@ -18,7 +18,7 @@ "@algolia/autocomplete-theme-classic": "1.0.0-alpha.39", "@algolia/client-search": "4.8.3", "algoliasearch": "4.8.3", - "preact": "10.5.7", + "preact": "^10.5.11", "search-insights": "1.6.3" }, "devDependencies": { diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts index 74ba8280a..5ac06f5ab 100644 --- a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts +++ b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts @@ -13,34 +13,35 @@ export function getTemplates({ item({ item, createElement, Fragment }) { return createElement(Fragment, { children: [ + createElement('div', { + className: 'aa-ItemSourceIcon', + children: [ + createElement( + 'svg', + { + width: '20', + height: '20', + viewBox: '0 0 20 20', + }, + createElement('path', { + d: + 'M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z', + stroke: 'currentColor', + fill: 'none', + 'fill-rule': 'evenodd', + 'stroke-width': '1.4', + 'stroke-linecap': 'round', + 'stroke-linejoin': 'round', + }) + ), + ], + }), createElement('div', { className: 'aa-ItemContent', children: [ + createElement('div', { - className: 'aa-ItemSourceIcon', - children: [ - createElement( - 'svg', - { - width: '20', - height: '20', - viewBox: '0 0 20 20', - }, - createElement('path', { - d: - 'M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z', - stroke: 'currentColor', - fill: 'none', - 'fill-rule': 'evenodd', - 'stroke-width': '1.4', - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', - }) - ), - ], - }), - createElement('div', { - className: 'aa-ItemTitle', + className: 'aa-ItemContentTitle', children: reverseHighlightHit({ hit: item, attribute: 'query', diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts index b30c696df..a51b6eb85 100644 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts +++ b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts @@ -13,33 +13,33 @@ export function getTemplates({ item({ item, createElement, Fragment }) { return createElement(Fragment, { children: [ + createElement('div', { + className: 'aa-ItemSourceIcon', + children: [ + createElement( + 'svg', + { + width: '20', + height: '20', + viewBox: '0 0 22 22', + fill: 'currentColor', + }, + createElement('path', { + d: 'M0 0h24v24H0z', + fill: 'none', + }), + createElement('path', { + d: + 'M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z', + }) + ), + ], + }), createElement('div', { className: 'aa-ItemContent', children: [ createElement('div', { - className: 'aa-ItemSourceIcon', - children: [ - createElement( - 'svg', - { - width: '20', - height: '20', - viewBox: '0 0 22 22', - fill: 'currentColor', - }, - createElement('path', { - d: 'M0 0h24v24H0z', - fill: 'none', - }), - createElement('path', { - d: - 'M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z', - }) - ), - ], - }), - createElement('div', { - className: 'aa-ItemTitle', + className: 'aa-ItemContentTitle', children: reverseHighlightHit({ hit: item, attribute: 'query', diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index c44553bc5..d03fcb727 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -1,229 +1,400 @@ -.aa-Form { - flex-grow: 1; - margin: 0; - position: relative; +// ---------------- +// Variables +// ---------------- +:root { + --base-unit: 16; + --font-size: calc(var(--base-unit) * 1px); + --spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5 - refs in spacing.json + --spacing: calc(var(--base-unit) * var(--spacing-factor) * 1px); + --spacing-half: calc(var(--spacing) / 2); + --spacing-third: calc(var(--spacing) / 2); + --icon-size: 16px; + --icon-stroke-width: calc((20 / var(--base-unit)) * 1.6); + --primary-color: rgb(62, 52, 211); + --muted-color: rgba(128, 126, 163, 0.6); + --selected-color: rgba(62, 52, 211, 0.1); + --icon-color: rgb(119, 119, 163); + --text-color: rgb(38, 38, 39); + --background-color: rgb(255, 255, 255); + --panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); } -.aa-InputWrapperPrefix, -.aa-InputWrapperSuffix { - height: 100%; - position: absolute; - top: 0; - z-index: 1; -} - -.aa-InputWrapperSuffix { - right: 0; -} - -.aa-Label, -.aa-TouchSearchButtonIcon { - align-items: center; - color: #777; - cursor: initial; - display: flex; - height: 100%; -} - -.aa-InputWrapper, -.aa-TouchSearchButton { - align-items: center; - background-color: #fff; - display: flex; - height: 2.5rem; - position: relative; - width: 100%; -} - -.aa-Input, -.aa-TouchSearchButton { - border: 1px solid #d6d6e7; - border-radius: 3px; - box-shadow: rgb(119 122 175 / 30%) 0 1px 4px 0 inset; - font: inherit; -} - -.aa-TouchSearchButton { - color: #5a5e9a; - cursor: pointer; - padding: 0; - text-align: left; -} - -.aa-Input { - appearance: none; - background: none; - caret-color: #5a5e9a; - color: #23263b; - height: 100%; - padding: 0 2.25rem; - position: absolute; - width: 100%; - - &::-webkit-search-decoration, - &::-webkit-search-cancel-button, - &::-webkit-search-results-button, - &::-webkit-search-results-decoration { - appearance: none; - } - - &::placeholder { - color: #5a5e9a; - } - - &:focus { - border-color: #3c4fe0; - box-shadow: rgb(35 38 59 / 5%) 0 1px 0 0; - outline: currentColor none medium; - } -} - -.aa-Label[hidden], -.aa-LoadingIndicator[hidden] { - display: none; -} - -.aa-SubmitButton, -.aa-ResetButton, -.aa-LoadingIndicator, -.aa-TouchSearchButtonIcon { - height: 100%; - padding: 0 0.5rem; -} - -.aa-SubmitButton, -.aa-ResetButton { - background: none; - border: 0; - color: inherit; - cursor: pointer; -} - -.aa-LoadingIndicator { - position: absolute; - z-index: 2; -} - -.aa-LoadingIcon { - height: 100%; -} - -.aa-List { - list-style: none; - margin: 0; - padding: 0; -} - -.aa-Item { - color: #23263b; - cursor: pointer; - display: flex; - grid-gap: 0.5rem; - justify-content: space-between; - - mark { - background: none; - font-style: normal; - font-weight: bold; - } - - /* stylelint-disable-next-line */ - &[aria-selected='true'] { - background-color: #f5f5fa; - } -} - -.aa-ItemLink { - color: inherit; - text-decoration: none; -} - -.aa-ItemContent { - display: flex; - flex-grow: 1; - grid-gap: 0.5rem; - padding: 0.5rem; -} - -.aa-ItemSourceIcon, -.aa-ItemActionButton { - color: rgba(0, 0, 0, 0.4); -} - -.aa-ItemActionButton { - background-color: transparent; - border: 0; - cursor: pointer; - opacity: 0.8; - padding: 0.5rem; - transition: color 100ms; - @media screen and (prefers-reduced-motion: reduce) { - transition: none; - } - - &:hover, - &:focus { - color: rgba(80, 80, 80, 1); - } +// ---------------- +// Darkmode +// ---------------- +body { + &[data-theme='dark'], + &.dark { + --primary-color: rgb(247, 247, 0); + --muted-color: rgba(167, 167, 96, 0.6); + --selected-color: rgba(247, 247, 0, 0.1); + --icon-color: rgb(31, 207, 248); + --text-color: rgb(214, 218, 221); + --background-color: rgb(21, 23, 42); + --panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); + } } -.aa-TouchOverlay { - backdrop-filter: blur(16px); - background: rgba(255, 255, 255, 0.95); - bottom: 0; - left: 0; - padding: 0.5rem; - position: fixed; - right: 0; - top: 0; +// ---------------- +// Autocomplete +// ---------------- +.aa-Autocomplete { + font-size: var(--font-size); + text-align: left; + line-height: 1em; + //reset + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + button { + appearance: none; + background: none; + border: none; + } + // searchbox + form.aa-Form { + position: relative; + display: flex; + border: 1px solid var(--muted-color); + align-items: center; + padding: 0 var(--spacing) 0 var(--spacing-half); + line-height: 1em; + background-color: var(--background-color); + border-radius: 3px; + &, + &.aa-Form--focused { + border-color: var(--primary-color); + box-shadow: var(--selected-color) 0 0 0 3px, inset var(--selected-color) 0 0 0 2px; + outline: currentcolor none medium; + } + .aa-InputWrapperPrefix { + order: 1; + flex-shrink: 0; + flex-wrap: none; + display: flex; + align-items: center; + padding-right: var(--spacing-half); + // the container for search and loading icons + label.aa-Label, + .aa-LoadingIndicator { + cursor: initial; + flex-shrink: 0; + text-align: center; + width: calc(var(--spacing) + var(--icon-size)); + svg { + color: var(--primary-color); + stroke-width: var(--icon-stroke-width); + width: 20px; + position: relative; + top: 1px; + } + } + } + .aa-InputWrapper { + position: relative; + width: 100%; + order: 3; + // input of the searchbox, where the placeholder and query appear + input.aa-Input { + width: 100%; + height: calc(var(--spacing) * 2.5); + appearance: none; + background: none; + border: none; + font: inherit; + color: var(--text-color); + // remove native appearence + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + -webkit-appearance: none; + } + &::placeholder { + opacity: 1; + color: var(--muted-color); + } + // remove focus effect as we moved it to parent wrapper + &:focus { + border-color: none; + box-shadow: none; + outline: none; + } + } + } + .aa-InputWrapperSuffix { + order: 4; + display: flex; + align-items: center; + // accelerator to clear the query + button.aa-ResetButton { + display: flex; + align-items: center; + border: 0; + cursor: pointer; + background: none; + color: var(--muted-color); + &[hidden] { + display: none; + } + &:hover { + color: var(--text-color); + } + svg { + width: var(--icon-size); + stroke-width: var(--icon-stroke-width); + } + } + } + } } -.aa-TouchFormContainer { - display: flex; - grid-gap: 0.5rem; - justify-content: space-between; +// ---------------- +// Panel +// ---------------- +.aa-Panel { + position: absolute; + .aa-PanelLayout { + //display: flex; + margin-top: var(--spacing-half); + padding-top: var(--spacing-half); + border-radius: 3px; + background-color: var(--background-color); + box-shadow: var(--panel-shadow); + text-align: left; + padding-bottom: var(--spacing-half); + overflow: hidden; + .col-results { + // max-height: 400px; + width: 50%; + overflow-y: scroll; + // section.aa-Source + } + aside.col-preview { + //max-height: 400px; + //animation: fadeIn ease-in .2s; + flex-shrink: 1; + max-width: 50%; + overflow: hidden; + border-left: solid 1px var(--selected-color); + &:empty { + //display:none; + } + } + } } -.aa-TouchCancelButton { - background: none; - border: 0; - color: inherit; - cursor: pointer; - font-size: inherit; - padding: 0; +// when a query isn't resolved yet +.aa-Panel--stalled { + filter: grayscale(1); + opacity: 0.5; + transition: opacity 200ms ease-in; } -.aa-PanelLayout { - margin-top: 5px; +// ---------------- +// Sources +// children of .col-results +// Each section can be styled independantly here +// ---------------- +section.aa-Source { + // source title + .aa-SourceHeader { + position: relative; + line-height: var(--spacing); + margin: var(--spacing-half) var(--spacing) var(--spacing-third); + // title typography + span { + color: var(--primary-color); + display: inline-block; + position: relative; + z-index: 2; + padding-right: var(--spacing-half); + font-size: 0.8em; + font-weight: 600; + text-transform: capitalize; + background: var(--background-color); + } + // Line separator + .aa-SourceHeaderLine { + z-index: 1; + position: absolute; + display: block; + top: var(--spacing-half); + left: 0; + right: 0; + height: 2px; + opacity: 0.3; + border-bottom: solid 1px var(--primary-color); + } + // hide empty header + &:empty { + display: none; + } + } + &:empty { + // hide empty section + display: none; + } + // the list of results inside the source + ul.aa-List { + list-style: none; + margin: 0; + padding: 0; + } } -.aa-Panel { - &--desktop { - max-width: 480px; - position: absolute; - width: 100%; - - .aa-PanelLayout { - background-color: #fff; - border: 1px solid rgba(150, 150, 150, 0.16); - border-radius: 3px; - box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05), - 0 8px 16px -4px rgba(35, 38, 59, 0.25); +// ---------------- +// Hit Layout - smart layout +// ---------------- +li.aa-Item { + display: flex; + margin-left: 2px; + padding: 0 var(--spacing-half); + line-height: 1.1em; + align-items: center; + color: var(--text-color); + height: 100%; + cursor: pointer; + // when the result is active + &[aria-selected='true'] { + background-color: var(--selected-color); + .aa-ItemActionButton { + visibility: visible; + } } - - &--stalled { - filter: grayscale(1); - opacity: 0.5; - transition: opacity 200ms ease-in; - @media screen and (prefers-reduced-motion: reduce) { - transition: none; - } + // wrap hit with url but we don't need to see it + a.aa-ItemLink { + color: inherit; + text-decoration: none; + width: 100%; + display: flex; + align-items: center; } - } - - &--touch { - .aa-Item { - border-radius: 5px; + // the result type icon inlined svg or img + .aa-ItemSourceIcon { + box-shadow: inset 0 0 0 1px var(--selected-color); + border-radius: 3px; + margin: 2px 0; + flex-shrink: 0; + font-size: var(--icon-size); + width: calc(var(--icon-size) + var(--spacing)); + height: calc(var(--icon-size) + var(--spacing)); + stroke-width: var(--icon-stroke-width); + color: var(--icon-color); + margin-right: var(--spacing-half); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + i { + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + img { + width: var(--icon-size); + height: var(--icon-size); + } } - } -} + .aa-ItemContent { + flex-shrink: 1; + width: 100%; + color: var(--text-color); + cursor: pointer; + padding: calc(var(--spacing) / 4) 0; + .aa-ItemContentTitle { + display: inline-block; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + padding-top: 2px; + mark { + background: none; + font-style: normal; + font-weight: bold; + } + } + .aa-ItemContentSubtitle { + display: inline-block; + max-width: 100%; + white-space: nowrap; + color: var(--muted-color); + font-size: 0.75em; + text-overflow: ellipsis; + overflow-x: hidden; + margin-top: -2px; + mark { + background: none; + font-style: normal; + font-weight: bold; + } + &:empty { + display: none; + } + .aa-ItemContentDash { + display: none; + opacity: 0.4; + color: var(--muted-color); + } + .aa-ItemContentTag { + padding: 0.08em 0.3em; + margin-right: 0.4em; + border-radius: 3px; + background-color: var(--selected-color); + } + } + &.aa-ItemContent--dual { + display: flex; + flex-direction: column; + text-align: left; + justify-content: center; + .aa-ItemContentTitle, + .aa-ItemContentSubtitle { + display: block; + } + } + .aa-ItemContentDescription { + padding: 0.3em 0; + color: var(--text-color); + opacity: 0.7; + font-size: 0.85em; + text-overflow: ellipsis; + max-width: 100%; + overflow-x: hidden; + mark { + background: none; + font-style: normal; + font-weight: bold; + } + &:empty { + display: none; + } + } + } + // secondary click action + button.aa-ItemActionButton { + display: flex; + flex-shrink: 0; + visibility: hidden; + border: 0; + background: none; + cursor: pointer; + align-items: center; + color: var(--muted-color); + &:hover svg { + color: var(--text-color); + } + svg { + width: var(--icon-size); + stroke-width: var(--icon-stroke-width); + color: var(--muted-color); + margin: 0 var(--spacing); + &:hover { + color: var(--text-color); + } + } + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9639bd480..de506a25f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15295,11 +15295,16 @@ posthtml@^0.13.4: posthtml-parser "^0.5.0" posthtml-render "^1.2.3" -preact@10.5.7, preact@^10.0.0: +preact@^10.0.0: version "10.5.7" resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.7.tgz#f1d84725539e18f7ccbea937cf3db5895661dbd3" integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg== +preact@^10.5.11: + version "10.5.11" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.11.tgz#2c8a431f16613e442901068175771806cf1cc0f6" + integrity sha512-BdtFePVilR1430kDuzh3VkkZktCmp8RTqHOjG8qesyGZXHNYJjdrjEBuc2f7O/vthhVENxJd0/aTjWtYeH46aw== + prebuild-install@^5.3.3: version "5.3.6" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.6.tgz#7c225568d864c71d89d07f8796042733a3f54291" From 931b3679c900b0e2e989019043e35c45fe2f7f22 Mon Sep 17 00:00:00 2001 From: Shipow Date: Sun, 24 Jan 2021 11:49:12 +0100 Subject: [PATCH 02/21] fix(css): theme classic scss --- examples/js/app.tsx | 60 +++++++++++++--- examples/js/index.html | 72 +++++++++---------- examples/js/style.css | 30 ++++---- .../autocomplete-theme-classic/src/theme.scss | 20 ++++-- 4 files changed, 117 insertions(+), 65 deletions(-) diff --git a/examples/js/app.tsx b/examples/js/app.tsx index 6247d6f17..6b2fbe4ea 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -62,12 +62,20 @@ autocomplete({ }); }, templates: { + header() { + return ( + + Products +
+ + ); + }, item({ item }) { return ; }, empty() { return ( -
No results for this query.
+
No results for this query.
); }, }, @@ -83,14 +91,48 @@ type ProductItemProps = { function ProductItem({ hit }: ProductItemProps) { return ( -
- {hit.name} -
-
-
- {highlightHit({ hit, attribute: 'name' })} +
+ {hit.name}
-
- +
+
+ {highlightHit({ hit, attribute: 'name' })} +
+
+ + ); } + +const darkSwitch = document.getElementById("darkSwitch"); + +if (darkSwitch) { + initTheme(); + darkSwitch.addEventListener("change", () => { + resetTheme(); + }); +} + +function initTheme() { + const darkThemeSelected = + localStorage.getItem("darkSwitch") !== null && + localStorage.getItem("darkSwitch") === "dark"; + darkSwitch.checked = darkThemeSelected; + darkThemeSelected + ? document.body.setAttribute("data-theme", "dark") + : document.body.removeAttribute("data-theme"); +} + +function resetTheme() { + if (darkSwitch.checked) { + document.body.setAttribute("data-theme", "dark"); + localStorage.setItem("darkSwitch", "dark"); + } else { + document.body.removeAttribute("data-theme"); + localStorage.removeItem("darkSwitch"); + } +} diff --git a/examples/js/index.html b/examples/js/index.html index 0d7316c1f..281a71631 100644 --- a/examples/js/index.html +++ b/examples/js/index.html @@ -1,5 +1,6 @@ - + + @@ -7,46 +8,39 @@ Autocomplete JavaScript Playground - - + + +
-
- -
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nisi - facilis, delectus beatae necessitatibus unde eius eos ducimus - praesentium. Laboriosam error debitis nostrum pariatur? Exercitationem - illo hic error aut voluptate. -

- - Skateboard 1 - -

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus - maxime, doloremque eligendi assumenda praesentium possimus ipsa porro - quia quae harum accusantium temporibus, dignissimos beatae - necessitatibus perspiciatis laborum delectus, et tenetur. -

- - Skateboard 2 - -

- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur - enim voluptatum facilis culpa harum quia cum repellat, vel pariatur, - ipsam, obcaecati minima exercitationem quasi vitae cupiditate illo aut - odit voluptate? -

-
+
+ + +
+
+
+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nisi facilis, delectus beatae necessitatibus unde eius eos ducimus praesentium. Laboriosam error debitis nostrum pariatur? Exercitationem illo hic error aut voluptate. +

+ + Skateboard 1 + +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus maxime, doloremque eligendi assumenda praesentium possimus ipsa porro quia quae harum accusantium temporibus, dignissimos beatae necessitatibus perspiciatis laborum delectus, et tenetur. +

+ + Skateboard 2 + +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur enim voluptatum facilis culpa harum quia cum repellat, vel pariatur, ipsam, obcaecati minima exercitationem quasi vitae cupiditate illo aut odit voluptate? +

+
- - + + + \ No newline at end of file diff --git a/examples/js/style.css b/examples/js/style.css index 527f682b9..910886092 100644 --- a/examples/js/style.css +++ b/examples/js/style.css @@ -1,27 +1,31 @@ * { - box-sizing: border-box; + box-sizing: border-box; } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: rgb(244, 244, 249); + color: rgb(65, 65, 65); } .container { - margin: 0 auto; - max-width: 640px; - padding: 1rem; - width: 100%; + margin: 0 auto; + max-width: 640px; + padding: 1rem; + width: 100%; } .content p { - color: #555; - line-height: 1.6; + line-height: 1.6; } .content img { - max-width: 100%; + max-width: 100%; } + +body[data-theme="dark"] { + color: rgb(183, 192, 199); + background-color: rgb(0, 0, 0); +} \ No newline at end of file diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index d03fcb727..fc9e96516 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -29,7 +29,7 @@ body { --muted-color: rgba(167, 167, 96, 0.6); --selected-color: rgba(247, 247, 0, 0.1); --icon-color: rgb(31, 207, 248); - --text-color: rgb(214, 218, 221); + --text-color: rgb(183, 192, 199); --background-color: rgb(21, 23, 42); --panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); } @@ -156,6 +156,17 @@ body { // ---------------- .aa-Panel { position: absolute; + //reset + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + button { + appearance: none; + background: none; + border: none; + } .aa-PanelLayout { //display: flex; margin-top: var(--spacing-half); @@ -250,7 +261,6 @@ section.aa-Source { // ---------------- li.aa-Item { display: flex; - margin-left: 2px; padding: 0 var(--spacing-half); line-height: 1.1em; align-items: center; @@ -276,7 +286,7 @@ li.aa-Item { .aa-ItemSourceIcon { box-shadow: inset 0 0 0 1px var(--selected-color); border-radius: 3px; - margin: 2px 0; + margin: 2px 0 2px 2px; flex-shrink: 0; font-size: var(--icon-size); width: calc(var(--icon-size) + var(--spacing)); @@ -300,6 +310,7 @@ li.aa-Item { } .aa-ItemContent { flex-shrink: 1; + overflow: hidden; width: 100%; color: var(--text-color); cursor: pointer; @@ -312,6 +323,7 @@ li.aa-Item { overflow-x: hidden; padding-top: 2px; mark { + color: var(--text-color); background: none; font-style: normal; font-weight: bold; @@ -391,7 +403,7 @@ li.aa-Item { width: var(--icon-size); stroke-width: var(--icon-stroke-width); color: var(--muted-color); - margin: 0 var(--spacing); + margin: 0 var(--spacing-half); &:hover { color: var(--text-color); } From 3fcc8d2f748b7254d66d236bd173c3f0bd519dbc Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 26 Jan 2021 04:12:45 +0100 Subject: [PATCH 03/21] fix(css): Input Focus, Search Button + Touch Overlay --- .../autocomplete-theme-classic/src/theme.scss | 151 +++++++++++++----- 1 file changed, 107 insertions(+), 44 deletions(-) diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index fc9e96516..c95444f26 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -7,7 +7,7 @@ --spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5 - refs in spacing.json --spacing: calc(var(--base-unit) * var(--spacing-factor) * 1px); --spacing-half: calc(var(--spacing) / 2); - --spacing-third: calc(var(--spacing) / 2); + --spacing-third: calc(var(--spacing) / 3); --icon-size: 16px; --icon-stroke-width: calc((20 / var(--base-unit)) * 1.6); --primary-color: rgb(62, 52, 211); @@ -38,7 +38,8 @@ body { // ---------------- // Autocomplete // ---------------- -.aa-Autocomplete { +.aa-Autocomplete, +.aa-TouchFormContainer { font-size: var(--font-size); text-align: left; line-height: 1em; @@ -48,13 +49,9 @@ body { margin: 0; padding: 0; } - button { - appearance: none; - background: none; - border: none; - } // searchbox form.aa-Form { + width: 100%; position: relative; display: flex; border: 1px solid var(--muted-color); @@ -63,8 +60,7 @@ body { line-height: 1em; background-color: var(--background-color); border-radius: 3px; - &, - &.aa-Form--focused { + &:focus-within { border-color: var(--primary-color); box-shadow: var(--selected-color) 0 0 0 3px, inset var(--selected-color) 0 0 0 2px; outline: currentcolor none medium; @@ -83,12 +79,17 @@ body { flex-shrink: 0; text-align: center; width: calc(var(--spacing) + var(--icon-size)); + button { + appearance: none; + background: none; + border: none; + } svg { color: var(--primary-color); stroke-width: var(--icon-stroke-width); width: 20px; position: relative; - top: 1px; + left: 2px; } } } @@ -167,41 +168,53 @@ body { background: none; border: none; } - .aa-PanelLayout { - //display: flex; - margin-top: var(--spacing-half); - padding-top: var(--spacing-half); - border-radius: 3px; - background-color: var(--background-color); - box-shadow: var(--panel-shadow); - text-align: left; - padding-bottom: var(--spacing-half); - overflow: hidden; - .col-results { - // max-height: 400px; - width: 50%; - overflow-y: scroll; - // section.aa-Source - } - aside.col-preview { - //max-height: 400px; - //animation: fadeIn ease-in .2s; - flex-shrink: 1; - max-width: 50%; + &.aa-Panel--desktop { + .aa-PanelLayout { + //display: flex; + margin-top: var(--spacing-half); + padding-top: var(--spacing-half); + border-radius: 3px; + background-color: var(--background-color); + box-shadow: var(--panel-shadow); + text-align: left; + padding-bottom: var(--spacing-half); overflow: hidden; - border-left: solid 1px var(--selected-color); - &:empty { - //display:none; + .col-results { + // max-height: 400px; + width: 50%; + overflow-y: scroll; + // section.aa-Source + } + aside.col-preview { + //max-height: 400px; + //animation: fadeIn ease-in .2s; + flex-shrink: 1; + max-width: 50%; + overflow: hidden; + border-left: solid 1px var(--selected-color); + &:empty { + //display:none; + } } } } -} - -// when a query isn't resolved yet -.aa-Panel--stalled { - filter: grayscale(1); - opacity: 0.5; - transition: opacity 200ms ease-in; + &.aa-Panel--touch { + right: var(--spacing-half); + left: var(--spacing-half); + padding-top: var(--spacing-half); + .aa-Item { + padding: 0; + } + .aa-SourceHeader { + margin: var(--spacing-half) 0 var(--spacing-half) 2px; + } + } + // when a query isn't resolved yet + &.aa-Panel--stalled { + filter: grayscale(1); + opacity: 0.5; + transition: opacity 200ms ease-in; + } } // ---------------- @@ -210,11 +223,12 @@ body { // Each section can be styled independantly here // ---------------- section.aa-Source { + width: 100%; // source title .aa-SourceHeader { position: relative; line-height: var(--spacing); - margin: var(--spacing-half) var(--spacing) var(--spacing-third); + margin: var(--spacing-half) var(--spacing); // title typography span { color: var(--primary-color); @@ -321,7 +335,6 @@ li.aa-Item { white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; - padding-top: 2px; mark { color: var(--text-color); background: none; @@ -409,4 +422,54 @@ li.aa-Item { } } } -} \ No newline at end of file +} + +//---------------- +// Touch +//---------------- +.aa-TouchSearchButton { + align-items: center; + height: calc(var(--spacing) * 2.5); + background-color: var(--background-color); + display: flex; + position: relative; + border: 1px solid var(--muted-color); + border-radius: 3px; + font: inherit; + cursor: pointer; + padding: 0 var(--spacing-half); + text-align: left; + color: var(--muted-color); + .aa-TouchSearchButtonIcon { + align-items: center; + color: var(--icon-color); + cursor: initial; + display: flex; + height: 100%; + margin-right: var(--spacing-third); + } +} + +.aa-TouchOverlay { + backdrop-filter: blur(16px); + background: var(--background-color); + bottom: 0; + left: 0; + padding: var(--spacing-half); + position: fixed; + right: 0; + top: 0; + .aa-TouchFormContainer { + display: flex; + grid-gap: 0.5rem; + justify-content: space-between; + } + .aa-TouchCancelButton { + background: none; + border: 0; + color: inherit; + cursor: pointer; + font-size: inherit; + padding: 0; + } +} From 43ced9bbf36b5b39aa98b7879f643f59d07bd6e8 Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 26 Jan 2021 09:59:16 +0100 Subject: [PATCH 04/21] fix(css): Prefix aa variables, Darkmode prefered scheme --- .../autocomplete-theme-classic/src/theme.scss | 200 +++++++++--------- 1 file changed, 103 insertions(+), 97 deletions(-) diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index c95444f26..121714c3f 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -2,36 +2,46 @@ // Variables // ---------------- :root { - --base-unit: 16; - --font-size: calc(var(--base-unit) * 1px); - --spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5 - refs in spacing.json - --spacing: calc(var(--base-unit) * var(--spacing-factor) * 1px); - --spacing-half: calc(var(--spacing) / 2); - --spacing-third: calc(var(--spacing) / 3); - --icon-size: 16px; - --icon-stroke-width: calc((20 / var(--base-unit)) * 1.6); - --primary-color: rgb(62, 52, 211); - --muted-color: rgba(128, 126, 163, 0.6); - --selected-color: rgba(62, 52, 211, 0.1); - --icon-color: rgb(119, 119, 163); - --text-color: rgb(38, 38, 39); - --background-color: rgb(255, 255, 255); - --panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); + --aa-base-unit: 16; + --aa-font-size: calc(var(--aa-base-unit) * 1px); + --aa-spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5 - refs in spacing.json + --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); + --aa-spacing-half: calc(var(--aa-spacing) / 2); + --aa-spacing-third: calc(var(--aa-spacing) / 3); + --aa-icon-size: 18px; + --aa-icon-stroke-width: calc((20 / var(--aa-base-unit)) * 1.6); + --aa-primary-color: rgb(62, 52, 211); + --aa-muted-color: rgba(128, 126, 163, 0.6); + --aa-selected-color: rgba(62, 52, 211, 0.1); + --aa-icon-color: rgb(119, 119, 163); + --aa-text-color: rgb(38, 38, 39); + --aa-background-color: rgb(255, 255, 255); + --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); } // ---------------- // Darkmode // ---------------- +%darkmode { + --aa-primary-color: rgb(247, 247, 0); + --aa-muted-color: rgba(167, 167, 96, 0.6); + --aa-selected-color: rgba(247, 247, 0, 0.1); + --aa-icon-color: rgb(31, 207, 248); + --aa-text-color: rgb(183, 192, 199); + --aa-background-color: rgb(21, 23, 42); + --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); +} + body { &[data-theme='dark'], &.dark { - --primary-color: rgb(247, 247, 0); - --muted-color: rgba(167, 167, 96, 0.6); - --selected-color: rgba(247, 247, 0, 0.1); - --icon-color: rgb(31, 207, 248); - --text-color: rgb(183, 192, 199); - --background-color: rgb(21, 23, 42); - --panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); + @extend %darkmode; + } +} + +@media (prefers-color-scheme: dark) { + body { + @extend %darkmode; } } @@ -40,7 +50,7 @@ body { // ---------------- .aa-Autocomplete, .aa-TouchFormContainer { - font-size: var(--font-size); + font-size: var(--aa-font-size); text-align: left; line-height: 1em; //reset @@ -54,15 +64,15 @@ body { width: 100%; position: relative; display: flex; - border: 1px solid var(--muted-color); + border: 1px solid var(--aa-muted-color); align-items: center; - padding: 0 var(--spacing) 0 var(--spacing-half); + padding: 0 var(--aa-spacing) 0 var(--aa-spacing-half); line-height: 1em; - background-color: var(--background-color); + background-color: var(--aa-background-color); border-radius: 3px; &:focus-within { - border-color: var(--primary-color); - box-shadow: var(--selected-color) 0 0 0 3px, inset var(--selected-color) 0 0 0 2px; + border-color: var(--aa-primary-color); + box-shadow: var(--aa-selected-color) 0 0 0 3px, inset var(--aa-selected-color) 0 0 0 2px; outline: currentcolor none medium; } .aa-InputWrapperPrefix { @@ -71,22 +81,22 @@ body { flex-wrap: none; display: flex; align-items: center; - padding-right: var(--spacing-half); + padding-right: var(--aa-spacing-half); // the container for search and loading icons label.aa-Label, .aa-LoadingIndicator { cursor: initial; flex-shrink: 0; text-align: center; - width: calc(var(--spacing) + var(--icon-size)); + width: calc(var(--aa-spacing) + var(--aa-icon-size)); button { appearance: none; background: none; border: none; } svg { - color: var(--primary-color); - stroke-width: var(--icon-stroke-width); + color: var(--aa-primary-color); + stroke-width: var(--aa-icon-stroke-width); width: 20px; position: relative; left: 2px; @@ -100,12 +110,12 @@ body { // input of the searchbox, where the placeholder and query appear input.aa-Input { width: 100%; - height: calc(var(--spacing) * 2.5); + height: calc(var(--aa-spacing) * 2.5); appearance: none; background: none; border: none; font: inherit; - color: var(--text-color); + color: var(--aa-text-color); // remove native appearence &::-webkit-search-decoration, &::-webkit-search-cancel-button, @@ -115,7 +125,7 @@ body { } &::placeholder { opacity: 1; - color: var(--muted-color); + color: var(--aa-muted-color); } // remove focus effect as we moved it to parent wrapper &:focus { @@ -136,16 +146,16 @@ body { border: 0; cursor: pointer; background: none; - color: var(--muted-color); + color: var(--aa-muted-color); &[hidden] { display: none; } &:hover { - color: var(--text-color); + color: var(--aa-text-color); } svg { - width: var(--icon-size); - stroke-width: var(--icon-stroke-width); + width: var(--aa-icon-size); + stroke-width: var(--aa-icon-stroke-width); } } } @@ -171,13 +181,13 @@ body { &.aa-Panel--desktop { .aa-PanelLayout { //display: flex; - margin-top: var(--spacing-half); - padding-top: var(--spacing-half); + margin-top: var(--aa-spacing-half); + padding-top: var(--aa-spacing-half); border-radius: 3px; - background-color: var(--background-color); - box-shadow: var(--panel-shadow); + background-color: var(--aa-background-color); + box-shadow: var(--aa-panel-shadow); text-align: left; - padding-bottom: var(--spacing-half); + padding-bottom: var(--aa-spacing-half); overflow: hidden; .col-results { // max-height: 400px; @@ -191,7 +201,7 @@ body { flex-shrink: 1; max-width: 50%; overflow: hidden; - border-left: solid 1px var(--selected-color); + border-left: solid 1px var(--aa-selected-color); &:empty { //display:none; } @@ -199,14 +209,14 @@ body { } } &.aa-Panel--touch { - right: var(--spacing-half); - left: var(--spacing-half); - padding-top: var(--spacing-half); + right: var(--aa-spacing-half); + left: var(--aa-spacing-half); + padding-top: var(--aa-spacing-half); .aa-Item { padding: 0; } .aa-SourceHeader { - margin: var(--spacing-half) 0 var(--spacing-half) 2px; + margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; } } // when a query isn't resolved yet @@ -227,31 +237,31 @@ section.aa-Source { // source title .aa-SourceHeader { position: relative; - line-height: var(--spacing); - margin: var(--spacing-half) var(--spacing); + line-height: var(--aa-spacing); + margin: var(--aa-spacing-half) var(--aa-spacing); // title typography span { - color: var(--primary-color); + color: var(--aa-primary-color); display: inline-block; position: relative; z-index: 2; - padding-right: var(--spacing-half); + padding-right: var(--aa-spacing-half); font-size: 0.8em; font-weight: 600; text-transform: capitalize; - background: var(--background-color); + background: var(--aa-background-color); } // Line separator .aa-SourceHeaderLine { z-index: 1; position: absolute; display: block; - top: var(--spacing-half); + top: var(--aa-spacing-half); left: 0; right: 0; height: 2px; opacity: 0.3; - border-bottom: solid 1px var(--primary-color); + border-bottom: solid 1px var(--aa-primary-color); } // hide empty header &:empty { @@ -275,15 +285,15 @@ section.aa-Source { // ---------------- li.aa-Item { display: flex; - padding: 0 var(--spacing-half); + padding: 0 var(--aa-spacing-half); line-height: 1.1em; align-items: center; - color: var(--text-color); + color: var(--aa-text-color); height: 100%; cursor: pointer; // when the result is active &[aria-selected='true'] { - background-color: var(--selected-color); + background-color: var(--aa-selected-color); .aa-ItemActionButton { visibility: visible; } @@ -298,37 +308,33 @@ li.aa-Item { } // the result type icon inlined svg or img .aa-ItemSourceIcon { - box-shadow: inset 0 0 0 1px var(--selected-color); + box-shadow: inset 0 0 0 1px var(--aa-selected-color); border-radius: 3px; margin: 2px 0 2px 2px; flex-shrink: 0; - font-size: var(--icon-size); - width: calc(var(--icon-size) + var(--spacing)); - height: calc(var(--icon-size) + var(--spacing)); - stroke-width: var(--icon-stroke-width); - color: var(--icon-color); - margin-right: var(--spacing-half); + font-size: var(--aa-icon-size); + width: calc(var(--aa-icon-size) + var(--aa-spacing)); + height: calc(var(--aa-icon-size) + var(--aa-spacing)); + stroke-width: var(--aa-icon-stroke-width); + color: var(--aa-icon-color); + margin-right: var(--aa-spacing-half); display: flex; align-items: center; justify-content: center; text-align: center; - i { - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - img { - width: var(--icon-size); - height: var(--icon-size); + img, + svg { + width: var(--aa-icon-size); + height: var(--aa-icon-size); } } .aa-ItemContent { flex-shrink: 1; overflow: hidden; width: 100%; - color: var(--text-color); + color: var(--aa-text-color); cursor: pointer; - padding: calc(var(--spacing) / 4) 0; + padding: calc(var(--aa-spacing) / 4) 0; .aa-ItemContentTitle { display: inline-block; max-width: 100%; @@ -336,7 +342,7 @@ li.aa-Item { text-overflow: ellipsis; overflow-x: hidden; mark { - color: var(--text-color); + color: var(--aa-text-color); background: none; font-style: normal; font-weight: bold; @@ -346,7 +352,7 @@ li.aa-Item { display: inline-block; max-width: 100%; white-space: nowrap; - color: var(--muted-color); + color: var(--aa-muted-color); font-size: 0.75em; text-overflow: ellipsis; overflow-x: hidden; @@ -362,13 +368,13 @@ li.aa-Item { .aa-ItemContentDash { display: none; opacity: 0.4; - color: var(--muted-color); + color: var(--aa-muted-color); } .aa-ItemContentTag { padding: 0.08em 0.3em; margin-right: 0.4em; border-radius: 3px; - background-color: var(--selected-color); + background-color: var(--aa-selected-color); } } &.aa-ItemContent--dual { @@ -383,7 +389,7 @@ li.aa-Item { } .aa-ItemContentDescription { padding: 0.3em 0; - color: var(--text-color); + color: var(--aa-text-color); opacity: 0.7; font-size: 0.85em; text-overflow: ellipsis; @@ -408,17 +414,17 @@ li.aa-Item { background: none; cursor: pointer; align-items: center; - color: var(--muted-color); + color: var(--aa-muted-color); &:hover svg { - color: var(--text-color); + color: var(--aa-text-color); } svg { - width: var(--icon-size); - stroke-width: var(--icon-stroke-width); - color: var(--muted-color); - margin: 0 var(--spacing-half); + width: var(--aa-icon-size); + stroke-width: var(--aa-icon-stroke-width); + color: var(--aa-muted-color); + margin: 0 var(--aa-spacing-half); &:hover { - color: var(--text-color); + color: var(--aa-text-color); } } } @@ -429,33 +435,33 @@ li.aa-Item { //---------------- .aa-TouchSearchButton { align-items: center; - height: calc(var(--spacing) * 2.5); - background-color: var(--background-color); + height: calc(var(--aa-spacing) * 2.5); + background-color: var(--aa-background-color); display: flex; position: relative; - border: 1px solid var(--muted-color); + border: 1px solid var(--aa-muted-color); border-radius: 3px; font: inherit; cursor: pointer; - padding: 0 var(--spacing-half); + padding: 0 var(--aa-spacing-half); text-align: left; - color: var(--muted-color); + color: var(--aa-muted-color); .aa-TouchSearchButtonIcon { align-items: center; - color: var(--icon-color); + color: var(--aa-icon-color); cursor: initial; display: flex; height: 100%; - margin-right: var(--spacing-third); + margin-right: var(--aa-spacing-third); } } .aa-TouchOverlay { backdrop-filter: blur(16px); - background: var(--background-color); + background: var(--aa-background-color); bottom: 0; left: 0; - padding: var(--spacing-half); + padding: var(--aa-spacing-half); position: fixed; right: 0; top: 0; From c6c932980dc41a9198f3533dac73302a54c3f4d2 Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 26 Jan 2021 10:43:08 +0100 Subject: [PATCH 05/21] fix(css): Darkmode @include variables --- packages/autocomplete-theme-classic/src/theme.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 121714c3f..4bfce42e0 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -22,7 +22,7 @@ // ---------------- // Darkmode // ---------------- -%darkmode { +@mixin darkmode() { --aa-primary-color: rgb(247, 247, 0); --aa-muted-color: rgba(167, 167, 96, 0.6); --aa-selected-color: rgba(247, 247, 0, 0.1); @@ -35,13 +35,13 @@ body { &[data-theme='dark'], &.dark { - @extend %darkmode; + @include darkmode(); } } @media (prefers-color-scheme: dark) { body { - @extend %darkmode; + @include darkmode(); } } From 595b5f7be180fc55bc626c51eab031d6a5715445 Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 26 Jan 2021 12:16:32 +0100 Subject: [PATCH 06/21] fix(css): Revert include, allows codesandbox builds --- .../autocomplete-theme-classic/src/theme.scss | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 4bfce42e0..95fbb762a 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -22,26 +22,16 @@ // ---------------- // Darkmode // ---------------- -@mixin darkmode() { - --aa-primary-color: rgb(247, 247, 0); - --aa-muted-color: rgba(167, 167, 96, 0.6); - --aa-selected-color: rgba(247, 247, 0, 0.1); - --aa-icon-color: rgb(31, 207, 248); - --aa-text-color: rgb(183, 192, 199); - --aa-background-color: rgb(21, 23, 42); - --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); -} - body { &[data-theme='dark'], &.dark { - @include darkmode(); - } -} - -@media (prefers-color-scheme: dark) { - body { - @include darkmode(); + --aa-primary-color: rgb(247, 247, 0); + --aa-muted-color: rgba(167, 167, 96, 0.6); + --aa-selected-color: rgba(247, 247, 0, 0.1); + --aa-icon-color: rgb(31, 207, 248); + --aa-text-color: rgb(183, 192, 199); + --aa-background-color: rgb(21, 23, 42); + --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); } } From 18a73fbe37dd4bf5c3db679a6ff4903a403054f2 Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 29 Jan 2021 10:29:34 +0100 Subject: [PATCH 07/21] fix(css): remove tag names --- .../autocomplete-theme-classic/src/theme.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 95fbb762a..63716920f 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -50,7 +50,7 @@ body { padding: 0; } // searchbox - form.aa-Form { + .aa-Form { width: 100%; position: relative; display: flex; @@ -73,7 +73,7 @@ body { align-items: center; padding-right: var(--aa-spacing-half); // the container for search and loading icons - label.aa-Label, + .aa-Label, .aa-LoadingIndicator { cursor: initial; flex-shrink: 0; @@ -98,7 +98,7 @@ body { width: 100%; order: 3; // input of the searchbox, where the placeholder and query appear - input.aa-Input { + .aa-Input { width: 100%; height: calc(var(--aa-spacing) * 2.5); appearance: none; @@ -130,7 +130,7 @@ body { display: flex; align-items: center; // accelerator to clear the query - button.aa-ResetButton { + .aa-ResetButton { display: flex; align-items: center; border: 0; @@ -220,9 +220,9 @@ body { // ---------------- // Sources // children of .col-results -// Each section can be styled independantly here +// Each source can be styled independantly here // ---------------- -section.aa-Source { +.aa-Source { width: 100%; // source title .aa-SourceHeader { @@ -273,7 +273,7 @@ section.aa-Source { // ---------------- // Hit Layout - smart layout // ---------------- -li.aa-Item { +.aa-Item { display: flex; padding: 0 var(--aa-spacing-half); line-height: 1.1em; @@ -289,7 +289,7 @@ li.aa-Item { } } // wrap hit with url but we don't need to see it - a.aa-ItemLink { + .aa-ItemLink { color: inherit; text-decoration: none; width: 100%; @@ -396,7 +396,7 @@ li.aa-Item { } } // secondary click action - button.aa-ItemActionButton { + .aa-ItemActionButton { display: flex; flex-shrink: 0; visibility: hidden; @@ -468,4 +468,4 @@ li.aa-Item { font-size: inherit; padding: 0; } -} +} \ No newline at end of file From 18e722e98d6003d5d5cf017f611cb0449c537642 Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 29 Jan 2021 10:37:05 +0100 Subject: [PATCH 08/21] fix(css): rename itemSourceIcon to itemIcon --- examples/js/app.tsx | 2 +- examples/react-renderer/src/Autocomplete.tsx | 2 +- .../autocomplete-plugin-query-suggestions/src/getTemplates.ts | 2 +- .../autocomplete-plugin-recent-searches/src/getTemplates.ts | 2 +- packages/autocomplete-theme-classic/src/theme.scss | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/js/app.tsx b/examples/js/app.tsx index 6b2fbe4ea..5280d5ab6 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -91,7 +91,7 @@ type ProductItemProps = { function ProductItem({ hit }: ProductItemProps) { return ( -
+
{hit.name}
diff --git a/examples/react-renderer/src/Autocomplete.tsx b/examples/react-renderer/src/Autocomplete.tsx index 1ae9a6fe8..a3016ddbc 100644 --- a/examples/react-renderer/src/Autocomplete.tsx +++ b/examples/react-renderer/src/Autocomplete.tsx @@ -153,7 +153,7 @@ export function Autocomplete( {...autocomplete.getItemProps({ item, source })} >
- +
({ return createElement(Fragment, { children: [ createElement('div', { - className: 'aa-ItemSourceIcon', + className: 'aa-itemIcon', children: [ createElement( 'svg', diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts index a51b6eb85..e83de9b3e 100644 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts +++ b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts @@ -14,7 +14,7 @@ export function getTemplates({ return createElement(Fragment, { children: [ createElement('div', { - className: 'aa-ItemSourceIcon', + className: 'aa-itemIcon', children: [ createElement( 'svg', diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 63716920f..00f9199ba 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -297,7 +297,7 @@ body { align-items: center; } // the result type icon inlined svg or img - .aa-ItemSourceIcon { + .aa-ItemIcon { box-shadow: inset 0 0 0 1px var(--aa-selected-color); border-radius: 3px; margin: 2px 0 2px 2px; From 3a2a491af85df9f85b58c8736727a32cf4b8304c Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 29 Jan 2021 11:19:49 +0100 Subject: [PATCH 09/21] fix(theme): example + preview panel css --- examples/js/app.tsx | 2 +- .../autocomplete-theme-classic/src/theme.scss | 33 +++++++------------ 2 files changed, 12 insertions(+), 23 deletions(-) diff --git a/examples/js/app.tsx b/examples/js/app.tsx index 5280d5ab6..06422d5fc 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -91,7 +91,7 @@ type ProductItemProps = { function ProductItem({ hit }: ProductItemProps) { return ( -
+
{hit.name}
diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 00f9199ba..dd41e492d 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -179,22 +179,16 @@ body { text-align: left; padding-bottom: var(--aa-spacing-half); overflow: hidden; - .col-results { - // max-height: 400px; + .aa-PanelLayoutResults { width: 50%; overflow-y: scroll; // section.aa-Source } - aside.col-preview { - //max-height: 400px; - //animation: fadeIn ease-in .2s; + .aa-PanelLayoutPreview { flex-shrink: 1; max-width: 50%; overflow: hidden; border-left: solid 1px var(--aa-selected-color); - &:empty { - //display:none; - } } } } @@ -271,7 +265,7 @@ body { } // ---------------- -// Hit Layout - smart layout +// Hit Layout // ---------------- .aa-Item { display: flex; @@ -325,18 +319,18 @@ body { color: var(--aa-text-color); cursor: pointer; padding: calc(var(--aa-spacing) / 4) 0; + mark { + color: var(--aa-text-color); + background: none; + font-style: normal; + font-weight: bold; + } .aa-ItemContentTitle { display: inline-block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; - mark { - color: var(--aa-text-color); - background: none; - font-style: normal; - font-weight: bold; - } } .aa-ItemContentSubtitle { display: inline-block; @@ -347,11 +341,6 @@ body { text-overflow: ellipsis; overflow-x: hidden; margin-top: -2px; - mark { - background: none; - font-style: normal; - font-weight: bold; - } &:empty { display: none; } @@ -457,15 +446,15 @@ body { top: 0; .aa-TouchFormContainer { display: flex; - grid-gap: 0.5rem; justify-content: space-between; } .aa-TouchCancelButton { + padding: 0; + padding-left: var(--aa-spacing-half); background: none; border: 0; color: inherit; cursor: pointer; font-size: inherit; - padding: 0; } } \ No newline at end of file From 5bc9b9450930ae417054f58c3e4977046500b966 Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 29 Jan 2021 11:23:14 +0100 Subject: [PATCH 10/21] fix(css): stalled less transparent --- packages/autocomplete-theme-classic/src/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index dd41e492d..352ac3deb 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -206,7 +206,7 @@ body { // when a query isn't resolved yet &.aa-Panel--stalled { filter: grayscale(1); - opacity: 0.5; + opacity: 0.8; transition: opacity 200ms ease-in; } } From 2211cf74d896d5a01e308d1878f827e370f24005 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Fri, 29 Jan 2021 11:29:40 +0100 Subject: [PATCH 11/21] feat(examples): add dark mode source --- examples/js/app.tsx | 32 +------ examples/js/darkMode.ts | 52 ++++++++++ examples/js/index.html | 78 ++++++++------- examples/js/package.json | 2 +- examples/js/shortcutsPlugin.tsx | 94 +++++++++++++++++++ .../src/types/AutocompletePlugin.ts | 13 +++ packages/autocomplete-js/src/types/index.ts | 1 + yarn.lock | 10 +- 8 files changed, 215 insertions(+), 67 deletions(-) create mode 100644 examples/js/darkMode.ts create mode 100644 examples/js/shortcutsPlugin.tsx create mode 100644 packages/autocomplete-js/src/types/AutocompletePlugin.ts diff --git a/examples/js/app.tsx b/examples/js/app.tsx index 06422d5fc..9ba66a339 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -14,6 +14,8 @@ import insightsClient from 'search-insights'; import '@algolia/autocomplete-theme-classic'; +import { shortcutsPlugin } from './shortcutsPlugin' + type Product = { name: string; image: string }; type ProductHit = Hit; @@ -44,6 +46,7 @@ autocomplete({ debug: true, openOnFocus: true, plugins: [ + shortcutsPlugin, algoliaInsightsPlugin, recentSearchesPlugin, querySuggestionsPlugin, @@ -107,32 +110,3 @@ function ProductItem({ hit }: ProductItemProps) { ); } - -const darkSwitch = document.getElementById("darkSwitch"); - -if (darkSwitch) { - initTheme(); - darkSwitch.addEventListener("change", () => { - resetTheme(); - }); -} - -function initTheme() { - const darkThemeSelected = - localStorage.getItem("darkSwitch") !== null && - localStorage.getItem("darkSwitch") === "dark"; - darkSwitch.checked = darkThemeSelected; - darkThemeSelected - ? document.body.setAttribute("data-theme", "dark") - : document.body.removeAttribute("data-theme"); -} - -function resetTheme() { - if (darkSwitch.checked) { - document.body.setAttribute("data-theme", "dark"); - localStorage.setItem("darkSwitch", "dark"); - } else { - document.body.removeAttribute("data-theme"); - localStorage.removeItem("darkSwitch"); - } -} diff --git a/examples/js/darkMode.ts b/examples/js/darkMode.ts new file mode 100644 index 000000000..e8f1ee9c1 --- /dev/null +++ b/examples/js/darkMode.ts @@ -0,0 +1,52 @@ +const darkModeToggle = document.querySelector('#dark-mode'); + +function initTheme() { + if (darkModeToggle) { + darkModeToggle.checked = isDarkThemeSelected(); + darkModeToggle.addEventListener('change', () => { + if (darkModeToggle.checked) { + applyDarkTheme(); + } else { + applyLightTheme(); + } + }); + } + + if (isDarkThemeSelected()) { + applyDarkTheme(); + } else { + applyLightTheme(); + } +} + +export function isDarkThemeSelected() { + return localStorage.getItem('darkMode') === 'dark'; +} + +function applyDarkTheme() { + document.body.setAttribute('data-theme', 'dark'); + localStorage.setItem('darkMode', 'dark'); + + if (darkModeToggle) { + darkModeToggle.checked = true; + } +} + +function applyLightTheme() { + document.body.removeAttribute('data-theme'); + localStorage.removeItem('darkMode'); + + if (darkModeToggle) { + darkModeToggle.checked = false; + } +} + +export function toggleTheme() { + if (isDarkThemeSelected()) { + applyLightTheme(); + } else { + applyDarkTheme(); + } +} + +initTheme(); diff --git a/examples/js/index.html b/examples/js/index.html index 281a71631..f3aed6b18 100644 --- a/examples/js/index.html +++ b/examples/js/index.html @@ -1,6 +1,5 @@ - - + @@ -8,39 +7,54 @@ Autocomplete JavaScript Playground - + - +
-
- - -
-
-
-
- -
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nisi facilis, delectus beatae necessitatibus unde eius eos ducimus praesentium. Laboriosam error debitis nostrum pariatur? Exercitationem illo hic error aut voluptate. -

- - Skateboard 1 - -

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus maxime, doloremque eligendi assumenda praesentium possimus ipsa porro quia quae harum accusantium temporibus, dignissimos beatae necessitatibus perspiciatis laborum delectus, et tenetur. -

- - Skateboard 2 - -

- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur enim voluptatum facilis culpa harum quia cum repellat, vel pariatur, ipsam, obcaecati minima exercitationem quasi vitae cupiditate illo aut odit voluptate? -

-
+
+ + +
+
+
+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nisi + facilis, delectus beatae necessitatibus unde eius eos ducimus + praesentium. Laboriosam error debitis nostrum pariatur? Exercitationem + illo hic error aut voluptate. +

+ + Skateboard 1 + +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus + maxime, doloremque eligendi assumenda praesentium possimus ipsa porro + quia quae harum accusantium temporibus, dignissimos beatae + necessitatibus perspiciatis laborum delectus, et tenetur. +

+ + Skateboard 2 + +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur + enim voluptatum facilis culpa harum quia cum repellat, vel pariatur, + ipsam, obcaecati minima exercitationem quasi vitae cupiditate illo aut + odit voluptate? +

+
+ - - - \ No newline at end of file + + diff --git a/examples/js/package.json b/examples/js/package.json index 56506a44e..66b0c87c0 100644 --- a/examples/js/package.json +++ b/examples/js/package.json @@ -18,7 +18,7 @@ "@algolia/autocomplete-theme-classic": "1.0.0-alpha.39", "@algolia/client-search": "4.8.3", "algoliasearch": "4.8.3", - "preact": "^10.5.11", + "preact": "10.5.12", "search-insights": "1.6.3" }, "devDependencies": { diff --git a/examples/js/shortcutsPlugin.tsx b/examples/js/shortcutsPlugin.tsx new file mode 100644 index 000000000..a86684725 --- /dev/null +++ b/examples/js/shortcutsPlugin.tsx @@ -0,0 +1,94 @@ +import { AutocompletePlugin } from '@algolia/autocomplete-js'; + +import { toggleTheme, isDarkThemeSelected } from './darkMode'; + +type DarkModeItem = { + label: string; +}; + +export const shortcutsPlugin: AutocompletePlugin = { + getSources({ query }) { + if (query !== '/') { + return []; + } + + return [ + { + getItems() { + return [ + { + label: 'Toggle dark mode', + }, + ]; + }, + onSelect({ setIsOpen }) { + toggleTheme(); + setIsOpen(true); + }, + templates: { + header({ createElement, Fragment }) { + return createElement( + Fragment, + {}, + createElement('span', {}, 'Shortcuts'), + createElement('div', { className: 'aa-SourceHeaderLine' }) + ); + }, + item({ item, createElement, Fragment }) { + const darkIcon = createElement( + 'svg', + { + xmlns: 'http://www.w3.org/2000/svg', + fill: 'none', + viewBox: '0 0 24 24', + stroke: 'currentColor', + }, + createElement('path', { + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeWidth: 2, + d: + 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z', + }) + ); + const lightIcon = createElement( + 'svg', + { + xmlns: 'http://www.w3.org/2000/svg', + fill: 'none', + viewBox: '0 0 24 24', + stroke: 'currentColor', + }, + createElement('path', { + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeWidth: 2, + d: + 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z', + }) + ); + + return createElement( + Fragment, + {}, + createElement( + 'div', + { className: 'aa-ItemIcon' }, + isDarkThemeSelected() ? lightIcon : darkIcon + ), + createElement( + 'div', + { className: 'aa-ItemContent' }, + createElement( + 'div', + { className: 'aa-ItemContentTitle' }, + item.label + ) + ) + ); + }, + }, + }, + ]; + }, +}; diff --git a/packages/autocomplete-js/src/types/AutocompletePlugin.ts b/packages/autocomplete-js/src/types/AutocompletePlugin.ts new file mode 100644 index 000000000..b6e836aab --- /dev/null +++ b/packages/autocomplete-js/src/types/AutocompletePlugin.ts @@ -0,0 +1,13 @@ +import { + AutocompletePlugin as AutocompleteCorePlugin, + BaseItem, +} from '@algolia/autocomplete-core'; + +import { AutocompleteOptions } from './AutocompleteOptions'; + +export type AutocompletePlugin = Omit< + AutocompleteCorePlugin, + 'getSources' +> & { + getSources: AutocompleteOptions['getSources']; +}; diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts index 66a99ea96..73fc8d0b4 100644 --- a/packages/autocomplete-js/src/types/index.ts +++ b/packages/autocomplete-js/src/types/index.ts @@ -3,6 +3,7 @@ export * from './AutocompleteClassNames'; export * from './AutocompleteCollection'; export * from './AutocompleteDom'; export * from './AutocompleteOptions'; +export * from './AutocompletePlugin'; export * from './AutocompletePropGetters'; export * from './AutocompleteRender'; export * from './AutocompleteRenderer'; diff --git a/yarn.lock b/yarn.lock index de506a25f..c591eacb0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15295,16 +15295,16 @@ posthtml@^0.13.4: posthtml-parser "^0.5.0" posthtml-render "^1.2.3" +preact@10.5.12: + version "10.5.12" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.12.tgz#6a8ee8bf40a695c505df9abebacd924e4dd37704" + integrity sha512-r6siDkuD36oszwlCkcqDJCAKBQxGoeEGytw2DGMD5A/GGdu5Tymw+N2OBXwvOLxg6d1FeY8MgMV3cc5aVQo4Cg== + preact@^10.0.0: version "10.5.7" resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.7.tgz#f1d84725539e18f7ccbea937cf3db5895661dbd3" integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg== -preact@^10.5.11: - version "10.5.11" - resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.11.tgz#2c8a431f16613e442901068175771806cf1cc0f6" - integrity sha512-BdtFePVilR1430kDuzh3VkkZktCmp8RTqHOjG8qesyGZXHNYJjdrjEBuc2f7O/vthhVENxJd0/aTjWtYeH46aw== - prebuild-install@^5.3.3: version "5.3.6" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.6.tgz#7c225568d864c71d89d07f8796042733a3f54291" From f5a75ba066d0a9b31914f42b4c5e0210527bf924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Fri, 29 Jan 2021 11:40:17 +0100 Subject: [PATCH 12/21] fix(examples): remove dark mode check box --- examples/js/darkMode.ts | 21 --------------------- examples/js/index.html | 6 ------ examples/js/shortcutsPlugin.tsx | 2 +- 3 files changed, 1 insertion(+), 28 deletions(-) diff --git a/examples/js/darkMode.ts b/examples/js/darkMode.ts index e8f1ee9c1..5c1c7a0fb 100644 --- a/examples/js/darkMode.ts +++ b/examples/js/darkMode.ts @@ -1,17 +1,4 @@ -const darkModeToggle = document.querySelector('#dark-mode'); - function initTheme() { - if (darkModeToggle) { - darkModeToggle.checked = isDarkThemeSelected(); - darkModeToggle.addEventListener('change', () => { - if (darkModeToggle.checked) { - applyDarkTheme(); - } else { - applyLightTheme(); - } - }); - } - if (isDarkThemeSelected()) { applyDarkTheme(); } else { @@ -26,19 +13,11 @@ export function isDarkThemeSelected() { function applyDarkTheme() { document.body.setAttribute('data-theme', 'dark'); localStorage.setItem('darkMode', 'dark'); - - if (darkModeToggle) { - darkModeToggle.checked = true; - } } function applyLightTheme() { document.body.removeAttribute('data-theme'); localStorage.removeItem('darkMode'); - - if (darkModeToggle) { - darkModeToggle.checked = false; - } } export function toggleTheme() { diff --git a/examples/js/index.html b/examples/js/index.html index f3aed6b18..ab029cd48 100644 --- a/examples/js/index.html +++ b/examples/js/index.html @@ -11,12 +11,6 @@
-
- - -
-
-
diff --git a/examples/js/shortcutsPlugin.tsx b/examples/js/shortcutsPlugin.tsx index a86684725..7eacbe3d6 100644 --- a/examples/js/shortcutsPlugin.tsx +++ b/examples/js/shortcutsPlugin.tsx @@ -8,7 +8,7 @@ type DarkModeItem = { export const shortcutsPlugin: AutocompletePlugin = { getSources({ query }) { - if (query !== '/') { + if (query !== '/' && query !== 'dark' && query !== 'light') { return []; } From 01ac277e859ef3baeaeae75aed66c3c26921b395 Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 29 Jan 2021 11:44:09 +0100 Subject: [PATCH 13/21] fix(css): update dark mode theme --- packages/autocomplete-theme-classic/src/theme.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 352ac3deb..49e6a724d 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -25,12 +25,12 @@ body { &[data-theme='dark'], &.dark { - --aa-primary-color: rgb(247, 247, 0); - --aa-muted-color: rgba(167, 167, 96, 0.6); - --aa-selected-color: rgba(247, 247, 0, 0.1); - --aa-icon-color: rgb(31, 207, 248); + --aa-primary-color: rgb(93, 85, 213); + --aa-muted-color: rgba(93, 85, 213, 0.6); + --aa-selected-color: rgba(93, 85, 213, 0.25); + --aa-icon-color: rgb(119, 119, 163); --aa-text-color: rgb(183, 192, 199); - --aa-background-color: rgb(21, 23, 42); + --aa-background-color: rgb(21, 24, 42); --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); } } From b92c69c23614d90506455a78027094329fd0ffba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Fri, 29 Jan 2021 13:15:56 +0100 Subject: [PATCH 14/21] chore: format files --- examples/js/app.tsx | 10 +- .../autocomplete-theme-classic/src/theme.scss | 776 +++++++++--------- 2 files changed, 396 insertions(+), 390 deletions(-) diff --git a/examples/js/app.tsx b/examples/js/app.tsx index 9ba66a339..b60fa8e50 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -14,7 +14,7 @@ import insightsClient from 'search-insights'; import '@algolia/autocomplete-theme-classic'; -import { shortcutsPlugin } from './shortcutsPlugin' +import { shortcutsPlugin } from './shortcutsPlugin'; type Product = { name: string; image: string }; type ProductHit = Hit; @@ -69,7 +69,7 @@ autocomplete({ return ( Products -
+
); }, @@ -78,7 +78,11 @@ autocomplete({ }, empty() { return ( -
No results for this query.
+
+
+ No results for this query. +
+
); }, }, diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 49e6a724d..5f9cb2ce8 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -2,37 +2,38 @@ // Variables // ---------------- :root { - --aa-base-unit: 16; - --aa-font-size: calc(var(--aa-base-unit) * 1px); - --aa-spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5 - refs in spacing.json - --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); - --aa-spacing-half: calc(var(--aa-spacing) / 2); - --aa-spacing-third: calc(var(--aa-spacing) / 3); - --aa-icon-size: 18px; - --aa-icon-stroke-width: calc((20 / var(--aa-base-unit)) * 1.6); - --aa-primary-color: rgb(62, 52, 211); - --aa-muted-color: rgba(128, 126, 163, 0.6); - --aa-selected-color: rgba(62, 52, 211, 0.1); - --aa-icon-color: rgb(119, 119, 163); - --aa-text-color: rgb(38, 38, 39); - --aa-background-color: rgb(255, 255, 255); - --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); + --aa-base-unit: 16; + --aa-font-size: calc(var(--aa-base-unit) * 1px); + --aa-spacing-factor: 1; // xs:0.6 / sm:0.8 / md:1 / lg:1.2 / xl:1.5 + --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); + --aa-spacing-half: calc(var(--aa-spacing) / 2); + --aa-icon-size: 18px; + --aa-icon-stroke-width: calc((20 / var(--aa-base-unit)) * 1.6); + --aa-primary-color: rgb(62, 52, 211); + --aa-muted-color: rgba(128, 126, 163, 0.6); + --aa-selected-color: rgba(62, 52, 211, 0.1); + --aa-icon-color: rgb(119, 119, 163); + --aa-text-color: rgb(38, 38, 39); + --aa-background-color: rgb(255, 255, 255); + --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), + 0 6px 16px -4px rgba(35, 38, 59, 0.15); } // ---------------- // Darkmode // ---------------- body { - &[data-theme='dark'], - &.dark { - --aa-primary-color: rgb(93, 85, 213); - --aa-muted-color: rgba(93, 85, 213, 0.6); - --aa-selected-color: rgba(93, 85, 213, 0.25); - --aa-icon-color: rgb(119, 119, 163); - --aa-text-color: rgb(183, 192, 199); - --aa-background-color: rgb(21, 24, 42); - --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); - } + &[data-theme='dark'], + &.dark { + --aa-primary-color: rgb(93, 85, 213); + --aa-muted-color: rgba(93, 85, 213, 0.6); + --aa-selected-color: rgba(93, 85, 213, 0.25); + --aa-icon-color: rgb(119, 119, 163); + --aa-text-color: rgb(183, 192, 199); + --aa-background-color: rgb(21, 24, 42); + --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), + 0 3px 8px 0 rgb(0, 3, 9); + } } // ---------------- @@ -40,175 +41,176 @@ body { // ---------------- .aa-Autocomplete, .aa-TouchFormContainer { - font-size: var(--aa-font-size); - text-align: left; + font-size: var(--aa-font-size); + line-height: 1em; + text-align: left; + //reset + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + // searchbox + .aa-Form { + align-items: center; + background-color: var(--aa-background-color); + border: 1px solid var(--aa-muted-color); + border-radius: 3px; + display: flex; line-height: 1em; - //reset - * { - box-sizing: border-box; - margin: 0; - padding: 0; + padding: 0 var(--aa-spacing) 0 var(--aa-spacing-half); + position: relative; + width: 100%; + &:focus-within { + border-color: var(--aa-primary-color); + box-shadow: var(--aa-selected-color) 0 0 0 3px, + inset var(--aa-selected-color) 0 0 0 2px; + outline: currentcolor none medium; + } + .aa-InputWrapperPrefix { + align-items: center; + display: flex; + flex-shrink: 0; + flex-wrap: none; + order: 1; + padding-right: var(--aa-spacing-half); + // the container for search and loading icons + .aa-Label, + .aa-LoadingIndicator { + cursor: initial; + flex-shrink: 0; + text-align: center; + width: calc(var(--aa-spacing) + var(--aa-icon-size)); + button { + appearance: none; + background: none; + border: none; + } + svg { + color: var(--aa-primary-color); + left: 2px; + position: relative; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + } + } } - // searchbox - .aa-Form { + .aa-InputWrapper { + order: 3; + position: relative; + width: 100%; + // input of the searchbox, where the placeholder and query appear + .aa-Input { + appearance: none; + background: none; + border: none; + color: var(--aa-text-color); + font: inherit; + height: calc(var(--aa-spacing) * 2.5); width: 100%; - position: relative; - display: flex; - border: 1px solid var(--aa-muted-color); - align-items: center; - padding: 0 var(--aa-spacing) 0 var(--aa-spacing-half); - line-height: 1em; - background-color: var(--aa-background-color); - border-radius: 3px; - &:focus-within { - border-color: var(--aa-primary-color); - box-shadow: var(--aa-selected-color) 0 0 0 3px, inset var(--aa-selected-color) 0 0 0 2px; - outline: currentcolor none medium; + // remove native appearence + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + -webkit-appearance: none; } - .aa-InputWrapperPrefix { - order: 1; - flex-shrink: 0; - flex-wrap: none; - display: flex; - align-items: center; - padding-right: var(--aa-spacing-half); - // the container for search and loading icons - .aa-Label, - .aa-LoadingIndicator { - cursor: initial; - flex-shrink: 0; - text-align: center; - width: calc(var(--aa-spacing) + var(--aa-icon-size)); - button { - appearance: none; - background: none; - border: none; - } - svg { - color: var(--aa-primary-color); - stroke-width: var(--aa-icon-stroke-width); - width: 20px; - position: relative; - left: 2px; - } - } + &::placeholder { + color: var(--aa-muted-color); + opacity: 1; } - .aa-InputWrapper { - position: relative; - width: 100%; - order: 3; - // input of the searchbox, where the placeholder and query appear - .aa-Input { - width: 100%; - height: calc(var(--aa-spacing) * 2.5); - appearance: none; - background: none; - border: none; - font: inherit; - color: var(--aa-text-color); - // remove native appearence - &::-webkit-search-decoration, - &::-webkit-search-cancel-button, - &::-webkit-search-results-button, - &::-webkit-search-results-decoration { - -webkit-appearance: none; - } - &::placeholder { - opacity: 1; - color: var(--aa-muted-color); - } - // remove focus effect as we moved it to parent wrapper - &:focus { - border-color: none; - box-shadow: none; - outline: none; - } - } + // remove focus effect as we moved it to parent wrapper + &:focus { + border-color: none; + box-shadow: none; + outline: none; + } + } + } + .aa-InputWrapperSuffix { + align-items: center; + display: flex; + order: 4; + // accelerator to clear the query + .aa-ResetButton { + align-items: center; + background: none; + border: 0; + color: var(--aa-muted-color); + cursor: pointer; + display: flex; + &[hidden] { + display: none; } - .aa-InputWrapperSuffix { - order: 4; - display: flex; - align-items: center; - // accelerator to clear the query - .aa-ResetButton { - display: flex; - align-items: center; - border: 0; - cursor: pointer; - background: none; - color: var(--aa-muted-color); - &[hidden] { - display: none; - } - &:hover { - color: var(--aa-text-color); - } - svg { - width: var(--aa-icon-size); - stroke-width: var(--aa-icon-stroke-width); - } - } + &:hover { + color: var(--aa-text-color); } + svg { + stroke-width: var(--aa-icon-stroke-width); + width: var(--aa-icon-size); + } + } } + } } // ---------------- // Panel // ---------------- .aa-Panel { - position: absolute; - //reset - * { - box-sizing: border-box; - margin: 0; - padding: 0; - } - button { - appearance: none; - background: none; - border: none; - } - &.aa-Panel--desktop { - .aa-PanelLayout { - //display: flex; - margin-top: var(--aa-spacing-half); - padding-top: var(--aa-spacing-half); - border-radius: 3px; - background-color: var(--aa-background-color); - box-shadow: var(--aa-panel-shadow); - text-align: left; - padding-bottom: var(--aa-spacing-half); - overflow: hidden; - .aa-PanelLayoutResults { - width: 50%; - overflow-y: scroll; - // section.aa-Source - } - .aa-PanelLayoutPreview { - flex-shrink: 1; - max-width: 50%; - overflow: hidden; - border-left: solid 1px var(--aa-selected-color); - } - } + position: absolute; + //reset + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + button { + appearance: none; + background: none; + border: none; + } + &.aa-Panel--desktop { + .aa-PanelLayout { + background-color: var(--aa-background-color); + border-radius: 3px; + box-shadow: var(--aa-panel-shadow); + //display: flex; + margin-top: var(--aa-spacing-half); + overflow: hidden; + padding-bottom: var(--aa-spacing-half); + padding-top: var(--aa-spacing-half); + text-align: left; + .aa-PanelLayoutResults { + overflow-y: scroll; + width: 50%; + // section.aa-Source + } + .aa-PanelLayoutPreview { + border-left: solid 1px var(--aa-selected-color); + flex-shrink: 1; + max-width: 50%; + overflow: hidden; + } } - &.aa-Panel--touch { - right: var(--aa-spacing-half); - left: var(--aa-spacing-half); - padding-top: var(--aa-spacing-half); - .aa-Item { - padding: 0; - } - .aa-SourceHeader { - margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; - } + } + &.aa-Panel--touch { + left: var(--aa-spacing-half); + padding-top: var(--aa-spacing-half); + right: var(--aa-spacing-half); + .aa-Item { + padding: 0; } - // when a query isn't resolved yet - &.aa-Panel--stalled { - filter: grayscale(1); - opacity: 0.8; - transition: opacity 200ms ease-in; + .aa-SourceHeader { + margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; } + } + // when a query isn't resolved yet + &.aa-Panel--stalled { + filter: grayscale(1); + opacity: 0.8; + transition: opacity 200ms ease-in; + } } // ---------------- @@ -217,244 +219,244 @@ body { // Each source can be styled independantly here // ---------------- .aa-Source { - width: 100%; - // source title - .aa-SourceHeader { - position: relative; - line-height: var(--aa-spacing); - margin: var(--aa-spacing-half) var(--aa-spacing); - // title typography - span { - color: var(--aa-primary-color); - display: inline-block; - position: relative; - z-index: 2; - padding-right: var(--aa-spacing-half); - font-size: 0.8em; - font-weight: 600; - text-transform: capitalize; - background: var(--aa-background-color); - } - // Line separator - .aa-SourceHeaderLine { - z-index: 1; - position: absolute; - display: block; - top: var(--aa-spacing-half); - left: 0; - right: 0; - height: 2px; - opacity: 0.3; - border-bottom: solid 1px var(--aa-primary-color); - } - // hide empty header - &:empty { - display: none; - } + width: 100%; + // source title + .aa-SourceHeader { + line-height: var(--aa-spacing); + margin: var(--aa-spacing-half) var(--aa-spacing); + position: relative; + // title typography + span { + background: var(--aa-background-color); + color: var(--aa-primary-color); + display: inline-block; + font-size: 0.8em; + font-weight: 600; + padding-right: var(--aa-spacing-half); + position: relative; + text-transform: capitalize; + z-index: 2; } - &:empty { - // hide empty section - display: none; + // Line separator + .aa-SourceHeaderLine { + border-bottom: solid 1px var(--aa-primary-color); + display: block; + height: 2px; + left: 0; + opacity: 0.3; + position: absolute; + right: 0; + top: var(--aa-spacing-half); + z-index: 1; } - // the list of results inside the source - ul.aa-List { - list-style: none; - margin: 0; - padding: 0; + // hide empty header + &:empty { + display: none; } + } + &:empty { + // hide empty section + display: none; + } + // the list of results inside the source + ul.aa-List { + list-style: none; + margin: 0; + padding: 0; + } } // ---------------- // Hit Layout // ---------------- .aa-Item { + align-items: center; + color: var(--aa-text-color); + cursor: pointer; + display: flex; + height: 100%; + line-height: 1.1em; + padding: 0 var(--aa-spacing-half); + // when the result is active + &[aria-selected='true'] { + background-color: var(--aa-selected-color); + .aa-ItemActionButton { + visibility: visible; + } + } + // wrap hit with url but we don't need to see it + .aa-ItemLink { + align-items: center; + color: inherit; display: flex; - padding: 0 var(--aa-spacing-half); - line-height: 1.1em; + text-decoration: none; + width: 100%; + } + // the result type icon inlined svg or img + .aa-ItemIcon { align-items: center; + border-radius: 3px; + box-shadow: inset 0 0 0 1px var(--aa-selected-color); + color: var(--aa-icon-color); + display: flex; + flex-shrink: 0; + font-size: var(--aa-icon-size); + height: calc(var(--aa-icon-size) + var(--aa-spacing)); + justify-content: center; + margin: 2px 0 2px 2px; + margin-right: var(--aa-spacing-half); + stroke-width: var(--aa-icon-stroke-width); + text-align: center; + width: calc(var(--aa-icon-size) + var(--aa-spacing)); + img, + svg { + height: var(--aa-icon-size); + width: var(--aa-icon-size); + } + } + .aa-ItemContent { color: var(--aa-text-color); - height: 100%; cursor: pointer; - // when the result is active - &[aria-selected='true'] { - background-color: var(--aa-selected-color); - .aa-ItemActionButton { - visibility: visible; - } + flex-shrink: 1; + overflow: hidden; + padding: calc(var(--aa-spacing) / 4) 0; + width: 100%; + mark { + background: none; + color: var(--aa-text-color); + font-style: normal; + font-weight: bold; } - // wrap hit with url but we don't need to see it - .aa-ItemLink { - color: inherit; - text-decoration: none; - width: 100%; - display: flex; - align-items: center; + .aa-ItemContentTitle { + display: inline-block; + max-width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - // the result type icon inlined svg or img - .aa-ItemIcon { - box-shadow: inset 0 0 0 1px var(--aa-selected-color); + .aa-ItemContentSubtitle { + color: var(--aa-muted-color); + display: inline-block; + font-size: 0.75em; + margin-top: -2px; + max-width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + &:empty { + display: none; + } + .aa-ItemContentDash { + color: var(--aa-muted-color); + display: none; + opacity: 0.4; + } + .aa-ItemContentTag { + background-color: var(--aa-selected-color); border-radius: 3px; - margin: 2px 0 2px 2px; - flex-shrink: 0; - font-size: var(--aa-icon-size); - width: calc(var(--aa-icon-size) + var(--aa-spacing)); - height: calc(var(--aa-icon-size) + var(--aa-spacing)); - stroke-width: var(--aa-icon-stroke-width); - color: var(--aa-icon-color); - margin-right: var(--aa-spacing-half); - display: flex; - align-items: center; - justify-content: center; - text-align: center; - img, - svg { - width: var(--aa-icon-size); - height: var(--aa-icon-size); - } + margin-right: 0.4em; + padding: 0.08em 0.3em; + } } - .aa-ItemContent { - flex-shrink: 1; - overflow: hidden; - width: 100%; - color: var(--aa-text-color); - cursor: pointer; - padding: calc(var(--aa-spacing) / 4) 0; - mark { - color: var(--aa-text-color); - background: none; - font-style: normal; - font-weight: bold; - } - .aa-ItemContentTitle { - display: inline-block; - max-width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow-x: hidden; - } - .aa-ItemContentSubtitle { - display: inline-block; - max-width: 100%; - white-space: nowrap; - color: var(--aa-muted-color); - font-size: 0.75em; - text-overflow: ellipsis; - overflow-x: hidden; - margin-top: -2px; - &:empty { - display: none; - } - .aa-ItemContentDash { - display: none; - opacity: 0.4; - color: var(--aa-muted-color); - } - .aa-ItemContentTag { - padding: 0.08em 0.3em; - margin-right: 0.4em; - border-radius: 3px; - background-color: var(--aa-selected-color); - } - } - &.aa-ItemContent--dual { - display: flex; - flex-direction: column; - text-align: left; - justify-content: center; - .aa-ItemContentTitle, - .aa-ItemContentSubtitle { - display: block; - } - } - .aa-ItemContentDescription { - padding: 0.3em 0; - color: var(--aa-text-color); - opacity: 0.7; - font-size: 0.85em; - text-overflow: ellipsis; - max-width: 100%; - overflow-x: hidden; - mark { - background: none; - font-style: normal; - font-weight: bold; - } - &:empty { - display: none; - } - } + &.aa-ItemContent--dual { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; + .aa-ItemContentTitle, + .aa-ItemContentSubtitle { + display: block; + } } - // secondary click action - .aa-ItemActionButton { - display: flex; - flex-shrink: 0; - visibility: hidden; - border: 0; + .aa-ItemContentDescription { + color: var(--aa-text-color); + font-size: 0.85em; + max-width: 100%; + opacity: 0.7; + overflow-x: hidden; + padding: 0.3em 0; + text-overflow: ellipsis; + mark { background: none; - cursor: pointer; - align-items: center; - color: var(--aa-muted-color); - &:hover svg { - color: var(--aa-text-color); - } - svg { - width: var(--aa-icon-size); - stroke-width: var(--aa-icon-stroke-width); - color: var(--aa-muted-color); - margin: 0 var(--aa-spacing-half); - &:hover { - color: var(--aa-text-color); - } - } + font-style: normal; + font-weight: bold; + } + &:empty { + display: none; + } + } + } + // secondary click action + .aa-ItemActionButton { + align-items: center; + background: none; + border: 0; + color: var(--aa-muted-color); + cursor: pointer; + display: flex; + flex-shrink: 0; + visibility: hidden; + &:hover svg { + color: var(--aa-text-color); + } + svg { + color: var(--aa-muted-color); + margin: 0 var(--aa-spacing-half); + stroke-width: var(--aa-icon-stroke-width); + width: var(--aa-icon-size); + &:hover { + color: var(--aa-text-color); + } } + } } //---------------- // Touch //---------------- .aa-TouchSearchButton { + align-items: center; + background-color: var(--aa-background-color); + border: 1px solid var(--aa-muted-color); + border-radius: 3px; + color: var(--aa-muted-color); + cursor: pointer; + display: flex; + font: inherit; + height: calc(var(--aa-spacing) * 2.5); + padding: 0 var(--aa-spacing-half); + position: relative; + text-align: left; + .aa-TouchSearchButtonIcon { align-items: center; - height: calc(var(--aa-spacing) * 2.5); - background-color: var(--aa-background-color); + color: var(--aa-icon-color); + cursor: initial; display: flex; - position: relative; - border: 1px solid var(--aa-muted-color); - border-radius: 3px; - font: inherit; - cursor: pointer; - padding: 0 var(--aa-spacing-half); - text-align: left; - color: var(--aa-muted-color); - .aa-TouchSearchButtonIcon { - align-items: center; - color: var(--aa-icon-color); - cursor: initial; - display: flex; - height: 100%; - margin-right: var(--aa-spacing-third); - } + height: 100%; + margin-right: var(--aa-spacing-half); + } } .aa-TouchOverlay { - backdrop-filter: blur(16px); - background: var(--aa-background-color); - bottom: 0; - left: 0; - padding: var(--aa-spacing-half); - position: fixed; - right: 0; - top: 0; - .aa-TouchFormContainer { - display: flex; - justify-content: space-between; - } - .aa-TouchCancelButton { - padding: 0; - padding-left: var(--aa-spacing-half); - background: none; - border: 0; - color: inherit; - cursor: pointer; - font-size: inherit; - } -} \ No newline at end of file + backdrop-filter: blur(16px); + background: var(--aa-background-color); + bottom: 0; + left: 0; + padding: var(--aa-spacing-half); + position: fixed; + right: 0; + top: 0; + .aa-TouchFormContainer { + display: flex; + justify-content: space-between; + } + .aa-TouchCancelButton { + background: none; + border: 0; + color: inherit; + cursor: pointer; + font-size: inherit; + padding: 0; + padding-left: var(--aa-spacing-half); + } +} From eac263cd64acc298521381eb04d9613c0b7510b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Fri, 29 Jan 2021 13:57:37 +0100 Subject: [PATCH 15/21] feat: update theme --- examples/js/app.tsx | 20 ++++++++-- examples/js/package.json | 2 +- examples/js/shortcutsPlugin.tsx | 6 ++- .../src/getTemplates.ts | 3 +- .../src/getTemplates.ts | 2 +- .../autocomplete-theme-classic/src/theme.scss | 38 +++++++++++-------- yarn.lock | 7 +--- 7 files changed, 47 insertions(+), 31 deletions(-) diff --git a/examples/js/app.tsx b/examples/js/app.tsx index b60fa8e50..8625325dd 100644 --- a/examples/js/app.tsx +++ b/examples/js/app.tsx @@ -3,6 +3,7 @@ import { autocomplete, getAlgoliaHits, highlightHit, + snippetHit, } from '@algolia/autocomplete-js'; import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights'; import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions'; @@ -61,14 +62,22 @@ autocomplete({ getItems() { return getAlgoliaHits({ searchClient, - queries: [{ indexName: 'instant_search', query }], + queries: [ + { + indexName: 'instant_search', + query, + params: { + attributesToSnippet: ['description:25'], + }, + }, + ], }); }, templates: { header() { return ( - Products + Products
); @@ -80,7 +89,7 @@ autocomplete({ return (
- No results for this query. + No products for this query.
); @@ -99,12 +108,15 @@ function ProductItem({ hit }: ProductItemProps) { return (
- {hit.name} + {hit.name}
{highlightHit({ hit, attribute: 'name' })}
+
+ {snippetHit({ hit, attribute: 'description' })} +
- {highlightHit({ hit, attribute: 'name' })} + {snippetHit({ hit, attribute: 'name' })}
{snippetHit({ hit, attribute: 'description' })}
- @@ -131,6 +135,7 @@ export function Autocomplete( ref={panelRef} className={[ 'aa-Panel', + 'aa-Panel--desktop', autocompleteState.status === 'stalled' && 'aa-Panel--stalled', ] .filter(Boolean) @@ -152,10 +157,12 @@ export function Autocomplete( className="aa-Item" {...autocomplete.getItemProps({ item, source })} > +
+ +
-