feat(popup): add close button

yoyurec · yoyurec · commit f517f308c29d · 2023-03-05T20:53:45.000+02:00
diff --git a/README.md b/README.md
@@ -39,6 +39,12 @@ Use `/` menu when editing block content for search & insert
 
 OR use hotkey `ctrl+shift+t` (`mod+shift+t`) 😎
 
+## Icon in content
+
+In addition to use icon codes with other plugins you can insert and view it inline in your content, just like emojis!
+
+![](https://github.com//yoyurec/logseq-tabler-picker/raw/main/screenshots/inline-icons.mp4)
+
 ## What is Logseq?
 Logseq is a privacy-first, open-source knowledge base. Visit https://logseq.com for more information.
 
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
     <body>
         <div id="app">
             <div id="app-inner">
+                <span id="app-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke="none" d="M0 0h24v24H0z"/><path d="M18 6 6 18M6 6l12 12"/></svg></span>
                 <div id="icon-picker">
                     <input id="icon-picker-search" type="text" placeholder="Search Tabler icon">
                     <select id="icon-picker-category"><option value="">All</option><option value="Animals">Animals</option><option value="Arrows">Arrows</option><option value="Brand">Brand</option><option value="Buildings">Buildings</option><option value="Charts">Charts</option><option value="Communication">Communication</option><option value="Currencies">Currencies</option><option value="Database">Database</option><option value="Design">Design</option><option value="Devices">Devices</option><option value="Document">Document</option><option value="E-commerce">E-commerce</option><option value="Electrical">Electrical</option><option value="Extensions">Extensions</option><option value="Food">Food</option><option value="Gender">Gender</option><option value="Gestures">Gestures</option><option value="Health">Health</option><option value="Laundry">Laundry</option><option value="Letters">Letters</option><option value="Logic">Logic</option><option value="Map">Map</option><option value="Math">Math</option><option value="Media">Media</option><option value="Mood">Mood</option><option value="Nature">Nature</option><option value="Numbers">Numbers</option><option value="Photography">Photography</option><option value="Shapes">Shapes</option><option value="Sport">Sport</option><option value="Symbols">Symbols</option><option value="System">System</option><option value="Text">Text</option><option value="Vehicles">Vehicles</option><option value="Version control">Version control</option><option value="Weather">Weather</option><option value="Zodiac">Zodiac</option></select>
diff --git a/public/css/tablerPickerInternal.css b/public/css/tablerPickerInternal.css
@@ -26,9 +26,24 @@ html, body {
 #app-inner {
     position: absolute;
     padding: 8px 0;
-    background-color: var(--ls-a-chosen-bg);
+    background-color: var(--ls-primary-background-color);
     border: 1px solid var(--ls-border-color);
     border-radius: 6px;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+}
+
+#app-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    padding: 2px;
+    opacity: 0.8;
+    transition: 0.1s;
+    cursor: pointer;
+}
+#app-close:hover {
+    transform: scale(1.3);
+    opacity: 1;
 }
 
 #icon-picker {
@@ -39,17 +54,17 @@ html, body {
 #icon-picker-category {
     width: 210px;
     height: 30px;
-    margin: 0 0 8px 3px;
+    margin: 2px 0 10px 2px;
     padding: 0 8px;
     font-family: var(--font-os-system);
     font-size: 14px;
     border: 1px solid var(--ls-border-color);
     border-radius: 4px;
-    background-color: var(--ls-primary-background-color);
+    background-color: var(--ls-a-chosen-bg);
 }
 
 #icon-picker-category {
-    width: 180px;
+    width: 150px;
 }
 
 #icon-picker-category option {
diff --git a/screenshots/inline-icons.mp4 b/screenshots/inline-icons.mp4
diff --git a/src/plugin/pluginPopup.ts b/src/plugin/pluginPopup.ts
@@ -14,6 +14,7 @@ type iconItem = {
 }
 
 const app = document.getElementById('app');
