fix(page-icons): tabs & titles

yoyurec · Mar 10, 2023 · 26b6bf5 · 26b6bf5
1 parent 8fc7735
commit 26b6bf5
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 38 deletions.
diff --git a/src/modules/pageIcons/pageIcons.css b/src/modules/pageIcons/pageIcons.css
@@ -20,10 +20,13 @@
 }
 .title .awLi-icon {
     top: 0;
-    width: 1em;
-    height: 1.2em;
+    width: 1.3em;
+    height: 1.3em;
     line-height: inherit;
 }
+.title .awLi-icon[data-is-emoji="true"] {
+    line-height: 1.7em;
+}
 .awLi-hideTitle .awLi-icon {
     margin-right: 0;
 }

diff --git a/src/modules/pageIcons/pageIcons.ts b/src/modules/pageIcons/pageIcons.ts
@@ -1,11 +1,11 @@
 import fastdom from 'fastdom'
 
 import { body, doc, globals, propsObject, root } from '../globals';
-// import { stopLinksObserver, stopTabsObserver } from '../linksObserver/linksObserver';
-import { settingsTextToPropsObj, isNeedLowContrastFix, isEmoji } from '../utils';
+import { settingsTextToPropsObj, isNeedLowContrastFix, isEmoji, injectPluginCSS, ejectPluginCSS } from '../utils';
 import { getPropsByPageName } from './queries';
 
 import pageIconsStyles from  './pageIcons.css?inline';
+import tabsIframeStyles from  './tabsIframe.css?inline';
 
 let tabsPluginIframe: HTMLIFrameElement;
 
@@ -56,9 +56,6 @@ export const pageIconsUnload = () => {
     removePageIcons();
     removeTabIcons();
     removeTabsCSS();
-    // if (!globalContext.pluginConfig.pageIconsEnabled) {
-    //     stopTabsObserver();
-    // }
 }
 
 export const setPageIcons = async (context?: Document | HTMLElement) => {
@@ -220,37 +217,10 @@ const removeStyleFromLinkList = (linkList: Element[]) => {
 }
 
 const setTabsCSS = () => {
-    if (!tabsPluginIframe) {
-        return;
-    }
-    tabsPluginIframe.contentDocument?.head.insertAdjacentHTML(
-        'beforeend',
-        `<style id="awLi-tab-css">
-            .logseq-tab-title {
-                color: var(--awLi-color) !important;
-            }
-            .awLi-icon {
-                display: inline-block;
-                margin-right: 4px;
-                text-align: center;
-                width: 1.2em;
-            }
-            .light .awLi-stroke {
-                -webkit-text-stroke: 0.3px #00000088;
-            }
-            .dark .awLi-stroke {
-                -webkit-text-stroke: 0.3px #ffffff88;
-            }
-            .logseq-tab .text-xs {
-                display: none;
-            }
-        </style>`
-    );
+    injectPluginCSS('logseq-tabs_iframe', 'awLi-tabs-styles', tabsIframeStyles);
+
 }
 
 const removeTabsCSS = () => {
-    if (!tabsPluginIframe) {
-        return;
-    }
-    tabsPluginIframe.contentDocument?.getElementById('awLi-tab-css')?.remove();
+    ejectPluginCSS('logseq-tabs_iframe', 'awLi-tabs-styles');
 }
diff --git a/src/modules/pageIcons/tabsIframe.css b/src/modules/pageIcons/tabsIframe.css
@@ -0,0 +1,28 @@
+.logseq-tab-title {
+    color: var(--awLi-color) !important;
+}
+.awLi-icon {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    margin-right: 4px;
+    width: 16px;
+    height: 16px;
+    text-align: center;
+    font-size: 1.1em;
+    line-height: 1.26em;
+    font-weight: 400;
+}
+.awLi-icon[data-is-emoji="true"] {
+    top: 0;
+    font-size: 0.9em !important;
+}
+.light .awLi-stroke {
+    -webkit-text-stroke: 0.3px #00000088;
+}
+.dark .awLi-stroke {
+    -webkit-text-stroke: 0.3px #ffffff88;
+}
+.logseq-tab .text-xs {
+    display: none;
+}
diff --git a/src/modules/utils.ts b/src/modules/utils.ts
@@ -1,6 +1,6 @@
 //@ts-ignore
 import { hasBadContrast } from 'color2k';
-import { globals, propsObject } from './globals';
+import { doc, globals, propsObject } from './globals';
 
 export const objectDiff = (orig: object, updated: object) => {
     const difference = Object.keys(orig).filter((key) => {
@@ -81,3 +81,25 @@ export const isEmoji = (text: string): boolean => {
     const regex_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
     return regex_emoji.test(text);
 }
+
+export const injectPluginCSS = (iframeId: string, label: string, cssContent: string) => {
+    const pluginIframe = doc.getElementById(iframeId) as HTMLIFrameElement;
+    if (!pluginIframe) {
+        return
+    }
+    ejectPluginCSS(iframeId, label);
+    pluginIframe.contentDocument?.head.insertAdjacentHTML(
+        'beforeend',
+        `<style id='${label}'>
+            ${cssContent}
+        </style>`
+    );
+}
+
+export const ejectPluginCSS = (iframeId: string, label: string) => {
+    const pluginIframe = doc.getElementById(iframeId) as HTMLIFrameElement;
+    if (!pluginIframe) {
+        return;
+    }
+    pluginIframe.contentDocument?.getElementById(label)?.remove();
+}