+const appClose = document.getElementById('app-close');
 const appInner = document.getElementById('app-inner');
 const iconPickerList = document.getElementById('icon-picker-list');
 const searchField = document.getElementById('icon-picker-search') as HTMLInputElement;
@@ -35,6 +36,7 @@ export const initPluginPopup = () => {
     );
 
     app!.addEventListener('click', containerClickHandler);
+    appClose!.addEventListener('click', appCloseClickHandler);
     iconPickerList!.addEventListener('click', iconPickerListClickHandler);
     searchField!.addEventListener('keyup', iconPickerSearchHandler);
     searchCategory!.addEventListener('change', iconPickerCategoryHandler);
@@ -112,6 +114,10 @@ const containerClickHandler = (e: Event) => {
     }
 }
 
+const appCloseClickHandler = () => {
+    closePluginPopup();
+}
+
 const getExistingIconsList = () => {
     return tablerIconsListJSON.filter(item => logseqIconsListJSON.includes(item.u));
 }
@@ -143,6 +149,7 @@ const iconPickerSearchHandler = debounce((e: KeyboardEvent) => {
     const target = e.target as HTMLInputElement;
     const searchText = target.value.toLowerCase();
     filterListByText(searchText);
+    iconPickerList!.parentElement!.scrollTop = 0;
     updateIconPickerList();
 }, 300);
 
@@ -166,6 +173,7 @@ const iconPickerCategoryHandler = (e: Event) => {
     }
     const searchText = searchField.value.toLowerCase();
     filterListByText(searchText);
+    iconPickerList!.parentElement!.scrollTop = 0;
     updateIconPickerList();
 }
 

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ type iconItem = {`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`const app = document.getElementById('app');`
	`17`	`+const appClose = document.getElementById('app-close');`
`17`	`18`	`const appInner = document.getElementById('app-inner');`
`18`	`19`	`const iconPickerList = document.getElementById('icon-picker-list');`
`19`	`20`	`const searchField = document.getElementById('icon-picker-search') as HTMLInputElement;`
`@@ -35,6 +36,7 @@ export const initPluginPopup = () => {`
`35`	`36`	`);`
`36`	`37`
`37`	`38`	`app!.addEventListener('click', containerClickHandler);`
	`39`	`+ appClose!.addEventListener('click', appCloseClickHandler);`
`38`	`40`	`iconPickerList!.addEventListener('click', iconPickerListClickHandler);`
`39`	`41`	`searchField!.addEventListener('keyup', iconPickerSearchHandler);`
`40`	`42`	`searchCategory!.addEventListener('change', iconPickerCategoryHandler);`
`@@ -112,6 +114,10 @@ const containerClickHandler = (e: Event) => {`
`112`	`114`	`}`
`113`	`115`	`}`
`114`	`116`
	`117`	`+const appCloseClickHandler = () => {`
	`118`	`+ closePluginPopup();`
	`119`	`+}`
	`120`	`+`
`115`	`121`	`const getExistingIconsList = () => {`
`116`	`122`	`return tablerIconsListJSON.filter(item => logseqIconsListJSON.includes(item.u));`
`117`	`123`	`}`
`@@ -143,6 +149,7 @@ const iconPickerSearchHandler = debounce((e: KeyboardEvent) => {`
`143`	`149`	`const target = e.target as HTMLInputElement;`
`144`	`150`	`const searchText = target.value.toLowerCase();`
`145`	`151`	`filterListByText(searchText);`
	`152`	`+ iconPickerList!.parentElement!.scrollTop = 0;`
`146`	`153`	`updateIconPickerList();`
`147`	`154`	`}, 300);`
`148`	`155`
`@@ -166,6 +173,7 @@ const iconPickerCategoryHandler = (e: Event) => {`
`166`	`173`	`}`
`167`	`174`	`const searchText = searchField.value.toLowerCase();`
`168`	`175`	`filterListByText(searchText);`
	`176`	`+ iconPickerList!.parentElement!.scrollTop = 0;`
`169`	`177`	`updateIconPickerList();`
`170`	`178`	`}`
`171`	`179`